GA4 Shopify DataLayer


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


AssetsIntegration TypeAsset Type
theme.liquid (or your primary theme template)ModificationLayout: Online Store > Themes > … > Edit HTML/CSS > Layout > theme.liquid (or primary theme template)
checkout.liquidModificationLayout: Online Store > Themes > … > Edit HTML/CSS > Layout > checkout.liquid
dataLayer-allPagesCreationSnippet: Online Store > Themes > … > Edit HTML/CSS > Snippets > (will create Snippet in instructions)
Google Tag ManagerModificationLayout: 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”

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.

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?

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *