How to Set Up GA4 (Google Analytics 4) on Shopify

There is only a short time left until Universal Analytics (UA) is phased out.
There may be some businesses that have not yet implemented Google Analytics 4 (hereinafter referred to as GA4) on Shopify.
In this article, we will explain how to set up GA4 using Shopify's Google Channel app, which was recently officially supported, as well as how to set it up using Google Tag Manager (GTM) and the Shopify Pixel.

In this article, we will assume that the GA4 property and GTM container have already been created. This article is based on information available at the time of publication (April 2023). Please note that Shopify, Google Analytics, and Google Tag Manager may be updated.
Some content requires knowledge of Javascript and Liquid. Please configure it at your own risk.

Using the Google Channel app

GA4 is now officially compatible with Shopify from March 2023.
Although it is officially supported, instead of entering the Tag ID in the designated place on the management screen as in the past, you will use the Google Channel app.

Google channel app settings

That's all it takes to connect Shopify and GA4.
In addition to the standard events of GA4, the following e-commerce related events can be acquired. This is the bare minimum you need.

If you just want to get basic e-commerce data, the easiest and most convenient way is to use the Google Channel app.
Please note that at the time of publication, e-commerce events other than the events mentioned above (such as view_item_list or view_cart) are not supported, so if you want to measure them, you will need to use the GTM method explained below or the Shopify pixel.

Use Google Tag Manager

By using Google Tag Manager , you will be able to obtain events that could not be obtained using the Google Channel app.
Officially, Google Tag Manager is only supported with the Plus plan, but it can also be used with the regular plan.
It is also possible to use GTM for all measurements without using the Google Channel app. We also provide support for setting up GA4 with a focus on this measurement method.

Shopify settings

For Shopify Plus

Install Tag Manager (Admin > Install Google Tag Manager)

For non-Shopify Plus users

Google Tag Manager settings

Open the target container in Google Tag Manager and click Tags > New to generate a tag.

Creating a new tag

Set the tag with the following contents:

Tag name : Optional
Tag type : Google Analytics: GA4 settings
Trigger : All Pages
Measurement ID : G-XXXXXXXXXX
*The measurement ID can be found in GA4 > Settings > Data Stream > Measurement ID.

Let's check the operation from the GTM preview. If the page_view event is generated when the page is loaded, it is successful.
At this point, you will be able to measure standard GA4 events, but e-commerce related events will require separate configuration. Once you publish GTM, data will be sent to GA4.

Configuring e-commerce related events

Here are three of the most important e-commerce events to track:

Shopify settings

view_item
Store the product data viewed on the product page in the dataLayer along with the GTM trigger event

add_to_cart
Store the product data added to the cart on the product page in the dataLayer along with the GTM trigger event .

purchase
Store the purchased product information and payment information on the purchase completion (thank you) page in the dataLayer along with the GTM trigger event .

*Insert this process into the additional scripts field for checkout mentioned above.

Reference: Getting view_item product information and storing it in dataLayer

 <script>
 var items = [];
 var item = {
 'item_name': " {{product.title}} ",  
'item_id': " {{ variant.sku }} ",
 'item_brand':' {{product.vendor}} ',
 'item_category': " {{product.collections[0].title}} ",
 'item_variant': " {{variant.title}} ",
 'item_name': " {{product.title}} ",
 'quantity':1
 }
 items.push(item);

 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'view_item',
 'ecommerce': {
 'items': items
 }
 });
 </script>

E-commerce related events have required parameters set for each event.
Check out our Google Analytics guide for more information.

GTM settings

view_item
Output the dataLayer value together with the event information (view_item) to GA4

add_to_cart
Output the dataLayer value together with the event information (add_to_cart) to GA4

purchase
Output the dataLayer value together with the event information (purchase) to GA4

Reference: view_item GTM tag settings

GTM view_item tagging

With the August 2022 update, it is now possible to omit parameter settings on the GTM side. The image above shows the items settings, but you can omit describing the parameters by checking Send e-commerce data in the advanced settings.

Processing diagram for each platform when using GTM

For both events, Shopify will process the GTM trigger event and event-related parameters into the dataLayer . GTM will then output the dataLayer parameters along with the e-commerce event to GA4.

Use Shopify Pixel

The Shopify Pixel is a tracking pixel provided by Shopify that was released in October 2022. By using the Shopify Pixel, you can link with various tracking tools including GA4 to collect user behavior data.

Shopify admin > Settings > Customer Events > Add Custom Pixel if new

Setting up your Shopify pixel

Initialization (Adding pixels)

Insert the GA4 global site tag. The pixel must be written in JavaScript, so convert it to the following format. (Change the measurement code G-XXXXXXXXXX to that of the site you want to measure.)

 const script = document.createElement('script');
 script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX');
 script.setAttribute('async', '');
 document.head.appendChild(script);

 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'G-XXXXXXXXXX' );

Subscribe to customer events using the analytics.subscribe() API

 analytics.subscribe('page_viewed', event => {
 // イベントに応じた測定用のコードを追加
});

Events prepared by Shopify will be fired without any special trigger settings (event content must be written).
Inside each analytics.subscribe(), you will write code to retrieve the e-commerce event tags and parameters.

Currently scheduled events

Reference: view_item event pixel code

 analytics.subscribe("product_viewed", async (event) => {
 gtag("event", "view_item", {
 currency: event.data.productVariant.price.currencyCode,
 value: event.data.productVariant.price.amount,
 items: [
 {
 item_id: event.data.productVariant.sku,
 item_name: event.data.productVariant.product.title,
 currency: event.data.productVariant.price.currencyCode,
 price: event.data.productVariant.price.amount,
 quantity: 1
 }
 ],
 }); 
});

Only the minimum required parameters are described. For other parameters, please refer to Shopify's official help (Customer Event Reference) .

Use an external app

You can also configure GA4 using various configuration apps available in the Shopify app store.
In many cases, measurement is possible by linking with GTM. Initial settings at the time of implementation are usually done automatically or by the app vendor, so merchants do not have to do anything. In most cases, a monthly fee is charged, so be sure to consider the cost-effectiveness before using it.

summary

How to Set Up GA4 for Shopify

How to set it up	Features
Use the Shopify Google Channel app	Easy to set up Limited to measurable e-commerce events
Use Google Tag Manager	High setting difficulty Event settings can be freely made
Use the Shopify Pixel	Somewhat difficult to set up Limited e-commerce events that can be measured
Use an external app	Setup is done for you Separate monthly fees apply

This time, we introduced four ways to set up GA4 on Shopify. Since the difficulty and flexibility vary depending on the method, check in advance what information you need for site analysis and set it up in the most optimal way.
We also undertake the setup of GA4 on Shopify and analysis services. Please contact us via the inquiry form for any inquiries.