Back

This article describes how to set up Tealium Collect in Google Tag Manager (GTM). This solution includes converting the GTM data layer to a format that Tealium Collect can use and ensuring that GTM events are tracked.

In this article:

Table of Contents Placeholder

How It Works

Tealium Collect requires two components to be implemented:

  • The JavaScript library utag.js
  • The data layer object utag_data.

To track events, you will add configuration in GTM to convert the event data into a format expected by utag.js. With those components in place, you will then add the necessary attributes in the Universal Data Hub (UDH) to make use of the data. With Tealium Collect in place, you will have access to the enriched visitor data coming from the UDH, which can then be used as variables within GTM.

Workflow:

  • Add the utag.js code snippet and data layer conversion code in GTM.
  • Add event tracking code to GTM.
  • Declare GTM variables for enriched visitor data from UDH.
  • Configure tracked attributes in UDH.

Adding utag.js to GTM

The Tealium JavaScript library, utag.js, must be loaded on every page. The Tealium data layer is a JavaScript object called utag_data. The GTM data layer uses a different format from the Tealium data layer and therefore must be converted using the custom code provided below. This data layer code and the code to load utag.js are combined into a single tag within the GTM configuration.

Use the following steps to&add utag.js and the data layer conversion code to GTM:

  1. From your GTM Workspace, click Add a New Tag.
  2. Name the tag Tealium Collect.
  3. Click Tag Configuration and select Custom HTML.
  4. Copy and paste the following code into the HTML window:
    <script type="text/javascript">
    var dl={};
    (function(a){
        function b(){
            for (var a=0, b=arguments; a < b.length; a++){
                if (!b[a].event || (b[a].event && b[a].event.indexOf("gtm.")===-1)) {
                    for (i in b[a]) {
                        dl[i]=b[a][i];
                    }
                }
            }
        }
        var c=a.push;
        a.push=function(){
            b.apply(this,arguments);
            c.apply(a,arguments);
        };
        b.apply(a,a);
    })
    (window.dataLayer || []);
    
    utag_data=dl;
    </script>
    <script type="text/javascript">
      (function(a,b,c,d){
      a='https://tags.tiqcdn.com/utag/ACCOUNT/PROFILE/prod/utag.js';
      b=document;c='script';d=b.createElement(c);d.src=a;d.type='text/java'+c;d.async=true;
      a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);
      })();
    </script>
    
  5. Replace the ACCOUNT and PROFILE variables with your Tealium iQ account and profile.
  6. Click Triggering and select All Pages.
  7. Click Save.

GTM implementations that load the dataLayer after the GTM script call or that do not make calls to dataLayer.push will limit the information that is available to the Tealium tag.

Adding Tealium Event Tracking to GTM

Events tracked by GTM should also be passed to Tealium Collect.

  • GTM events are triggered by calling dataLayer.push().
  • Tealium events are triggered by calling utag.link().

The code to convert the GTM calls to the corresponding Tealium call is placed in a custom HTML tag within GTM. If you are using any automatic triggers types, such as "Just Links" or "All Elements", this code will translate those into an appropriate tracking call to Tealium.

Use the following steps to track GTM events as Tealium events:

  1. From your GTM Workspace, click Add a New Tag.
  2. Name the tag Tealium Events.
  3. Click Tag Configuration and select Custom HTML.
  4. Copy and paste the following code into the HTML window:
    <script type="text/javascript">
    var dl={};
    (function(a){
       function b(){
           for (var a=0, b=arguments; a<b.length; a++){
               if (!b[a].event || (b[a].event && b[a].event.indexOf("gtm.js")===-1 && b[a].event.indexOf("gtm.dom")===-1 && b[a].event.indexOf("gtm.load")===-1)) {
                   for (i in b[a]) {
                       dl[i]=b[a][i];
                   }
               }
           }
       }
       var c=a.push;
       a.push=function(){
           b.apply(this,arguments);
           c.apply(a,arguments);
       };
       b.apply(a,a);
       utag.link(dl);
    })
    (window.dataLayer || []);
    </script>
    
  5. Create a trigger for All Custom Events and apply it to the tag.
    GTM Interface_Custom Events.jpg
  6. Click Save.

Using Visitor Attributes in GTM

Data Layer Enrichment sends visitor attributes from AudienceStream and places them back into your data layer object. Most visitor enrichment data is available within localStorage. Each visitor attribute you want to use in GTM must be declared as a custom variable.

In the example used in this section, the "Fan" badge attribute (that has an ID of "30" in AudienceStream) is mapped to Google Analytics Custom Dimension 4.

Create a Custom Variable

Use the following steps to set a GTM variable with a visitor enrichment value:

  1. From your GTM Workspace, click Variables in the sidebar.
  2. In the User-Defined Variables section, click New.
  3. Name the variable Badge - Fan.
  4. Click Variable Configuration and select Custom Javascript.
  5. In the Custom JavaScript panel, paste the following code:
    function() {
       a = localStorage.getItem(["tealium_va"]);
       b = JSON.parse(a);
       return b.badges["30"]?b.badges["30"]:"0";
    }
    

    Attribute ID's vary in each account. Work with your account manager to obtain a list of your attribute IDs and names.

  6. Click Save.

Map AudienceStream Attributes to GUA Dimensions

Use the following steps to map AudienceStream attributes to GUA dimensions:

  1. From your GTM Workspace, click Tags in the sidebar.
  2. Select your "Universal Analytics" tag.
  3. Select More Settings > Custom Dimensions.
  4. Click + Add Custom Dimension and set the following:
    • Index: 4
    • Dimension Value: {{Badge - Fan}}
  5. Click Save.

Configure Tealium

You must configure both TiQ and EventStream. The Tealium Collect tag will be added to TiQ and the event attributes will be defined in EventStream.

iQ Tag Management

See Adding Tealium Collect Tag for iQ.

EventStream

The following event attributes are needed:

  • event
  • gtm.element
  • gtm.elementClasses
  • gtm.elementId
  • gtm.elementTarget
  • gtm.elementUrl
  • gtm.triggers

See Managing Attributes.