Google Tag Manager

The tag managers are a free tool that makes it easier to add, manage, and update tracking codes (or “tags”) on your website. In this article, we are going to talk about one of them, the most popular and accessible, Google Tag Manager, or GTM, however, they all work similarly, so feel free to use the most convenient tag manager for you.

These are the topics covered in this article:

Installing Google Tag Manager

After creating an account on GTM, you must install the GTM code on your website pages. This code can be found on your container's homepage.

GTM Container Homepage

Click on the container ID to open the GTM installation instructions. There are two snippets of code that must be installed on your website: the first goes into the <head>, and the second into the <body>.

GTM Install Instructions

After installing the GTM codes, you will be able to test your website to ensure the installation was done correctly.

Triggers

Setting up triggers is crucial for monitoring specific actions or events on your website. Triggers determine when and where your tags should activate, enabling you to manage the data collected for each user interaction.

You can set up triggers on the Triggers page or while creating or editing a tag.

Triggers Page

GTM provides several types of triggers to capture different user actions. Here are the most commonly used ones in e-commerce tracking:

  1. Page View: Activates when a page loads.

  2. Click: Activates when a specific element on a page is clicked, such as an "Add to Cart" button.

  3. Form Submission: Activates when a form on the page is submitted.

  4. Custom Event: Activates based on custom JavaScript events, which are useful for complex interactions that don't have direct GTM triggers.

  5. DOM Ready: Activates when the HTML for the page is loaded (before images and other media).

You can learn more about all the trigger types in this GTM article.

Setting up Triggers

Now, let's look at some examples to help you understand how to set up triggers:

Example 1: Setting Up an Add-to-Cart Trigger

Goal: Activate a tag when a user clicks the "Add to Cart" button.

  1. Identify the Button's CSS Selector or ID:

    • Right-click on the "Add to Cart" button on your website and select "Inspect." Find the unique CSS selector, ID, or class for the button (like .example or #example).

  2. Create the Trigger in GTM:

    Trigger Configuration

    • Click on and then to start setting up your trigger.

    • Select Click - All Elements if the button isn’t a link, or Click - Just Links if it’s a link.

    • Under Trigger Type, choose Some Clicks.

    • Set the conditions to match the button’s selector or ID. For instance:

      • Click Element > CSS Selector > .example.

    • Save the trigger and name it something descriptive, like Add to Cart Click Trigger.

  3. Assign Trigger to a Tag:

    • Attach this trigger to the Add to Cart tag you created, so it only fires when this button is clicked.

Example 2: Setting Up a Purchase Trigger

Goal: Activate a tag when a user completes a purchase (typically on a "Thank You" or "Order Confirmation" page).

  1. Use the Thank You Page URL:

    • Find the unique URL or URL pattern of the order confirmation page (e.g., /thank-you or /order-confirmation).

  2. Create a Page View Trigger:

    Trigger Configuration

    • Click on and then to start setting up your trigger.

    • Choose Page View as the trigger type.

    • Select Some Page Views.

    • Set the condition to match the Thank You page URL:

      • Page Path > contains > /thank-you.

    • Save the trigger as Purchase Confirmation Trigger.

  3. Attach Trigger to Purchase Tag:

    • Assign this trigger to your Product Ordered tag to track completed purchases.

Example 3: Using a Custom Event Trigger for Advanced Actions

Goal: Activate a tag for actions that don't match standard triggers, like custom JavaScript events.

  1. Implement a Custom Event:

    • If your e-commerce platform or developer can add custom JavaScript events, you can use a JavaScript dataLayer.push event. For example:

      dataLayer.push({
  event: 'addToCart',
  productID: '12345',
  productName: 'Sample Product'
});

  2. Create a Custom Event Trigger:

    Custom Event Trigger

    • Click on and then to start setting up your trigger.

    • Select Custom Event as the trigger type.

    • In the Event Name field, enter the event name used in the dataLayer.push, like addToCart.

    • Save this trigger as an Add to Cart Custom Event Trigger.

Variables

In GTM, variables are used to store information that can be utilized within tags, triggers, and other variables. They enhance the functionality of your tags and triggers by enabling them to adjust dynamically based on user actions or data present on the page.

Variables Page

Understanding Variable Types

There are two variable types available in GTM:

  1. Built-in Variables: GTM provides built-in variables for common actions, such as Page URL, Click URL, and Form ID. You can enable these directly in GTM.

  2. User-Defined Variables: These are custom variables you create to capture specific data, such as a product ID or a button click class. User-defined variable types include:

    • Data Layer Variables: Retrieve values pushed into the dataLayer (e.g., a product ID from your site’s code).

    • URL Variables: Capture data from the page URL, , like parameters (e.g., parameters like utm_campaign).

    • JavaScript Variables: Retrieve values directly from JavaScript expressions (e.g., document object properties).

    • Constant Variables: Store fixed values (e.g., a static tracking ID used in multiple tags).

Setting Up Variables

  1. Built-in Variables

    • In the Built-in Variables section, click on .

    • Select the variables you want to enable by checking their boxes (e.g., Page URL, Click URL, Click Text, Form ID).

  2. User-Defined Variables

    • Example 1: Creating a Data Layer Variable

      Data Layer Variables pull data that has been pushed to the dataLayer. This is useful when tracking specific actions or values, like a product ID or category.

      1. Push Data to the Data Layer (if not already done): On your site, make sure the necessary data is being pushed to the dataLayer. Here’s an example for a product page:

        dataLayer.push({
    event: 'productViewed',
    productID: '12345'  // Unique identifier for the product
});

      2. Create the Data Layer Variable in GTM:

        Variable Configuration - Data Layer Example

        • In the User-Defined Variables section, click on .

        • Select Variable Configuration and choose Data Layer Variable.

        • In Data Layer Variable Name, enter the name used in your data layer push (e.g., productID).

        • Optionally, set a default value if the variable is empty (e.g., unknown).

        • Name and save the variable (e.g., DL - Product ID).

      3. Test: Use GTM’s Preview mode to test that the variable correctly captures the product ID.

    • Example 2: Creating a URL Variable

    Variable Configuration - URL Example

URL Variables allow you to capture data from the URL of the page, such as tracking parameters (utm_campaign) or specific page paths.

  1. In the User-Defined Variables section, click on .

  2. Choose Variable Configuration and select URL.

  3. In the Component Type dropdown, choose the part of the URL you need:

    • Page Path: Captures the path after the domain (e.g., /products/shoes).

    • Query: Captures specific URL parameters like utm_campaign.

  4. If you choose Query, enter the Query Key (e.g., utm_campaign).

  5. Save the variable with a descriptive name, like URL - UTM Campaign.

Using Variables

After creating variables, you can use them to make tags and triggers more dynamic.

  1. In Tags: When configuring a tag, you can insert variables by selecting the {{}} symbol or typing {{variable name}}. For example:

    • Use {{GA Tracking ID}} in a Google Analytics tag for the Tracking ID field.

    • Use {{DL - Product ID}} to dynamically pass the product ID in a conversion tag.

  2. In Triggers: Variables can be used in triggers to specify activating conditions. For example:

    • Create a trigger to fire on pages where {{URL - Page Path}} contains /checkout

Tags

Tags are snippets of code used to collect data and monitor user interactions for marketing and analytics platforms. Instead of manually inserting each tag into your site’s code, GTM serves as a central hub, allowing you to manage all your tags in one place.

Tags Page

Creating Tags

There are many things you can accomplish using tags. GTM offers several types of tags. Here is an example of how to create a tag using BMS's pixel codes.

Tag Configuration

  1. On the Tags Page click on to add a new tag and then on to start configuring it.

  2. Select Custom HTML from the list.

  3. On the HTML field, paste the pixel code you need to install, on the example, a product added to cart pixel was used.

  4. Remember to replace the Offer ID with the product identifier variable used on your website or use a previously configured GTM variable linked to it. You can learn more about how the BMS OfferID works in our Catalogs article.

  5. Select the triggers that will control when this tag will be activated.

  6. Name and save your tag.

  7. Click on to access a preview of your page with the tags installed and debug them if necessary. (This step is optional)

  8. Click on to submit your changes to the live version of your website.

Templates

Alternatively, you can use our BMS Universal Tag template to install BMS components into your website easily. This single template contains most of our product tags, and we will discuss the available actions further.

Configuring BMS Universal Tag

When creating a new tag, you will need to choose the type of your tag, this is where you will find our template after searching for it as "BMS Universal Tag".

Choose tag type - Searching for BMS Universal Tag

After selecting this template, you will need to fill in some details according to the action you need to execute. These are some of the available actions:

Track Page Loaded

Track Page Loaded

When triggered, this action will execute the Page Load Tracking Tag. To configure it, you will need to fill in the following details:

  • BMS Account ID: Your 12-digit BMS account number.

Add User to a Cookie Pool

Add User to a Cookie Pool

When triggered, this action will add users to a Cookie Pool. To configure it, you will need to fill in the following details:

  • BMS Account ID: Your 12-digit BMS account number.

  • Cookie Pool ID: Insert your Cookie Pool ID; it is available when creating or editing a cookie pool at the cookie pools editor.

Record User Activity in a Tracker

Record User Activity in a Tracker

When triggered, this action will execute your Tracker's actions. To configure it, you will need to fill in the following details:

  • BMS Account ID: Your 12-digit BMS account number.

  • Tracker ID: Insert your Tracker ID; it is available when creating or editing a tracker at the trackers editor. You can also use a variable from your website that brings your Tracker ID when called.

  • Event ID: Insert the variable you have identified as the Event ID you want to capture.

  • Custom Data: If you have configured custom data fields in your BMS Tracker, add them here.

Count Event in a Catalog

Count Event in a Catalog Action

When triggered, this action will load your Catalog's pixel into your website. To configure it, you will need to fill in the following details:

  • BMS Account ID: Your 12-digit BMS account number.

  • Event: Select the event you want to capture from the drop-down menu.

  • Catalog ID: You can either insert your catalog's ID or a variable from your website that brings the ID when called.

  • Product ID: Insert a variable from your website that brings the product ID when called.

Include Tag Container

Tag Container Action

When triggered, this action will load a Tag Container into your website. To configure it, you will need to fill in the following details:

  • BMS Account ID: Your 12-digit BMS account number.

  • Tag Container ID: Insert the BMS Tag Container ID.

  • Custom Data: If you have configured custom data fields for this tag container, add them here.

Additional Information

Each e-commerce site or website has its own particularities. To configure Google Tag Manager correctly, it is important to be aware of these details. You can learn more about some of these e-commerce platforms in the links below:

Check out these articles to learn more about how your website or e-commerce platform works, and the names they use for events, product identifiers, etc.

Last updated

Was this helpful?