Do you want to collect data that explains the behavior of users who visit your Shopify website?
You can track and analyze all the audience movements by installing Google Tag Manager in your Shopify store.
In this guide, we’ll learn how to install Google Tag Manager in Shopify and then also configure the new Google Analytics 4 to the system.
🚨 Note: If you’re new to Google Tag Manager, check out our in-depth Google Tag Manager tutorial and master all the basics.
Here is an overview of what we’ll cover:
- Adding Google Tag Manager in Shopify
- Installing snippets into Google Tag Manager
- Testing the installation of Google Tag Manager
- Installing Google Tag Manager on the Thank You page
- Installing Tags with Google Tag Manager
- Testing if Google Analytics 4 is installed & firing correctly
So, let’s start!
How to Add Google Tag Manager in Shopify
You can add Google Tag Manager to Shopify by configuring the snippets of codes extracted from the Google Tag Manager into your Shopify account.
The first requirement is to have a Google Tag Manager container. We have created one for demo purposes, and it’s empty.
From there, you need to have access to your Shopify store. This is because you’ll need to open and modify the theme files directly through Shopify.
Once the theme files are ready, you need to find the appropriate location to install the codes within the Google Tag Manager interface.
Start by clicking on the button for your GTM account.
You’ll find two snippets of codes, “snippet 1” and “snippet 2”, that you can install on the GTM pages.
Additionally, you can also find both of these snippets by navigating from Admin → Install Google Tag Manager.
Upon clicking on Admin, you’ll find both of the aforementioned snippets of codes, which you will then install in Google Tag Manager.
Next, you’ll configure the “snippet 1” in the <head> section of the HTML page and “snippet 2” in the <body> section.
Open the Admin section of the Shopify backend to install the two snippets.
Installing Snippets Into Google Tag Manager
Navigate to Online Store → Themes → Actions → Edit Code.
By following these steps, the Edit code option will allow us to install the code. It is important to note that this is a one-time process.
Navigate to the theme.liquid file within the base HTML code that appears on the screen after you click on Edit code.
Next, we’ll copy the “snippet 1” and add it to the <head> of the page. The “snippet 1” will be placed directly below the <meta> sections at the top of the code.
Next, we’ll install “snippet 2” by placing the code in the body of the HTML code.
Scroll to the portion of the code where the <body> section begins. This code may be situated in slightly different locations depending on the code of each website.
To make it easier on yourself, search the code for the word body. Once you find it, paste our second snippet exactly under the <body> text within the code.
Once done, click Save to keep the changes you made to the code.
Now, we’ll need to implement the code into our theme file.
Testing Your Installation of Google Tag Manager
Let’s open Workspace in Google Tag Manager. From there, we’ll click on Preview to check our installation.
If your Google Tag Manager is comparatively new and you don’t have any Tags or versions already set up, you won’t be able to access the Preview option.
However, you can create an initial version by clicking on the Submit option.
You can add an initial name to the version and then publish it.
You’ll now be able to access the Preview mode. This will lead you to Google Tag Assistant.
Add your website address to the URL section and click on Connect.
If the Connected pop-up message appears on your screen, then you have installed Google Tag Manager correctly.
With the Tag Assistant, you’ll see entries denoting the number of recent visits to your website.
Let’s try to open another page on the website. In another tab, Google Tag Assistant will register new entries for the page we visit next.
You can also choose various products and items on your webpage to verify your installation.
Every time you open a different page, Tag Assistant will track it on its interface.
At this point, we have successfully installed Google Tag Manager on most of the pages on the Shopify website.
Next, we’ll also add Google Tag Manager to the Thank You page.
Installing Google Tag Manager on Thank You Page
Open the backend of the Shopify website and navigate to Settings → Checkout.
You should see a section titled Additional scripts. It is located below the section about the status of order processing. The content within the Additional scripts section will appear on the order status page as a confirmation when the user places an order.
Therefore, this will be the section where we’ll configure our Tag codes for the two snippets.
We’ll copy and paste “snippet 1” and “snippet 2” in their respective order. Place the copied text into the box below the Additional scripts text.
Click on Save once you’re done.
Let’s see how the code works!
We’ll open a product on our website, and click on Add to Cart. Then, we’ll also click on View Cart.
Let’s now open the Tag Assistant to see the collected data.
We can see that the activities relating to the Shopping Cart are being tracked in the Tag Assistant.
Let’s go back to the cart page and click on Check Out.
This will lead you to the page that requests your contact information and payment details.
This type of page is restricted to the Google Tag Manager. As such, the Tag Assistant won’t be able to track the movements when it comes to this page.
You’ll also notice that your Tag Assistant debugger will disappear during this period.
However, you can utilize the Shopify Plus Store feature if you want to edit the checkout files. You can also use other relevant stores to track this information. But currently, it’s not possible for this specific setup.
Let’s proceed with our order. Fill in your contact information and payment details to confirm your order.
Next, you’ll be redirected to the Thank You page. The Tag Manager will connect again.
Additionally, you’ll also see that Tag Assistant has tracked the recent activity of the Thank You page on its interface.
With this setup, we have installed Google Tag Manager on the Shopify website. Google Tag Manager tracks the majority of Shopify pages, except for checkout pages.
There are multiple ways to configure this setup. You can install the codes differently in your theme files, or you can use a plugin, as well as many other similar methods, to configure the setup.
However, this is the most successful method we have found so far.
As the next step, let’s also install the first Tag with Google Tag Manager in Shopify. This Tag is known as the Google Analytics 4 Tag.
Installing Tags with Google Tag Manager
Open your Google Analytics account to set up the GA4 Tag.
Add the property’s name and select the appropriate currency. Then, click on Next.
You can fill up the other information, but currently, for demo purposes, we’ll skip that and click on Create.
As this is a web-based store, we’ll click on the option of Web.
We’ll input the URL of our website as our medium is the web. Let’s also add a stream name.
Furthermore, the option for Enhanced measurements will be active. We’ll keep it as active.
This is because it will be able to track many movements automatically, including Page views, Scrolls, Outbound clicks, Site search, Video engagement, and File downloads.
Once done, let’s click on Create stream.
We’ll be able to view the Web Stream details if the configuration is correct. Copy the Measurement ID code from the details section.
Next, we’ll open our Google Tag Manager account. Let’s create a new Tag.
Choose Google Analytics GA4 Configuration as the Tag type and paste the Measurement ID code that we copied earlier into this space.
For the trigger, we’ll choose an All Pages trigger. This is because we want to deploy the Tag on all of our website pages.
Add a name to the Tag and click Save once done.
Let’s see how the Tag works!
Testing if Google Analytics 4 Is Installed & Firing Correctly
We’ll open the preview section to see how the Tag works.
It will redirect you to the website page that you have connected to the Tag Assistant.
If the configuration is correct, you’ll already be able to see a Pageview event on the Tag Assistant interface.
Let’s also see how it works in Google Analytics.
We’ll open the debug point of view from the home screen of Google Analytics and refresh the page.
This may take some time to load. Meanwhile, you could click on various options directly on your website so that you can produce data that will then populate the screen.
Once the data loads, we can see that it registers as a page_view event whenever we open a page.
If you click on the specific event, you’ll also see the data sent over to Google Analytics for that particular event.
Let’s also open a web page and scroll to the bottom in order to generate a scroll event.
We’ll see that the scroll event appears on the interface in real time.
Moving forward, you’ll be able to use this information in various other reports in terms of Google Analytics as well.
But before that, don’t forget to submit the current version that you have created. Doing so will make the changes live on your Shopify store and keep them in place in the future.
Add a Version Name and click on Publish.
So, that’s how to install Google Tag Manager and Google Analytics 4 for your Shopify store.
This is extremely useful when it comes to automatically tracking and analyzing events. This process doesn’t even require us to create multiple Tags or triggers either. It’s very straightforward and simplistic.
Additionally, if you have multiple websites, you can also choose to facilitate additional tracking on your system by setting up cross-domain tracking with Google Tag Manager.
Have you set up form field tracking? Check out our guide and learn how.
Have you used Google Analytics 4 for website tracking yet? What other user movements did you track with this method? Let us know in the comments below!