So here’s the scenario. You get a new visitor to your e-Commerce store. He browses around, finds a product that he loves, and clicks the ‘Add to Cart’ button. Hurray, you’re about to make a sale!

But hang on, it’s not over yet. Your customer reaches your checkout page. Suddenly he isn’t so certain about buying your product. Maybe it’s because your checkout page is too complex and time-wasting or just there’s a change of heart.

He closes your tab.

This is happening to you right now. We have all heard the statistics; about 70% of your customers are abandoning your shopping cart without actually making a purchase. To put that in perspective, out of every 10 people who reach your checkout page, only 3 make a purchase. The remaining 7? They’re gone!

WHAT IS THE REASON?

Before we try to fix the problem, we first need to understand the reasons behind cart abandonment. One of the biggest reasons found is complicated checkout process.

If you own an e-Commerce site on Magento platform, you’re familiar with Magento default checkout page which includes 6 steps as follow:

The bitter truth is that every step required to customers is another opportunity for abandonment. Whether it makes customers sweat due to technical difficulties (i.e. failure to load the next page) or a change of heart, the more pages involved in a checkout usually translates into higher checkout abandonment.

Multi-page checkout also takes time. Having to load the next page in the sequence adds time to the process. Psychologically, because customers can see that there are multiple pages in the checkout, it might feel like the checkout is long. Seeing 4 more pages to go after the current one can be quite disheartening.

Instead of just sitting and guessing, let’s pinpoint the issue with Google Analytics. By tracking your checkout funnel, we can find out at what stage your shoppers are abandoning you then apply solutions and create the conversion machine your e-Commerce store is supposed to be.

HERE’S YOUR SOLUTION: SET UP EVENT TRACKING CODE IN YOUR E-COMMERCE SITE

To start with, you’ll need to integrate your e-Commerce store with Google Analytics first. Make sure you use Universal Google Analytics. It doesn’t take so long; take a look at this installation guide.

After integrating your site with Google Analytics, install event tracking code into the backend of your e-Commerce site.

STEP 1: DECIDE WHAT EVENTS TO BE TRACKED

As mentioned before, there are 6 steps in checkout process in Magento default checkout page. Each step has a button allowing shopper move to the following step. When shoppers hit the button, it implies that they’ve been next to the next step.

For Google Analytics to track at which step customers leave, we need to install event tracking in the following button:

  1. Login button on Checkout Method page
  2. Continue button on Checkout Method page
  3. “Continue” button – Billing information
  4. “Continue” button – Shipping Information (Skip this button because if we choose billing information as shipping address then Magento default auto-redirect to step 4: Shipping Method)
  5. “Continue” button – Shipping Method
  6. “Continue” button – Payment Information
  7. “Place order” button – Order Review

STEP 2: ADD CODE TO YOUR SITE

Don’t have time to read the whole document? View this document for quick and easy reference.

Here is the basic code that we need to start with this one:

onclick= ga(‘send’,’event’,’category’,’action’,’opt_label’, opt_value)

There are a few variables that will change with each different event you track:

  • Category – grouping events into desired tracking groups
  • Action – the action the user takes
  • Label – to differentiate this event among the others (optional)
  • Value – perceived dollar value of event (optional)

To save your time and effort, we’ve written event tracking code for a Magento default checkout page. You can instantly apply these codes for your Magento site.

Now, start the job of installing code in each button. It may look complicated, but the hardest part is done for you. You just have to copy and paste these codes into your site’s backend. Trust me; it’s easy like a piece of cake.

Ok, let’s start the journey.

 

1. “Login” button- Checkout Method

Code event tracking:

onclick=”ga(‘send’, {‘hitType’: ‘event’, ‘eventCategory’: ‘Checkout Page – Test’, ‘eventAction’: ‘Login – Checkout Method’});”

Go to:

/app/design/frontend/rwd/default/template/persistent/checkout/onepage/login.phtml

Insert event tracking code in line 119:

<button type=”button” class=”button” onclick=”checkout.setMethod();”><span onclick=”ga(‘send’, {‘hitType’: ‘event’, ‘eventCategory’: ‘Checkout Page – Test’, ‘eventAction’: ‘Continue – Checkout Method’});”><span><?php echo ($this->getQuote()->isAllowedGuestCheckout() ? $this->__(‘Continue’) : $this->__(‘Register’)) ?></span></span></button>

 

2. “Continue” button – Checkout Method

Event tracking code

onclick=”ga(‘send’, {‘hitType’: ‘event’, ‘eventCategory’: ‘Checkout Page – Test’, ‘eventAction’: ‘Continue – Checkout Method’});”

Go to:

/app/design/frontend/rwd/default/template/persistent/checkout/onepage/login.phtml

Insert event tracking code in line 77:

<button type=”button” class=”button” onclick=”checkout.setMethod();”><span onclick=”ga(‘send’, {‘hitType’: ‘event’, ‘eventCategory’: ‘Checkout Page – Test’, ‘eventAction’: ‘Continue – Checkout Method’});”><span><?php echo ($this->getQuote()->isAllowedGuestCheckout() ? $this->__(‘Continue’) : $this->__(‘Register’)) ?></span></span></button>

 

3.Continue” button – Billing Information

Event tracking code

onclick=”ga(‘send’, {‘hitType’: ‘event’, ‘eventCategory’: ‘Checkout Page – Test’, ‘eventAction’: ‘Continue – Billing Info’});”

Go to:

/app/design/frontend/rwd/default/template/persistent/checkout/onepage/billing.phtml

Insert event tracking code in line 199:

<button type=”button” title=”<?php echo $this->__(‘Continue’) ?>” class=”button” onclick=”billing.save()”><span onclick=”ga(‘send’, {‘hitType’: ‘event’, ‘eventCategory’: ‘Checkout Page – Test’, ‘eventAction’: ‘Continue – Billing Info’});”><span><?php echo $this->__(‘Continue’) ?></span></span></button>

 

4. “Continue” button – Shipping Method

Event tracking code:

onclick=”ga(‘send’, {‘hitType’: ‘event’, ‘eventCategory’: ‘Checkout Page – Test’, ‘eventAction’: ‘Continue – Shipping Method’});”

Go to:

/app/design/frontend/base/default/template/checkout/onepage/shipping_method.phtml

Insert event tracking code in line 41:

<button type=”button” class=”button” title=”<?php echo $this->__(‘Continue’) ?>” onclick=”shipping.save()”><span onclick=”ga(‘send’, {‘hitType’: ‘event’, ‘eventCategory’: ‘Checkout Page – Test’, ‘eventAction’: ‘Continue – Shipping Method’});”><span><?php echo $this->__(‘Continue’) ?></span></span></button>

 

5. “Continue” button – Payment Information

Event tracking code:

onclick=”ga(‘send’, {‘hitType’: ‘event’, ‘eventCategory’: ‘Checkout Page – Test’, ‘eventAction’: ‘Continue – Payment Info’});”

Go to:

/app/design/frontend/rwd/default/template/checkout/onepage/payment.phtml

Insert event tracking code in line 50:

<button type=”button” class=”button” onclick=”payment.save()”><span onclick=”ga(‘send’, {‘hitType’: ‘event’, ‘eventCategory’: ‘Checkout Page – Test’, ‘eventAction’: ‘Continue – Payment Info’});”><span><?php echo $this->__(‘Continue’) ?></span></span></button>

 

6. “Place order” button – Order Review

Event tracking code:

onclick=”ga(‘send’, {‘hitType’: ‘event’, ‘eventCategory’: ‘Checkout Page – Test’, ‘eventAction’: ‘Place Order – Order Review’});”

Go to:

/app/design/frontend/base/default/template/checkout/onepage/review/button.phtml

Insert event tracking code in line 27

<button type=”submit” title=”<?php echo $this->__(‘Place Order’) ?>” class=”button btn-checkout” onclick=”review.save();”><span onclick=”ga(‘send’, {‘hitType’: ‘event’, ‘eventCategory’: ‘Checkout Page – Test’, ‘eventAction’: ‘Place Order – Order Review’});”><span><?php echo $this->__(‘Place Order’) ?></span></span></button>

Hurray, done!

After you’re done installing the code, Google Analytics will now start tracking it and you can see the results in your reports.

STEP 3: VIEW EVENT TRACKING REPORTS

Depending on your sales volume you might have to check your event data in a few days or weeks. This will give you enough time to figure out where customers are dropping out of your funnel.

  • In the Reporting tab of Google Analytics, go to Behavior section, choose Events then click the Top events from the drop down.
  • There’s a list of Event Category showing for you. Choose the “Checkout Page – Test” category to see the result of checkout page.

  • You’ll see a list of Event Actions. It’s time for you to read the results.

Here Google Analytics shows you how many clicks each button gets. The Event Action column list all actions (buttons) a shopper take to make a purchase. By examining Unique events of these buttons, you can figure out how many customers actually click buttons (in other words, move to the next step) and how many of them drop off from which step of checkout process.

Try to focus on understanding why customers are abandoning their carts in certain steps in the checkout process, then find the solution to make them hit the “Place order” button.

It’s clear from the table that the number of shoppers goes down through each step. This implies the fact that the more steps, the bigger number of customers leave. More specifically, 70% of “Add to cart” shoppers left before even seeing the “Place order” button. Half of them drop out from filling Billing information to choosing Shipping method. One of the reasons is that they’re getting bored and losing patience to fill such a long form of information.

Still wonder why so many customers decided to leave your checkout page? Let’s take a look at the Billing information step on checkout page of Magento default. It requires customers to fill out 12 fields. Imagine if you were a shopper, would you be patient enough to fill out such a disheartening form. And it’s not the end. There are 4 more steps waiting for you. You came to buy products, not to answer a ten-minute questionnaire!

A good solution would be to create a less complicated version of checkout page. But how can we define a checkout page to be “less complicated”?

Well, it’ll satisfy all of the following:

  • Speed: your customers do not have to wait until the next page appears. A fast and user-friendly checkout makes sure that customers do not get distracted or still decide not to buy from you.
  • Interaction: The checkout process responds even more to customer choices, with fields being updated automatically, based on these choices (as address data are also automatically completed, based on the postal code).
  • Navigation: Everything should be displayed in one single area, thus giving your customers less reasons to click the ‘Back’ button.

TAKE ACTION – FIX THE PLACE WHERE YOUR SITE IS LEAKING MONEY THE MOST

Start by setting up the event tracking of your checkout process in Google Analytics. From the results of Google Analytics, you’ll see which step has the highest abandon rate. In the previous example, the problem lies in the too long Billing information form. It’s considered the money leak of your website.

Ok, leak spotted. Let’s go make changes to the checkout process.

Unfortunately, the bitter truth is that Magento doesn’t allow you to customize your checkout page. If you’re using this platform, it might be time for you to start looking at a solution that does allow you fully control over your checkout page.

Think about this way. You could either switch to a more customizable checkout solution for your store or you’re content with the situation that money is leaking from your site even customers decide to buy your products. There is only one more step to rocket your sales.

The choice is yours.

Act quickly and save revenue instantly!


One Step Checkout

Optimize checkout page to minimize abandonment rate

Figure out how One Step Checkout for Magento 1 can turn on successful checkout rate on your web store. Here!