How to ensure Shopify upgrade works for your brand

Shopify’s new checkout may not have generated the same level of excitement as Google’s third-party cookie U-turn, but the potential impact on web and analytics tracking shouldn’t be underestimated.

Plenty of Shopify Plus clients have been upgrading to the “Checkout Extensibility” but equally we’ve seen clients not understand the impact that has had on media measurement and web analytics.

Here’s an outline of what to be aware of to ensure this doesn’t happen to you.

The analytics and measurement community have had plenty of hurdles to clear in the past few years, with consent banners (and consent mode) coming to the fore, the migration to GA4 and, of course, incessant noise around the cookieless world.

And early last year, Shopify announced it was moving to Checkout Extensibility, a system that enables ecommerce brands to better customise their checkout experience, more easily integrate with payment providers like Shop Pay and access features like one-page checkout and discount stacking. It’s only available for those on Shopify Plus.

This is a forced move, and brands have been required to upgrade their Information, Shipping and Payment page by August 13 2024, then upgrade Thank You and Order Status pages by next August, 2025. It sounds great. Benefits to the brand, and benefits to the user.

So what’s the catch?

The often-neglected secondary consequence of this is that Shopify is changing the way that tracking works, as part of this.

Previously all web analytics and marketing tags sat in the checkout.liquid theme file for these pages, and checkout.liquid is getting deprecated at the same time as the deadline outlined above.

Without setting up the equivalent tracking, you will find that you migrate to Checkout Extensibility…and lose all your media and analytics tracking.

So, what’s the solution?

Custom pixels. Any third-party code snippet – think Google Tag Manager or a dataLayer – needs to be added in a custom pixel. It can appear to be complicated but there are plenty of step-by-step guides (here’s ours), that help guide you to what needs to be configured and where.

To summarise, here’s what needs to be done:

1. Create a custom pixel within Shopify

2. Install Google Tag Manager, or your preferred tag management code, into the pages you’re migrating to Checkout Extensibility, via the custom pixel you just set-up

3. The final step is to implement the GA4 (or equivalent) ecommerce datalayer and set-up the tracking in GTM as necessary. For GA4, you can use Shopify’s reserved functions, although there are also third-party apps that will do this for you too. We recommend using Shopify’s own functions – there’s a comprehensive list of all the actions you want to track, covering:

a. Product or collection viewed

b. Product added or removed from cart

c. Cart viewed

d. Then everything from checkout started through to adding various details and, finally, checkout completed

4. QA and check the tracking works!

That will get you set-up with basic ecommerce tracking on the actions that you configure. And provide a springboard for future, additional tracking.

This dataLayer will also enable you to ensure your media tags fire as you’d expect too.

We’d also recommend changing the URL that Shopify produces by default. The default URL created by these custom pixels is unique…and ugly. It’s long and has custom identifiers in it that make it not human-readable.

We recommend setting up a virtual pageview by over-riding a specific field, again using the dataLayer.

It’s not the world’s most exciting topic. But it is important. It’s something we’re seeing big brands underestimate. It’s one of those simple but necessary jobs. A bit like trimming your nails.

Yikai Wang is analytics director at Hookflash