Hey there, I'm Benjamin from Loves Data. In this video,
I'm going to show you how to set up ecommerce tracking in GA4 (or Google Analytics 4)
properties. The way you configure ecommerce tracking will depend on how Google Analytics
is implemented on your website. For example, if you're using Google Tag Manager, then you can
use a GA4 event tag to capture details from the data layer. Or if you're using gtag.js,
then you will need to modify the tracking code. Let's jump in and look at these options!
Before we get started, I want to mention ecommerce tracking for hosted platforms
and plugins. If you're using a hosted ecommerce platform, like Shopify, or you're using a
WordPress plugin for Google Analytics, you might have to wait until they support ecommerce tracking
for GA4 properties. For example, the built-in Google Analytics integration available in Shopify
doesn't currently support GA4 properties. In some cases, you might be able to connect your existing
standard (Universal Analytics) property to your GA4 property to report on ecommerce transactions.
If your platform or plugin adds the gtag.js version of the tracking code to your website,
then you can connect the two properties, so that data automatically flows into your GA4 reports.
Okay, we're going to start by looking at a custom implementation, so let's head to my demo site...
My demo website uses Google Tag Manager to track transactions, pageviews, and other actions. So
let's start by purchasing a product on my demo site. I'm going to select a product...
Add it to my shopping cart... And make a purchase...
We're now on the confirmation page, so let's view the source code...
We can see the custom data layer that includes the details for our transaction. This is using
the ecommerce schema for Universal Analytics properties which is also compatible with GA4.
The schema for GA4 properties is slightly different. Since the current recommendation
is still to run a GA4 property in parallel to a Universal Analytics property, I recommend
using the same schema that we can see here. So the ecommerce schema for Universal Analytics.
We can then configure Google Tag Manager to send the details for each transaction to our Universal
Analytics property and our GA4 property. If you're only using a GA4 property, then you can continue
to follow these steps, or you can implement a custom data layer that uses the ecommerce schema
for GA4. Just remember that the GA4 schema isn't compatible with Universal Analytics.
Okay, now let's head to Google Tag Manager... We can see there is already a standard (Universal
Analytics) tag, so start by having a quick look at this tag. Let's select the tag...
And the tag configuration... And let's select the information icon next to the
Google Analytics settings variable... This shows us that all of the ecommerce transaction details
are being automatically found in the data layer and sent to Universal Analytics. So it's really
easy to send transactions to Univeral Analytics. Okay, let's close the variable... And the tag...
We can also see there is a GA4 configuration tag. This tag will automatically send pageviews
to our GA4 property, but to send ecommerce transactions requires custom configuration.
To send ecommerce transactions we will need to add a new tag. So let's create a new tag...
Let's name the tag 'GA4 Ecommerce Transaction'...
And let's select 'GA4 Event' as the tag type... Now we can select our existing GA4 tag
as the 'Configuration Tag'... And we're going to enter 'purchase' as the event name...
Now we need to select 'Event Parameters'...
And we're going to enter 'items'... This is the pre-defined parameter name
used to report on the product people purchase in GA4. Now we need to create a new variable...
Let's name the variable 'Ecommerce Products'...
And let's select 'Data Layer Variable' as the type... For the 'data layer variable name' we need
to enter 'ecommerce', 'dot', 'purchase', 'dot', 'products'... And then we can save the variable...
Now we can repeat these steps to add the other information from our transactions...
We can add the transaction ID... And we're going
to enter 'ecommerce', 'dot', 'purchase', 'dot', 'actionField', 'dot', 'id' for the variable...
Affiliation...
And we're going to enter 'ecommerce', 'dot', 'purchase', 'dot', 'actionField',
'dot', 'affiliation' for the variable...
Revenue... And we're going to enter 'ecommerce',
'dot', 'purchase', 'dot', 'actionField', 'dot', 'revenue' for the variable... Tax...
And we're going to
enter 'ecommerce', 'dot', 'purchase', 'dot', 'actionField', 'dot', 'tax' for the variable...
And shipping...
And we're going to enter 'ecommerce', 'dot',
'purchase', 'dot', 'actionField', 'dot', 'shipping' for the variable...
Now we need to create a trigger so that the tag only fires when a purchase occurs on our website.
So let's create a new trigger... Let's name the trigger 'Ecommerce Purchase'...
And let's select 'Custom Event' as the trigger type...
Now let's enter 'purchase' as the event name... And let's select 'Some Custom
Events'... Select 'Event'... And 'Equals'... And enter 'purchase'...
This will mean our trigger only fires when a purchase occurs.
Now let's save the trigger... And let's preview our changes...
We can now complete another transaction...
And we can check to see that the tag has fired in Tag Assistant...
We can select the purchase event... And select the tag...
We can then choose 'Values' to check that the values have been sent to Google Analytics...
And we can also head to Google Analytics... And open the DebugView...
This lets us check that the details are being correctly passed to Google Analytics...
So that's how we can use our existing data layer to capture ecommerce details for our GA4 property!
Okay, but what if we're not using Google Tag Manager and we're using the gtag.js tracking code
instead? Well, in this case, we need to modify the tracking code when a transaction takes place.
Let's head to the back-end of my course platform to see how this works...
Now we could of course use Google Tag Manager and a custom data layer as we've already covered,
but I also want to show you how to modify the gtag.js tracking code to track transactions.
So here we can add code to the page people see after they've made a purchase.
I've already added the standard gtag.js tracking code... Now we can head to Google Developers...
And grab the example ecommerce tracking code... Now I can adjust the code...
And enter the liquid markup variables that will populate the transaction details into our code...
The way you do this will depend on the platform you're using,
so I recommend checking out the documentation for your platform
and even contacting support for your platform to get help setting up the tracking code correctly.
I also want to highlight, that if you're using a plugin, like Monster Insights for WordPress,
then you'll need to continue using Universal Analytics since it's not yet compatible with
GA4. If the plugin you are using adds the gtag.js tracking code, then you do have the
option of using your existing Universal Analytics property to send data to GA4. I've covered this
briefly in another one of my GA4 videos and I've included a link to it in the description below.
So that's how you can track ecommerce transactions into GA4 properties. Remember, the method you
use to track transactions will depend on how Google Analytics is implemented on your website.
If you're using Google Tag Manager, then you will also need to implement a data layer to
make transaction details available to your tags. And if you're already tracking transactions into
a standard (Universal Analytics) property, then you can adjust your implementation to also send
the details to your GA4 property. Are you tracking transactions into GA4? I'd love to know! Let me
know in the comments below. And if you found this video helpful please subscribe, share it with your
friends, and hit the like button so I know to make more videos like this. See you next time!