DEV Community 👩‍💻👨‍💻

Cover image for How to setup Google Analytics 4 on Shopify without an app
Erman Küplü for Analyzify

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

How to setup Google Analytics 4 on Shopify without an app

Google Analytics 4 is the new default option for Google Analytics. The analytics community has been waiting for this version for a long time. However, as with every new product, it has some internal and external problems.

I will start with a quick intro - but feel free to jump into the steps below if you want to go to act immediately!

Update (01.04.2022) We have improved the solution and now you will be able to set up Google Analytics 4 including the product view e-commerce event. We have also added product-level data into the purchase event. See the details below on Introducing Shopify GA4 Kit section.

GA4 is using a different approach to data collection compared to Universal Analytics (UA), the old version. UA's core function was page views and events would come on top of that. We would use event tracking for specific actions such as form submission, registers, video interaction, button clicks, and so on. In GA4, even a page view is an event! It might not sound like revolutionary change but it actually is. We plan to write another in-depth post on the main differences between GA4 and UA.

One of the core problems of GA4 is the integrations. The platforms (such as Shopify, Squarespace, Weebly, and so on) are not ready for Google Analytics 4 yet. While GA4 has great features for e-commerce stores; it is very hard to implement it at the moment - especially the ecommerce features. And you can already imagine it makes no sense to use Google Analytics 4 without the sales data for a Shopify (or any kind of) store. There are several apps in the Shopify App store that helps with the setup. However, there was no free, working solution or tutorial as of last week. The tutorials and articles didn't include a way to track e-commerce data.

That's where we came up with the idea of making a free tool that will allow people to set up Google Analytics 4 on Shopify stores - and also send the e-commerce data.

I wanted to create content also on dev.to for this wonderful community.

Introducing GA4 Kit [2022 Update]

We have created a completely new GA4 implementation solution for Shopify merchants. We call it: Shopify GA4 Kit.
It includes data layers, pre-built and ready-to-go GTM container and in-depth tutorials. Visit the following link to get most up-to-date information: GA4 Setup on Shopify

You can also follow the step-by-step tutorial through the following video:

Should you use GA4 and how?

Google suggests using the old one (UA) and the new one (GA4) together. While you start collecting data and taking advantage of GA4, you still have the UA's known interface and advantages. A quick guide to how to do that:

For the new accounts:

You will see Google Analytics 4 as a default option if you want to create an account now. However, there is an Advanced Setting that allows you to create both GA4 and Universal Analytics. Go to the "Create Google Analytics Account" screen and find the "Advanced" setting - kindly check the GIF below:
Creating Google Analytics 4 and UA accounts together

For the existing accounts:

Upgrade your current account. It won't make you lose any data, don't worry about it. It is actually not "an upgrade"; it will just create a new GA4 account attached to your existing UA account.
Upgrading your current account
After you do this, you will find your new GA4 account; under your properties at the top menu.

Step 1: Get the GA4 Global Tag

As you have the account now, it is time to get the new global tag and insert it into your Shopify store.
Find your new GA account in your Google Analytics, and then > Click Admin > Data Streams > Click the Tag > And then find Global Tag and copy the full code
Copy GA4 Global Tag

Step 2: Insert the tag into Shopify's main theme file

The global tag should be on every page. You should insert that into the Shopify theme's main file: theme.liquid - right below

.
Shopify Admin > (left bar) Online Store > Themes > Actions (near your active theme) > Edit Code --- And then find theme.liquid. It should look like this >
Adding GA4 tag into Shopify theme

Step 3: Get your checkout tag from Analyzify GA4 Wizard

Everything was standard until now. Now we have come to the existing part. Our team has prepared a special code block to be inserted and rendered in your Checkout/thank you page. It includes Shopify's shortcode for order confirmation details such as order ID, revenue, etc - and also GA4's Purchase Event tag including your measurement ID.
Go to our free tool > Analyzify GA4 Wizard for Shopify, fill the simple form, and get your code. It should look like this >
Analyzify Google Analytics 4 Shopify Wizard Copy the code and move to the next step.

Step 4: Paste the code into Shopify's Checkout screen

As this is an e-commerce purchase code, it should be rendered when someone makes a purchase. Shopify allows us to add additional scripts into "Order Processing" and "Thank you" pages. Go to Shopify Admin > Settings > General > Checkout and then find Order Processing > Additional Scripts - and paste it there.

Step 5: Verify - Make Sure!

All good! It should be working perfectly now if you followed the steps properly. You can wait for some purchases to happen in your online store so that you can check if data flows into your new GA4 account. You can also follow this video tutorial to make a test purchase and see if the related events are being triggered and shown in Google Analytics 4.

I hope you find it useful and feel free to let us know if you have any questions or face any issues.

Top comments (12)

Collapse
ekuplu profile image
Erman Küplü Author

April 2022 Update.

We have created a completely new and enhanced solution: youtube.com/watch?v=hag6ucGxj5E

Make sure to check it out to set up:

  • GTM
  • Data layers
  • GA4 e-commerce events on Shopify.
Collapse
protekteknoloji profile image
PROTEK Teknoloji

Great app, will definitely try it. And thanks for the tutorial 👍

Collapse
ekuplu profile image
Erman Küplü Author

Thank you! And let me know if you have any problems.

Collapse
searchjayro profile image
Jay Ro

Hey,

So is the technique implementable on Shopify Standard or I should have Shopify Plus for it?

Collapse
ekuplu profile image
Erman Küplü Author

Hey! Sorry for the late reply. You don't need a Shopify Plus. And make sure to check out latest video and solution: youtube.com/watch?v=hag6ucGxj5E

Collapse
amkniss profile image
amkniss

Thanks so much! Great article. W

Collapse
ekuplu profile image
Erman Küplü Author

Thanks! Make sure to check our latest solution youtube.com/watch?v=hag6ucGxj5E on setting up GA4 on Shopify including the product-level data and events.

Collapse
ekuplu profile image
Erman Küplü Author

Thanks for your nice words. Checkout our Youtube Channel (youtube.com/channel/UCSa3aE3zQmSRA...) as well. A brand new Google Analytics 4 Course is on its way!

Collapse
dengalich profile image
Den Galich

Erman! Thanks for the solution! Is it possible to push purchase items along with the purchase event?

Collapse
ekuplu profile image
Erman Küplü Author

Hello, Den!

It is definitely possible. It is a little more complex and needs the product items to be added into the checkout dataLayer in this format developers.google.com/tag-manager/...

It is challenging because there will be multiple items and you will need to loop them in the checkout code.

In Analyzify, we are using global dataLayers, Google Tag Manager, and passing everything GTM. You can check out our product apps.shopify.com/analyzify

Have you seen the course we just published - youtube.com/playlist?list=PL92pEp_...? In that course, we are adding GA4 and everything through GTM with dataLayers. The products are still not included in the course but you can add new dataLayer elements and adjust yourself if you are a little familiar. Especially after watching the course.

I hope I could help!

Collapse
omercan profile image
Omercan Celikler

Is it only working on the purchase event?

Collapse
ekuplu profile image
Erman Küplü Author

Purchase + Page views.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.