Adding Google Tag Manager to Shopify checkout page

‍Google Tag Manager, or shortly saying GTM, is a free management system that allows to track activity across your website or app. It’s easy to install, control and change various data-tracking codes. Using it can provide you insights that can help to avoid bugs, improve the customer’s journey and boost your online store’s efficiency.

Adding Google Tag Manager to Shopify checkout - project’s details

The goal of the project: Adding Google Tag Manager to the Shopify checkout page and order confirmation page, so it allows Google Ads conversion tracking

Project’s scope:

• Testing the tag installation
• To confirm checkout pages to track
• To report what Google Tag Manager events to add
• Monitoring Google Tag Manager for 3 days
• To add GTM to the Shopify checkout page

Project time: 7 hours

“I have developed 500+ websites for individuals​,​ small or medium companies​,​ and large corporations across the globe. What I most enjoy about my work is helping people to craft the online presence of their business. The creative challenge​,​ together with the technical challenge​,​ is very rewarding.” Mark Patena, SoftwareSupp Freelancer

What are the benefits of using Google Tag Manager

• it can improve your site speed
• you get access to a preview mode that is useful for testing and debugging
• it provides faster implementation of new features
• you have a full confidence in the data you collect
• it’s a free, quick and easy tag deployment process, for example in AdWords Conversion Tracking, AdWords Remarketing and Google Analytics

Google Tag Manager integration to track conversions

“Our Google Tag Manager is correctly working on the website​,​ however it doesn't work in checkout.” - Oakywood, the Client

The client was seeking for some assistance on the flow of their Google Tag Manager. For some reason, the tag didn’t reach the checkout page. I first checked the Google Tag inside Shopify and I found several duplicate tags which were outdated. On the front-end, one necessary tag was running. However, upon transitioning to the actual checkout page, the tag was gone. Oakywood provided me a new tag they wanted to use, so I could remove the other one. The fact that they use Shopify Plus, gave me the extra privilege to modify the current checkout.liquid template.

A short guide how to add Google Tag Manager to Shopify Plus store

1. First, make sure you have access to checkout.liquid file. If, for any reason, you don’t have access to this file in your theme code – contact Shopify Plus Support to get it.
2. Once you have it, use Shopify’s integration for Google Analytics and Facebook Pixel instead of using them with Google Tag Manager. 
3. Copy the code snippets that are provided by Google Tag Manager into your theme.liquid and checkout.liquid the files.

New global site tag – project's result

A tag is a snippet of code that usually is designed to send information from the website to a third party, such like Google Analytics or Google Ads. In this project, an approach to the best Shopify practice has been implemented up to the order confirmation page. It took 3 days to properly assess and test the new global site tag (gtag.js). After that, we officially got the confirmation that the tracking is working and data being tracked are sending correct values.