Using Google Optimizer with Lite Commerce Shopping Cart

Wouldn’t it be nice if you could improve conversion rates for your shopping cart by performing experiments? Thanks to Google Optimizer’s ability to perform multivariate testing you can perform experiments and select a high confidence winner that increases conversions.

This article will describe the necessary steps to setup Google Optimizer for use with the Lite Commerce shopping Cart. In this example we will assume the following:

1. The shopping cart has already been instrumented with Google Analytics

2. Lite Commerce version 2.2 is installed

3. The Lite Commerce HTML catalog is installed and enabled.

4. A Google Optimizer A/B Experiment is being setup

In the typical Lite Commerce installation that uses the HTML catalog, the index.php file that is in the web server document root directory contains a redirect to the index.html file that is located in the catalog directory. The following is an example of the document root index.php file:

<?php
header('Location: ./' . 'shop/catalog/index.html');
?>

In the example A/B Experiment, we desire to use the standard HTML catalog index.html page for our A experiment and an entirely different homepage for the B component of our experiment. We will also setup a goal page so that we can use Google Optimizer to determine if the A or B homepage leads to more sales conversions.

In order to use Google Optimizer you must have a Google account and must sign into Google Optimizer. The process of setting up a Google Optimizer experiment is beyond the scope of this article.

We next need to configure the original index.html file in the catalog directory. In order to configure the index.html file, we need to add two javascript snippets to the file. If we add the javascript to this file, the changes will be overwritten each time a new HTML catalog is created. In order to circumvent this issue, we made a copy of the index.html file in the catalog directory and named it index1.html. We then edited index1.html and added the two javascript snippets to this file. This solution will require the same process to be repeated anytime the HTML catalog is recreated. After creating the index1.html page we need to modify the original index.php file as follows:

<?php
header('Location: ./' . 'shop/catalog/index1.html');
?>

We create the B part of the experiment by creating an alternate homepage by naming it index2.html and placing the file in the document root directory. After index2.html is created the Google Optimizer javascript must be added just before the closing body tag ( e.g. </body> ).

The final task is to determine the Lite Commerce goal page. The best goal page would be the “Thank You” page that is displayed after a successful purchase. You can use the following url for the conversion page:

https://your domain and path to the shopping cart directory/cart.php?target=checkoutSuccess

For example: https://www.mainstreamit.com/shop/cart.php?target=checkoutSuccess

Since the Lite Commerce shopping cart is template driven, we will need to add the Google Optimizer javascript to the Lite Commerce file named main.tpl. The javascript must only be displayed if the checkoutSuccess dialog is displayed. Here is an example:

{if:target=#checkoutSuccess#}
<script>
if(typeof(urchinTracker)!='function')document.write('<sc'+'ript src="'+
'http'+(document.location.protocol=='https:'?'s://ssl':'://www')+
'.google-analytics.com/urchin.js'+'"></sc'+'ript>')
</script>
<script>
_uacct = 'UA-xxcxxcx-x';
urchinTracker("/xxxxxxxxxx/goal");
</script>
{end:}
</body>

This completes the process of enabling Lite Commerce to use Google Optimizer.

Happy experimenting!

Did you find this article to be useful?