For a while now, I have wanted to have visibility into what really happens on the WooCommerce Checkout page. More specifically, the goal is to determine why almost 50% of those visitors leave the site from the Checkout page?
Survey pop-ups could be one way of determining why they are leaving the site. However, personally, I consider those intrusive. Why not have a behind-the-scenes way of reporting the exact error(s) the user might be encountering?
At first, I envisioned that I could insert some JS code (specifically the GA Send Event JS code) within the relevant WooCommerce filter. In this case, it was going to be the “woocommerce_add_error” filter. However, that was not going to work, as I found that out after a bit of experimentation. Somehow, the JS code was being appended to the “checkout.min.js” file instead of being added inline. Later, I discovered that you can not add JS code in Filter Hooks. See this Facebook post in the Advanced WordPress group for that discussion.
The Solution
As I looked for how to solve this issue, another alternative method came to mind. What if I could trigger on the addition of the “<ul class=”woocommerce-error”>….</ul>” element to the DOM?
This way, the solution would be generic and can be extended for other notice types (warning, notice, message etc) as well. It could easily be used outside of the WooCommerce context as well. Ofcourse, you will have to change the correct class/id of the element being targeted.
Code Changes
| function load_ga_error_script() { | |
| // Load the JS file (jquery is a dependency) | |
| wp_enqueue_script( 'ga-send-error-event', get_stylesheet_directory_uri() . '/js/ga-send-error-event.js', array('jquery' ) ); | |
| } | |
| add_action( 'wp_enqueue_scripts', 'load_ga_error_script' ); |
| jQuery(function() { | |
| jQuery('.woocommerce').on('DOMNodeInserted', function(e) { | |
| if (jQuery(e.target).is('.woocommerce-error')) { | |
| // How Many Errors | |
| var error_count = jQuery('.woocommerce-error li').size(); | |
| // This extracts the contents of the <li></li> tags, separated by commas | |
| var messages = jQuery(".woocommerce-error li").map(function() { return jQuery(this).text() }).get().join(); | |
| // Send the GA Event | |
| // Event Category: WooCommerce Error Event Action: checkout-error-notice Event Label: Actual Error Message shown to user | |
| // Event Value: How many errors were shown to this user | |
| ga("send", "event", "WooCommerce Error","checkout-error-notice", messages, error_count, {"nonInteraction": 1}); | |
| } | |
| }); | |
| }); |
Explanation:
The code changes are split into 2 parts:
- Load the new JS file from within the functions.php of your child theme.
- ga-send-error-event.js should be located in the “js” folder of your child theme. If the “js” folder” does not exist, you will have to create it.
Testing
Once you make these changes, you can test it yourself in Google Analytics. But first, you will have to conduct your testing in an Incognito window (Google Chrome).
- Visit your Checkout page (preferably in an uncached and incognito browser session)
- Open your Developer Toolbar from the Browser (Chrome Dev Tools or FireBug)
- Leave all fields empty.
- Select a Payment Method and click on Continue
- You should see the messages printed above the Checkout Form
- Log into your GA interface
- Navigate to Real-Time->Events->Events (last 30 minutes)
- You should see new events generated under the “WooCommerce Error” category.
See screenshots below
In my case I had left the Billing First Name and Billing Last Name empty. Additionally, I had also left the “Terms & Conditions” checkbox unchecked. The Event Label got truncated, but if you hover over it, the full label is :
“Billing First Name is a required field.,Billing Last Name is a required field.,You must accept our Terms & Conditions.”
So this is how I solved the issue of reporting error messages on WooCommerce checkout page. I am not sure how helpful this will be (I am hoping it will lead to better insight into the actions of the user on the Checkout page). Hopefully, it will reveal weaknesses in the UX.
What do you think? Is this something useful for you? Go ahead and use the code. Let me know if it works well for you. You can also easily extend this code to any part of the site (it does not have to be WooCommerce related).