mageplaza.com
Get 15% off Mageplaza extensions & subscriptions! Use code HIMAY at checkout.

Add Google Tag Manager to Magento 2: Extension or Manual Installation

Vinh Jacker | 12-13-2019

The Most Popular Extension Builder for Magento 2

With a big catalog of 224+ extensions for your online 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!

What is Google Tag Manager?

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.

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?

Google Tag Manager process

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.

Benefits of Adding Magento 2 Google Tag Manager?

Google Tag Manager is a useful tool for Magento 2 store owners. One of its key functions is to keep all your tags in one location. However, it also offers several advantages below:

  • Track user interactions on your website, such as button clicks, form submissions, or video views.

  • Provide debugging features to ensure that your tags function correctly.

  • Control user access and permissions, enhancing security and encouraging collaboration within your team.

  • Seamlessly work with Google Analytics, allowing you to collect and analyze user behavior data.

  • Integrate with various content management systems (CMS), making it versatile for managing tags across different platforms.

How to add Google Tag Manager to Magento 2 store

There are 2 options to add Google Tag Manager to your Magento 2 store: with or without installing any extension. Each one has its own advantages, so you should pay attention to our detailed guidance below to find out the most suitable method.

Add Google Tag Manager to Magento 2 without installing a third-party extension

First, let’s learn how to add Google Tag Manager freely to your store, without using any extension.

To do so, you need to add your unique GTM code to your store theme.

The code is divided into 2 essential parts: Script and NoScript.

Now, you need to put these code snippets into 2 distinct phtml template head and body files as follows:

YourTheme/Magento_Theme/view/frontend/templates/html/gtm_head.phtml

<script>..</script> <!-- GTM code -->

YourTheme/Magento_Theme/view/frontend/templates/html/gtm_body.phtml

<noscript>..</noscript> <!-- GTM code -->

We also need to load the files correspondingly, using the default default.xml file.

YourTheme/Magento_Theme/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="gtm.head" before="-" template="Magento_Theme::html/gtm_head.phtml" />
        </referenceContainer>


        <referenceContainer name="after.body.start">
            <block class="Magento\Framework\View\Element\Template" name="gtm.body" before="-" template="Magento_Theme::html/gtm_body.phtml" />
        </referenceContainer>
    </body>
</page>

SPECIAL NOTE: Admins must run the deploy command after adding the files above.

And that’s it! The Google Tag Manager code is now added so that you can set up tracking and analyzing your Magento 2 store.

However, this method is quite complex, especially for those who have limits in technology understanding. Therefore, it’s only recommended that experts with many years of experience apply this way of adding GTM to the Magento 2 site.


Google Tag Manager

Google Tag Manager for Magento 2

Easily monitor store stats and adjust marketing tags and snippets with simple source code

Check it out!


Add Google Tag Manager to Magento 2 by using an extension

Instead of integrating this gadget with the hard way, it’s much easier for non-expertise businesspeople to add GTM on their own using an additional module. Besides, Magento 2 Google Tag Manager extension by Mageplaza also features many more functionalities that await you to install to the store backend.

Note: If you already have a GTM account, please skip these steps.

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.

Register a Google Tag Manager account

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

add a new 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 on the section as follows:

GTM snippet view

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

Code generated by CTM system

Step 3: Get the Container ID

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

Admin section

How to configure Magento 2 Google Tag Manager

When you finished adding 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.

general configuration

Configure Google Tag Manager

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.

Tag manager

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

Create new tags

  • 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

Set up tags

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

Choose a tag type

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

Set Triggers

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.

Choose a trigger

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

Choose Trigger type

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.

Trigger configuration

  • Step 3: Save Tag

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?

Mageplaza Google Tag Manager for Magento 2 special feature:

Remember that the Mageplaza extension provides a special feature that allows admins to export a JSON file. This file contains all the data necessary for merchants to import it to their GTM so that the system can automatically create tags, triggers, and variables that the module supports.

In case you’re too busy, or things are quite complicated, we are always happy to assist. Please take a look at our Install & Setup Google Tag Manager Service for more details.

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. Here’s how it should look like:

In the <head> tag

Head tag

In the <body> tag

Body tag

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

workspace preview

Then you have to enter your site URL:

url popup

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

connected messages

The main components of Google Tag Manager (GTM)

GTM main components

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.

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.


Google Analytics

Google Analytics PRO for Magento 2

A clear insight into shopping and behavior of customers with 5 advanced reports

Check it out!


Jacker

Hello, I'm the Chief Technology Officer of Mageplaza, and I am thrilled to share my story with you. My deep love and passion for technology have fueled my journey as a professional coder and an ultra-marathon runner. Over the past decade, I have accumulated extensive experience and honed my expertise in PHP development.



Related Post

Website Support & Maintenance Services

mageplaza services

Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.