Post a job, get started with SoftwareSupp and get free $100.
Post a job

Adding Google Tag Manager to Shopify checkout page

Mark Tristan Patena

Shopify /​ Shopify Plus Expert

Shopify Partner & Front-end Developer​ with +11 years of experience and over 200 realized projects.

5 min read

written by

Mark Tristan Patena

Shopify /​ Shopify Plus Expert

A Shopify Partner & Front-end Developer​, with a very keen eye for design. I specialize in store setup​,​ theme customizations​,​ custom features and app integrations. I also do marketing automation and email campaigns for customer retention.

I have developed over 500 websites for individuals​,​ small and medium companies​,​ and large corporation across the globe. Not only that, but I have also learned the ins and outs of successful online marketing​,​ which I use to help me craft my websites.

My clients are so happy with my work that I have a tremendous amount of referral business​,​ and I have gained a 100% satisfaction rating from my clients.

This guide is a part of the below ultimate guides:
How to Start an Online Store using Shopify and integrated software

10 Best E-commerce Software Solutions — The Ultimate Guide to Growing Your Online Store

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

Mark Tristan Patena | Shopify ​/​ Shopify Plus Expert

A profile view of Mark Tristan Patena.

“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.”

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.
An interface showing a correct implemention of Google Tag Manager
Code snippets copied into theme.liquid

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.

An inteface showing the result of tag analysis.
Customer's checkout page
Share Article

written by

Mark Tristan Patena

Shopify /​ Shopify Plus Expert

A Shopify Partner & Front-end Developer​, with a very keen eye for design. I specialize in store setup​,​ theme customizations​,​ custom features and app integrations. I also do marketing automation and email campaigns for customer retention.

I have developed over 500 websites for individuals​,​ small and medium companies​,​ and large corporation across the globe. Not only that, but I have also learned the ins and outs of successful online marketing​,​ which I use to help me craft my websites.

My clients are so happy with my work that I have a tremendous amount of referral business​,​ and I have gained a 100% satisfaction rating from my clients.

Post a job and start work with certified experts.

Post a job

You might also be interested in these