Using Tag Managers
Last updated
Last updated
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:
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.
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>.
After installing the GTM codes, you will be able to test your website to ensure the installation was done correctly.
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.
GTM provides several types of triggers to capture different user actions. Here are the most commonly used ones in e-commerce tracking:
Page View: Activates when a page loads.
Click: Activates when a specific element on a page is clicked, such as an "Add to Cart" button.
Form Submission: Activates when a form on the page is submitted.
Custom Event: Activates based on custom JavaScript events, which are useful for complex interactions that don't have direct GTM triggers.
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.
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.
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).
Create the Trigger in GTM:
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.
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).
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).
Create a Page View 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.
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.
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:
Create a Custom Event 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.
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.
There are two variable types available in GTM:
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.
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).
Built-in Variables
Select the variables you want to enable by checking their boxes (e.g., Page URL, Click URL, Click Text, Form ID).
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.
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:
Create the Data Layer Variable in GTM:
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).
Test: Use GTM’s Preview mode to test that the variable correctly captures the product ID.
Example 2: Creating a URL Variable
URL Variables allow you to capture data from the URL of the page, such as tracking parameters (utm_campaign) or specific page paths.
Choose Variable Configuration and select URL.
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.
If you choose Query, enter the Query Key (e.g., utm_campaign).
Save the variable with a descriptive name, like URL - UTM Campaign.
After creating variables, you can use them to make tags and triggers more dynamic.
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.
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 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.
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.
Select Custom HTML from the list.
On the HTML field, paste the pixel code you need to install, on the example, a product added to cart pixel was used.
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.
Select the triggers that will control when this tag will be activated.
Name and save your tag.
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: How to use GTM on Nuvemshop
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.
Click on and then to start setting up your trigger.
Click on and then to start setting up your trigger.
Click on and then to start setting up your trigger.
In the Built-in Variables section, click on .
In the User-Defined Variables section, click on .
In the User-Defined Variables section, click on .
On the Tags Page click on to add a new tag and then on to start configuring it.
Click on to access a preview of your page with the tags installed and debug them if necessary. (This step is optional)
Click on to submit your changes to the live version of your website.
