Tag Manager Plus – Part 2a: Set Up Variables

Variables include values which are captured from the data layer or constants that are used repetitively across different tags.

Click Element

  1. Under “Built-In Variables” Click Configure
  2. Under “Clicks” tick “Click Element”
  3. Click to the left of the panel to close it.

Google Analytics Tracking ID Code

Setting this up ensures the tracking ID is identical across the GTM setup.

Click on “Variables” in the left menu.

  1. Under “User-Defined Variables” click on “New”
  2. Variable name:
    gaProperty
  3. Click on the building block to see the list of available variables. Select: “Constant”
  4. Value: Tracking ID from the Google Analytics setup in the Part 1
  5. Click “Save”

Ecommerce

  1. Click on “New” from the Variables listing page.
  2. Variable Name:
    DL - ecommerce
  3. Variable Type: “Data Layer Variable”
  4. Data Layer Variable Name:
    ecommerce
  5. Click “Save”

Known Users

  1. Click on “New” from the Variables listing page.
  2. Variable Name:
    Known Users
  3. Variable Type: “Data Layer Variable”
  4. Data Layer Variable Name:
    visitorKnownUser
  5. Click “Save”

Lifetime Value

  1. Click on “New” from the “Variables” listing page.
  2. Variable Name:
    Lifetime Value
  3. Variable Type: “Data Layer Variable”
  4. Data Layer Variable Name:
    visitorLifetimeValue
  5. Click “Save”

Lifetime Orders

  1. Click on “New” from the “Variables” listing page.
  2. Variable Name:
    Lifetime Orders
  3. Variable Type: “Data Layer Variable”
  4. Data Layer Variable Name:
    visitorLifetimeOrders
  5. Click “Save”

Product Impression List

  1. Click on “New” from the “Variables” listing page.
  2. Variable Name:
    Product Impression List
  3. Variable Type: “Data Layer Variable”
  4. Data Layer Variable Name:
    ecommerce.impressions
  5. Click “Save”

Product Category

  1. Click on “New” from the “Variables” listing page.
  2. Variable Name:
    Product Category
  3. Variable Type: “Data Layer Variable”
  4. Data Layer Variable Name:
    productCategory
  5. Click “Save”

Page Type

  1. Click on “New” from the “Variables” listing page.
  2. Variable Name:
    Page Type
  3. Variable Type: “Data Layer Variable”
  4. Data Layer Variable Name:
    pageType
  5. Click “Save”

Payment Button

  1. Click on “New” from the “Variables” listing page.
  2. Variable Name:
    JS - Is Payment Button
  3. Variable Type: “Custom JavaScript”
  4. Copy & paste this JavaScript then click “Save”:
function(){ 
    var page_elem = {{Click Element}};
    if (page_elem.tagName == 'BUTTON'){
        if (page_elem.parentElement.id == 'payment-buttons-container') {
            return true;
        } else {
        return false;
        }
    } else if (page_elem.tagName == 'SPAN') {
        elem_parent = page_elem.parentElement;
        if (elem_parent.tagName == 'SPAN') {
            elem_parent = elem_parent.parentElement;
        }
        if (elem_parent.id == 'payment-buttons-container') {
            return true;
        } else if (elem_parent.parentElement.id == 'payment-buttons-container') {
            return true;
        }
    }
    return false;
}

Shipping Button

  1. Click on “New” from the “Variables” listing page.
  2. Variable Name:
    JS - Is Shipping Button
  3. Variable Type: “Custom JavaScript”
  4. Copy & paste this JavaScript then click “Save”:
function(){
 
   var page_elem = {{Click Element}};

   if (page_elem.tagName == 'BUTTON'){
       if (page_elem.parentElement.id == 'shipping-method-buttons-container') {
           return true;
       } else {
           return false;
       }
   } else if (page_elem.tagName == 'SPAN') {
       elem_parent = page_elem.parentElement;
       if (elem_parent.tagName == 'SPAN') {
           elem_parent = elem_parent.parentElement;
       }
       if (elem_parent.id == 'payment-buttons-container') {
           return true;
       } else if (elem_parent.parentElement.id == 'shipping-method-buttons-container') {
           return true;
       }
   }
   return false;
}

Add to Cart Success

  1. Click on “New” from the “Variables” listing page.
  2. Variable Name:
    JS - Add to Cart Success
  3. Variable Type: “Custom JavaScript”
  4. Copy & paste this JavaScript then click “Save”:
function() {
   var status = false;
   var success_elem = document.getElementsByClassName('success-msg')[0];
   if (success_elem.textContent.indexOf('') != -1) {
       status = true;
   }
   return status;
}

Selected Payment Method

  1. Click on “New” from the “Variables” listing page.
  2. Variable Name:
    JS - Selected Payment Method
  3. Variable Type: “Custom JavaScript”
  4. Copy & paste this JavaScript then click “Save”:
function() {
   var paypal_rb = document.getElementById('p_method_paypal_express');
   var credit_rb = document.getElementById('p_method_payway_api');
   if (paypal_rb.checked){
       return 'Paypal';
   } else if (credit_rb.checked){
       return 'Credit Card';
   } else {
       return '(not set)';
   }
}

Selected Shipping Method

  1. Click on “New” from the “Variables” listing page.
  2. Variable Name:
    JS - Selected Shipping Method
  3. Variable Type: “Custom JavaScript”
  4. Copy & paste this JavaScript then click “Save”:
function() { 
   var shipping_div = document.getElementById('checkout-shipping-method-load');
   var shipping_inputs = shipping_div.getElementsByTagName('INPUT');
   var selected_item = null;
 
   for (i = 0; i < shipping_inputs.length; i++){
       if (shipping_inputs[i].checked){
           selected_item = shipping_inputs[i];
       }
   }
 
   if (selected_item){
       var selected_li = selected_item.parentElement;
       var method_elem = selected_li.getElementsByTagName('LABEL')[0];
       return (method_elem.innerText || method_elem.textContent);
   } else {
       return '(not set)';
   }
}

GA Settings

  1. Click on “New” from the Variables listing page.
  2. Variable Name:
    GA Settings
  3. Variable Type: “Google Analytics Settings”
  4. Tracking ID: {{gaProperty}} (select by clicking brick icon)
  5. Expand “More Settings”
  6. Under “Custom Dimensions” add the index number (which you wrote down when setting up GA in Part 1) and select from the list of variables set up earlier (click the brick icon to select).
  7. Under Content Groups add index 1 with content group {{Page Type}} (click the brick icon to select)
  8. Under Content Groups add index 2 with content group {{Product Category}}
  9. Under “Ecommerce Features”, tick “Enable Enhanced Ecommerce Features” and “Use data layer”
  10. Click “Save”

GA Settings – Event

  1. Click on “New” from the Variables listing page.
  2. Variable Name:
    GA Settings - Event
  3. Variable Type: Google Analytics Settings
  4. Tracking ID: {{gaProperty}} (select by clicking brick icon)
  5. Expand “More Settings”
  6. Under “Custom Dimensions” add the index number (which you wrote down when setting up GA in Part 1) and select from the list of variables set up earlier (click the brick icon to select).
  7. Under Content Groups add index 1 with content group {{Page Type}} (click the brick icon to select)
  8. Under Content Groups add index 2 with content group {{Product Category}}
  9. Under “Advertising” tick “Enable Display Advertising Features”
  10. Under “Ecommerce Features”, tick “Enable Enhanced Ecommerce Features” and “Use data layer”
  11. Click “Save”

Continue to Part 2b: Set Up Triggers

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