THE STORY
Tougher Than Tom came to us requesting Google Analytics Audit. They’re advertising on many platforms and using multiple analytics tools. Still, this case study will primarily focus on Google Analytics 4 setup.
Tougher Than Tom uses Shopify as their preferred e-commerce platform with a Universal Analytics integration.
At the time of implementation, Shopify didn’t have a GA4 integration. But, regardless of the integration existence, any website/theme customization on Shopify can affect integrations in various ways. That is why some degree of custom tracking and tweaking is necessary for tracking to work correctly.
The UA setup for Shopify is simple because the two platforms have a native integration. So – you’d add the UA tracking ID, and Shopify would do the rest for you.
Unfortunately, some misbehavior is expected regarding native integrations. Actions such as website theme or section customization or introduction of third-party elements can suddenly affect conversion tracking.
That’s why reviewing, testing, and eventually tweaking or adding more to the existing tracking is immensely important.
Since no Shopify integration with GA4 was available during our tracking setup, we needed to do everything custom.
THE CHALLENGE
First, we devised a plan to execute tracking of vital e-commerce events. These are:
- View collection (view_item_list)
- View product (view_item)
- Add to cart (add_to_cart)
- Remove from cart (remove_from_cart)
- Upsell (upsell_add_to_order)
- Initiate checkout (begin_checkout)
- Purchase (purchase)
The critical aspect of tracking is providing the item data for each event so GA4 can understand, attribute, and report these events properly.
The challenge with getting this data depends on where you are on the website. You can easily extract the item data from the ShopifyAnalytics meta-object on Shopify’s product page.
From there, you can format it in any way you want!
This data can be pulled in GTM using JavaScript variables, which can be used in GTM tags.
However, the ShopifyAnalytics meta-object is only available on Shopify’s product page.
This mechanism doesn’t work if we want to track add-to-cart action on the collections or home pages. That is one of the challenges people usually face when implementing custom tracking in Shopify.
A more detailed approach is described in the following sections.
THE APPROACH
There are a couple of solutions for tracking listed events.
The first solution is to track them manually from GTM by extracting all data from the page. But we don’t recommend it for obvious reasons – it’s exhausting, time-consuming, and unstable. Needless to say, any change on the website would affect the tracking configuration.
Another solution would be to use a third-party Shopify app, which can make your work much more manageable.
But there’s a caveat – depending on the level of customization, these apps might misbehave. They may cover some events partially, some none at all, varying from customization to customization.
DataLayer push
The solution we decided to go with is asking a developer to insert code snippets to fire our events on desired actions. In other words, when a user, let’s say, adds an item to the cart, a script will execute and send the event along with all the necessary information to the dataLayer.
Then, we would extract that information from the dataLayer and pass it along to the GA4 and any ad platform using tags. This option allowed us to cover GA4 and any other platform with conversion tracking.
Execution
The execution was quite simple. We sent detailed instructions to the developer. The document included all events with examples, looking like this:
Once the developer implemented the dataLayer pushes, it was time to review and test. We used multiple debugging tools like GTM’s preview mode and Analytics Debugger Chrome extension.
After we confirmed the dataLayer push was working flawlessly, it was time to implement the GTM side of things!
Creating the variable-trigger-tag structure was pretty straightforward. We used non-standard dataLayer because of other customizations we had planned. For the standard dataLayer that is entirely compatible with GA4, you can refer to the GA4 ecommerce documentation.
Variable Structure
As mentioned, we used a custom dataLayer structure (Feel free to skip this part if you used the exact structure from the documentation). We will mention one additional action for the standard e-commerce dataLayer structure in the tag structure.
As for the variables, a couple of them were necessary. They would pull all information we needed and forward it via GTM to any destination platform.
As for the definition of the variables, here’s how it looks for the items parameter of the pushed event.
Trigger Structure
The tags that will utilize those variables need to know when to fire – and that’s where triggers step in.
All triggers for implementing specified events are relatively simple to set up. Any events coming from the dataLayer can and will be picked up by the GTM’s custom event trigger.
Following is an example of one for Add to cart event. The most important part is using the exact event name coming in the dataLayer.
Once all triggers have been set up, you can use them for any conversion tracking purpose – meaning that you can have many tags linked to one trigger. It can fire add-to-cart events for GA4, Facebook Ads, Google Ads, Bing Ads, TikTok Ads, etc.
You only need one trigger if you’re using a standardized GA4 dataLayer push. By using regular expression matching, you can cover all events.
The regex we used is: view_item|view_item_list|add_to_cart|view_cart|remove_from_cart|begin_checkout|purchase
Tag Structure
When you have the variable and trigger structure prepared, tags are just a cherry on top. Now, you can create the tag structure in a couple of ways.
Remember that in the variable structure, we mentioned that you don’t have to extract them if you’re using standardized GA4 dataLayer push.
All-in-one Tag
If you went that route, here’s what you should do with the tag.
You’ll need only one GA4 event tag. Name it however you like, and add the ‘all-in-one triggered’ mentioned in the trigger section.
Next, select more settings -> e-commerce, and check Send e-commerce data. From the options, choose Data Layer as the data source.
Test it with the GTM preview mode, Analytics Debugger, and GA4 debugView, and you’re good to go!
If your setup was done correctly, you should see all values as parameters in GA4 debugView and the Items section next to them, filled with item parameters.
Fully Granular
We separated each tag to represent an event, as we will not send them all to all platforms. You probably know how we did it based on what you have read so far. Nevertheless, we’ll explain it in detail.
For the ‘granular’ approach, each tag sends its own event. Therefore, you have more tags but complete control over which event is being sent, when it’s being sent, and which parameters you want to pass with each event.
Here’s an example of one of such tags, paired with the matching trigger and variables, for the add-to-cart event:
Hybrid Way
There’s a middle ground between going all-in-one tag and fully granular with tag-event pairs – called the hybrid way.
The hybrid way between those two knows two triggers and two tags. One pair is for non-purchase events, and the other is for purchase events.
When choosing between using the dataLayer or adding your own variables, the choice is entirely up to you.
This hybrid approach is good if you want to send only one or the other type of event to other platforms and add specific parameters to these events.
Our approach for this client is fully granular because we were sending various parameters along with different events and those events to a wide range of ad platforms.
You can use any of the abovementioned tools to test everything and review the data. Also, we have a whole chapter about it in our free ebook about GA4.
THE RESULTS
After testing and giving GA4 some time to accumulate and attribute data, you can explore reporting. For e-commerce, UA had significantly better built-in reports, so we needed to recreate those in GA4 and use them in parallel with GA4’s built-in reports.
Here’s what you should look at in GA4 to monitor your data.
In reports-> monetization will be the place for built-in reports. Going to Ecommerce purchases, you’ll find a nice dashboard compiled of important e-commerce data.
Ensure that item parameters are uniform and consistent, focusing on item ID and item name. There should be no (not set) or odd-looking values, only your items’ attributes.
This shouldn’t only be used for control. Make yourself comfortable with the monetization reports, explore them, and you’ll be able to get powerful insights.
Heads up – you should also check for duplicate transactions, and the best way is through Exploration reports. In the UA, we had a ‘Sales performance’ built-in report, but in GA4, it’s missing.
To create a transaction ID report, go to explorations and create a new one, using transaction ID as a dimension and transaction as the metric. Make sure you don’t have duplicate values for the transaction ID.
Exploration reports provide a lot of possibilities, and you should take advantage of that. To go deeper into the exploration reports, read the Reporting Chapter from our free GA4 ebook!
Note: To protect our client’s business information, we used Google Demo Merchant Account for the monetization screenshots.
CONCLUSION
The final result of this implementation is a complete and bulletproof conversion tracking system that enabled us to collect data in GA4 and any other ad platform we’re using.
Clean and accurate data is one part of the equation, and collecting everything you’re interested in is another. When you have the ability to fulfill both, you’re miles ahead of the competition!
Hopefully, the native Shopify and GA4 integration will be available soon. Nonetheless, that does not guarantee that it will work better than the old UA integration, which has its flaws.
We explained a fair share of the implementation process through our case story. If implementing any of these steps and actions improves your execution by some percentage, we consider it a success.
The importance of accurate and proper measurement is often overlooked. Luckily, more and more businesses recognize that data-driven decisions are the cornerstone of progress.
Our team of web analytics specialists can provide you with a custom fit for your event tracking and reporting needs. With our experience in Web Analytics, PPC, and CRO methods specifically adapted to E-commerce clients, we’ll help ensure the time spent on generating online profits is worthwhile.
You should be focused on building up your company without any added stress or worries. Let us show how this could become a reality today by taking advantage of our free consultation.
Make sure you get your data right!
Key improvements
- Tailored e-commerce data collection strategy
- System unaffected by the website changes
- Tracked entire e-commerce funnel
- Created thorough step-by-step funnel reporting
- Bulletproof and consistent measurement system
- Improved & clean GTM structure
Bonus offer: Free Audit
Other than a wealth of knowledge trough our blogs, we offer a FREE AUDIT of your business by our in-house team of experts.
Want to find out more?
Check out our FREE BLOGS and find out more in the areas of PPC, CRO and Analytics and tracking!
