DEV Community

Cover image for Introducing Shopify GA4 Kit - Setup GA4 on Shopify
Erman Küplü for Analyzify

Posted on • Edited on • Originally published at dev.to

Introducing Shopify GA4 Kit - Setup GA4 on Shopify

We have prepared an open-source & completely free toolset for Shopify merchants to help them set up GA4 using data layers, Google Tag Manager, and GA4.

This beginner-friendly toolset also provides a downloadable pre-built GTM container that includes the major Google Analytics 4 tags.

Change the GA4 measurement ID and kick things off right away.

Note: This is the updated and enhanced version of our tutorial & code blocks from last year.

2023 August Update
Here are the latest sources about Shopify <> GA4 Integration:
Set up Google Analytics 4 on Shopify with the Official Integration [2023] on Youtube

Set up GA4 on Shopify in 5-mins using Analyzify [Complete Ecommerce Integration] on Youtube

What will Shopify GA4 Kit do?

Shopify GA4 will help you set up GA4 including all the e-commerce features you need for your store.

You don’t need to use any app to secure all that: Just use the code blocks, tutorials, and step-by-step guides we provide and get:

  • Google Analytics 4 main reports,
  • Product-level ecommerce reports,
  • Transactions with the product-level data

How does the Shopify GA4 Kit work?

We have prepared a list of assets for you to set up GA4 on your Shopify store without any app or professional support.

You will see many step-by-step tutorials and video guides to get everything done with ease.

At this point, we should kindly remind you that this is a Do-It-Yourself process which means you will need to get involved with codes.

That’s nothing to worry about, though. It’ll be all about copy-pasting, uploading the assets we provide, and doing the adjustments.

Simply put, you will be:

  • Creating GTM & GA4 accounts if you don't have any,
  • Setting up GTM,
  • Adding data layers (product + purchase),
  • Downloading the Shopify GA4 Kit's GTM container,
  • Importing the GTM container into your GTM account,
  • Changing the GA4 measurement ID on the GTM container,
  • Activating e-commerce reports on GA4,
  • Validating the whole setup.

The Shopify GA4 kit will provide you with a GTM & GA4 setup that is decked out with many important reports and capabilities.

Steps to set up GA4 on Shopify using Shopify GA4 Kit

There are several potential methods to set up Google Analytics on Shopify. We prefer executing a setup through GTM because that will give you a great amount of flexibility allowing you to use the triggers and variables for other tags as well.

Here are the steps to follow during the installation. You can also follow our related, in-depth tutorial on Youtube: link

Step 1: Add GTM on Shopify
Our setup works through Google Tag Manager. So, you need to set up GTM on your Shopify store first. You can see how through a separate tutorial here.

Step 2: Get Shopify Purchase data layer (inc. product-level data)
Copy the data layer code to paste it into the checkout scripts on the next page later on.

Visit the following page and get the most up-to-date Shopify purchase data layer. Make sure to copy it properly and move to the next step.

Step 3: Add the data layer to the Shopify checkout page
Paste the code right below your GTM container on Shopify Admin > Checkout > Additional Scripts.

Add the data layer to the Shopify checkout page

Step 4: Add the product data layer to the Shopify product pages
It is a multi-layered step. You need to

  • Create a new, empty snippet on your theme
  • Render that snippet in your theme liquid file
  • Copy & paste the code block that you see below and SAVE.

Copy the the data layer from the following page: Shopify product data layer

The data layers are perfectly ready for the GTM container. You can check this short video-tutorial if you need a hand here.

Step 5: Download Shopify GA4 Kit's GTM Container(Free)
Download our pre-built Google Tag Manager that includes the following tags:

  • GA4.01 - All Pages: Google Analytics 4 global configuration tag. It also functions as the "Page View" tag.
  • GA4.02 - Event - View Item: E-commerce event for product page views. It sends the product-level data into GA4 and allows product-level reports to function.
  • GA4.03 - Event - Purchase: Core of all e-commerce reports. It sends order-level and product-level data into GA4 and helps with the attribution.

It also includes all related triggers and variables.

Visit the Shopify GA4 Kit page and download the most up-to-date container there.

Step 6: Import GTM Container

Now navigate to Google Tag Manager > Admin > Import and then import the container. You should choose the following options just like you see in the screenshot:

Import Shopify GA4 GTM Container

Step 7: Add your GA4 measurement ID
Now get your GA4 measurement ID from your Google Analytics 4 > Admin > Data Streams and then update it in the GTM container.

Update Shopify GA4 measurement ID

Note: You can see the complete Youtube video tutorial starting from for the following steps 17:15 - How to Set up Google Analytics 4 on Shopify

Step 8: Pause other GA4 tags on GTM
If you tried to do a GA4 setup earlier, you should pause the previous GA4 tags that you added earlier so as not to cause any double counting.

Step 9: Validate your GA4 setup using GTM's preview mode
A double-check is always a great idea in the world of data analytics. Follow the video below and double-check your setup using both GTM’s preview mode and GA4’s Debug View.

Step 10: Complete your tests and publish
If you pass all the tests, you are ready to publish the GTM container and make the setup live. You can run a test purchase just like we have done on the following video.

I hope all went well for you and you could set up Google Analytics 4 on your Shopify store.

This post is created for Dev.to community as a shorter and more simplified version of our complete tutorial. Sources: GA4 on Shopify - Complete Youtube Video Tutorial

We have also uploaded the tutorial to Vimeo Pro for the ones who want to have an Youtube-free experience: Watch on Vimeo: Shopify GA4 Kit Tutorial

Top comments (7)

Collapse
 
melissap profile image
Melissa P. ッ

Why do you prefer setting up Google Analytics 4 with GTM? Why not directly with Global Site Tag?

Collapse
 
ekuplu profile image
Erman Küplü

GTM gives you flexibility and ease. You can use the same triggers and variables for other tags as well.

Let me explain with an example. You want to add a Google Ads Conversion on your Shopify store. You can re-use almost all the set up that we have made here for that tag.

I've explained this concept more in-depth on this video: youtube.com/watch?v=XHDjkrXVgFU

Collapse
 
melissap profile image
Melissa P. ッ

Thx.

Collapse
 
ekuplu profile image
Erman Küplü

I'm happy to answer any questions you should have!

Collapse
 
ekuplu profile image
Erman Küplü
  • We have also uploaded the tutorial to Vimeo Pro for the ones who want to have an Youtube-free experience: vimeo.com/695986583
Collapse
 
crypto_frank_16 profile image
Crypto Frank • Edited

Hi. Does it works with add to cart event ? Thanks.

Collapse
 
grace764 profile image
grace764

Hello Erman,
Total value shows an error when total amount having comma. Also would like to know how can we create custom event for Facebook if there's multiple item id in purchase