Install | Tealium for AMP |Tealium Developer Docs

Requirements

Tealium Universal Data Hub account

How It Works

This solution uses the amp-analytics element to implement user activity tracking with Tealium Collect. This JSON configuration object sets up basic page view tracking and a simple example of click tracking. You may adjust these as necessary.

The “triggers” section defines the types of events to track. The “defaultPageview” section will trigger on page views and the “links” section will trigger on clicks of page elements coded with the “tealium” class. Adjust this as necessary for your AMP site.

Data parameters with a name prefix of dom. passed in the query string of the collection endpoint will not be accessible as event attributes in EventStream.

Tealium Collect JSON for AMP (amp-analytics)

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
 
<!-- Begin Tealium Collect tracking -->
<amp-analytics id="tealium_collect">
<script type="application/json">
{
    "vars": {
        "account": "##TEALIUM_ACCOUNT##",
        "profile": "##TEALIUM_PROFILE##",
        "datasource": "##TEALIUM_DATASOURCE##",
        // optional
       "visitor_id": "CLIENT_ID(AMP_ECID_GOOGLE)"
    },
    "extraUrlParams": {
        "page_name": "home",
        "page_topic" : "news",
        "page_platform": "amp"
    },
    "transport": {
        "beacon": false,
        "xhrpost": false,
        "image": true
    },
    "requests": {
        "base_url" : "//collect.tealiumiq.com/vdata/i.gif",
        "base" : "${base_url}?${tealium}&${dom1}&${dom2}&${datetime}&tealium_event=${tealium_event}&tealium_event_type=${tealium_event_type}",
        "tealium": "tealium_account=${account}&tealium_profile=${profile}&tealium_vid=${visitor_id}",
        "dom1": "url=${sourceUrl}&domain=${sourceHost}&pathname=${sourcePath}&title=${title}",
        "dom2": "viewport_width=${viewportWidth}&viewport_height=${viewportHeight}",
        "datetime": "timestamp=${timestamp}&tz=${timezone}&lang=${browserLanguage}",
        "pageview": "${base}&referrer=${documentReferrer}&screen_size=${screenWidth}x${screenHeight}",
        "event": "${base}&scroll_y=${scrollTop}&scroll_x=${scrollLeft}"
    },
    "triggers": {
        "defaultPageview": {
            "on": "visible",
            "request": "pageview",
            "vars": {
                "tealium_event": "screen_view"
            }
        },
        "links": {
            "on": "click",
            "selector": ".tealium",
            "request": "event",
            "vars": {
                 "tealium_event": "custom_click"
            }
        }
    }
}
</script>
</amp-analytics>
<!-- End Tealium Collect tracking -->