Prerequisites for GTM integration

You can use Google Tag Manager to add Acoustic Personalization tags to your Single-Page Application (SPA) or Multi-Page Application (MPA).

Assumptions

Before proceeding with Google Tag Manager (GTM) integration with Acoustic Personalization, ensure that the following prerequisites and assumptions are fulfilled.
  1. This topic covers Google Tag Manager implementation for Single-Page Applications (SPA) or Multi-Page Applications (MPA).
  2. GTM tags are used with Google Analytics – Universal Analytics.
  3. You must have a GTM account configured with a Google Analytics container.
  4. The Google Analytics settings variable should be created as a User-defined variable. In this topic, the Google Analytics setting variable is named as GA-Id. Also, enable the Ecommerce option for this variable by selecting the Enable Enhanced Ecommerce features and Use data layer check boxes.
  5. The event actions in the tags must use the standard Google nomenclature.

Creating a Page View tag

It is required to have a Page View tag for each page in your website. If you do not have this tag, create it with the details as below:
  • Tag Type: Google Analytics – Universal Analytics
  • Track Type: Page View
  • Google Analytics Settings > Select Settings Variable: Select the Google Analytics Settings variable (in this case, GA-Id that you created as a prerequisite (step 4 in Assumptions).
  • Tag Firing Options: Once per page
  • Triggering > Firing options: All Pages

Adding GTM tracking code to your SPA or MPA

  • In your Single-Page Application, add the following tracking code at the beginning of HEAD tag of the index.html page.
  • In your Multi-Page Application, add the following tracking code at the beginning of HEAD tag of each HTML page.
This code enables Google Tag Manager on your website. In the code snippet, replace GTM_ID with your own Google Tag Manager tracking ID. If you have GTM already configured on your website, this code will already be present in the HEAD tag. 

<script>
 (function (w, d, s, l, i) 
  {
    w[l] = w[l] || []; w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'}); 
    var f = d.getElementsByTagName(s)[0],
    j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
   })(window, document, 'script', 'dataLayer', 'GTM_ID');
</script>

Creating custom variables in Google Tag Manager

Create the following custom variables in Google Tag Manager.
  1. Create a user-defined variable gtmDimensionVariable in Google Tag Manager as shown below.
    • Variable Type: Data Layer Variable
    • Data Layer Variable Name: dimension1
    • Data Layer Version: Version 2
  2. Next, create another custom variable named SendHitTaskOverrideVariable of type Custom JavaScript.
  3. Add the following code snippet to this custom variable.
    Note:
    • Note that the snippet uses gaClientID as an example. You must decide the identifier and use the same.
    • Update the identifiers mapper array according to the UBX unique identifier types
    
 function() 
{
  return function(model)
 {
  var globalSendTaskName = '_' + model.get('trackingId') + '_sendHitTask';
  var clientId = model.get('clientId');
  var identifiersMapperArray = [];
  identifiersMapperArray.push({ "name": "gaClientId", "value": clientId });
  var originalSendHitTask = window[globalSendTaskName] = window[globalSendTaskName] || model.get('sendHitTask');
  model.set('sendHitTask', function(sendModel) 
   {
    originalSendHitTask(sendModel);
    var payLoad = sendModel.get('hitPayload');
    var hitType = model.get("hitType");
    //var searchKeyword ; this must be declared globally on the website, and holds value of the search term 
    if (hitType=="pageview" && typeof searchKeyword !== 'undefined' &&  searchKeyword !== null)     
                {
                        var result = {};
                        payLoad.split("&").forEach(function (part) 
                        {
                             var item = part.split("=");
                             result[item[0]] = decodeURIComponent(item[1]);
                         });
                         var eveObj = google_ubx.mapToUBXEvent(result, google_ubx.googleToUBXPageViewEvent);
                         eveObj.attributes.push({"name":"searchTerms", "value": searchKeyword, "type": "string"});
                         eveObj.identifiers = identifiersMapperArray;
                         eveObj.eventCode = "ibmsearchedSite";
                         ibm_ubx.sendEvent(eveObj, google_ubx.host, google_ubx.authKey,"GOOGLEANALYTICS"); 
                         }
                         else{
                         google_ubx.sendEventFromPayload(payLoad, identifiersMapperArray);
                         }
   });
 };
}
  4. In your Google Analytics settings variable (GA-Id), set the references to custom variables as shown below.
    • Fields to Set > Field name: customTask, Value: {{SendHitTaskOverrideVariable}}
    • Custom Dimensions > Index: 1, Dimension Value: {{gtmDimensionVariable}}
    Note that these values are only for illustrative purpose. You must use the Index and Dimension Value as per your setup.
  5. Next, enable the following in-built GTM variables:
    • Container ID
    • HTML ID