You must know importance of data as of now. After AI explosion everyone is talking about data, if you don’t then my friend you are in serious trouble 🙎.
Moving your tracking to GA4 is not that easy and every marketer stressed out while shifting his universal property tracking setup to GA4. We need to understand that universal to GA4 is not a basic software update, it’s completely changed tracking eco-system – specifically for Shopify e-commerce.
We know every marketer have setup some events in GA4 which he considered as purchase, but have you done something which will give you detailed data about your users engagement on your website? – surely most of you “NOT”.
Not to panic here I’m sharing a comprehensive guide on how to set up GA4 for ecommerce.
Jump to:
1. Basic GA4 Configuration
Yes, GA4 is kind of stressful but implementing GA4 on website is kind of similar as universal.
As in this topic we are looking at how to setup GA4 conversion tracking for shopify e-commerce so we will not discuss about setting up GA4 for your website/APP. But if you are beginner then you can start with our article “how to setup GA4 property for website”, to learn how to set up a GA4 account and data property.
If you are doing it manually as called as “Global Site Tag method” then you should use this GA4 implementation guide for developers.
Or you can use Google Tag Manager.
For ease I’m sharing simple and short summary:
- Visit Google Tag Manager – do login and select right workspace
- Under Tags – click on – New Tag
- In new Tag – Name it as “GA4-Tag”
- In this tag select “Google Analytics: GA4 Configuration” as tag type
- Copy measurement id form GA4 and paste in measurement id section in GTM tag configuration
- Then go to Triggering – you can see at the bottom
- And select “All Pages” as a trigger.
- Save Tag and publish container.
Once done check once using debug mode of GTM.
Now GA4 is firing or tracking entire data of your website, but that’s not it. It is just activation of GA4 tag on the website and now to activate e-commerce conversion tracking we need to pass some Data Layer variables or you can say code.
This data layer code will capture some information about the event like purchase, add to cart, etc. using GTM and pass to Google Analytics.
Now let’s start with “successful purchase” data layer, meaning to track successful purchases on the website.
Note: We are using Shopify as the ecommerce example. You will need the access to edit your theme and checkout liquid file.
2. Data Layer Setup – For Successful Purchase / Order
Now, setting this will help you to pass all variable to GTM whenever any customer completes purchase on your website.
Variables are nothing but data points which we need to track such as revenue, tax, shipping details, etc.
Now adding this on our tracking system involves 4 important steps:
- Creating and adding the code to the checkout page.
- Creating a custom event in GTM.
- Creating a data layer variable in GTM.
- Creating a new tag in GTM.
- Create Successful Purchase Data Layer Code:
Remember data layer code is somewhat similar you just need to edit variables, but always consult with your developer before doing this, as sometimes it might be different.
Below is the code which you can copy and paste in your site:
{% if first_time_accessed %}
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
‘page_type’: ‘purchase’,
‘event’: ‘Crawl-Geek_purchase’, //create a custom event in GTM
‘transaction_id’: ‘{{ order.name || order.order_number }}’,
‘totalValue’: {{ total_price | money_without_currency | remove:’,’ }}, // Includes tax & shipping
‘subtotalValue’: {{ subtotal_price | money_without_currency | remove:’,’ }},
‘tax’: {{ tax_price | money_without_currency | remove:’,’ }},
‘shipping’: {{ shipping_price | money_without_currency | remove:’,’ }},
‘currency’: ‘{{ shop.currency }}’,
‘payment_type’: ‘{{ order.transactions[0].gateway }}’, //optional parameter
‘items’: [
{% for line_item in line_items %}
{
‘item_id’: ‘{{ line_item.sku || line_item.product_id }}’, //if no SKU exists, use product Id
‘item_name’: ‘{{ line_item.product.title }}’,
‘discount’: {{ line_item.line_level_total_discount | money_without_currency }},
‘item_variant’: ‘{{ line_item.variant.title }}’,
‘price’: {{ line_item.final_price | money_without_currency }},
‘quantity’: {{ line_item.quantity }}
},
{% endfor %}
]
});
</script>
{% endif %}
Note: Adjust the custom event parameter “event: Crawl-Geek_purchase” by replacing Crawl-Geek with the account name you’re working on or use a universal option like “event: successfulPayment.”
- Add Purchase Data Layer To Checkout Page
Simply copy above code and paste in your Shopify store.
Here is the process for your ease:
- Click on Admin setting – you will find setting icon at the bottom left side of Shopify store
- Select “Checkout” from the left-hand navigation.
- Scroll down to the Order status page section and paste code under “Additional Snippet”.
If you do not see a GTM container snippet or Option for “Additional Snippet” comment here I will share you how to get it.
- Create Custom Purchase Event Trigger In GTM
Now you are done with code, now let’s make it fire in GTM.
So head over GTM and open respective GTM property.
Make sure you have copied your event code – in our case we added “Crawl-Geek_purchase”.
- In GTM under Triggers – add new
- Choose trigger type as “Custom Event”
- Add event code and save trigger
- Here you can test it through GTM preview tab – ensure you have published this changes
Important thing to notice here is in preview/debug mode your event showing all variable which we defined in above code.
- Create Data Layer Variables
Again visit GTM, In this visit Variables navigation.
Here you will see built-in variables and any variables you have defined previously, like click, form, etc.
But we are defining custom variable because variables which we introduced in above code are not available in GTM build-in variables.
Click to create a new user-defined variable.
Name of the variable can be your choice; however, we suggest to use some meaningful name so that it can help other marketers who might work on project later on, for now we are using dl-totalValue.
Click to choose the variable type and select the Data Layer Variable option, after add variable name which we given in above code, ensure variable name should match exactly as per code.
Repeat this process for all variables from code (7):
- dl-currency/currency.
- dl-items/items.
- dl-payment_type/payment_type.
- dl-shipping/shipping.
- dl-tax/tax.
- dl-totalValue/totalValue.
- dl-transaction_id/transaction_id
Now last step, Send Conversions To GA4.
Now as we collected all necessary information or you can say required information now it’s time to share it with GA4.
So you need to create new tag in GTM.
- Under Tags navigation – click on new tag
- Name it as you want – we suggest GA4-Successful Purchase Tag
- Now select Google Analytics: GA4 Event
- In Configuration Tag – you will find GA4 tag which we created in 1st Step
- Event Name can be “purchase” or “SuccessfulPurchase”
- Now we need to add Event Parameters:
- Now when you scroll down you will see event parameter tab – in this tab we need to link GA4 default parameter with our custom-data-layer-variable which we created recently in GTM
- This is a link to the GA4 default parameter name.
- Under event parameter click ‘add row’
- The parameter name you will copy and paste from GA4 documentation
- For example dl-totalValue is a data layer variable we created so for that we will use GA4 parameter ‘value’
- Now add parameter name on one box and GTM variable related to it on another. To add your GTM data layer variable, you can either click the plus icon to open a popup with all the variables available or type double brackets {{ which will open a dropdown with all of your options.
- Here it will look after all fields are added.
- Now we need to add Event Parameters:
- Trigger will be the Crawl-Geek_purchase event previously created. If you do not see a custom purchase event, revisit above step – to land on it click here.
- Save it and publish the container.
Now you have setup purchase action in GTM, but hold on it’s not only about it. You also need to check which products users searched or viewed before final purchase, so let’s move on.
3. Product View Data Layer
Like previous here also we need to add new data layer code which will pass products information to GTM and further GA4. To do this you need to create product view data layer code and post it in Shopify theme.liquid file.
Overall process will be the same as above data layer integration, means adding a data layer code, creating a custom event, creating data layer variables, and creating a new trigger in GTM.
- Create A Product Data Layer
Always have word with your developer for data layer code, it may be different than below code.
Below is the code you need to copy and paste in Shopify theme.liquid file:
In the below code we have taken only below variable or details of product:
- Product Name
- Product Id
- Product Price
- Product Category (called as collection in Shopify)
If you are marketplace or sell multiple brand products then suggest to add
- Product Brand
<script type=”text/javascript”>
window.dataLayer = window.dataLayer || [];
window.appStart = function(){
{% assign template_name = template.name %}
window.productPageHandle = function(){
var productName = “{{ product.title | remove: “‘” | remove: ‘”‘ }}”;
var productId = “{{ product.id }}”;
var productPrice = “{{ product.price | money_without_currency }}”;
var productCollection = “{{ product.collections.first.title | remove: “‘” | remove: ‘”‘ }}”
window.dataLayer.push({
event: Crawl_Geek-Productviewed,
productName: productName,
productId: productId,
productPrice: productPrice,
productCategory: productCollection,
});
};
{% case template_name %}
{% when ‘product’ %}
productPageHandle()
{% endcase %}
}
appStart();
</script>
- Add Product Data Layer To Theme Files
Now, let’s add code in theme.liquid file to send data to GA4.
In Shopify admin panel click on online store.
There you might see only 1 theme or multiple themes, so you need to select live and active theme.
In the right side of theme you will find three dots (icon) or ‘Actions’ button.
Once click on it you will see more options in that option select ‘edit code’.
Left side new file navigation will open, scroll down and identify “Snippets” section.
In snippets section click “add new snippet” – name it as “Productview-DataLayer” and click create.
Paste the above product view data layer code in this file.
On the left hand menu scroll up and find theme.liquid file, click on it.
Now, this snippet file which we created need to add in header section, so search for “</head” (don’t include “ it’s just annotation for you or else you will blame me 🤣)
Now paste below code before “/head”:
{% render ‘Productview-DataLayer.liquid’ %}
That’s it save it and we are done with website development tasks.
- Create Product Detail View Trigger
Now head over to GTM, click on Triggers , create a new trigger.
From the trigger options, choose “Custom Event” and name the new trigger, “Productviewed”.
Now add “Crawl_Geek-Productviewed” in the custom event name field. This name matches your data layer event name. Remember to save.
- Enable GTM Variables
Just like previously we did, same process we need to follow but we are adding product name, id, price, and category only.
Click on new user defined variable, then select Data Layer Variable as variable type.
Below screenshots shows one variable for product name, same you need to create for id, price and category. Make sure if you are following me then you are using names which I’m using in article. Here I have named these variables as ‘dl-productName’ so for
- Price – ‘dl-productPrice’
- Id – ‘dl-productId’
- Category – ‘dl-productCategory’
- Create Product View Event Tag
Now create tag for the event.
Head over to Tags, create new tag name it as ‘Product View”
Choose the tag type “Google Analytics GA4 Event.”
Configuration tag will be your GA4 Tag, which we created earlier and firing on all website. If you do not see a GA4 tag, refer our Google Tag Manager GA4 guide.
Event name you can say ‘item-view’.
Like previously we seen we need to add event parameters in tag, for refer click here.
Make sure while adding parameter value you can select from user defined variable and parameter name from GA4 documentation, parameter name are case sensitive and thus you need to match it before saving it with GA4 build-in parameter documentation.
Choose the custom Productviewed trigger that we created in above step as the trigger.
4. GTM and GA4 Test Debugging
Now we done with the setup and it’s time to verify.
- First go to GTM and go to Preview tab
- Once new window open put your website URL and click on connect
- Now new window will open with your website so go thorugh some products and then do test
- In GTM preview tab, check if your both tag fired or not if fired then you can click on it and check further what information that tag collected.
Once done with testing GTM.
Go to GA4, and open Realtime reports and check that user events have recorded our product detail view and purchase event.
Now you can see all details about product viewed, added to cart, and purchased under Monetization report under GA4.
Hope this help you, if any problem happy to resolve. Just post your comment.