How to Report WooCommerce Checkout Errors as Events in Google Analytics

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

Explanation:

The code changes are split into 2 parts:

  1. Load the new JS file from within the functions.php of your child theme.
  2. 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).

  1. Visit your Checkout page (preferably in an uncached and incognito browser session)
  2. Open your Developer Toolbar from the Browser (Chrome Dev Tools or FireBug)
  3. Leave all fields empty.
  4. Select a Payment Method and click on Continue
  5. You should see the messages printed above the Checkout Form
  6. Log into your GA interface
  7. Navigate to Real-Time->Events->Events (last 30 minutes)
  8. You should see new events generated under the “WooCommerce Error” category.

See screenshots below

New Category of events called WooCommerce Error
New Category of events called WooCommerce Error

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 &amp; Conditions.”
Event showing Full error message
Event showing Full error message

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).

How to Setup Algolia Search on WordPress with Genesis Theme

For those of you new to Algolia, this is another Instant Search solution for WordPress search. It is a 3rd party solution. The plugin is Free. The service is based on the free plugin on the client side communicating with the Algolia servers to retrieve search results for users.

The Algolia setup is very simple. You download the plugin from https://github.com/algolia/algoliasearch-wordpress. Install the plugin manually via your WordPress Admin. Create a new account on www.algolia.com.

For some reason, my drop down box containing the Search Results was not showing. It would only happen when using a Genesis theme. For other themes (I verified it worked with Storefront), it worked just fine. I posted in the StudioPress forums, but no luck. I inspected the Chrome Inspect Console but saw no JS errors.

I even tried disabling one plugin at a time, trying to figure out a possible conflict. No luck there either.

I decided to seek the help of Algolia’s support team. Sylvain Utard, the VP of Algolia Search came to my rescue. After a few experiements and emails back and forth, he figured out the issue. The issue was CSS related.

From my understanding, the Search Form overflow property was not visible by default in Genesis. The drop down for Algolia Search Results was always there, just invisible!

Here is the fix
.search-form {
overflow: visible !important;
}

Voila! That CSS change did the trick.

WooCommerce: Replace “Add To Cart” with “Ask” Form for Custom Products

When you Google the phrase “replace Add to Cart WooCommerce” (or any variants thereof), there are a lot of SERP’s suggesting the same way of hiding/not displaying the Add To Cart button. The idea is to remove the “woocommerce_template_single_add_to_cart” action.

Replace “Add to Cart” for Custom Products

However, in my case, I wanted to do this for only certain specific products. I have products that are marked as “Custom”, i.e. not stocked products. These are products that can be customized as per the customer/client. They usually take 6-8 weeks from order to delivery. The idea for the landing pages for these “Custom” products is not for them to make the purchase outright, but get them to contact the store owner. This way, the process of designing the custom product can be taken offline.

How to Designate a Product as “Custom”

The first step is to identify the products as “Custom” in WooCommerce. Following this guide by Remy Corson, I added a Checkbox under the General tab in the Product Edit Screen. When this Checkbox is checked, it means that the Product is “Custom”.

"Custom" product
“Custom” product

As you can see in the image above, this product is defined as “Custom”.

Next up, we have to hook into the correct action for marking all “Custom” products as not being allowed for Purchase. We will use the is_purchaseable() hook for that purpose.

Alternative CTA for “Custom” Products

I wanted a form to take the place of the “Add To Cart” button. In my case, I use Contact Form 7 for my forms. I just added a small form specifically for the purpose of this CTA. The visitors will see this form in place of the Add to Cart button. The store owner receives an email containing the lead.

We are simply checking if the Product is “Custom”. If it is “Custom”, we will set it as being non-purchaseable. This will hide the “Add To Cart” button for such “Custom” products.

Full Code Listing

Here is the full code. Notice that 2 other custom fields were added. You do not need those, so you can easily delete the relevant lines of code.

Questions/Comments? Type away in the comments below.

How to Add JavaScript to your theme

From the last WordPress meetup, we discussed How to add javascript to your theme

Inside functions.php, hook into the wp-enqueue_scripts hook

add_action( 'wp_enqueue_scripts', 'wpmia_load-javascript_files');

function wpmia_load_javascript_files() {

wp_register_script( 'info-caroufredsel', get_template_directory_uri() . ' jquery.carouFredSel-5.5.0-packed.js', array ('jquery', '5.5.0', true);

...

...

wp_enqueue_script( 'info-carousel-instance' );

 

if ( is_front_page() ) {

wp_enqueue_script('home-page-main-flex-silder');

} 

}

AdWords Location Options Target and Exclude

You may have setup several Ad campaigns in Adwords. One of the setup options is related to Location. I did not give this one setting much importance. Instead, I would just enter the Country to target and forget about the rest. My assumption was that since I was “Targeting” visitors from just the one country, my ad would NOT be shown to anyone outside the targeted country.

Adwords Location Options
Ignore this at your peril. To target tightly, click on “People in my targeted location”

For example, I have Ad Campaigns targeting users exclusively in the United States. Or so I thought! My assumption was wrong, but I found out the hard way.

Accidental Discovery via Google Analytics

I was researching my site bounce rate when I stumbled upon the fact that my Adwords Ad was being displayed to users outside my “Target” country. This was totally unexpected because I did not intend to do that. I was trying to reach a specific country, but instead it turned out that users in other countries were being shown my Ad. Because this Ad was not relevant to them, my bounce rate associated with such visits was higher than 70%!

Through my newly learnt skills at segmenting data, I was able to narrow down specifically 3 countries whose visitors were showing an extremely high bounce rate. Note that these 3 countries were NOT my targeted countries.

Once I uncovered these wasted PPC clicks, I was determined to find out why AdWords was showing my ad. My first impulse was “ha, I found a bug in AdWords!”. Ofcourse, on deeper reflection, that was untrue. A bug like that could be of huge proportion and would have been caught much earlier.

Needless to say, I went digging through my Ad Campaign Settings. Specifically, I was seeking the answer within the Location Options settings.

Location Options (advanced) explained:

As it turns out, I had not read the instructions clearly. Part of the reason I overlooked this setting was because of the “recommended” default. The “Recommended” default option allows the ad to be shown to anyone in my targeted location, but also to anyone who “shows interest” in your targeted location. To make this clear, say you are selling “medicinal soap” through your Ads. Your “Target” country is United States. All is good so far, but what happens when a user searches for “medicinal soap in usa”? You guessed it right, the Ad is displayed.

What does this mean for me? In my case, I want a very tight control over what target country my ad is displayed in. Hence the “Recommended” defaults was not apt for my situation. I believe my choice would be “People in my targeted location“.

This setting would make sure that the Ad is never displayed outside of the Targeted country.

Also, keep in mind that the same settings apply for “Excluded” countries as well. The logic is the same, just conversely.

Conclusion

As I stated earlier, I was not looking at AdWords settings initially. My goal was to figure out why the bounce rate was so high for my site. This may be a small factor, but I am excited to see if the bounce rate will be lower, atleast for visits from the Adwords CPC medium.