Tag Manager Plus – Part 2c: Set Up Tags

Tags are the code snippets which send the tracking data to Google Analytics.

Pageview

Click on “Tags”

Note: If you are editing an existing Google Tag Manager container with a Pageview tag already in place, edit the existing Pageview tag starting at step 5 below (Google Analytics settings).

  1. Click on “New”
  2. Name the tag
    GA - Pageview - Standard
  3. Tag Type: “Universal Analytics”
  4. Track Type: “Pageview”
  5. Google Analytics settings: {{GA Settings}} (select from drop-down)
  6. Under “Triggering” select “All Pages”.
  7. Click “Save”

GA – Add to Cart – Data Layer Push

  1. Click on “New”
  2. Name the tag
    GA - Add to Cart - Data Layer Push
  3. Tag Type: “Custom HTML”
  4. Copy & paste this script
    <script>
        (function(){
            var host = {{Page Hostname}};
            var ajax_url = "//" + host + "/tagmanager/ajax/checkAddToCart/";
    
            function gtmCheckAddToCart() {
                jQuery.ajax({
                    url: ajax_url,
                    dataType: 'json',
                    data: "ajax_layer=1",
                    success: function(e, xhr, settings) {
                        var data = (e);
                        if(settings.status == 200 && data.response == 'datalayer')
                        {
                             dataLayer.push(data.code);
                        }
                    }
                });
            }
        })();
    </script>
  5. Under Triggering select “Add to Cart – Success Message Element”
  6. Click “Save”

GA – Event – Add to Cart

  1. Click on “New”
  2. Name the tag
    GA - Event - Add to Cart
  3. Tag Type: “Universal Analytics”
  4. Track Type: “Event”
  5. Event Tracking Parameters:
    1. Category: Ecommerce (Type this in)
    2. Action: Add to Cart (Type this in)
  6. Google Analytics Settings: {{GA Settings – Event}} (select from drop-down list)
  7. Under Triggering select “Add to Cart – Success Message Element”
  8. Click “Save”

GA – Event – Checkout Option

  1. Click on “New”
  2. Name the tag
    GA - Event - Checkout Option
  3. Tag Type: “Universal Analytics”
  4. Track Type: Event
  5. Event Tracking Parameters:
    1. Category: Ecommerce (Type this in)
    2. Action: Checkout Option (Type this in)
  6. Google Analytics Settings: {{GA Settings – Event}} (select from drop-down list)
  7. Under Triggering select “Event – Checkout Option”
  8. Click Save

GA – Event – Checkout Steps

  1. Click on “New”
  2. Name the tag
    GA - Event - Checkout Steps
  3. Tag Type: “Universal Analytics”
  4. Track Type: Event
  5. Event Tracking Parameters:
    1. Category: Ecommerce (Type this in)
    2. Action: Checkout (Type this in)
  6. Non-Interaction Hit: “True”
  7. Google Analytics Settings: {{GA Settings – Event}} (select from drop-down list)
  8. Under Triggering select “OnePage Checkout – Checkout Step” and also add “OnePage Checkout Step 1 – View Cart”
  9. Click Save

GA – Event – Internal Promotion Click

  1. Click on “New”
  2. Name the tag
    GA - Event - Internal Promotion Click
  3. Tag Type: “Universal Analytics”
  4. Track Type: Event
  5. Event Tracking Parameters:
    1. Category: Ecommerce (Type this in)
    2. Action: Internal Promotion Click (Type this in)
  6. Google Analytics Settings: {{GA Settings – Event}} (select from drop-down list)
  7. Under Triggering select “Event – Internal Promotion Click”
  8. Click Save

GA – Event – Internal Promotion Impression

  1. Click on “New”
  2. Name the tag
    GA - Event - Internal Promotion Impression
  3. Tag Type: “Universal Analytics”
  4. Track Type: Event
  5. Event Tracking Parameters:
    1. Category: Ecommerce (Type this in)
    2. Action: Internal Promotion Impression (Type this in)
  6. Non-Interaction Hit: “True”
  7. Google Analytics Settings: {{GA Settings – Event}} (select from drop-down list)
  8. Under Triggering select “Event – Internal Promotion Impression”
  9. Click Save

GA – Event – Product Click

  1. Click on “New”
  2. Name the tag
    GA - Event - Product Click
  3. Tag Type: “Universal Analytics”
  4. Track Type: EventEvent Tracking Parameters:
    1. Category: Ecommerce (Type this in)
    2. Action: Product Click (Type this in)
  5. Google Analytics Settings: {{GA Settings – Event}} (select from drop-down list)
  6. Under Triggering select “Event – Product Click”
  7. Click Save

GA – Event – Product List Impression

  1. Click on “New”
  2. Name the tag
    GA - Event - Product List Impression
  3. Tag Type: “Universal Analytics”
  4. Track Type: Event
  5. Event Tracking Parameters:
    1. Category: Ecommerce (Type this in)
    2. Action: Product List Impression (Type this in)
  6. Non-Interaction Hit: “True”
  7. Google Analytics Settings: {{GA Settings – Event}} (select from drop-down list)
  8. Under Triggering select “Event – Product List Impression”
  9. Click Save

GA – Event – Remove from Cart

  1. Click on “New”
  2. Name the tag
    GA - Event - Remove from Cart
  3. Tag Type: “Universal Analytics”
  4. Track Type: “Event”
  5. Event Tracking Parameters:
    1. Category: Ecommerce (Type this in)
    2. Action: Remove from Cart (Type this in)
  6. Google Analytics Settings: {{GA Settings – Event}} (select from drop-down list)
  7. Under Triggering select “Event – Remove from Cart”
  8. Click “Save”

GA – Internal Promotion Listener – vanilla JS – minified

  1. Click on “New”
  2. Name the tag
    GA - Internal Promotion Listener - vanilla JS - minified
  3. Tag Type: “Custom HTML”
  4. Copy & paste this script
    <script>
    /**
     
    Company: Panalysis Pty Ltd
    URL: www.panalysis.com
    Author: Timothy Yuen
    Version: 2.00
    Date: 22-Mar-2016
     
    Prerequisites:
     Script is loaded after DOM loaded.
     
    To Use
     1. Load this script in all Pages after DOM Loaded
     2. Add triggers in GTM for events sendInternalPromotionClick and sendInternalPromotionImpression
     3. Add Event/Pageview GA tags in GTM to send Enhanced E-commerce data that is uses data from the dataLayer
     
    */
    (function(q,l){function e(a){var b;b="debug";var c="",e="",d=null,c=null;b&&(b="(?:\\#|\\&){param_name}=([^\\&$]+)".replace("{param_name}",b),d=new RegExp(b),c=document.location.hash,d.test(c)&&(c=c.match(d),null!=c&&1<c.length&&(e=c[1])));(b=e)||(b="debug",e=c="",c=d=null,b&&(b="(?:\\?|\\&){param_name}=([^\\&$]+)".replace("{param_name}",b),d=new RegExp(b),c=document.location.search,d.test(c)&&(c=c.match(d),null!=c&&1<c.length&&(e=c[1]))),b=e);"undefined"!=typeof b&&"true"==b&&console.log(a)}function r(a,
    b,c){e("EC:_addEvent(): "+a.tagName);a.addEventListener?a.addEventListener(b,c):a.attachEvent&&a.attachEvent(b,c)}function m(a){a=a.split("-");for(var b=1;b<a.length;b++)a[b]=a[b].charAt(0).toUpperCase()+a[b].slice(1);return a.join("")}function g(a,b,c){var d=c;if(a.dataset){if(b=m(b),a.dataset[b])return a.dataset[b]}else if(a.getAttribute)return d=a.getAttribute("data-"+b),"undefined"!=typeof d?d:!1;return c}function s(a,b,c){a.dataset?(b=m(b),a.dataset[b]=c):a.setAttribute&&a.setAttribute("data-"+
    b,c)}function n(a,b){try{return a.nodeName.toUpperCase(),"BODY"==a.nodeName||a.nodeName==b?a:n(a.parentNode,b)}catch(c){}}function t(a){e("EC:sendPromotionClick_GTM()");a=a||window.event;promo=n(a.target||a.srcElement,"A");a=g(promo,"promo-id",!1);e("EC:sendPromotionClick_GTM(): promo-id = "+a);a&&p.push({event:"sendInternalPromotionClick",ecommerce:{promoClick:{promotions:[{id:a,name:g(promo,"promo-name",""),creative:g(promo,"promo-creative",""),position:g(promo,"promo-position","")}]}},eventCallback:function(){e("EC:sendPromotionClick_GTM() DONE")}})}
    e("EC:Begin");var p=window[q],f=[];e("EC: Get all ahref element tags");for(var k=document.getElementsByTagName("A"),f=[],u=!1,d=0;d<k.length;d++)(u=g(k[d],"is-promo",!1))&&f.push(k[d]);e("EC: Identified "+f.length+" elements containing promo attributes");(function(a){e("EC:sendPromotionImpression_GTM("+a.length+" items)");for(var b=[],c="",d=[],f=0,h=0;h<a.length;h++)(c=g(a[h],"promo-id",!1))&&("undefined"==typeof d[c]&&!l||l)&&(d[c]=!0,f++,b.push({id:c,name:g(a[h],"promo-name",""),creative:g(a[h],
    "promo-creative",""),position:g(a[h],"promo-position","")}));e("EC: sending "+f+" impressions in to GTM ");e(b);0<f&&p.push({event:"sendInternalPromotionImpression",ecommerce:{promoView:{promotions:b}}})})(f);for(d=0;d<f.length;d++)g(f[d],"promo-click",!1)||(e("EC: Attach click event to item "+d),e(f[d]),r(f[d],"click",t),s(f[d],"promo-click","true"));f=null;e("EC:End")})("dataLayer",!1);
    </script>
  5. Under Triggering select “DOM Ready”
  6. Click “Save”

GA – OnePage Checkout Steps – Listener

  1. Click on “New”
  2. Name the tag
    GA - OnePage Checkout Steps - Listener
  3. Tag Type: “Custom HTML”
  4. Copy & paste this script
    <script>
    (function(){
      function sendOneStepCheckout(obj){
        dataLayer.push({
          event: 'onestepcheckout',
          ecommerce: obj
        });
      }
    
      function hasClass( elem, clas ) {
        try {
          return (" " + elem.className + " " ).indexOf( " "+clas+" " ) > -1;
        }catch(e){return false}
      }
    
      function checkActiveStep(){
        var step2=document.getElementById('opc-login');
        if (hasClass(step2, 'active')){ return '2' }
        var step3=document.getElementById('opc-billing');
        if (hasClass(step3, 'active')){ return '3' }
        var step4=document.getElementById('opc-shipping');
        if (hasClass(step4, 'active')){ return '4' }
        var step5=document.getElementById('opc-shipping_method');
        if (hasClass(step5, 'active')){ return '5' }
        var step6=document.getElementById('opc-payment');
        if (hasClass(step6, 'active')){ return '6' }
        var step7=document.getElementById('opc-review');
        if (hasClass(step7, 'active')){ return '7' }
      }
    
      function timeout() {
        setTimeout(function () {
          var activeStep = checkActiveStep();
          if (activeStep != currentStep){
            var ec = {{DL - ecommerce}};
            ec.checkout.actionField.step = activeStep;
            sendOneStepCheckout(ec);
            currentStep = activeStep;
          }
          timeout();
        }, 1000);
      }
    
      var currentStep = '2';
    
      try {
        var ec = {{DL - ecommerce}};
        var cos = ec.checkout.actionField.step;
        if (cos == '1') {
          ec.checkout.actionField.step = '2';
          sendOneStepCheckout(ec);
        }
        if (cos == '2') {
          sendOneStepCheckout(ec);
        }
    
        timeout();
      } catch(e){console.log(e.message)}
    })();
    </script>
  5. Under Triggering select “OnePage Checkout – Checkout Page”
  6. Click “Save”

GA – OnePage Payment Method – Data Layer Push

  1. Click on “New”
  2. Name the tag
    GA - OnePage Payment Method - Data Layer Push
  3. Tag Type: “Custom HTML”
  4. Copy & paste this script
    <script>
    (function(){
      var payment = {{JS - Selected Payment Method}};
      dataLayer.push({
        event: 'checkoutOption',
          ecommerce: {
            'checkout_option': {
              'actionField': {'step': 6, 'option': payment}
            }
          }
      });
    })();
    </script>
  5. Under Triggering select “OnePage Checkout – Is Payment Button”
  6. Click “Save”

GA – OnePage Shipping Method – Data Layer Push

  1. Click on “New”
  2. Name the tag
    GA - OnePage Shipping Method - Data Layer Push
  3. Tag Type: “Custom HTML”
  4. Copy & paste this script
    <script>
    (function(){
      var method = {{JS - Selected Shipping Method}};
      dataLayer.push({
        event: 'checkoutOption',
          ecommerce: {
            'checkout_option': {
            'actionField': {'step': 5, 'option': method}
          }
        }
      });
    })();
    </script>
  5. Under Triggering select “OnePage Checkout – Is Shipping Button”
  6. Click “Save”

 GA – Product Click Listener

  1. Click on “New”
  2. Name the tag
    GA - Product Click Listener
  3. Tag Type: “Custom HTML”
  4. Copy & paste this script
    <script>
    (function(){
      var $ = jQuery;
      var productList = {{Product Impression List}};
    
      function onProductClick(href){
        var myUrl = href;
        var myObj = null;
        
        for (i=0; i<productList.length; i++){
          if (myUrl == productList[i]['url']) {
            myObj = productList[i];
            break;
          }
        }
    
        if (myObj) {
          dataLayer.push({
            'event': 'productClick',
            'ecommerce': {
              'click': {
                'actionField': {'list': myObj['list']},
                  'products': [{
                    'id': myObj['id'],
                    'name': myObj['name'],
                    'category': myObj['category'],
                    'price': myObj['price'],
                    'position': myObj['position']
                  }]
              }
            }
          });
        }
        else {console.log ('No Matching Item in DataLayer List');}
      }
    
      $(document).on('click', '.products-grid .product-name a, .products-grid .product-image', function() {
        onProductClick($(this).attr('href'));
      });
    
      $(document).on('click', '.products-list .product-name a, .products-list .product-image', function() {
        onProductClick($(this).attr('href'));
      });
    
      $(document).on('click', 'a.link-learn', function() {
        onProductClick($(this).attr('href'));
      });
    })();
    </script>
  5. Under Triggering select “Event – Product List Impression”
  6. Click “Save”

Note: You’ll be coming back to Google Tag Manager later to test the tags and make them live.

Continue to Part 3: Magento Extension Installation & Setup

Related Pages
Tag Manager Plus Magento Extension
Tag Manager Plus User Manual
Part 1: Google Analytics Setup
Part 3: Magento Extension Installation & Setup
Part 4: Testing & Go Live