Using Tealium-hosted JSON for Google AMP Event Tracking

Tealium Options with AMP HTML

Tealium provides multiple options for sending data to your tag vendors in Google AMP HTML pages. Tealium iQ Tag Management can run inside an “amp-iframe” component or you can send data directly to Tealium’s HTTP API with the “amp-analytics” definition. From there, using Tealium EventStream, you can send the event data along to your vendors server-side. Both options have pros and cons that require you to think in advance about visitors across domains and how to implement web analytics reporting. Tealium provides both options: robust in browser Tag Management and server-side data orchestration.

Event Tracking Definitions

Regardless of which tracking method you choose, there is still the (often more difficult) part of capturing the events and event attributes that happen on your AMP HTML page. For example, if the page is a blog page, it might require some scrolling to see all the content. In that case, one would need to define a scroll-tracking event. A multi-page article would have a ‘next’ button that would be interesting for tracking clicks. As is common with analytics tracking, the first implementation may collect only some of the data and a second round would be improved to acquire even more. This means you need the same features that Tag Management solves on traditional web pages with Google AMP HTML pages. Tealium provides a hosted solution for an Analytics Implementation Engineer to enhance your data collection without requiring changes to the HTML source.

Hosting Your JSON

Google AMP HTML definition allows for hosting JSON on a third party domain provided that it behaves correctly for Cross-Origin Resource Sharing (CORS). Tealium provides the ability to deliver JSON in a way that conforms to these requirements with Tealium’s Hosted Data Layer (HDL) service. That means you can deliver custom event definitions in JSON that Google AMP HTML can leverage. The JSON event definitions do not need to be embedded in the page source which allows for faster iterations (improvements). Moving this JSON off of the HTML page source to an externally-hosted file also improves page render performance.

A JSON definition for analytics click tracking would look as follows:

{
    "vars": {
        "account": "...",
        "profile": "..."
    },
    "triggers": {
        "trackClickOnHeader": {
            "on": "click",
            "selector": "#header",
            "request": "event",
            "vars": {
                "eventCategory": "ui-components",
                "eventAction": "header-click"
            }
        }
    }
}

The above is instead included in an external JSON file that AMP HTML uses:

<amp-analytics type="tealiumcollect" id="tealiumcollect" config="https://tags.tiqcdn.com/dle/{ACCOUNT}/{PROFILE}/{FILE}.json" />

This example shows “tealiumcollect” for AMP Analytics. Tealium’s CDNs can host JSON for use with any vendor in the AMP marketplace.

Tealium’s Hosted Data Layer Features

(1) Build any number of JSON files (one for each page, each page type, or for each AMP Analytics vendor)

(2) Host and deliver your JSON from Tealium’s CDN for any purpose (in this case for Google AMP HTML)

(3) Quickly update your JSON using the Hosted Data Layer API (note the “file-type=json” feature)

More details found here:

• Getting Started with Tealium’s Hosted Data Layer
• Tealium’s Hosted Data Layer API
• Google’s AMP Analytics Deep Dive