Magento Tutorials

An Easy Way to Add Google Tag Manager Into Magento 2

Google Tag Manager (GTM) is a great tool for non-devs to add and manage third-party tags on their website, and a lot more. Tags are basically code snippets that you insert in your pages’ HTML. When you don’t have access to your site’s code, GTM is your friend. With GTM, you can:

  • Easily install third-party tracking code (Google Analytics, Facebook Pixel, Hotjar, etc.)
  • Add custom tracking events to track all kinds of user behavior on your site (like click a button or view a video)
  • Insert HTML or Javascript code blocks to any web pages (this may break your site if done wrong so be careful!)

In this guide, we introduce a very easy way to add GTM into your Magento 2 website, without installing any extension.

Step 1: Get GTM installation code

First you’ll need a Google Tag Manager account.

Login to GTM using your email. Click Create Account if you don’t already have one.

GTM create account

The “Add a New Account” screen consists of two parts: Account Setup and Container Setup.

A Container is where you store all of the tags, triggers and variables. Each Container is associated with one website, so normally you’ll only need one Container in your account. In case you have a multi-website Magento backend, you can create separate containers for each website.

Enter necessary information for your Account: Account Name & Country.

For Container name, you should use a descriptive name which will help you recognize which website is associated with this Container. This is helpful later on when you may have multiple Containers in your account.

Under Target platform, select Web. Then click Create.

GTM setup an account screen

The GTM Terms of Service Agreement pops out. Click Yes to agree.

GTM terms of service

Then you’ll be redirected to your Container Workspace with the GTM installation code already pops up on screen. This is the code we’ll be using in the next step so do not close this tab yet.

GTM installation code

*Note: At anytime when you want to access this code again, simply go to Admin > Install Google Tag Manager.

admin gtm install

Step 2: Insert Google Tag manager installation code into Magento

Open your Magento backend in another tab, go to Content > Design > Configuration.

Design menu

The Design Configuration screen lists all of your websites, stores and store views. Click Edit on the Website scope (you should add GTM at Website scope so that it will apply down to all stores and store views).

Magento 2 edit website

On the website config page, go to HTML Head section. Copy the upper code from your GTM account (the part where it says “Paste this code as high in the <head> of the page as possible”) and paste it into Scripts and Style Sheets field.

Then, go to Footer section. Copy the lower code (the part where it says “Additionally, paste this code immediately after the opening <body> tag”) and paste it into Miscellaneous HTML field.

Magento 2 header and footer code

Then click Save Configuration.

You will need to clear your cache for the changes to apply. Go to System > Cache Management. Select Configuration and Page Cache, then click Submit button to refresh those cache.

refresh page cache magento 2

Step 3: Check your installation

*Important: Before testing your GTM implementation, make sure you disabled AdBlock on your browser.

To check if your GTM implementation is working, click Preview button to turn on the Preview mode.

GTM preview button

A new tab will open. Enter your website URL into the popup and then click Start.

start Tag Assistant

The URL you entered will be opened in a new window. In the current window, if you see the message “Connected!” as in the below screenshot, then your GTM implementation is working.

GTM connected

*Note: Although this is a legit and easy way to add Google Tag Manager to Magento 2, we recommend using an extension for this. Here are some of the best extensions for this purpose:

These extensions will help push many e-commerce events to the data layer so you can use those events for analytics and many things else.

Dom

A knowledge craver who always strive to be wiser everyday.

Subscribe
Notify of
guest

1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Chandrasekhar Sah
Chandrasekhar Sah
1 year ago

It is extremely important to set up valid tracking in your Magento eCommerce development store. By using Magento 2 extensions, you can also avoid the confusing usage of more than one extension. After installing it, you will be able to see some promising growth and an increase in your Magento store productivity. This is the essential extension for your eCommerce store. Don’t miss out on the power of the Magento 2 Google Tag Manager extension at all.