Setting up your Google Tag Manager

Robert Bignall Updated by Robert Bignall

Vantage provides direct integrations with several ecommerce platforms which allow Vantage to automatically set up all tracking and integration points. If you are on Shopify, BigCommerce or Magento 1.x please log in to Vantage and follow the instructions there. For any other ecommerce or website technology, Vantage provides a set of JavaScript tags to track user behavior across the website. Generally these tags are deployed through a tag manager such as Google Tag Manager. The steps below go into detail for GTM configuration, but the tags themselves can be deployed through any tag manager or directly on the site if necessary.

This document is intended for a technical audience. Setting up the tags is a very straightforward process, but does require basic knowledge of JavaScript, specifically variables and data types. If you require assistance with tag installation please contact the Vantage support team.

To get started, you’ll need a Vantage account. Create a Vantage account for your website by navigating to www.gotvantage.com and clicking the 'Login' button. At the bottom, you'll see a link to 'Register Now.' You can go directly there using this link.

There are several tags which need to be configured:

  1. Page View Tag
  2. Product View Tag
  3. Add to Cart Tag
  4. Remove from Cart Tag
  5. Conversion Tag

Depending on your site, there are additional tags which can be configured, but at a minimum the above tags should be created.

The page view tag is a simple script that loads the Vantage tracking code and records the visit to that page. There are no parameters to this tag, you simply load the script, and the Vantage tracker will send the appropriate data securely to our endpoints.

In the case of product pages, there needs to be a single variable set to identify the ID of the product BEFORE the page view tag runs. When the page view tags runs, it checks for the product ID and uses that to track what visitors have viewed what products.

After the page view script is loaded, various functions are added to the page for tracking cart events. Specifically Add to Cart and Remove from Cart. Those two functions can be called from anywhere on the page to indicate that the visitor has added products. When calling these functions, you must specify the product details including the quantity that were added to the cart. Since add/remove events can happen multiple times on a single page, these are function calls rather than data which is output for the page view tag to read.

The conversion tag works in a similar fashion to the product view tag, where the details about the transaction are output to a variable, and then are read by the page view tag when it fires. The conversion tag should only output this data on the “thank you” or confirmation page after an order has been successfully placed. It should ideally only fire once per transaction, so if the user reloads the page or comes to it on another device the conversion will not be recorded twice.

When setting these tags up in GTM you will need a trigger for each tag. Often these triggers will already be set up in your GTM container, but you may need to add new ones. See the section “Setting up Triggers” below for details on how to create the necessary triggers in GTM.

Setting up Triggers

This section provides details for setting up GTM triggers for the events above. If you already have these triggers available in your tag manager you can skip this step.

  1. Open your listing's tag manager container within Google Tag Manager, and navigate to the Triggers tab, located in the side menu.
  2. On the Triggers tab, click the 'New' button to create your first trigger.

3. Name the Trigger with a name you will remember. Example: "Conversion Trigger" and click on the Trigger Configuration tile. Keep note of this name as you will need it later.

4. This will open a side menu so you can choose a Trigger Type. Scroll to the 'Other' sub-heading, and select 'Custom Event.'

5. From there, you'll be asked to put in the event name from your site's custom event. This MUST match exactly to your site's event name, "Conversions" is just an example. Ensure you change this value to match what your site is sending or the event will not fire.

  • Repeat steps 1-5 to set up additional Triggers for Product Pages, Add to Cart and Remove from Cart. 

Setting up Conversion Variables

There may already be variables set up in your tag manager that can be used for the Vantage tags. Please review this section carefully for the data required, and add any variables that might be missing.

In this section you will create multiple User-Defined Variables to store the data for your conversions. Depending on the type of conversions you are tracking, you will need to create variables for all or only some of the following pieces of customer data. For example, if you are tracking e-commerce transactions then all fields are required. If your conversion is a sign up for a mailing list, you won't have tax, shipping, line items, etc. If you have already set up Variables in the past, you may skip this step, but take note of what you have named your variables. 

Per Order:

  • orderId
  • customerEmail
  • customerFirstName
  • totalPrice
  • totalTax
  • totalShipping
  • billingAddress (city, state, country, zip/postal code)

Per Line Item (Can be combined into one 'products' object with many attributes)

  • sku
  • name
  • category
  • price
  • quantity
  • brand (optional for D2C, required for Co-Op)
  1. Navigate to the Variables tab located in the side menu and click the red 'New' button under the Sub Heading 'User-Defined Variables.'

2. Create a variable to represent a piece of customer data from the above list and use it to name the variable. Using the example of orderId we could create a variable called order_ID.

3. Click on the Variable Configuration tile to open the side menu and choose 'Data Layer Variable' as your Variable Type.  

4. Add the same variable you used in the Variable Name for your Data Layer Variable Name.

5. Repeat steps 1-4 until you have finished creating all the variables.

Page View Tag

  1. Now that you have your Triggers and Variables set, you can create your Tags. The first one to create is the page view tag which needs to fire on all pages. Navigate to the Tags tab on the side menu and click the 'New' button. 

2. Name your Tag 'All Pages,' then click Tag Configuration to open the side menu and choose Tag Type. Select tag type 'Custom HTML.'

3. Click Triggering and choose the 'All Pages' Trigger.

4. Your Tag should look like this.

5. In order to save you'll need the tracking code from your Vantage Settings. Click the Tag Configuration tab to open an HTML text editor. This is where you'll paste the code from your Vantage Settings.  

If you've finished setting up and logging in to your vantage account, you'll be able to find the code at this link. Scroll to the first piece of code on the page and paste it into the HTML editor. Once you're done, the Tag should look like this:

Product View Tag

Follow the steps above to create a new tag that only fires on product detail pages.

Copy the below text for Product View into a text editor and edit the variable names to match the variables you already set up. Be sure each variable matches the exact spelling and formatting that you originally set up.

<script type="text/javascript">      
    window.$vantageProduct = {        
        // Replace {{PRODUCT_ID}} with a variable from your data layer              
        productId: {{PRODUCT_ID}}    
    };  
</script>

When you are done, your Tag should look something like this:

Ensure that your product tag fires BEFORE the main page view tag. You may need to use tag sequencing options to ensure the order is correct.

Add to Cart / Remove From Cart Tags

For the add to cart and remove from cart tags, the script could fire multiple times on a single page so it needs to call a function. These functions are created by the main Vantage Page View tag, so these tags need to fire AFTER the main page view tag loads.

Copy the below text for Add To Cart into a text editor and edit the variable names to match the variables you already set up. Be sure each variable matches the exact spelling and formatting that you originally set up.

<script type="text/javascript">      
    // Replace ALL values with variables that hold a values from your data layer            
    window.$vantage_external.trackAddToCart('PRODUCT_ID', 'NAME', 'CATEGORY', PRICE, QUANTITY, 'CURRENCY');  
</script>

If you are a Co-Op Retailer, change $vantage_external to $vantage in the script above.

When you are done, your Tag should look something like this:

Repeat the process for the Remove from Cart event, which has the exact same arguments but a different function name.

<script type="text/javascript">          
    // Replace ALL values with variables that hold a values from your data layer                
    window.$vantage_external.trackRemoveFromCart('PRODUCT_ID', 'NAME', 'CATEGORY', PRICE, QUANTITY, 'CURRENCY');  
</script>

If you are a Co-Op Retailer, change $vantage_external to $vantage in the script above.

Conversion Tag

Copy the below text for Conversions into a text editor and edit the variable names to match the variables you already set up. Be sure each variable matches the exact spelling and formatting that you originally set up. 

NOTE: Make sure you use the correct syntax for your variables. Example: If your order ID variable is order_id, then when you're adding that variable to the script it should read orderId: {{order_id}},. If you do not collect data on any of the below lines, remove the entire line. Example: Some stores may not have a category for their products, in that case remove the category line. 

The JavaScript here for setting up lineItems and other variables is for example purposes only, the structure of your data layer may be different.

<script type="text/javascript">
    lineItems = [];
    var i;
    var products = {{checkout.products}};
    for (i = 0; i < products.length; i++) {
        var product = products[i];
        lineItems.push({
            sku: product.sku,
            name: product.name,
            category: product.category,
            brand: product.brand,
            price: product.price,
            quantity: product.quantity,
        });
    }

    window.$vantageCheckout = {
        orderId: {{checkout_order_id}},
        customerEmail: {{checkout_customer_email}}
        customerFirstName: {{checkout_customer_first_name,
        customerBillingAddress: {
            city: {{checkout_customer_city}},
            state: {{checkout_customer_state}},
            country: {{checkout_customer_country}},
            postalCode: {{checkout_customer_postal_code}},
        },
        totalPrice: {{checkout_total_price}},
        totalTax: {{checkout_total_tax}},
        totalShipping: {{checkout_total_shipping}},
        lineItems: lineItems,
    };
</script>

When you are done, your Tag should look something like this:


7. Once you have the Conversion Tag set up, you'll have to adjust the settings to fire a Trigger after the conversion code runs. Click on the Tag Configuration tile to open up the 'Advanced Settings' drop down. Open the advanced settings, at the bottom you'll see another dropdown that reads 'Tag Sequencing.' Open that dropdown and check the box to 'Fire a tag after Conversions fires' and select the 'All Pages' Tag. Once you are done, your screen should match the image below. 

Installation Verification & Troubleshooting

Step 1:

In order to ensure that the tags are functioning, you should go through the entire flow of viewing pages, including product pages, adding items to the cart, removing items from the cart, and completing a checkout with the JavaScript console open, watching for any JavaScript errors. Most issues with tag installation are caused by mismatches between data layer variables and the tag code, which will usually cause errors to show up in the console and should give obvious indications where the problem is.

Step 2:

Once you have gone through the flow without seeing any JavaScript errors in the console you should go through the entire flow again looking at the Network tab of your browsers developer tools. Ensure you reload the page after opening the developer tools for the first time. Filter the network traffic for the string 'vantage'.

The first thing you should see is the Vantage script being loaded. The exact <type> and <version> may be different from the screenshot above, but there should be an entry that looks like 'vantage-<type>-<version>-min.js'

If you do not see the script load, review your tag setup for the page view tag and ensure it is being fired on all pages.

Then, look for traffic being sent to track2.vantageanalytics.com. On every event there should be events firing. Usually there will be two rows per event, one for an OPTIONS request and another for a GET or POST depending on the setup.

If you do not see requests, recheck the JavaScript console for errors, or contact Vantage support for assistance.

How did we do?

Can I edit a live campaign?

Contact