How to add Google Tag Manager (GTM) to Magento 2 store

Google Tag Manager (GTM) is a free Google marketing tag management tool that allows you to update and track codes automatically to get more accurate analytics data. As managing tags manually is complex and time-consuming, this solution is provided to handle everything automatically for better evaluation and decision-making processes.

But how can you experience all these benefits to the fullest? The answer is to add Google Tag Manager to Magento 2. When this tool is integrated into your backend, you can gain more control over your store tags.

In this article, I will review and explain more about Google Tag Manager for Magento 2. Let’s learn how you can add Google Tag Manager to Magento 2 and configure it via a third party!

Table of contents

• How to add Google Tag Manager to Magento 2 store
• How to configure Magento 2 Google Tag Manager
  • General Configuration
  • Configure Google Tag Manager
  • How to Create New Google Tag Manager Tags
• What is Google Tag Manager?
• What is a tag?
• How does GTM work?
• Google Tag Manager vs. Google Analytics
• Why you need Magento 2 Google Tag Manager
  • Centralize Google Tag management system
  • Enhance the site performance
  • Reduce cost in the long term
  • Generate reports and analytics with Google Analytics
  • Create automatic remarketing campaigns with Google Adwords
• The main components of Google Tag Manager (GTM)
• How to check GTM on your website
• FAQ
• Final words

How to add Google Tag Manager to Magento 2 store

It is possible for you to integrate this gadget without a middleman like an additional module. However, activating integration is quite a bothersome task when compared with installing a module. Besides, Magento 2 Google Tag Manager extension by Mageplaza also features with many more functionalities that await you to install to the store backend.

Step 1: Create a Google Tag Manager account

First off, before getting back to the Magento admin panel, you should register a Google Tag Manager account via this link here.

Then, input the required information for the registration process for your account.

You can set up the “container”. The container is a set of rules, tags and macros which is configured for a specific site. You should fill the container with your website’s domain name. For stores that have multiple store sites, you will have to create several containers. Also, you should set it as “Web” Container as you are running a website, not a mobile app. Then, click Create.

Step 2: Copy the snippet of the GTM install code

After that, you can click onto the section as follows:

Then, copy the code generated by the GTM system like below and paste it into each page of your store site.

Step 3: Get the Container ID

Finally, you can access the Admin section to collect Container ID to install in Magento.

How to configure Magento 2 Google Tag Manager

When you already add Google Tag Manager to Magento 2, now it’s time to configure the module:

General Configuration

You need to come back to the Magento Admin, choose Stores > Configuration > Mageplaza Extensions > Google Tag Manager. In the top field, select Yes in Enable field to activate the extension.

Configure Google Tag Manager

Next, select Yes in the second Enable field to enable the use of the Google Tag Manager feature which helps to update and control all tags on the site.

In the ID Variable Base On section: Select how the ID value of the product is displayed, either according to the product ID or product SKU.

For the Google Tag ID field, admins need to paste the paste container ID you got earlier on the Admin page to update some information on an event. The event can be set in category page, product page when adding to cart, remove from cart, order success, search, checkout default or checkout page of Single page Checkout extensions which help shorten checkout process to only 6 steps within a page and optimize the checkout process for customers.

If the field is left blank or filled with incorrect information, the Container ID will unable to display information in detail.

How to Create New Google Tag Manager Tags

Let’s get back to the Workspace page to create new GTM tags.

• Step 1: Click on New Tag in the left sidebar

• Step 2: Set up the tag with the necessary information

  • Tag configuration: Select a tag type to begin set up
  • Triggering: Choose a trigger to make this tag fire

Select the appropriate tag type (e.g., Google Analytics, Facebook Pixel)

Now, set up the tag configuration with suitable information based on your needs.

Set Triggers

Define when the tag should fire (e.g., page views, clicks).

If you want to add a new trigger, click on the + sign at the top right corner.

Then, choose the trigger type from the list given:

Page View

• Consent Initialization
• Initialization
• Page View
• DOM Ready
• Window Loaded

Click

• All Elements
• Just Links

User Engagement

• Element Visibility
• Form Submission
• Scroll Depth
• YouTube Video

Other

• Custom Event
• History Change
• JavaScript Error
• Timer
• Trigger Group

After choosing the trigger type, select the place where this trigger fires. Each trigger type brings individual settings to fire. Fill in the information required, and save it.

• Step 3: Save Tag

Note: If you are utilizing Google Tag Manager to control your Magento 2 enhanced ecommerce (Google Analytics), try to avoid duplicating your data!

Make sure to remove the current Google Analytics tracking code from your pages. Otherwise, the old GA code will still collect data, leading to the new GTM tag reporting with duplicate data. Particularly, to delete the tracking code, you need to click on Admin > Container Settings > More menu (as three vertical dots) > Settings > Delete. You will have 30 days to change your mind and restore the container. After that time, Google will permanently delete it.

Ensure you won’t make this mistake. After all, nobody wants to receive duplicated data, right?

How to check GTM on your website

The final step is to check whether GTM has been added by going to your site frontend. Then, open the home page > press CTRL + U to open the view source > press CTRL + F to find GTM > if you find gtm in the code like the image below, congratulations, you have successfully added gtm.

Another way is checking your Google Tag Manager account by clicking the Preview button in the Workspace.

Then you have to enter your site URL:

If everything is set up correctly, a message will be shown:

What is Google Tag Manager?

Due to the existing disadvantages mentioned above, Google Tag Manager(GTM) is a free tool provided by Google. This tool is very effective, as the management activities will all happen in the Google Tag Manager system rather than editing site code. The tools bring numerous valuable benefits:

• Help marketers to control the marketing campaign
• Reduce errors when creating and updating tags
• Deploy tags quickly
• Free you from having involved with Webmaster

In addition, the tool can work with both Google tags and non-Google tags, which can be related to Facebook Pixel, Bing UET, or other third-party JavaScript to your site using Google Tag Manager. Right after you add Google Tag Manager to Magento 2, you can set up Google analytics and other supportive tools to track and report the website traffic.

To learn more about third-party services integration, you should keep reading more about Magento 2 Google Tag Manager.

What is a tag?

Tags are snippets of code which is added to your site to collect information and send it to third parties. Tags play the role of the optimizer for your site marketing activities by measuring your site traffic with ease

For a normal site, there is an abundance of tags attached which needs to be managed by a complex amount of code. Managing tags is an activity that consumes a lot of time. As a result, managing too many tags can make admins feel overloaded when it always requires them to create new tags and update old ones.

The consequence of tag overload will damage your store revenue. Besides, it can delay the marketing campaign due to the time-consuming activities of tags management. It can put your campaign on hold for a few weeks or even months which prevents store opportunities to boost sales.

How does GTM work?

Based on Psyberware, the writer clearly clarifies the GTM process in 3 main stages: Firstly, the event is a condition that possibly can occur on a website. The second stage triggers a response when the set event happens. And, the tag will do certain actions on a third party site.

For example, when you activate an analytics tag when a user loads a new page, the customer clicks on webpages will be an Event that will match with Page Trigger. After that, the trigger will notify that the page is loaded to fire the analytics tag.

Google Tag Manager vs. Google Analytics

Google Tag Manager and Google Analytics are commonly used to track customer activities on websites, and both are usually mentioned together in articles. As a result, many people are confused and think they are the same. However, these are two entirely separate concepts.

Specifically, Google Tag Manager is a tool designed to gather information about user actions on a website, while Google Analytics is the module to analyze that data. After collecting the information, GTM will transfer it to Google Analytics for further data analysis results like conversion reports, engagement changes, sales analysis, etc.

Why you need Magento 2 Google Tag Manager

Despite the Magento 2 Enterprise edition has already contained Google Tag Manager, the Open Source version is NOT fully geared with this GMT. This defect can prevent you from getting the benefits that your store could have. However, you can consider to integrate it into your store sites with a Google Tag Manager module. The significant benefits can be named:

Centralize Google Tag management system

With the help of the Mageplaza Magento 2 Google Tag Manager extension, stores can enjoy managing tags directly in the store site system. All the messy tags will be generated and upgraded easily. By keeping all the information in one system, stores organize data with ease.

Enhance the site’s performance

Many codes being added to the source of store sites are one of the contributing reasons that slow down the page’s loading speed. And, a website with a slow loading page will increase the bounce rate, and lower conversion rate. If you want to prevent the issue in the first place or mitigate the disadvantage, an optimal solution is to add Google Tag Manager to Magento 2. With the assistant of the GTM codes, you can save more time for page loading by controlling all the script-tags and you only need to insert it into your sites. With a few seconds optimized for websites speed, your client expectation can be fulfilled and increase conversion rate.

Reduce cost in the long term

The simplified working process provided by GTM will help non-developers like store owners and marketers take the initiative to control the tags themselves. With less involved people, the store can save budget spending on hiring the developers. Time to maintain the extension and configuring basic codes will be a huge saving in the long-term operation. Even when hiring a developer who takes care of GTM settings, it enables ecommerce businesses to make a faster process and still generate your savings.

Generate reports and analytics with Google Analytics

Google Analytics (GA) is another free tool provided by Google with the aim to create reports, statistics on your websites. Despite Google Analytics and Google Tag Manager can work separately from each other, GTM can act as a middleman to simplify data analytics process. Setting up GA through GTM will bring many benefits to your ecommerce business:

• Simplify the code in place on your store sites
• Edit setting without development updates
• Set up advanced features easily like domain tracking
• Improves data accuracy by offering a more efficient solution for tag management

Overall, you can gain better performance when integrating two of these tools together. Or, you can simply implement Google Tag Manager extension which also features Google Analytics and Facebook Pixel.

Create automatic remarketing campaigns with Google Adwords

Google Adwords remarketing can be enabled when you add Google Tag Manager to Magento 2. Mageplaza Google Tag Manager extension includes Google functionalities that your store needs, and to optimize remarketing, it is essential to have an automatic system to track and display the relevant ads.
The adwords conversion tracking is useful for you to measure efficiency and build future marketing strategies.

The main components of Google Tag Manager (GTM)

Although Google Tag Manager requires a bit of time to get used to, it is still a user-friendly experience. The initial steps with GTM might seem complex because you need to learn new terms and adapt to its work architecture.

The GTM hierarchy is structured as follows: GTM account > Container > Tracking tag > Tag triggers.

• GTM account:

  Each Gmail address may have various GTM accounts. However, if you only need to manage your site, one account should be enough.

• Container:

  In the GTM account, you need to create a container - an entity that stores all tracking tags related to a specific data source. Containers can be configured for predefined target platforms, such as web pages, iOS apps, Android apps, AMP pages, or server-side. Though one container goes with one platform, you can include multiple containers in each account. In today’s blog, we will focus on containers for web pages.

  To install the container to your website, insert specialized code snippets into your site’s HTML layout. In short, you’ll embed two container code snippets in your site’s header and body sections.

• Tags:

  Once GTM code snippets are integrated into your site’s frontend, you can configure tracking tags in the GTM interface. A tracking tag is a code designed to transmit data when a predefined event happens, such as a customer clicking a button.

  Tags gather data using variables, with GTM offering 44 built-in variables for websites. Additionally, website owners can define custom variables using JavaScript and CSS, enabling them to track nearly any action on their site. GTM provides a library of predefined tag templates, or you can create your own templates.

• Triggers:

  Tracking tags rely on triggers to activate. Triggers are conditions that determine when a tag fires, such as a user clicking a button. Google Tag Manager offers trigger categories, including page view triggers, click triggers for element or link clicks, user interaction triggers for events like video views and form submissions, and an assortment of other triggers, including those for tracking JavaScript errors.

• Variables:

  Variables are additional information that GTM may require to activate a tag or trigger. They precisely specify what the tag or trigger should do.

• Workspaces:

  GTM facilitates multiple workspaces, allowing team members to collaborate simultaneously without overwriting each other’s work.

• Versions:

  Whenever you publish changes, GTM generates and records a new code version. This feature lets you review past and current modifications and revert to previous versions if necessary.

FAQ

1. What is the difference between GTAG and Tag Manager?

While GTAG is just an easy-to-use single tracking code, Tag Manager is a more complex tool that allows you to manage all of your tracking codes in one place. In reality, people tend to use Tag Manager more than GTAG.

2. Is it possible to track activities on my Google Ads account?

Absolutely yes! First of all, you need to create a Google Ads account. Next, go to the Google Adwords Conversion Tracking part in the backend of the Google Tag Manager module and click on the guide link.

3. How can I Add Google Tag Manager to Magento 2?

The first condition is installing the Google Tag Manager module. Then, go to Stores > Configuration > Mageplaza Extensions > Google Tag Manager > fill in the Google Tracking ID.

4. Where to find Google Tag Manager ID?

First, you need to sign in to Google Tag Manager with your Google account. Next, go to the Admin bar section and you will find the container ID (GTM ID) in the top right corner. Its typical format is GTM-XXXXXX. In case you haven’t got a Google account, please check our detailed instructions here.

5. Where to put the GTM code?

The best approach for installing Google Tag Manager code is to insert the

6. Does Google Tag Manager slow down my site?

Actually, one of many Google Tage Manager benefits is improving page speed by loading tags asynchronously and reduce the huge amount of source codes for Google Analytics and Adword.

7. Is the Google Tag Manager script necessary?

Yes! It is an indispensable part of initiating GTM. To implement GTM on a website, you need to insert a snippet of JavaScript code into the site’s HTML. This code activates GTM and establishes the data layer, an object that stores information used by GTM and other tools for tracking events and visitor data.

Final words

In a nutshell, Google Tag Manager extension provided by Mageplaza is the optimal solution which can help to reduce the number of the installed module. The module not only provides the function to manage tags for store sites but also provides Google Adwords, Facebook tracking, Google Analytics within this module. With 4 of these tools all included in the GTM extension, you can manage all of them through the site. Hence, if you find it difficult to add Google Tag Manager to Magento 2, Mageplaza support team will help you install the plugin to your Magento 2 store sites.