It’s good reporting on visitors that converted into sales on your e-commerce website, but it’s even better when you can report on the dollar value of your conversions.

This is the easiest method (no plugin and minimal code) to extract values from a WooCommerce order, push the data to Google Tag Manager and have it show in Google Analytics Event reporting. We just wanted the total order value, the order ID and the payment method but you can use it to extract just about anything from the Order Received / Checkout Thank You page.

Prerequisites

  • WordPress shop using WooCommerce
  • You can edit the WordPress theme files
  • Google Tag Manager installed on the website
  • Google Analytics account

1 – Add the code to the WooCommerce Order Thank You page

Log in to your WordPress Admin, and go to the Appearance menu > Theme Editor. In the theme, find the woocommerce > thankyou page. If the file is not in your theme, you can copy the thankyou page template from the WooCommerce plugin file.

Add the following code (shown below) to the thankyou.php page below the order summary (about line 75). This will firstly grab the values you want, add them to hidden fields, from where you can create variables that you will then use to do a datalayer push (which sends them to Google Tag Manager). Customise to suit your specific requirements.


<input id="ordertotalamount" type="hidden" value="<?php echo wc_format_decimal( $order->get_total(), 2 );?>">
<input id="wooorderid" type="hidden" value="<?php echo $order->get_order_number(); ?>">
<input id="paymentmethod" type="hidden" value="<?php echo $order->get_payment_method_title(); ?>">

<script>
var ordertotalvalue = document.getElementById("ordertotalamount").value;
var orderidvalue = document.getElementById("wooorderid").value;
var ordermethodvalue = document.getElementById("paymentmethod").value;
dataLayer.push({ 
'ordertotal': ordertotalvalue,
'orderid': orderidvalue,
'ordermethod': ordermethodvalue }); 
</script>

Save the file.

2 – Google Tag Manager (GTM) – Add the Variables

In Google Tag Manager, add a Data Layer Variable for the data variables you’re reporting on (in this example, we need three – Order ID, Order Value and Payment Method).

For each, add a new user-defined variable and enter the variable name (matching the push dataLayer variable name on the Thank You page).

3 – GTM – Add the Trigger

Triggers are used in GTM to limit when tags fire on your site. In this case, we only need it to fire on the thank you page. For WooCommerce, this is the /checkout/order-received/ url.

Important: Choose the DOM Ready page view trigger. This will make sure the variable values have loaded before the event fires.

Limit the DOM Ready events to page urls that contain /order-received/ and save.

4 – GTM – Add the GA Event Tag

We’re assuming you’ve already installed the Google Analytics (GA) tag for page views to fire on all pages.

Add a new Google Analytics: Universal Analytics tag, Track Type: Event and add the variables (you can click the Add button to select them from a list or type them in directly) for each element of the event (Category, Action, Label & Value).

In addition to the variables (in curly braces), you can also include other text (as shown in this example).

Add the DOM Ready trigger that you just created and save the tag.

5 – Test your GTM container

In GTM, click Preview and open your website in a new tab. Go through the checkout process and on the thank you page you can review the DOM data to make sure your variables are collecting the correct values.

6 – Publish your GTM container

Click Submit in GTM to publish your workspace and make it live.

You can now go to your website and process another order. After completing the order, go to your Google Analytics account to see (hopefully!) the order details appearing in the real-time events report.

WooCommerce sales reporting in Google Analytics – The easy way!
Tagged on: