Hey there, Benjamin from Loves Data here.
Welcome back!
In this video, I'm going to show you how to send purchase, add to cart and other
ecommerce events to Google Analytics 4 [GA4] from your WooCommerce store.
I'm going to show you how to use Google Tag Manager and a WordPress
plugin to send these ecommerce events to Google Analytics.
This is the easiest way to get up and running, and it will
provide you with a whole range of insights in your GA4 reports.
Before we cover the steps to collect ecommerce events from your
WooCommerce store, I want you to check if you've already added Google
Analytics to your WordPress site.
If it's already added, then you might need to make a couple of adjustments.
And if you haven't added Google Analytics yet, then you can simply
follow the steps we're about to cover.
If you have already added Google Analytics, then you'll
need to ask a few questions...
First, how has Google Analytics been installed?
Are you using Google's Site Kit plugin?
Another plugin?
Or have you added the Google Analytics tag to your template?
The second thing to check is if you've added Google Analytics using Google Tag
Manager or using Google's Global Site Tag.
In this tutorial, we're going to use the 'GTM for WordPress' plugin, so we're going
to be using Google Tag Manager to send transaction details to Google Analytics.
If you're using Google's Site Kit plugin, then you can keep using this if you like.
The solution I'm going to show you is compatible with Site Kit.
And if you're using the Global Site Tag, I recommend migrating to Google Tag Manager.
If this applies to you, then don't worry, I'm going to cover these steps too.
Okay, let's head to WordPress...
I already have WooCommerce installed on my demo WordPress site.
So let's select 'Plugins'...
And then 'Add New'...
Now let's search for 'Google Tag Manager'...
Let's
install the 'GTM for WordPress' plugin...
And let's activate the plugin...
Now let's click 'Settings'...
We need to start by entering our container ID from Google Tag Manager.
So let's head to Google Tag Manager to find this...
We're looking at a new Google Tag Manager container, that I've just created, so
there's no tags in the container yet.
I'm going to cover the steps to add Google Analytics to Google Tag Manager.
You will need to follow these steps if you're getting started with Google
Tag Manager for the first time.
If you already have your GA4 tag configured, then you can skip
ahead using the links in the description below this video.
To add our Google Analytics tag, let's select 'Add A New Tag'...
Let's name the tag 'Google Analytics', 'GA4'...
And let's select 'Tag Configuration'...
Now let's choose 'GA4 Configuration' as the tag type...
And we need to enter our measurement ID...
Let's head to Google Analytics to find this...
We need to navigate to 'Admin'...
Then select 'Data Streams'...
Open the data steam for our WordPress site...
And can copy the 'Measurement ID'...
Now let's head back to Google Tag Manager...
And let's paste the measurement ID into the tag configuration...
Now let's select 'Triggering'...
And select the 'All Pages' trigger...
This will mean that Google Anaytics is added to all of the pages were
we've added Google Tag Manager.
You can preview the changes, but I'm happy with the tag I've added,
so I'm going to click 'Submit'...
And then 'Publish'...
This means we've now published the GA4 tag in our container.
The next step is to add Google Tag Manager to our WordPress site, so
we need to copy the container ID.
We can find this at the top.
It starts with 'GTM' and then a dash...
Let's copy this...
Now let's head back to WordPress...
And let's paste our container ID...
Make sure there isn't a space at the start or end of the container
ID as this will cause problems.
Now, if you want to continue using another plugin to add Google Tag Manager to your
WordPress site, you will need to change the 'Container Code' option to 'Off'...
For example, if you're using Google's Site Kit plugin to add Google Tag
Manager and you want to continue using that plugin, then just make
sure you change this to 'Off'.
Since I'm adding Google Tag Manager to WordPress for the first time, I'm
going to leave this set to 'On'...
And now let's click 'Save Changes'...
Now let's select the 'Integration' tab...
And choose 'WooCommerce'...
Let's enable the 'Track Enhanced Ecommerce' option...
And click 'Save Changes'...
So far we've added the plugin to our WordPress site and we've added
our Google Tag Manager container ID.
This means Google Tag Manager can now capture details about
our WooCommerce transactions.
The next step is to configure Google Tag Manager to pass the information about
those transactions to Google Analytics.
So let's head to Google Tag Manager...
To report on the way people engage with our store and purchase in Google
Analytics, we will need to set up a tag, trigger, and variables in our container.
If you're new to Google Tag Manager and want to learn more about how
you can manage your tags, then take a moment to check out my
other tutorials and resources.
I've included links in the description below this video.
Basically, the plugin we installed in WordPress adds a data layer that
contains details about the product people view, the actions they take,
and when they make a purchase.
We can then use variables to capture this information and pass
it to our Google Analytics tag.
Since we need to configure a few different things in Google Tag Manager,
I want to save you some time, so I've included a link in the description
below this video that lets you download a pre-configured container.
Let's import these elements into Google Tag Manager.
To do this, let's select 'Admin' at the top...
Then 'Import Container'...
And now let's choose the pre-configured container...
I'm going to choose 'Existing' to use my current workspace...
And then I'm going to choose 'Default'...
And I'm going to select 'Merge' to keep the other tags, variables, and triggers
that are already in Google Tag Manager.
Now I'm going to click 'Confirm'...
We've now imported a new tag, trigger, and variables to send
ecommerce details to Google Analytics.
Let's select 'Tags'...
We can see a new tag has been added.
This will send all of the different ecommerce events to GA4.
Now let's select 'Triggers'...
We can see there is a new trigger.
This will look for any ecommerce events so that our GA4 tag will fire.
This will include purchases, along with item views, add to carts, and more.
And let's select 'Variables'...
We can see there are a number of user-defined variables that will
get the values from the data layer.
The values of each of these variables will be sent to Google Analytics.
Okay, so now we need to configure the tags.
So let's head back to 'Tags'...
We can see I already have a GA4 configuration tag.
This will automatically send page views to GA4.
If you don't have a GA4 configuration tag, then you will need to create one.
Now we need to configure the tag we imported to use the GA4 configuration tag.
So let's select the GA4 ecommerce tag...
And select 'Tag Configuration'...
Then we need to select our existing GA4 configuration tag...
And then save the tag...
Okay, now we're ready to test things out.
So let's click 'Preview'...
We enter the URL of our WooCommerce store...
And click 'Connect'...
We can view a product...
And add the product to our cart...
Now before we make a purchase, let's see what's already been
sent to Google Analytics.
Let's select the Tag Assistant tab...
And we can see that our GA4 ecommerce tag has fired a number of times...
Let's select the GA4 measurement ID at the top...
We can now see all of the different events that have been sent to Google Analytics...
And we can see this includes 'View Item' and 'Add To Cart' events...
Now let's head back to the site...
And checkout...
We enter our details...
And complete the purchase...
We can now see the confirmation page, so let's select the
Tag Assistant tab again...
We can see additional events have been sent to Google Analytics.
And there is a purchase event too...
Let's check the purchase event has come through to GA4.
So let's head to Google Analytics...
And let's navigate to 'Configure'...
And then 'DebugView'...
We
can see all ecommerce events, including the purchase event have come through...
And we can select this to see additional details...
We've now added Google Tag Manager to our WooCommerce store and we're sending
ecommerce events to Google Analytics 4.
If you're using Google's Global Site Tag [gtag.js] to add Google
Analytics to WordPress, then now is the time to remove this tag.
Just make sure you've added Google Tag Manager to your site using
the plugin we've covered and that you've added your Google Analytics
tag inside Google Tag Manager.
Once you've tested your tags and you're happy everything is working
correctly, you will need to publish your changes in Google Tag Manager.
Let's head to Google Tag Manager to do this...
We just need to click 'Submit'...
Name our version...
And click 'Publish'...
Our ecommerce tag, triggers, and variables have now been published
to our live WooCommerce store.
You will now be able to use the monetization reports and build your own
exploration reports in Google Analytics.
Have you added Google Tag Manager and GA4 to WooCommerce?
I would love to know!
Let me know in the comments below.
And if you enjoyed this video, please consider subscribing to see more views
about getting the most out of Google Analytics, Google Tag Manager, and more.
Thank you for watching, and I'll see you in the next video.