Google AMP HTML and Tealium

Google AMP HTML defines a new standard for simple analytics tracking in a web browser.  Tealium Collect REST API data collection conforms to this new standard as it follows the traditional key/value pattern for typical web beacons.  The following is an example JSON data structure you can use in Google AMP pages to send data to Tealium Collect and leverage Tealium’s cloud-based event delivery.  Once enabled, use AudienceStream to send your AMP page data and events to additional vendors in real time.

But before showcasing the JSON let’s have a bit of history.  Web pages with lots of synchronous code (i.e.  tracking beacons such as Google AdWords Conversion) can slow down your user’s experience.  This is because these synchronous code snippets halt the browser from rendering the page until a vendor has downloaded their code and completed their tracking.  Many ad vendors and analytics vendors (i.e. Google Analytics) have moved towards an asynchronous code snippet to resolve this issue.

Web visitors arrive on your site expecting content to display quickly.  Simply by using Tealium, you are setting your visitors up for the best experience on your site.  On any web page, Tealium improves the time to display page content by prioritizing page display before analytics tracking tags.  Tealium, an asynchronous solution (and the fastest TMS in the business), sets all tags to default wait for the document’s readyState to be “interactive” (or “complete” if needed) before running your pixels. Google attempts to do the same by removing your ability to write JavaScript.  Google AMP HTML prevents synchronous code by preventing JavaScript.  This removes any chance of synchronous code in the browser by removing any chance of JavaScript in the page.  The Google team does allow their own Google-hosted JavaScript to run, but they do this by limiting your HTML to JSON data structures that will invoke their code.

If you’re in the media business and considering Google AMP, you know all this already. 🙂

The following is an example of a JSON data structure to run Tealium Collect data collection in an AMP HTML page.  This JSON specifies the format of the tracking request of key/value pairs typical in a tracking beacon.

NOTE: By using the selector in the example above of “.tealium,” any item in your page with class=“tealium” will be tracked as an event when clicked.

Advantages of using Tealium Collect tracking in Google AMP HTML pages:

1. One pixel in the HTML page allows for multiple cloud-based delivery of additional pixels
2. Ability to send as much event data possible (a free-form data layer by design with no limit to the number or name of custom attributes)
3. Simplified name/value data collection means odds are very good you’ll be able to get the implementation right the first time
4. Automatically integrates with Tealium AudienceStream, Tealium DataAccess and related services

One final note, AMP does provide the option of running your TMS JavaScript (i.e. utag.js) inside an iframe as documented here.

Tracking/Analytics iframes

…

AMP only allows a single iframe, that is used for analytics and tracking purposes, per page. To conserve resources these iframes will be removed from the DOM 5 seconds after they loaded, which should be sufficient time to complete whatever work is needed to be done.

You can add an iframe on your page which will run Tealium (JavaScript) in the browser.  This requires https and a few other settings.  An example iframe with data layer below.

Inside this tealium.html iframe page source, you would then include the utag.js code snippet found in the Tealium iQ Code Center.

References:

• https://blogs.adobe.com/digitalmarketing/mobile/adobe-analytics-for-the-accelerated-mobile-pages-project/

• https://github.com/ampproject/amphtml/blob/master/examples/analytics.amp.html