Tealium for AMP

Tealium for AMP

by on ‎04-26-2016 11:41 AM - edited on ‎06-13-2018 08:22 AM by Community Manager (4,551 Views)

This article describes the Tealium Collect integration for AMP websites and applications using the amp-analytics element.

In this article:

Table of Contents Placeholder

Requirements

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.

Read more about amp-analytics.

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 -->