Google Analytics is a crucial tool for website owners and online businesses. It allows them to track and analyze their website’s performance. The introduction of Google Analytics 4 (GA4) brings new features and improved tracking capabilities for businesses. In this article, we will guide you through the process of installing Google Analytics 4 on three popular platforms: Shopify, WordPress, and BigCommerce, using Google Tag Manager (GTM).
Now that you understand the benefits of implementing Google Analytics 4, let’s dive into the step-by-step process of installing it via GTM on Shopify, WordPress, and BigCommerce:
Before we proceed with the installation, there are a few prerequisites:
- Google Analytics 4 Property: Before proceeding with the installation, create a Google Analytics 4 property in your Google Analytics account. Follow the steps mentioned earlier in the article to set it up.
- Google Tag Manager Account: If you don’t have a Google Tag Manager account, create one by following the steps mentioned earlier in the article.
- Install Google Tag Manager on Your Website: Install Google Tag Manager on your respective platform using the instructions provided earlier in the article.
Now, let’s break down the implementation process into two stages:
Stage 1: Making required changes on GTM
Download and Import below workspace on your GTM container.
This step involves adding the necessary tags to GTM for firing GA4 Enhanced Ecommerce Events. We have already prepared a list of changes for you to import into your GTM container. Watch the video below for a step-by-step guide on importing these changes.
Stage 2: Implementing Datalayer codes
For Shopify:
Step 1: Go to Sales Channels > Online Store > Themes [Current Theme] > Edit Code
Step 2: Create a new snippet “GA4-ee”
Step 3: Add following code on newly created snippet “GA4-ee”
<script>
window.dataLayer = window.dataLayer || [];
{% if customer %}
dataLayer.push({
'user_id' : {{customer.id}}
})
{% endif %}
{% if request.page_type == 'product' %}
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "view_item",
ecommerce: {
currency: "{{cart.currency.iso_code}}",
value: {{ product.selected_or_first_available_variant.price | money_without_currency | remove: ','}},
items: [
{
item_id: {{product.id | json}},
item_name: {{product.title | json }},
affiliation: {{shop.name | json}},
index: 0,
{% if product.vendor %}item_brand: {{product.vendor | json}},{% endif %}
{% for coll in product.collections %}item_category{% unless forloop.first %}{{ forloop.index }}{% endunless %}: {{coll.title | json}},{% endfor %}
item_variant: {{product.selected_or_first_available_variant.title | json}},
price: {{ product.selected_or_first_available_variant.price | money_without_currency | remove: ','}},
quantity: 1
}
]
}
});
{% elsif request.page_type == 'collection' %}
var coll_prod = [{% for product in collection.products %}{
item_id: {{product.id | json}},
item_name: {{product.title | json }},
affiliation: {{shop.name | json}},
index: {{ forloop.index }},
{% if product.vendor %}item_brand: {{product.vendor | json}},{% endif %}
{% for coll in product.collections %}item_category{% unless forloop.first %}{{ forloop.index }}{% endunless %}: {{coll.title | json}},{% endfor %}
item_list_id: {{ collection.handle | json}},
item_list_name: {{ collection.title | json }},
item_variant: {{product.selected_or_first_available_variant.title | json}},
price: {{ product.selected_or_first_available_variant.price | money_without_currency | remove: ','}},
quantity: 1
}{% unless forloop.last %},{% endunless %}{% endfor %}];
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "view_item_list",
ecommerce: {
item_list_id: {{ collection.handle | json}},
item_list_name: {{ collection.title | json }},
items: coll_prod
}
});
{% elsif request.page_type == 'cart' %}
var coll_prod = [{% for line_item in cart.items %}{
item_id: {{line_item.product_id | json}},
item_name: {{line_item.product.title | json }},
affiliation: {{shop.name | json}},
index: {{ forloop.index }},
{% if line_item.vendor %}item_brand: {{line_item.vendor | json}},{% endif %}
{% for coll in line_item.collections %}item_category{% unless forloop.first %}{{ forloop.index }}{% endunless %}: {{coll.title | json}},{% endfor %}
item_variant: {{line_item.variant.title | json}},
price: {{ line_item.price | money_without_currency | remove: ','}},
quantity: {{ line_item.quantity}}
}{% unless forloop.last %},{% endunless %}{% endfor %}];
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "view_cart",
ecommerce: {
currency: "USD",
value: {{cart.total_price | money_without_currency | remove: ',' }},
items: coll_prod
}
});
{% endif %}
</script>Step 4: Add below code on theme.liquid
{% include 'GA4-ee' %}
Why Use Google Tag Manager?
Google Tag Manager is a free tool offered by Google that allows you to manage and deploy various tracking codes and scripts on your website without directly editing the site’s code. It simplifies the process of adding and updating tags, such as Google Analytics, Facebook Pixel, and other marketing tags, by providing a user-friendly interface.
Using GTM to install Google Analytics 4 ensures a streamlined and organized approach to managing your tracking codes across multiple platforms. It also provides flexibility and control over when and where your tracking code is implemented.
Why Implement Google Analytics 4 on Your E-commerce Site?
- Enhanced User-centric Data: GA4 focuses on user-centric tracking, allowing you to gain deeper insights into user behavior across multiple devices and platforms. It provides a more comprehensive view of the customer journey, enabling you to make data-driven decisions to improve user experience and drive conversions.
- Machine Learning Capabilities: GA4 incorporates advanced machine learning algorithms that can help you uncover valuable insights automatically. It offers predictive metrics, such as churn probability and purchase probability, to help you identify trends, target the right audience, and optimize your marketing efforts.
- Cross-device and Cross-platform Tracking: With the rise of mobile and multi-device usage, GA4 provides a holistic view of user interactions, enabling you to track and measure customer behavior across devices and platforms. This helps you understand how users engage with your site and marketing campaigns, even if they switch between devices during their journey.
- Event-driven Data Model: GA4 introduces an event-driven data model, allowing you to track specific user actions, such as product views, add to cart events, and purchases. This flexibility enables you to create custom events tailored to your e-commerce goals and track valuable interactions that were previously challenging to measure accurately.
- Simplified Integration with Google Ads: GA4 seamlessly integrates with Google Ads, enabling you to unlock powerful advertising features. You can create audiences based on user behavior, optimize campaigns based on conversion insights, and measure the impact of your advertising efforts across different touchpoints.
- Discontinuation of Google Analytics 3: Google Analytics 3 (GA3), also known as Universal Analytics, is being phased out by Google. While GA3 will continue to be supported for the foreseeable future, Google is actively encouraging users to transition to GA4. By adopting GA4 early, you ensure compatibility with future updates and take advantage of the latest features and advancements in analytics technology.