Google Tag Manager Community Templates

Introduction

Google Tag Manager (GTM) is a tool that allows marketers to manage and deploy marketing tags on a website without modifying the code. Ingenious Technologies offers multiple GTM tag templates to simplify the tracking implementation process. These templates are more user-friendly than traditional coding methods and come with advanced features like defaults and fallbacks for enhanced accuracy.

What are GTM Community Templates?

Community templates are pre-made configurations in GTM that can be easily imported and used, saving time and ensuring best practices are followed. They are especially beneficial for those who might not have deep technical knowledge.

Getting Started

1. Before You Start

First, determine which events you'd like to track, such as leads or sales. Ensure your advertiser setup is complete, including setting up conversion targets and other configurations.

Information needed later in the process:

• Advertiser id

• Tracking domain

These can be found in your advertiser’s configuration settings or under Trail > Tracking Tags.

Example:

2. Basics: Good to Know

A typical tracking implementation involves two tags:

• Onpage Tag: Should be on every public page and registers incoming clicks.

• Conversion Tag: Should be on the thank-you page (or after a conversion event) and registers conversions.

Ingenious Technologies offers GTM tags that can replace both these tags, suitable for client-side and server-side implementations.

3. Downloading the Template

While our GTM community templates are under review and not yet in the Google Template Gallery, they can be accessed and downloaded from our public Github repository.

Download Instructions:

• Right-click and save the template files on your computer.

• All files are named temlate.tpl (as required by GTM).

  • Download onpage template (Browser)

  • Download conversion template (Browser)

  • Download onpage template (server side/ sGTM)

  • Download conversion template (server side / sGTM)

  • Download sGTM client

4. Importing the Template into GTM

• Go to “Templates” in GTM and click “New”.
  

  

• Navigate to the Menu and select “Import”. Choose your template.tpl file to import.

  

• Once imported, configure your tags as you would with any other GTM template.

Configuration & Setup

Once you've imported the templates, configuring your tags is similar to any other GTM template. Here's a breakdown of how the tags process data to create tracking calls:

Data Sources for Tag Configuration:

• Variables: These are directly from the tag configuration.

• First Party Cookies: Cookies stored on the user's browser related to your website.

• DataLayer/Event Data: Information passed to GTM through the DataLayer or specific events triggered on the site.

Additionally, some variables have default values stored within the tag, ensuring there's always a value to fall back on.

Setting Up Variables

Configuring a variable in GTM is a seamless process:

1. Pre-defined Value: If you've specified a value in the tag settings, that value is prioritized.

2. DataLayer Check: In the absence of a pre-defined value, the tag checks the DataLayer for relevant information.

3. Default Value: If no value is found in the above steps, the tag reverts to its default value.

This flexible system ensures accurate tracking, even in complex setups, and facilitates easier testing of specific features.

Onpage Tracking Tag

This tag replaces the Onpage tag. It stores click-in data with a clickId parameter in a cookie. Additionally, tsc and tsv cookies are written and used in tracking requests.

ECommerce Conversion Tracking Tag

This tag replaces the Ecommerce Conversion tag.

Setting Up the 'basket' Variable in GTM

The ECommerce Conversion Tracking Tag is crucial for capturing details about a purchase. One of the essential components of this tag is the basket variable, which holds the product details of a purchase.

Here is the JSON object that needs to be transmitted in the basket variable.

[{
          "id":${POSITION_ID},
          "pid":"${PRODUCT_ID}",
          "sku":"${PRODUCT_SKU}",
          "prn":"${PRODUCT_NAME}",
          "brn":"${PRODUCT_BRAND}",
          "prc":"${PRODUCT_HIERARCHY}",
          "pri":${PRODUCT_PRICE},
          "qty":${PRODUCT_QUANTITY},
          "dsv":${PRODUCT_DISCOUNT},
          "shp":${PRODUCT_SHIPPING},
          "tax":${PRODUCT_TAX},
          "trc":"${TRACKING_CATEGORY}"
      }]

More details and a description of each parameter can be found here: https://ingenioustechnologies.atlassian.net/wiki/spaces/KB/pages/1440809027/Configuring+and+implementing+tracking+tags#Basket-tracking

To transmit the product details correctly, you'll need to set up the basket variable with a specific JSON object format in GTM. Here's a step-by-step guide for non-technical users:

1. Navigate to Variables: On the left sidebar, click on "Variables."

2. Create a New Variable: Click on the "New" button to create a new variable.

3. Name the Variable: For clarity, name this variable "basket" or something descriptive like "Product Purchase Details."

4. Choose Variable Type:

   • Click on "Variable Configuration."

   • From the list of variable types, select "Custom JavaScript."

5. Enter the JavaScript Code: In the code area, paste the following:

function() {
    return [{
        "id":{{POSITION_ID}},
        "pid":"{{PRODUCT_ID}}",
        "sku":"{{PRODUCT_SKU}}",
        "prn":"{{PRODUCT_NAME}}",
        "brn":"{{PRODUCT_BRAND}}",
        "prc":"{{PRODUCT_HIERARCHY}}",
        "pri":{{PRODUCT_PRICE}},
        "qty":{{PRODUCT_QUANTITY}},
        "dsv":{{PRODUCT_DISCOUNT}},
        "shp":{{PRODUCT_SHIPPING}},
        "tax":{{PRODUCT_TAX}},
        "trc":"{{TRACKING_CATEGORY}}"
    }];
}

7. Set Up Associated Variables: For the script to work, you'll need to set up individual variables for each placeholder (e.g., {{PRODUCT_ID}}, {{PRODUCT_SKU}}, etc.). These variables will capture the respective values from your website or e-commerce platform. You may have already set up the variables, it depends on your existing data layer.

8. Save the Variable: Once you've entered the code, click on the "Save" button.

9. Integrate with the Tag: Now, when setting up or editing the ECommerce Conversion Tracking Tag, ensure you select the "basket" variable you just created for the appropriate field.

10. Publish Changes: Don't forget to submit your changes to make them live.

Example for server side implementation (sGTM)

In the provided illustration, we demonstrate a typical setup using Ingenious Tags:

• Client-Side Installation: Both the Onpage Tag and the ECommerce Conversion Tag are set up on the client side.

• Tracking Requests: These tags are tailored to direct their tracking requests to a server-side GTM container. This container is reachable through a first-party subdomain.

• Server-Side Processing: Upon receiving these tracking requests, the server-side Ingenious client interprets them and transforms the requests into specific events.

• Third-Party Integration: These Ingenious events can then activate third-party tags, allowing for a more integrated tracking system.

• Server-Side Firing: Notably, while the Ecommerce Conversion Tag initiates from the server side, the Onpage Tag also triggers server-side, channeling the requests further into the Ingenious infrastructure.