How to Load GTM on Shopify Checkout and Thank You Pages (with screenshots)

Shopify’s new checkout and thank you page extensibility will deprecate the direct loading of pixels. Instead, the customer events section will be utilized for tracking data, a process requiring JavaScript knowledge.

This article covers how to load Google Tag Manager and marketing pixels on Shopify’s Checkout and Thank You pages  the technical approach.

Need a non-technical option? Elevar can streamline your integration in less than 5 minutes. Check out how Elevar can help.

Configuring Shopify Custom Events Pixel

This technical approach involves configuring Shopify’s customer events pixel, customizing code per checkout type, and adding product-level data to the datalayer.

Alright! Let’s configure your Shopify’s Customer Events Pixel!

1. Open Shopify settings in the bottom left-hand corner
2. Select “Customer events” from the left-hand navigation
3. Click “Add custom pixel” from the top-right corner

4. Name your pixel for internal purposes, for example, “Training – Checkout Tracking”
5. Remove Shopify placeholder text
6. Input your custom code

Yay! Now, it’s time to start writing that script!

This link will take you to the Shopify help center page about all the different types of events you can send.

On this page, you will find an example of a Google Tag Manager custom pixel that shows how to send data to GTM.

This script contains a few events that we can “listen to” and pass that data to Google Tag Manager using the data layer.

Data Layer is something that GTM understands – it’s the language of GTM.

Pulling Data through Shopify to the DataLayer

You’ll need to pull data through Shopify to the data layer so Google Tag Manager can use it to send to all the marketing destinations.

Vishal Gor, Director of Services at Elevar, has done the heavy lifting for you!

For the remaining steps you will be use this custom Checkout Tracking code which will track:

• Checkout started: triggers when the checkout page loads
• Add contact information: triggers when the user adds contact information
• Add shipping information: triggers when the user adds shipping information
• Add payment information: triggers when the user adds payment information or selects a payment method and clicks “pay now”
• Checkout complete
• Product level data

Customizing the Script for Your Shopify Store

You’ll need to make two edits to customize the script for your Shopify store:

1. Copy the relevant code for your store, either a three-page checkout or one-page checkout (see below).
2. Update the data layer GTM ID with your own GTM ID. Open your GTM container and find the blue ID in the top right corner.

Shopify Three-Page Checkout

For the three-page checkout, load the provided GTM code at every step: checkout_started, add_shipping, add_payment_info, and checkout_completed.

Shopify One-Page Checkout

For one-page checkout, load the GTM code on the first event, checkout_started, and the last event, checkout_completed.

You will not use the snippet for adding shipping or payment information. This is notated in the custom code in pink.

BEFORE YOU CONTINUE: did you update the datalayer GTM ID with your own GTM ID?

Keep going! You’re in the home stretch.

Connect Your Pixel and Double Check

Follow these final steps to ensure your pixel is properly connected and your tracking is active.

9. Click on Save in the top navigation
10. Click on Connect at the bottom of the code container
11. Navigate to “Customer events” in the left-hand navigation.
12.  Pixel name should have the Status column as “Connected” highlighted in green, indicating that your tracking is active and all the GTM events are loading on your checkout and thank you pages.

Using Product Data in Marketing Pixels

If you have a marketing pixel that requires product data, the custom pixel code shared in this tutorial includes customization that will send product information to your GTM container.

However, you’ll need to configure a custom JavaScript variable in Google Tag Manager to use the product-level data in your marketing pixels. This requires JavaScript knowledge; please speak with your developer or contact Elevar for a fast-track, non-technical solution.

Questions about Checkout Extensibility?

As a Shopify Plus preferred partner, you can depend on Elevar to support your transition to Checkout Extensibility.

Elevar seamlessly integrates with Checkout Extensibility to load Google Tag Manager and fire checkout datalayer events using the Customer Events Setting.

Plus, Elevar differentiates between first-time subscriptions and one-time orders and identifies new vs returning purchases server-side.

Learn more about how Elevar can support your transition to Checkout Extensibility.