LawlietNick/GA4-Shopify-DataLayer

Shopify E-Commerce dataLayer for GA4 and GTM

References

• Data Layer
• Shopify Liquid Variables Cheat Sheet
• GA4 Events
• GA4 Objects schema
• Simo Ahava E-Commerce Guide for GA4

GTM Pages & Variables Import

You can import the GTM-InitialSetup.json container that sets up most of the GTM Triggers and Variables for you.

Tag Manager

Add your Google Tag Manager ID (GTM-XXX) at 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

Installation:

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.
• 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