Complete guide how to setup GA4 on Shopify

Step 7. How to implement GA4 view_item event in Shopify.

Published by

Oct 19, 2022

To be able to analyze in Google Analytics 4(GA4) traffic on your products pages and report for example which items are most popular you have to implement GA4 view_item event. Below, you will find instructions on how to do it using Google Tag Manager and data layer variables in Shopify.

Implement data layer variables in Shopify.
In this step we implement products data layer variables into Shopify template. These variables we use later in GTM to sent them to Google Analytics every time when user visit Shopify product page.

Let’s go to your Shopify Admin to edit your theme.liquid template. (Online Store>Themes>Edit your template code>theme.liquid).

Inside your section, before the part about GTM, paste the following data layer code:
```
{% if template contains 'product' %} 
window.dataLayer = window.dataLayer || []; 
window.dataLayer.push({ 
'event': 'view_item', 
'value': '{{ product.price | times: 0.01}}',  
'items':    [{   'item_id': '{{product.id}}',  
'item_name': '{{product.title}}',   
'item_category': '{{product.type}}',   
'item_brand': '{{product.vendor}}', 
'price': '{{ product.price | times: 0.01 }}'   
}]          
});   
{% endif %}
```
Define new variables in Google Tag Manager using data layer.
Go to "Variables"
then in “User-Defined Variables” section click “New” button

then:
a) Create "Currency" constant variable as follow(chose variable type as "Constant"):

b) Create "DL – value" data layer variable as follow (chose variable type as "Data Layer Variable")

c) Create “DL – items” data layer variable as follow (chose variable type as “Data Layer Variable”)
Create trigger that we use to fire new view_item tag.
Go to trigger section and create new trigger,

then:
a) Create new "CE view_item" trigger as follow:

b) Create new "CE view_item and Dom ready" trigger as follow:

We are using here trigger group to connect 2 existing triggers
– CE view_item which is activated when view_item custom event is present in data layer)
– Page View – Dom ready which is activated when all Dom elements of your website is loaded. We are using Dom ready type of trigger to be sure among others that all variables are already present in data layer.
Create GA4 – view_item tag in Google Tag Manger.
Go to “Tags” and click “New” button to add new tag,

and name like "GA4 – view_item"

then choose tag type and select "Google Analytics: GA4 Event"

then choose your configuration tag that you have already created here: How to implement GA4 Configuration tag in Google Tag Manager?

and set "Event Name" to "view_item"

then setup "Event Parameters" as follow:

then choose your trigger that you have already created a while before (CE view_item and Dom ready),

and click "Save" button on the top right corner, and click "Submit" to published.
After this implementation you will be able to see item views realtime statistics in your GA4:

Lets go to the next step of our tutorial which is: How to implement GA4 view_item_list event in Shopify

Published Oct 19, 2022 by Piotr Ulacha

If you enjoyed the content please share it:

If you have any question about this topic feel free to comment or react below.