Add Google Tag Manager to WooCommerce and setup events

When it comes to today’s website marketing, Google Tag Manager (GTM) stands as a necessary tool for website owners and marketers. It’s a platform that simplifies the intricate task of managing various tracking codes, scripts, and tags on your website without the need for extensive coding skills. With GTM, you gain the power to efficiently track user interactions, conversions, and other critical data, ultimately helping you optimize your online presence.

When it comes to e-commerce, particularly WooCommerce, the importance of tracking events cannot be overstated. WooCommerce is a leading platform for creating and managing online stores, and understanding how users interact with your store is fundamental for success. The top 3 events that are the most crucial for every e-shop visitor behaviour tracking are:

• Add to cart events
• Checkout process initiation events
• Purchase events

The ability to monitor key e-commerce events like ‘Add to Cart,’ ‘Checkout Visits,’ and ‘Purchase’ events is vital. These events provide you with invaluable insights into customer behavior, product performance, and conversion rates. By harnessing GTM to track these events in your WooCommerce store, you gain a deeper understanding of your customers and can make data-driven decisions to enhance their shopping experience and boost your online sales.

Setting Up a Google Tag Manager Account:

Before diving into the technical aspects, you’ll need to create a Google Tag Manager account. If you already have a Google account, you can jump to the next steps. If you do not have an account already, visit the GTM website (https://tagmanager.google.com/), create an account, and set up your first container. A container is a virtual space where you can manage and organize your tags. Fill up the proper information for your project and choose Web as your target platform.

Acquiring the Google Tag Manager Code:

Once your GTM account is set up, you’ll be provided with a GTM container code snippet. This code is your ticket to integrating GTM into your WooCommerce site. Ensure you keep this code snippet accessible, as you’ll need it in the upcoming steps.

Installing GTM Scripts in functions.php:

Now, let’s get technical. Once you have your GTM container code, you’ll need to install it on your WooCommerce website. We always prefer manual installation over any other solution, as it’s always the most efficient way to go. To add GTM to your WooCommerce site, we will add a few lines of code in our Child Theme’s functions.php file and utilize two critical hooks: wp_head and wp_body_open. These hooks allow you to insert GTM scripts in the appropriate sections of your website. These scripts are vital for GTM to function correctly and track user interactions.

Here’s a detailed example of how to implement this in your functions.php file:

<?php 

/*** ... your functions.php code ***/


// Insert GTM script in the section.
function insert_gtm_head() {
    ?>
    <!-- Google Tag Manager script goes here -->
    <?php
}
add_action('wp_head', 'insert_gtm_head');

// Insert GTM noscript code in the opening.
function insert_gtm_body() {
    ?>
    <!-- Google Tag Manager noscript code goes here -->
    <?php
}
add_action('wp_body_open', 'insert_gtm_body');

By adding these scripts, you ensure that GTM can effectively monitor and track user interactions across your WooCommerce site.

Creating E-commerce Events in GTM with GA4

With GTM successfully integrated into your website, it’s time to create e-commerce events in Google Analytics 4 (GA4). These events will capture vital data related to customer behavior on your WooCommerce site, and each event serves a unique purpose. Before implementing those events, we need to make sure we have the Google Tag for GA4 installed first as a tag (Google recently renamed this to “Google Tag” from “GA4 configuration tag”).

Google Tag for GA4 installation (first tag)

In order to install your main Google Tag so all other events can be tracked, follow the below instructions. For the experienced users already running GA4 on their website, you can jump to the next steps.

Firstly, create a new tag:

Then we suggest you name it “GA4 configuration tag” so it describes the tag best.

Click on Tag Configuration and choose tag type “Google Analytics”

Then choose Google Tag:

After that, make sure you put your Google Analytics 4 measurement ID in the Tag ID below:

Next, let’s choose a trigger. Since we want this to run everywhere at all times (as we said, this is a configuration tag that runs before all other tags), we choose All Pages:

And the final result below is a proper completed GA4 Google Tag:

Don’t forget to save your event and let’s dive into the real deal by implementing the crucial events we came here for.

Order Received Event:

This event is crucial for tracking successful purchases on your WooCommerce website. It should be triggered every time a user lands on the ‘/order-received/’ page, which typically appears after they’ve completed a purchase. The ‘Order Received’ event plays a pivotal role in tracking successful purchases within your WooCommerce store. This event primarily focuses on capturing one critical piece of information: the successful purchase itself.

This conversion event is vital for your e-commerce site because it defines the ultimate goal of your business – a successful sale. Without this event properly set up, it’s akin to navigating in the dark. Even platforms like Google Ads rely on understanding what constitutes a conversion in an e-commerce context. By defining this crucial event, you enable your website to shed light on your sales performance, track revenue, measure product popularity, and gauge the effectiveness of your marketing efforts. In essence, it’s the cornerstone of data-driven decision-making that empowers you to enhance and optimize your online store’s performance.

Let’s create a new Tag and name it “Purchase“. This time, since it’s an actual event we are going to track, we choose “Google Analytics: GA4 Event”:

In the “Measurement ID” field, we make sure to add the measurement ID from our Google Analytics, which is the exact same measurement ID we added in the Google Tag we created in the previous step. If the IDs match, we’ll get the green checkmark notification mentioning “Google tag found in this container”:

Then, we click Triggering, and we choose to add another trigger that doesn’t exist on the default, like below:

Since we want to track the visitors of Thank You page (for tracking completed orders), we choose Page View:

After that, we choose specific parameters for the trigger, such as the page must contain the string “order-received” in it’s URL (which is the Thank You page URL):

And the final result we get if everything is setup correctly:

By now our Google Tag Manager workspace should contain the following events:

We have completed implementing our first and most important event for our e-shop, which is Purchase event. Let’s proceed into tracking Checkout Process initiations as well. Don’t forget to hit Submit in order for your changes to go live.

Checkout Visit Event:

The ‘Checkout Visit’ event should be triggered whenever a user visits your WooCommerce checkout page. This event provides insights into the checkout process’s performance, helping you identify and address any obstacles that may lead to cart abandonment. With this event, you can track the number of users who begin the checkout process, how many complete it, and where users tend to drop off. By understanding this critical part of the customer journey, you can implement optimizations that reduce friction and improve conversion rates. It’s an essential event for fine-tuning the user experience and maximizing your e-commerce revenue.

Implementing a Checkout page visit event, we are going to follow the exact same procedure as above, just with a little twist. At first, we create a new GA4 Event tag as before and we name it “Checkout visit“:

After that, we will have to add one more rule to the page URL, because we want to track only Checkout page visits, and not completed orders. So, we must create a new trigger:

We choose Page View trigger and then add the following rules:

With adding the above rules, we make sure that only checkout page visits are tracked. This is because the Thank You page has a URL of form “mywebsite.com/checkout/order-received?order_id=12345”. By excluding the word “order”, we only track the checkout events. The final result is the below:

And now, we have successfully added our Checkout event. Our workspace should now include:

At the moment we have implemented the 2 most crucial events for our e-shop. We can now proceed with our final event (tracking add to cart button clicks), which is the most tricky of all three. Again, don’t forget to hit Submit to publish your updates.

Add to Cart Event:

To effectively track instances when users add products to their shopping carts, it’s crucial to configure the ‘Add to Cart’ event. The event should be activated whenever users click the ‘Add to Cart’ button, which is typically located on your product pages. Additionally, we’ll see how to also track add to cart button clicks from archive pages or a single page that display products.

This event provides invaluable information about your product catalog’s performance. By implementing this tracking, you can pinpoint which product pages attract the most ‘Add to Cart’ interactions. Furthermore, it allows you to identify the effectiveness of landing pages promoting products and catalog archive pages where ‘Add to Cart’ buttons are enabled. Armed with this data, you can make informed decisions about product recommendations, refine your marketing strategies, and optimize your inventory management to drive higher conversions and elevate your overall e-commerce success.

Just like the previous two events, let’s create a new tag, name it “Add to Card” and set the configuration to GA4 Event:

After setting the correct configuration, let’s choose the trigger. Give it a huge name that will let us remember exactly what this trigger does:

Unlike the previous two event, the add_to_cart event must be tracked with another trigger than a simple Page View. We’ll have to use a CSS class or an ID. This may vary depending on your WooCommerce theme and customization. You should inspect the ‘Add to Cart’ button element on your product pages using your web browser’s developer tools (usually accessible by right-clicking on the button and selecting “Inspect” or “Inspect Element”). Look for an ID or class associated with the button and use that for the trigger condition.

Since we track click of buttons, the ideal trigger for us is the Click – All Elements type:

After choosing All Elements, we must choose a variable. Since Class element is not available by default, you should click on the dropdown and choose “Choose new built-in variable”:

Then, we have a large list of available elements to choose from. In this case, we go with Click Classes:

Finally, we add “single_add_to_cart_button” as a “contain” rule, since this is the most common class that is used by WooCommerce themes in the product page.

As a bonus, if we would like to track add to cart button clicks from other pages (like homepage or categories), we can check their class with a Browser Inspection tool:

In the image above, we discovered that Add to cart buttons in category pages contain the class “add_to_cart_button”. So let’s add an additional trigger to our new Add to Cart tag:

A proper name is again necessary and the same Click type trigger should be implemented. We choose All Elements as a type of trigger, only this time, we add the new class we discovered from the Browser Inspection Tool:

The final Tag should look like this:

That’s it! It was a long run and we are almost over.

Incorporating these e-commerce events into your Google Analytics 4 setup empowers you with actionable insights to improve your WooCommerce store’s performance and enhance the shopping experience for your customers. The only last final step is to ensure that all those tags fire properly

Testing and preview with Debug

Ensuring that your GTM setup works flawlessly is essential for accurate tracking and data analysis. This section will cover best practices for testing your e-commerce events, diagnosing common issues, and troubleshooting any problems that may arise. By clicking Preview in your workspace, you can enter debug mode:

You are then prompted to enter your website URL:

And after that, a new window opens in your browser with your website in debug mode, where every action you take is recorder in your Google Tag Manager tag assistant:

Advanced Tracking and Customization

For those looking to take their tracking to the next level, there are even more advanced tracking options and customization opportunities within Google Tag Manager.

Custom JavaScript and Data Layer

Enhanced E-commerce Tracking in GTM provides in-depth insights into product impressions, promotions, and product lists. Custom JavaScript and the data layer can help you create highly customized tracking solutions that meet your specific e-commerce needs. For those brave enough to want to dive deep into e-commerce insights, you can read our article about Woocommerce and data layer.

Track your e-shop sales performance!

In conclusion, setting up Google Tag Manager for your WooCommerce store is a significant step toward data-driven success. By implementing these e-commerce events and utilizing the insights they provide, you can fine-tune your online store, boost conversions, and provide a seamless shopping experience for your customers. Don’t forget to verify your setup through Google’s Debug mode, as this final step ensures the accuracy of your tracking and reporting efforts. With GTM and GA4 in place, you’ll be well-equipped to navigate the dynamic world of e-commerce and drive your business forward.