Shopify e-commerce dataLayer for GA4 and GTM

Introduction

This repository is an adaptation of this one. I changed the event names and adapted the objects to Google's predefined schema. You can find more information here and here to configure your Tag Manager.

References

• Data Layer
• Shopify Liquid Variables cheat sheet
• GA4 Events
• GA4 Objects schema

Tag Manager

Add your Google Tag Manager ID (GTM-XXX) ad the end of the dataLayer-allPages.js file. If you are going to copy the GTM code from your account remember to remove the <script> tags. Within this repository you will also find a Tag Manager container that has and event that fires on these e-commerce events: view_item_list|view_item|add_to_cart|view_cart|begin_checkout|shipping_method|payment_method|purchase|search|remove_from_cart.

Additional events are:

• first_time_visitor fired if a user lands on your website for the first time
• blog fired on every blog page also pushes post author, post's creation date and title
• logState fired on each page, pushed website general info and customer info (do not import sensitive data into Analytics),
• homepage fired on your website's homepage
• 404 fired if a not found file/page is visited, pushes the URL path

Data Layer

The data layer is an object used by Google Tag Manager and gtag.js to pass information to tags. Events or variables can be passed via the data layer, and triggers can be set up based on the values of variables.

Integration

Keep note that this is a base template that attempts to exploit Shopify’s data rendering capabilities and create an ease of integration for dataLayers that can be reused across all Shopify sites. Nonetheless, each site could carry variations that may not be completely compatible with this template. It is highly recommended to review the entire implementation and make your own configurations if needed.

Installation Option 1:

If the Checkout page cannot be edited, use this option. ( Checkout page edits are only available on Shopify Plus. )

Assets	Integration Type	Asset Type
theme.liquid ( or your primary theme template )	Modification	Layout: Online Store > Themes > ... > Edit HTML/CSS > Layout > theme.liquid ( or primary theme template )
purchase	Modification	Admin Setting: Settings > Checkout > Order Processing > Additional Pixels & Scripts
dataLayer-allPages	Creation	Snippet: Online Store > Themes > ... > Edit HTML/CSS > Snippets > ( will create Snippet in instructions )
Google Tag Manager	Modification	Layout: Online Store > Themes > Snippets > dataLayer-allPages.liquid. Add your GTM-XXXX ID at the end.

Create the dataLayer-allPages snippet ( use exact naming and casing! )

• Create a snippet called dataLayer-allPages and copy over the provided dataLayer-allPages.js file in the newly created snippet. Instructions on how to create a snippet can be found here.
• In the code, navigate to the Dynamic Dependencies section and make any necessary changes.

Add the code to the layouts

• Within the theme.liquid layout, place this include snippet {% include 'dataLayer-allPages' %} right before the closing </head> tag
• Within the confirmation page admin settings, copy over the provided checkout.js code.( Remember, add your GTM ID as in the dataLayer-allPages file )

Prerequisite Library

• These are already included in the dataLayer build.

Installation Option 2:

If the Checkout page can be edited, use this option. (Checkout page edits are only available on Shopify Plus.)

Assets	Integration Type	Asset Type
theme.liquid (or your primary theme template)	Modification	Layout: Online Store > Themes > ... > Edit HTML/CSS > Layout > theme.liquid (or primary theme template)
checkout.liquid	Modification	Layout: Online Store > Themes > ... > Edit HTML/CSS > Layout > checkout.liquid
dataLayer-allPages	Creation	Snippet: Online Store > Themes > ... > Edit HTML/CSS > Snippets > (will create Snippet in instructions)
Google Tag Manager	Modification	Layout: Online Store > Themes > Snippets > dataLayer-allPages.liquid. Add your GTM-XXXX ID at the end.

Create the dataLayer-allPages snippet ( use exact naming and casing! )

• Create a snippet called dataLayer-allPages and copy over the provided dataLayer-allPages.js file in the newly created snippet. To create a snippet watch this video.
• In the code, navigate to the Dynamic Dependencies section and make any necessary changes.

Add the code to the layouts

• Within the theme.liquid layout, place this include snippet {% include 'dataLayer-allPages' %} right before the closing tag
• Within the checkout.liquid layout, place this include snippet {% include 'dataLayer-allPages' %} right before the closing tag

Prerequisite Library

• These are already included in the dataLayer build.