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

If you see an orange box “Now Previewing Workspace” as below, then you’ve successfully turned on Preview mode.

GTM preview mode

Open your Magento frontend on a new tab (or refresh it if it is open already).

If you see the GTM debug pane showing up below the website content, then your GTM implementation is working! Now you can start adding tags to your website via GTM.

GTM debug pane

*Note: Although this is a legit and easy way to add Google Tag Manager to Magento 2, we recommend using an extension for this. There are free extensions on the market that helps you add GTM to Magento 2 and more importantly push many e-commerce events to the data layer so you can use those events for analytics and many things else.

Is it helpful?

Avatar

A knowledge craver who always strive to be wiser everyday.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments