How to Install Google Tag Manager On Shopify — Guide in Few Minutes

Introduction

Tags have become important in these times as part of every digital marketing strategy due to their use. They are not similar to the hashtags we use on social media, but they are much different.

What are tags?

Tags are snippets of code or tracking pixels captured by third-party tools. The tag refers to elements you want to track on a web page or platform.

In order to make informed business decisions, you must gather the necessary data. Also, tags are essential for business owners and marketers to determine which campaigns are producing results.

Some of the common tags are:

• Google Analytics Universal Tracking code or GA4 Tracking Code
• Google Adwords Remarketing code
• Google Ads Conversions Tracking code
• Heatmap Tracking Code 
• Facebook Pixel
• Custom HTML Scripts
• Cookiebot and other GDPR data privacy scripts

There is a thing about tags: managing them can be a lot of hectic tasks when you’re doing it manually. 

Imagine you have more than a hundred events to manage, and tracking them is necessary as only then you will be able to understand whether your efforts are being paid off well.

At this time, you will need a handy and useful tool that reduces the work’s complexity. 

So do we really have a tool that can fix our problem? 

The answer is yes! 

This can be done with the help of Google Tag Manager, which can help us manage various marketing tags around various pages of your Shopify website like your Shopify checkout pages, the home page, product page, order status page, etc.

Google Tag Manager uses the tags to determine what to do. Using tags analysis can be refined by categorizing events, page visits, and visitors with this small piece of code that is inserted in the source code.

In this article, we will learn what Google Tag Manager is and how to set up Google Tag Manager.

What Is Google Tag Manager (GTM)?

Google tag manager is simply a tag management tool that helps you manage all tags in the Shopify store. This efficient tag management system helps you implement it and also update it from time to time.

The Google tag manager on the Shopify website will allow you to put code snippets directly into your pages.

As we earlier discussed how tagging is a complex process. Developers need to manually set up tags for all your pages, from the first visit to the thank you page and the form submissions. With Shopify Google Tag Manager, this process is way more streamlined and organized.

 They can help you with e commerce tracking, conversion tracking, and event tracking, use the tracking code and provide a detailed analysis.

Now that you’ve understood the process, it’s time that we learn about how we can implement these tags.

Steps Before Installation Of Google Tag Manager In Shopify

Before we proceed with our methods, the very first task we have to complete is to get installed google tag manager and log into the Google Tag Manager account. 

Here Shopify doesn’t usually possess any Google Tag Manager, so here you will first have to integrate it into Shopify.

This can be done either in a way by manually installing Google Tag Manager, or you can choose to install the GTM code snippets to your existing theme, or you can use the Easy Tag ‑ GTM & Data Layer, which is a Shopify app.

You can get the Easy Tag through the Shopify store, and later you can add the same in Google Tag Manager.

Now let’s go further with the installation of Shopify Google Tag Manager into your Shopify store.

Installation Of Google Tag Manager Into Shopify Stores

For a successful Google Tag Manager setup, you have to follow the given below process:

1. Firstly, you will have to go to Tag Manager and log in with your existing Google Account.
2. You will have to create a new account and fill in the required details here.
3. In the Container Setup section, fill in your container name. 
4. Then on the “Target platform,” you will have to select “Web.”
5. Click on the “Create” button. This is what your GTM container will look like when you complete the given steps, as shown in the image below:

Now we proceed toward the process of setting up the Google Tag Manager.

#1 Method: Add Google Tag Manager Shopify Via Google Analytics

This is one of the effective ways through which you can add Google Tag Manager to all of the pages of your Shopify website easily by following the steps mentioned below.

Step 1: Copy the Universal Google Analytics Script

First, you will have to login into your Google Analytics account and copy your Universal Google Analytics Script by following the below-given path:

Google Analytics > Property> Tracking Info> Tracking Code

Step 2: Paste Your Google Analytics Script

After copying the Google Analytics script, it’s time you paste it into the Shopify Admin and later click save:

Shopify Admin > Sales Channels > Online Store > Google Analytics 

Step 3. Copy Google Tag Manager Snippet

The next step is to copy the Google Tag Manager snippet from your GTM admin. Keep one thing in mind that you’re neither opening nor closing <script> </script> tags.

Step 4. Paste Script In Your Shopify Account 

Now you will have to paste the script that you copied in the earlier stage in your Shopify account by following the below path instructions:

Account > Sales Channels > Online Store > Google Analytics > Additional Google Analytics Javascript

After you have followed the above process, you are done! 

With this, you now don’t need to add the script to any other place, as the above process will work on all pages of your Shopify store.

#2 Method: Implement Google Tag Manager Into Shopify Theme Files

Step 1: Copy The GTM Code

The first step in the process is to implement code by copying the GTM code.
But before that, you will have to install the Google tag manager. If you have already installed one, log in to your GTM account. Later, copy the first part of the GTM code. 

Step 2: Login To Shopify Store

You will have to login into your Shopify store with the Admin Id in order to have full access to the store.

If you don’t know how to reach the login page please do as given below; 

https://www.websiteurl.com/admin

Note: URL will change as per your domain and after domain, you need to type/admin. You will reach the log-in path.

Step 3: Click On The “theme.liquid” File

To navigate the “theme.liquid” file, you have to first click on the Online Store drop down menu and go to “Themes.”

After that, navigate the ‘Edit HTML/CSS’ under the Actions drop down menu and try to find a theme.liquid and then click on it. 

Step 4: Paste The GTM Container Code

Before you proceed with pasting the GTM container code and making any code changes, do not forget to backup your theme file. 
After creating the backup, when you are able to locate the liquid File and in its head section of the HTML Code, paste the first code snippet of the Google Tag Manager container code.

Step 5: Paste The Second Part Of the GTM Snippet

If you think you’re done, then wait; you have to get done with pasting both the code snippets. 

So now you will have to paste the second code snippet just after opening the html tag, which is the body tag (<body> in the same File, and after that, do not forget to click save.

Verify Your Google Tag Manager

Before we end up with the whole process, let’s ensure that everything is working correctly. 

So before that, we’ll need to download the Google Tag Assistant extension for Google Chrome in order to run the test tag. 

You will now be able to activate it by clicking on the Google Tag Assistant icon. Once you’re done installing the Refresh the page and click on the Google Tag Assistant Chrome Extension again. 

Keep an eye on the Google Tag Manager container’s status. The green color indicates that the Google Tag Assistant is properly installed. 

The presence of yellow, gray, or red indicates there is a problem with the installation of Tag assistant. You can find out what the problem is by clicking on the icon.

Once you’re done with that, we will now check whether all the tags are fired successfully. 

1. First, you will find the “Preview” button in the top right corner of your GTM Workspace, and clicking on that will enable it.
2. Next, you will have to go to your website URL. At the bottom of your browser, you should see the GTM debug console displaying the tags that have been successfully fired, as show in the image below :
3. Here you’ll be able to evaluate which of the tags are being fired successfully on the page and which ones are not fired. Once you have verified everything works as expected, you can start adding more tags to your container.

Ending Note On Setting Up Google Tag Manager

Here we covered how you can set up the Google Tag Manager in Shopify. This way, you will be able to achieve a quick and easy setup and manage your Google Tag Manager to ensure that the important information is tracked effectively. 

The process is simple and easy, but it is possible that you may not be able to handle it on your own, but a little help can always make it easier for you to implement the process. 

So if you are one who is facing trouble with this, you can always reach us at Huptech Web, as here, we have experienced Shopify developers that are well versed with all the technicalities related to Shopify, who can help you get done with setting up the Google Tag Manager for your Shopify store.