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 GA4 Event tag, and add the variables (you can click the Add button to select them from a list or type them in directly) – in my example you’ll see I’m using one in the event name and the others added as parameters.
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.
Free $69NZD credit for Airbnb travel accommodation
Thinking of driving for Uber? Sign up here
Is that free website really free?
Free foreign currency transfer with Transferwise (up to $500GBP)
Get 20% off Google Suite