Stop Adding Pixel Code to WooCommerce Thank You Page!

A common task for ecommerce sites is needing to add a tracking pixel to the Order Completed, or Thank You page of WooCommerce. This pixel will help report data to an external service like Facebook Ads, Google Ads, Pinterest, or a CRM.

Adding a snippet of javascript to the WooCommerce template might seem easy, but it can quickly cause issues with your reporting.

In today’s article I’ll share why the practice of adding code to a template is an issue and how to fix it.

What is Thank You page code
Why adding code to the thank you template is a potential issue
Two alternatives to adding code directly to Thank You page template

Let’s go!

What is Thank You page code?

Some 3rd party services will supply a snippet of javascript code that needs to run when an order is complete and the instructions say “put this on the thank you page”. This code is useful for reporting the details of the completed order to analytics and reporting systems that can provide a snapshot of sales and attribute order revenue to ad spend or traffic generation initiatives.

Why adding code to the thank you template is a potential issue

To add this code you might open up your text editor and add the pixel code directly to the thankyou.php file in the WooCommerce plugin template directly. The first issue with this is that when the WooCommerce plugin is updated the modification will be overwritten and data reporting will go away unless it is re-applied. That’s why this is not a best practice.

The second issue with this approach is that there is an opportunity for your data to be skewed. Since the javascript is client-side code you have no control over how many times the code executes.

What you want to happen is for the pixel to run after the customer completes the order, but code placed in a template file will execute each time this happens:

The customer refreshes the order complete page then the WooCommerce Thank You pixel is fired again
The customer shares the page URL with someone to see instructions on the page
Customer leaves the “Thank You” page open in their browser for a few days and then refreshes

Each of these refreshes will register as a new sale causing reported order data to be a multiple of reality.

Two alternatives to adding code to Thank You page template

The woocommerce_thankyou hook is your friend

In the WooCommerce Thank You page template there is a woocommerce_thankyou hook added that will fire and send the Order ID as a parameter. Below is what the action looks like and as of WooCommerce 5.3.0:

do_action( 'woocommerce_thankyou', $order->get_id() );

This hook can be used to add javascript to the page in the same way as adding it to the template with the added feature of being able to verify it fires only once.

The Order ID can be used to get order data to add to the javacript. We’ll also add a check to the database to keep this from running more than once.

<?php
/**
 * This function will be run each time the woocommerce_thankyou hook is fired.
 * This can be run multiple times per order, but javascript will only be added once.
 */
function custom_woocommerce_thankyou( $order_id ) {
   // The order object can be retrieved with the Order ID parameter.
   $order      = wc_get_order( $order_id );
   $order_data = $order->get_data();

   // Check if this order has been
   $check = get_post_meta( $order_id, 'thank_you_page_check', true );

   if ( $check ) {
      // this has been run before exit.
      return;
   }

   // Update order that has been run before
   update_post_meta( $order_id, 'thank_you_page_check', true );

   // Javascript variables can be setup with order details
   ?>
   ecommerce_data = {         'id': '<?php echo $order_data['id']; ?>',
   'shipping_total' : '<?php echo $order_data['shipping_total']; ?>',
   'total_tax'      : '<?php echo $order_data['total_tax']; ?>',
   'order_total'    : '<?php echo $order_data['total']; ?>',     
   }

   // Use the ecommerce_data in the 3rd party javascript.
   <?php
}
add_action( 'woocommerce_thankyou', 'custom_woocommerce_thankyou', 10 );

One issue with the above script is it adds a postmeta table row per order. If your store has large numbers of orders you will want to remove postmeta rows that are not needed to reduce the overall size of the database. Removing unused postmeta rows is beyond the scope of this article.

Add client side code to prevent javascript from running

If you must use the thank you page template another option is to wrap the javascript code in a function that prevents duplicates.

First, copy the thank you page template to your site’s theme directory. Example, copy this file:

/wp-content/plugins/woocommerce/templates/checkout/thankyou.php

to this location:

/wp-content/themes/[THEME_NAME]/woocommerce/templates/checkout/thankyou.php

Be sure to replace [THEME_NAME] with the name of the active theme.

Inside the theme’s copy of the thankyou.php template add the following block around the javascript code:

?>
<script>
 try {               
 if ( localStorage.getItem('completedOrderId') != <?php echo $order_data['id']; ?> ) {          
localStorage.setItem('completedOrderId', <?php echo $order_data['id']; ?>);
}       
   // Add javascript code here
 } catch(err) { }                       
 </script>       
<?php

This block takes advantage of Window.localStorage to store the Order ID of the completed order that has been reported with the javascript code. This storage should be saved across browser sessions and although it is not 100% it should reduce the possibility of double reporting of data.

Note: this code does not require copying the template. The woocommerce_thankyou hook can be used to add the code to the order complete page.

Final Thoughts

I’ve shown two alternatives to data reporting issues that can arise when adding a WooCommerce Thank You pixel. Hopefully this is helpful to keep your reporting data clean and accurate and will keep your marketing team happy.

If you have any questions post them below or hit up Grow Development on Twitter!