GA4 Shopify DataLayer

References

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

18 replies on “GA4 Shopify DataLayer”

Hey Ruturaj – Great post! Do you have a link to GTM-InitialSetup.json ?

Hi Steve, I have added the GTM-InitialSetup.json in the GitHub Repository!
Repo Link: https://github.com/ruturajjadeja/GA4-Shopify-DataLayer
GTM-InitialSetup.json Link: https://github.com/ruturajjadeja/GA4-Shopify-DataLayer/blob/62c1c948651faa379247dac7529f3412376b9189/GTM-InitialSetup.json
🙂

Amazing!! Thanks so much – I really appreciate it.

I’m trying to deploy the datalayer on my shopify ecommerce, but I don’t have advanced knowledge. Could you help me understand what would be these required changes in the Dynamic Dependencies section? Thank you very much.

Hi Heitor,
It depends on the dynamic and non-dynamic cart capability on your site. If you have a non-dynamic cart i.e the page reloads on addition/removal of products, try to set the values as:
dynamicCart: null,
cart: true,
removeCart: true
and also add appropriate classes, IDs, or selectors in customBindings.

Good day! I simply want to give you a huge thumbs up for
the excellent info you have got right here on this post.
I’ll be coming back to your site for more soon.

Thank you, glad it was helpful.

Hey Ruturaj – The site I am working on has ‘Add to Cart’ buttons on the product listing pages and on the product details pages (in the recommended products). Is there a way to get the Add to Cart event to fire in these instances and pass over the correct product detail parameters?

Hi Steve, I would try to add appropriate classes in the cartTriggers property of the customBindings object.

I can get the add to cart event to fire, but when add to cart is used from the recommended products section on a product detail page, the parameters being passed are from the main product, not from the product being added to the cart.

On the listing page, the add to cart is doing something similar where it is passing the product detail parameters from the first product on the page, not from the product that is being added to the cart.

Is there any way to get the parameters passed in from the selected product rather than the first product on the page?

Thank you, much appreciated! 🙂

Great post, Have solution for non plus

Hi Jackie,
Thanks but unfortunately this method only works for Shopify Plus stores.

Hi,
Thank you for your great solution. However, I am using basic shopify package, and does not have checkout.liquid in backend. How can I implement the datalayer in checkout pages to track initiate checkout and purchase event.

Agreed with Asad. How can you implement a begin_checkout tracking on shopify basic with GA4?

Hi Ruturaj,
This is amazing. Will it work in my shopify basic store? How can I use this on my basic store? Anything for the order status page? Please let me know. Thanks in advance!

Hi ruturaj, it’s a great document. But I am new in Shopify and I want to implement dataLayer in Shopify I don’t know where to push that code of dataLayer according to GA4 event schema. Would you help me with this.?

Hello ruturajjadeja21,
This code purchase event is no working https://github.com/ruturajjadeja/GA4-Shopify-DataLayer

please talk me how can setup Order status page
Learn more
Add tracking scripts and other customizations.