GA4 E-Commerce Tracking

GA4 E-Commerce Tracking

Back in October 2020, Google Analytics announced that it would soon be launching its new analytics platform called GA4. This is a significant change in tracking systems and many have identified this update as the most important change in Google Analytics history. But what does this mean to the more casual user? The single store owner who just wants to track revenue levels, and traffic through to the website and gain a general understanding of what source generates the most returns for the amount of effort or budget invested. Well, here we will cover all you need to know about GA4 and how it interacts with the PushRetail platform.

What is GA4?

GA4 is the successor to Universal Analytics, which has been the free analytics platform supplied to users since 2012. There is a significant shift in how the same type of data is reported, moving away from metrics such as sessions and bounce rates, and moving towards users and events-based tracking. This is to provide GA4 with more data than previously available, presumably with an eye to the future and more AI being increasingly introduced to our day-to-day marketing activities. There are many elements of GA4 which are still in their infancy in comparison to UA, the e-commerce tracking & reporting being a perfect example, however, we predict this will quickly be improved to allow us the same and then more features than previous versions of Google Analytics. Be warned, the jump from UA to GA4 will be big, but unfortunately, it is unavoidable, with Universal Analytics due to be sunsetted in July 2023, meaning GA4 is something users should become familiar with before the big swap over happens.

How to Enable GA4 E-Commerce Tracking

Before you start to install GA4 on your website you will need to enable support for GA4 on your PushRetail website. To do this you log in to the PushRetail admin area and go to the "Settings" option and choose "Integrations", you'll see the Google Analytics E-Commerce section. From here you can make sure that GA4 is selected as the version. As Universal Analytics is no longer being supported by Google, we will continue to phase this out.


How to Install GA4

Similar to the setup for Universal Analytics (UA), you first need to set up a new analytics profile. If you have previously/are currently using UA, you are able to upgrade through your current setup.

To do this, go through ‘Admin’ > ‘GA4 Setup Assistant’ (in the permissions column) > ‘Get Started’.

This will then create a new GA4 profile, whilst importing your basic settings from your UA profile. Please note, you will still be able to access your UA profile after you have set up GA4 to access, analyse and report on historical data.

If you have not previously set up UA, you will need to set up a new analytics profile. Once this has been setup, you will need to upload your tags through Google Tag Manager (GTM), which connects GA4 to your website. This is in the form of a configuration tag. To do this:
  1. Go to Tags.
  2. Click "New".
  3. Name your tag "GA4 Configuration".
  4. Click on tag configuration and select "Google Analytics: GA4 Configuration".
  5. Add in your measurement ID (which can be found in your GA4 Property, in the admin section, then data streams, then in the relevant property).
  6. Next, you will need to set up the trigger to fire on all pages. To do this, click on firing triggers and select the ‘all pages’ trigger.
  7. Click Save and then press the submit button on the workspace page to submit the tag to your website.
Your tag should look like the below before submitting your workspace live, with the relevant measurement ID included: 



E-Commerce Tracking for PushRetail Websites

Good news! You have now set up GA4 and should be successfully able to track users, behaviours and other insights about where users are finding your website, as well as the demographics of your audience. But there is one important step that is missing. How do we track revenue through the website? Well, unfortunately in GA4 it is a bit of a fiddly setup that requires a bit more work than UA. However, we have provided the following setup guide to get your PushRetail website fully tracking sales and transactional metrics into GA4.

The main difference in E-commerce tracking setup between UA & GA4 is that the latter is an event based tracking system. This means that there has to be additional data layers added onto the website to allow us to adequately track the important metrics that you will need to analyse performance on your site. These data layers are already built into the PushRetail platform, meaning you don’t need to go through additional stress to get them added to your website.

To pull through the data (product name, value, currency, quantity etc.) from these datalayers, we need to set up a series of variables that will pick up the datalayer value for a particular tag. This may all sound relatively complex, but if it is thought of as a way of Google being able to identify the right bits of information for the separate tasks (or tags) we are going to be setting up. The variables we will be setting up in this guide are: 
  1. Affiliation
  2. Category
  3. Category2
  4. Category3
  5. Currency
  6. Items
  7. Transaction ID
  8. Value 
After the variables have been set up, we move onto setting up the tags and triggers. In the simplest language, tags are the event you want to track, e.g. transaction, contact form submission, add to basket etc. In order for GTM to register this is what you want to happen, you need to add in triggers. This is the event that actually happens, and they can range from a page loading to a user clicking on a single button on a page. Although there are many inbuilt triggers within GTM, there is not currently any that suit the task for GA4 (although we are sure this will change within the next few months), and so we have to set up a selection of triggers to add into our tags, using the variables we set up earlier. The tags and triggers we will be covering in this guide are:

Tags:
  1. Item View
  2. Add To Basket
  3. Transaction
Triggers:
  1. Item View
  2. Add To Basket
  3. Transaction
Still with us? Great! We know this can all seem quite daunting. It was for us the first time we did it. But by following the next steps you should well be on your way to setting up e-commerce tracking. The good news is that it is incredibly hard to break anything on your website from using GTM (not impossible, just difficult) so don’t feel nervous that adding the wrong tag will lead to your site 404’ing. The worst that will happen is a slightly messy GTM container which may need some re-working. With that said, lets get stuck into variables, triggers and tags: 

setting up e-commerce tracking

Variables Setup:
  1. Go to the variables tab in GTM, then click new ‘user defined variable’
  2. Name the variable ‘Push - Affiliate’ (or the corresponding variable name)
  3. Select ‘Data Layer variable’



  4. Add in the data layer variable name (for this example, we are using the name ecommerce.affiliation)



  5. Save the variable
  6. Repeat for all the other 7 variables noted about, using the following data layer variable names
    1. Variable Name: Push - Category
    2. Data layer variable: ecommerce.items.item_category
    3. Variable Name: Push - Category2
    4. Data layer variable: ecommerce.category2
    5. Variable Name: Push - Category3
    6. Data layer variable: ecommerce.category3
    7. Variable name: Push - Currency
    8. Data layer variable: ecommerce.currency
      (please note you will also have to adjust the data layer variable to set a default value of GBP as per the following screenshot) 



    1. Variable name: Push - Items
    2. Data layer variable: ecommerce.items
    3. Variable name: Push - Transaction ID
    4. Data layer variable: transactionId
    5. Variable name: Push - Value
    6. Data layer variable: ecommerce.value
Your User-Defined Variables list should now look like this:



Tags & Trigger Setup

  1. Go back to the tags section and select new, naming it ‘Push GA4 - Item View’ and select the ‘Google Analytics - GA4 Event’ tag type
  2. Change the configuration type to the corresponding GA4 tag you set up earlier
  3. Add in the event name of ‘view_item’
  4. Add in the following event parameters:
    1. Parameter name: item_category / Value: {{Push - Category}}
    2. Parameter name: item_category2 / Value: {{Push - Category2}}
    3. Parameter name: item_category3 / Value: {{Push - Category3}}
    4. Parameter name: items / Value: {{Push - Items}}
  5. Select the triggering section below and then new trigger (top right hand - little + button)
  6. Name the trigger ‘Push - Item View’ and select custom event
  7. Put in the event name as ‘view_item’ and leave the ‘This trigger fires on’ as on all custom events.
  8. Save
Your tag should look like the following screenshot:


This is your first tag set up, to register all product views in GA4. Due to the parameters added in here, it will also carry through all the product data we have specified.
  1. Start a new tag, naming it ‘Push GA4 - Add To Basket’, selecting the same tag type & configuration as before
  2. The event name for this tag is ‘add_to_basket’ and the parameters are as follows:
    1. Parameter name: items / Value: {{Push - Items}}
    2. Parameter name: value / Value: {{Push - Value}}
    3. Parameter name: currency / Value: {{Push - Currency}}
    4. Parameter name: item_category / Value: {{Push - Category}}
    5. Parameter name: item_category2 / Value: {{Push - Category2}}
    6. Parameter name: item_category3 / Value: {{Push - Category3}}
  3. Select a new trigger and name it ‘Push - Add To Basket’. Add in the event name ‘add_to_cart’
  4. Save the tag, which should look like this:  


  1. Start another new tag (last one, almost there!), name it ‘Push GA4 - Transaction’ selecting the same tag type & configuration as previously covered
  2. The event name for this tag is ‘purchase’ and the parameters are as follows:
    1. Parameter name: items / Value: {{Push - Items}}
    2. Parameter name: transaction_id / Value: {{Push - Transaction ID}}
    3. Parameter name: affiliation / Value: {{Push - Affiliate}}
    4. Parameter name: value / Value: {{Push - value}}
    5. Parameter name: currency / Value: {{Push - Currency}}
    6. Parameter name: item_category / Value: {{Push - Category}}
    7. Parameter name: item_category2 / Value: {{Push - Category2}}
    8. Parameter name: item_category3 / Value: {{Push - Category3}}
  3. Select a new trigger and name it ‘Push - Transaction’. Add in the event name ‘purchase’.
  4. Save the tag, which should look like this:


Now you should have got to a stage where in this workspace, there are 3 new tags, all using various variables and triggers to pull through the relevant data and information. We recommend running through each of the tags again, making sure all the variables are in place and then submitting the changes live to your website. We would also recommend running through debug mode to check all triggers are firing correctly before going live, which we explain below. 

Debug And Testing for GA4 Tagging

When pushing anything live on your website, it is always important to check it is working properly. It sounds obvious, but this is an often overlooked step (amazing, we know). To check your tagging setup through GTM & GA4, there are a few tools we can use. First is the ‘preview mode’ in GTM, which is used to make sure the tagging and triggers are all correctly firing on the website, and the variables are pulling through the right data. Secondly, we can use the new GA4 debug tool, which allows a real-time look at what tags are being triggered in GA4 (effectively, to make sure the link between GA4 & GTM is working correctly). We recommend running these simultaneously and cross-checking the data to make sure there aren’t any discrepancies. Let’s get going!
  1. Enter preview mode through GTM, by clicking ‘preview’ when in the main workspace, and then adding in your URL
  2. This should take you to your website, with a pop-up for Google tag assistant present, as per the below example:



If you navigate back to your tag manager window, you should see a similar window to the below. The key here is to see if the tag ‘GA4 Configuration’ has fired. This means that the GA4 tag is working on your website. You will also see your other tags that have been set up in the ‘Tags Not Fired’ section, which is correct:


We would then suggest setting up a tab with your GA4 open, where you then can navigate to the debug mode. To do this, you go into the left-hand menu and go to configure, and then DebugView, where you will then see the following view:


Here, you should be able to see a real-time view of the actions that you are performing on the website. In the example screenshot above, the debugging has picked up that we have been on multiple pages, viewed a few items and then added multiple to the basket. This is all reported in real-time, meaning you can monitor what actions you have performed and what is being picked up by the debug mode. 

We would recommend running through a full test purchase, monitoring both debug mode in GA4 and the preview mode in GTM to test whether your triggers fire at each stage, and are subsequently imported into GA4 accurately. Your GTM preview should look like the below, once the purchase has been completed:


To check the correct data is being pulled through (the right products, prices etc.) select the data layer tab, and you should see the below:


As you can see in the example, we have 2 different Trek Marlin 4’s that have been purchased, with the full value, currency and product names being pulled through accurately.


    • Related Articles

    • Adding Hotjar to Your Push Website

      How to Add Hotjar to Your Push Website. Hotjar is a third party software used to analyse onsite behaviour of your users. We recommend upload Hotjar using Google Tag Manager (GTM). If you have not yet installed GTM, please follow these steps on how to ...

    • How to Noindex Pages

      Occasionally, when running marketing campaigns or creating new pages on your website, you do not want this page to end up appearing in the SERP (Search engine results page). To inform Google you do not want to have a page appear in the results, you ...