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.
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:
- One pixel in the HTML page allows for multiple cloud-based delivery of additional pixels
- 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)
- Simplified name/value data collection means odds are very good you’ll be able to get the implementation right the first time
- Automatically integrates with Tealium AudienceStream, Tealium DataAccess and related services
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.
Inside this tealium.html iframe page source, you would then include the utag.js code snippet found in the Tealium iQ Code Center.