googleanalytics-amphtml-amp-pixel

Using Google Analytics with AMP HTML

Because the use of external JavaScripts is no longer possible with AMP HTML, Google Analytics tracking will therefore also be no longer possible with the current method. Obviously, Google has thought about this and found an alternative. Users will be tracked by pixels, these pixels will send the information to Google Analytics tracking servers.

People have been familiar with any types of tablets and smartphones. Today, we can even take advantage of those items to access information in a simpler and more revolutionized way. People use their smartphones and mobile phones to read the news daily without any limit – research indicates news is the most consumed type of content by far. Therefore, publishers might take advantage of this fact to reach more readers by using mobile news features. The expectation isn’t as good as the reality. We often face troubles like pretty long page loading times.  Today you are losing potential readers and customers, which impacts your revenue either through subscriptions or advertising.

Never Lose Visitors with AMP

If the page doesn’t load well, the advertisers may get troubles to display advertisements quick enough and allowing customers to see those ads actually. People will abandon unfriendly or slow websites, in general. Websites aren’t the exception. Knowing this issue, Google has developed a new version of HTML called Accelerated Mobile Pages. Developers call it as AMP HTML. Technology companies and publishers can really take advantage of this open source system. It has the prime function to increase the mobile web performance in a significant way, by also restricting external javascript usages. This helps web pages with heavy content like graphics, animations, and video to load well alongside advertisements on static news sites on mobile devices. By this, the visitors don’t need to wait too long for the page loading and publishers will still be able to track their website usage via Google analytics via a bypass.

Although scripts for analysis purposes (including Google Analytics) often provide the greatest delay in the loading of websites. Many websites use multiple tracking systems that each have to load their own code. In most cases, this code that comes from other external servers adding additional latency to each request. With AMP all these scripts will not be loaded. Other javascripts like jQuery will also not be loaded. Instead, two scripts are downloaded via ampproject.org CDN and some fonts directly from the Google CDN server.

AMP-PIXEL

The amp-pixel component is part of the core AMP components library, and doesn’t require an additional AMP-style script import in the document head. Setting up the tracking pixel is pretty straightforward: at the bottom of your document, before the closing </body>tag, add an <amp-pixel> element. The <amp-pixel> element has a single attribute, src, where you can set the location and values of the hit you’d like to send. We’ll use Google Analytics for our example. It will ultimately look something like this:

<amp-pixel src="https://www.google-analytics.com/collect?v=1&t=pageview&z=$RANDOM&dt=$TITLE&dl=$CANONICAL_URL&tid=UA-123456-YY&cid=$CLIENT_ID('google-analytics')" />

So with AMP HTML, you can continue to use Google Analytics and other analytics software as Adobe Analytics. If you are using another web analytics tools, we wouldn’t know know why, but you can check in that case this link to verify if your analytics software is compatible with AMP HTML yet. The supported software library is continually updated according to Google. For an example of such 3rd party components such as YouTube or Tweets can also be found on Github.

The purpose of AMP HTML is to make all websites to create more lightweight and simple pages for static news consumption. This may give the sense of faster and swift display for the users. These days, there have been many web pages that have integrated the same system. Google News also has included it in their system. More publishers are taking part in the AMP project over time.

Published by AMP Coder

Support engineer and developer at AMPtemplates.com. From HTML Code to Template to Customer.

Leave a Reply

Your email address will not be published. Required fields are marked *