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

[WooCommerce] Checkout Progress Bar

As you read articles/posts on ecommerce optimization, specifically checkout optimization, a popular theme emerges: The Checkout Progress Bar. The idea is to provide your visitors some kind of visual feedback that they are making progress. It tells them how far along they are before the purchase is complete. Conversely, it tells them how much longer before they can own the product/service they are vying for.

With this in mind, I googled for a free plugin that would accomplish just that. My search ended fruitless (almost). I did hit this gem of a plugin called Progress Bar. This is a simple plugin that can be used anywhere on a WordPress site.

Steps

In this article, my aim is to create your own customized checkout progress bar without the use of any paid plugins. You will need

  • Download the Progress Bar plugin from the WordPress plugin repository
  • Make some code changes (PHP and JS included). Download from github.

The code changes are shown below. The first change is in your theme/child theme’s functions.php file. Two things are happening here:

  1. Hooking into the “woocommerce_checkout_before_customer_details” action hook to display the Progress Bar. We use the shortcode for the Progress Bar because it allows to send in parameters for styling and appearance.
  2. Loading the JavaScript file that will manipulate the Progress Bar based on how much of the Checkout Form has been validated.

The second file is the JS script that checks in real-time which mandatory fields have been validated. Then it calculates the progress (in pixels) by simply dividing the “number of fields validated” by the “number of fields that require validation”. It also accounts for the “Shipping Address Same as Billing Address” checkbox.


The end result is you get a progress bar for your WooCommerce Checkout Page.

WooCommerce Checkout  Progress Bar in Action
WooCommerce Checkout Progress Bar in Action

Notes on Customization

The CSS for the progress bar can be easily customized. Follow the instructions on this link. Also, note that the plugin has quite a few options that can be used for customizing the look and feel of the Progress Bar.

WordCamp Miami 2015 Recap

I attended WordCamp Miami 2015 during May 28th-May 31st. The venue was Florida International University (FIU), my alma mater. The FIU campus has undergone a transformation. 16 years after I graduated, the campus has new buildings, fast food joints like a mall. I do feel proud of the fact that FIU campus at University Park has undergone such upgrades. The buildings sure look nice.

Enough about the venue, let us get down to what this post is really about. First day of the WordCamp was Theme and Front End Development course. There were talks about getting your feet dirty in the theme development. What follows are my tidbits on what I gathered during the talks. I was not able to attend all sessions. I focused more on the development/theme coding sessions.

Presentation/Slides are located here.

Day 1 : Core Concepts of WordPress Themes

  • Double quotes in PHP echo statements will automatically replace the variables with their respective values.
  • Template Hierarchy : wphierachy.com
  • Presentation Slides
  • Any member of the template hierarchy will have a version of The Loop
  • The “body” of The Loop is where all posts are rendered
  • Show Current Template” plugin shows the actual template being loaded for a particular page/post.

Day 1: Building A Theme Using _S

Personally, this was my favorite talk. It was presented by Morten Rand-Hendrickson. Morten (“Mor10”) took a very hands-on approach by walking us through an actual project he did for Emily Carr university. For the project, he had to design a site for a mouse-only navigation where movies created by student artists would be showcased. He used the _s theme and built on top of that, incrementally achieving the final outcome.

  • Code Location – Project code used for Presentation. This theme was derived from _S (underscores.me).
  • Advanced Custom Fields is an easy plugin for adding custom fields to posts
  • CPT UI – Used for creating Custom Taxonomies
  • Mediaelementjs.com – Used for video controls
  • Isotope – automatically filter content on page. It does by appending class names.
  • When you download from underscores.me, whatever you put in the “Name” field will be inserted into the code (example: wcmia_*).
  • google.com/fonts will show you the preview of all fonts
  • display:flex (flex box can be used for auto prefixer) allows equal height columns without using float and clear. This is a CSS directive that enables equal height column layout. Can be used for orienting any content, horizontal or vertical.

Particularly, this talk was very insightful. Mor10 kept us engaged for 2 hours. That is a long talk by any coding standards. Mor10 was patient with our questions. He went step by step through his git changes. Moral of the story: For something so complex, break things down into smaller pieces. Connect the actual pieces from the problem into WordPress posts, taxonomies, custom fields etc.

Day 2: [Development Track] Beyond the Post: Pushing the limits of Custom Post Types

Look at this for an example of custom post type: wordpress.org/plugins/meteor-slides/developers

FieldManager – github

CMB2 – WebDevStudios github.com/WebDevStudios/CMB2

ACF ( may still require coding)

Day 2: [Content Track] How to Come Up With Articles for your Blog

Mistakes

  1. We only blog when we feel inspired
  2. We let our insecurities hold us back (“I am not a writer; I don’t have any thing important to say”). This prison is one of your own making.
  3. We only blog when we have a new insight.
  4. We simply need to learn to tell good stories. You do not need to be a story teller to be able to blog/write. The process of telling a story starts with Point, progresses to Context and then you Start.
  5. We will only blog when we are interesting.

Tips

  • Source : What did you see?
  • Story: What is the story?
  • Lesson: What is the point?
  • Audience: How do I shape it?
  • Point: What should they do?

Day 2: [Content Track] Constructing a Large Informational Site by Becky Design

Use Facets for filtering and narrowing down content from different taxonomies. The FacetWP plugin sounds very interesting in that it has a broad range of applications. I am excited to make this work for ecommerce sites using WooCommerce.

For creating custom taxonomies, you can either code your own via a plugin or use the CPT UI plugin.

Day 2: [Development Track] Cache Money Business by Mark Jaquith

2 Slow 2 Furious – Slow Sites are not good for performance

Caching Principles

  1. Do Less Work
  2. Work Less Often ($TTL = 5400;)
  3. Make Generic Output (less personalization)

BatCache – WordPress cache plugin – for full Page Cache Output

W3 Total Cache – Complex WordPress cache plugin

WP Super Cache – Medium complexity cachine plugin

CDN – Content Distribution Network – Points setup around the world for better performance

Nginx Cache Purging – 3rd party module for purging nginx cache

Varnish – Does not support SSL pages

Logged in = no page caching?

Cache Buddy – Subscribers and Users will not appear as logged in users

Cache WordPress Objects

APCu (Single Server Only), Memcache, Redis

Day 2: [Developer Track] WordPress and Third-Party API

API’s – WordPress API’s are written in in JSON (REpresentational State Transder)

How to build plugin’s which communicate via JSON API

json_decode(), $get., CURL are not what we use in WordPress

WordPress APIs – HTTP API is an important API for sending and receiving data to/from external sites.

  • wp_remote_get()
  • wp_remote_post()
  • is_wp_error($response)
  • wp_remote_retrieve_body()
  • set_transient()

Example was retrieving a random joke via JSON from the ICN Joke Database (Internet Chuck Norris Joke Database). You can integrate this code into a widget within WordPress or a shortcode.

Conclusion

That’s it! I only attended 2 of the 3 days. I skipped the Sunday schedule. All in all, it was a good event. As with any WordCamp, some talks were more useful to some people than others. It all depends on whether or note you received actionable stuff from any or some of the speakers. In my case, constructing a custom theme based on _s was enlightening. Additionally, I am excited to try out the FacetsWP plugin within an ecommerce site. By that measure, this WordCamp event was very useful for me. I look forward to WordCamp Miami 2016.

WordPress tidbits

I recently attended the South Florida WordPress Developers Meetup in Davie. I wanted to re-cap some of the very useful pieces of tidbits that Michael Schofield presented at the meetup. He has a very easy way of presenting information. Michael does not hesitate to dig into the deep details of WordPress. I left the meetup feeling very happy armed with all the useful information he presented.

  1. You can create your own barebones theme by visiting underscores.me. This same website is also used to generate the base TwentyEleven, TwentyTwelve and TwentyThirteen themes that come bundled with the default install of WordPress. At a minimum, a theme can function with just 2 files: index.php and style.css. Michael did a great job at explaining each of the files with the theme. He dissected the code and did easy demos to explain how these files fit into the big picture.
  2. the_excerpt() function is used to display a 255 word excerpt of the blog post. However, this can be problematic if the post has a lot of non-text material in the beginning. An example could be images, special HTML formatting etc. In that case, you can use “get_the_excerpt()” alternatively. This function will strip out all the HTML before printing.
  3. How does WordPress determine which page to show? Here is a helpful infographic that shows how WordPress determines the correct template file to invoke. You can also find a simpler Black and White version of this Template Hierarchy at https://codex.wordpress.org/Template_Hierarchy
  4. For developers, a very useful tool that they can use for quick testing and validation: www.codepen.io. As Michael demonstrated the use of this tool live, I was fascinated with its power. Michael did a quick demo of how to create a Triangle using only CSS and also rotated the triangle. Very Cool indeed!
  5. Another very useful resource (one that I did not know existed) is the ability to test which CSS mechanisms are compliant with which browsers. www.caniuse.com to the rescue. THis will allow you to test which CSS clauses are compliant with each browser. A nice matrix shows you the answer easily.
  6. Also, dont forget the WordPress Codex.

Thanks to this meetup group, I was able to learn quite a few pieces of useful advice that we as developers find very pertinent. I will start using some of these resources in the future.

 

 

Redirects in IIS – ASP.NET

While I am comfortable with working in Apache mod_redirect, Redirects on Windows IIS are a totally different animal. On a client’s project, I needed to implement a redirect on a Windows IIS server, using the DotNetNuke platform.

Here is how I did it

1. Look for the file named “SiteUrls.config” in the main root directory of the hosting environment.

2. Edit that file as follows:

<RewriterRule>
 <LookFor>.*PageThatNeedsToBeRedirected.aspx(.*)</LookFor>
 <SendTo>https://example.com/DestinationPage.php</SendTo>
 </RewriterRule>

3. Save the file and reload in the browser to verify that the redirect is occurring correctly.

This is it. You will need to replace “PageThatNeedsToBeRedirected” with the actual file name of the old path/file. Similarly, “DestinationPage” will be replaced by the page being redirected to.