Table of contents
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.
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.
The GTM Terms of Service Agreement pops out. Click Yes to agree.
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.
*Note: At anytime when you want to access this code again, simply go to Admin > Install Google Tag Manager.
Step 2: Insert Google Tag manager installation code into Magento
Open your Magento backend in another tab, go to Content > Design > Configuration.
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).
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.
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.
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.
A new tab will open. Enter your website URL into the popup and then click Start.
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.
*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:
- Google Tag Manager for Magento 2 by Mageplaza ($84)
- Magento 2 Google Tag Manager Extension by WeltPixel ($249)
- Google Tag Manager for Magento 2 by MagePal ($89.00)
- Magento 2 Google Tag Manager (GTM) by Scommerce Mage ($170)
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.
