Shopify dataLayer (Checkout Extensibility) with GTM

Recent changes on Shopify #

Checkout Extenstibility #

The migration to Checkout Extensibility has brought some consequential changes to the way tracking is carried out on Shopify.

The most important change is the implementation of a sandboxed JavaScript environment for the checkout and thank you pages.

To obtain functional tracking, it is now necessary to listen to customer events to find out what’s happening on pages present in the sandboxed environment.

Migration to Checkout Extensibility also brings changes to the way pages can be customized in the sandboxed environment.

flowchart LR
    subgraph abc [Customizable via <a href='https://shopify.dev/docs/api/checkout-ui-extensions' target='_blank'>Checkout UI extensions</a>]
        subgraph Sandboxed JavaScript environment
            D[Checkout page]
            E[Thank you page]
            F[Order status page]
            D-->E
            E-->F
        end
    end
    subgraph Customizable via theme.liquid
        subgraph Theme
            A[Collection page]
            B[Product page]
            C[Cart page]
            A-->B
            B-->C
        end
    end

Historical customization features #

Current personalization features #

Application for GTM and dataLayer events #

Click here to download the app to install GTM and DataLayer on your Shopify store.

Make sure you’re logged in to the right store, then click Install.

Once the application is installed you’ll be taken to this page. Click Continue to start configuring the application.

In the next step, check the Enable GA4 DataLayer with Standard eCommerce Events checkbox.

Next, check the Include GTM.js on Site Pages checkbox, then fill in the identifier of your GTM Web container (GTM-XXXXXXX).

You now need to activate the Shopify application in your store theme. To do this, click on the Enable Addingwell Script button.

Then activate the Addingwell GTM application in the theme editor. Save and return to the Addingwell application configuration.

A message is displayed in the application to confirm its activation in the theme.

We now add a custom pixel by copying the code displayed in the application.

Then go to Settings > Customer events and click on Add custom pixel.

Name your custom pixel with the name of your choice.

In the Customer privacy section, check the checkboxes as in the following screenshot.

Then paste the code you’ve copied from the Addingwell application and click Save.

Then click Connect to connect the custom pixel to the sandbox.

Congratulations, you’ve finished configuring the Addingwell GTM & DataLayer application. The DataLayer is now available in your theme and also in the sandbox pages (checkout + thank you page).

Debugging dataLayer events #

In theme #

To debug dataLayer events in the theme you can type dataLayer in your web console or use a browser extension. You’ll find more details in this blog post.

In the sandbox #

To view the dataLayer in the sandbox, you need to open the web console in the custom pixel you’ve created. To do this, click on top in your web console.

A drop-down menu appears, select the window named web-pixel-sandbox-CUSTOM-{id}-LAX then type dataLayer in the console.

FAQ #