Implement Google Tag Manager on Shopify Checkout

Add Google Tag Manager to Shopify Checkout #

Adding Google Tag Manager (GTM) to your Shopify checkout page can help you track key customer actions. By using GTM, you can manage third-party tracking pixels easily. Here's a step-by-step guide to add GTM to your Shopify checkout.

"Adding GTM can help track customer actions effectively during the checkout process."

Step 1: Prepare for Google Tag Manager Setup #

First, make sure you have a Google Tag Manager account. Log in to your Shopify admin panel. Go to Online Store > Themes. Find your current theme and click Actions > Edit code.

In the theme files, locate the header section, usually named header.liquid. You'll insert the GTM container code here.

Step 2: Insert Google Tag Manager Code #

To add GTM, open your Google Tag Manager account. Click Admin, then Install Google Tag Manager to get the container code. Copy the code block for the head section.

Remove the HTML tags (e.g., <script></script>) from the code block. Insert the remaining code into the header.liquid file. This will ensure that GTM is loaded on your checkout page.

"Inserting GTM code into the header ensures tracking starts as soon as the page loads."

Step 3: Configure Tracking Events #

Subscribe to customer events and push these events to GTM's dataLayer. For example, you can track when a customer completes checkout by adding the following code:

analytics.subscribe("checkout_completed", (event) => { window.dataLayer.push({ event: "checkout_completed", orderId: event.data?.checkout?.order?.id, currency: event.data?.checkout?.currencyCode, price: event.data.checkout.totalPrice.amount, }); });

This code pushes order details to the dataLayer, allowing GTM to track the purchase.

Step 4: Save and Test Your Changes #

After editing the code, save the changes. To verify that GTM is working correctly, use the Google Tag Assistant Legacy Chrome extension. Open your Shopify store, enable the extension, and trigger events you want to test.

Keep in mind that using both GTM and Shopify's Google Analytics integration can cause duplicate tracking. Be careful to avoid adding the same tags twice.

Get Professional Help #

If you're unsure about editing theme code or configuring tags, a Shopify CRO agency can help. Small errors in code can lead to tracking issues, which may impact your store's data accuracy. For a thorough check of your tracking implementation, consider getting a Shopify website diagnostics review.

Our Shopify Consultation page offers assistance for setting up custom tracking solutions. You can also explore our Shopify Development page for expert help with advanced customization.

Conclusion #

Adding Google Tag Manager to your Shopify checkout is a great way to improve tracking and understand your customers better. Properly tracking checkout events can provide insights to help improve conversions. Be sure to monitor your tracking setup after making these changes.

To get even more out of your store, consider our Shopify CRO Audit services. We can help you enhance the user experience and increase conversions across your Shopify store.