Tracking WooCommerce Orders with Google Tag Manager In Wordpress: A Complete Guide

Tracking WooCommerce Orders with Google Tag Manager In WordPress: A Complete Guide

Introduction:

Set up enhanced conversions for web manually with Google Tag Manager in WordPress

Tracking order details in Google Tag Manager (GTM) is a powerful way to measure the performance of your e-commerce store and gain valuable insights into customer behavior. By sending order data to GTM, you can track important metrics such as order value, conversion rate, and customer lifetime value.

In this guide, we will show you two different methods to add an order complete script to the WooCommerce “thank you” page. The first method involves adding the script directly to the “thank you” page template, while the second method uses a theme function to add the script to the page.

 

Method 1: Adding the Script Directly to the “Thank You” Page

The first method involves adding the script directly to the “thank you” page template. This method is quick and easy, but it requires you to have access to the theme files and be comfortable editing code.

To add the script to the “thank you” page, you will need to locate the “thankyou.php” file in the “woocommerce/templates/checkout” folder of your theme. Once you have located the file, you can add the following code to the bottom of the file:

<script>
  <?php 
    global $woocommerce;
    $order = new WC_Order( $order_id );
  ?>
  dataLayer.push({
    'event':'OrderComplete',
    'order_value': '<?php echo $order->get_total(); ?>',
    'order_id': '<?php echo $order->get_order_number(); ?>',
    'currency': '<?php echo get_woocommerce_currency(); ?>',
    'enhanced_conversion_data': {
      "email": '<?php echo $order->get_billing_email(); ?>',
    }
  });
</script>

This code retrieves the order details from the global $woocommerce object, including the order value, order ID, currency, and customer email. Be sure to place this code after the order details are available on the page.

Method 2: Using a Theme Function

The second method involves using a theme function to add the script to the “thank you” page. This method is a bit more involved, but it is a good option if you are not comfortable editing theme files.

To add the script using a theme function, you will need to add the following code to your theme’s functions.php file:

function custom_order_complete_script() {
    global $woocommerce;
    if ( is_wc_endpoint_url( 'order-received' ) ) {
        $order_id = absint( $_GET['order-received'] );
        $order = new WC_Order( $order_id );
        ?>
        <script>
          dataLayer.push({
            'event':'OrderComplete',
            'order_value': '<?php echo $order->get_total(); ?>',
            'order_id': '<?php echo $order->get_order_number(); ?>',
            'currency': '<?php echo get_woocommerce_currency(); ?>',
            'enhanced_conversion_data': {
              "email": '<?php echo $order->get_billing_email(); ?>',
            }
          });
        </script>
        <?php
    }
}
add_action( 'wp_footer', 'custom_order_complete_script' );

This code hooks into the “wp_footer” action which will add the script to the footer of the page, then check if it’s on the “order-received” endpoint, if it is it will retrieve all the necessary data and output the script.

Please note that if you are using a caching plugin it may not work as expected, since the caching plugin will not execute the PHP code and the script will not be added to the page.

Leave a Comment