eCommerce Conversion Rate Booster: Add a Touch of Personalization
I came across the blog, Better Retail by way of a tweet. After reading the article that brought me in I skimmed over other posts and one caught me eye, Illinois Residents Pay No Sales Tax. The post is a quick summary about a website that personalizes a no sales tax graphic depending on what state you live in. This is a great way to add some personalization to your eCommerce site.
If someone comes into your site and they notice a graphic saying, “Your-State-Here Residents Pay No Sales Tax”, it gives the customer a sense of comfort. This allows you to connect with your visitors on a more personalized level. Adding a feature like this one can really help increase your conversion rates.
I wanted to take the above blog post a step further and show you exactly how you can do this on your site today and get those conversion rates up.
There are several ways to achieve a function of personalization like this. I wanted a way that can be used across multiple languages. What I have found will work if your site is being run off PHP, ASP.NET, Ruby on Rails, Java and so on. It is just a simple JavaScript script that can get you this functionality.
When I searched around for a way to do this I came across this post, Find web visitor’s location automatically with javascript and Google APIs. The code here got me started in the right direction and was able to come up with code to create the personalization code. A side note to this, I found that the place I got this code from is from Brian Cray‘s blog. He is located in Columbus, OH and I am also in Columbus, OH. It’s a small world.
<div id="salestax"></div>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-KEY-HERE"></script>
<script type="text/javascript">
if(google.loader.ClientLocation)
{
visitor_region = google.loader.ClientLocation.address.region;
document.getElementById('salestax').innerHTML = '<p><img src="./images/' + visitor_region + '.gif" /></p>' + visitor_region;
}
else
{
document.getElementById('salestax').innerHTML = '<p><img src="./images/notfound.gif" /></p>';
}
</script>This uses the Google AJAX API script. For you to use this on your site you will need to sign up for a Google API key and place it in the code above where it says “YOUR-KEY-HERE”.
This code will look for an image in the image folder named after the visitors region. The region comes back as the states abbreviation. So for an example the code finds be in Ohio. It returns the visitor_region as OH. It will look for the image OH.gif in the images folder and display that image on the page. What you will need to do is create an image for each of the 50 states and place them in an images folder.
If the Google location script does not return a visitor_region the else statement is there to catch that error and display a default image, notfound.gif. These geo location scripts do not always work properly, so make sure you always have a default image to display if it does not.
There are many other applications that this type of code could be used for besides just a no tax icon. I would love to see how people use this on their sites for personalization. Let me know in the comments if you do.
Start improving your eCommerce stores conversion rate today.
March 4th, 2010 at 12:32 pm
This is pretty cool, just hard to test it out to see what other states are seeing once you set it up since you can only view from your own state.
March 4th, 2010 at 12:44 pm
Jeff -
I 100% agree on the testing part. I can only see if it is working for Ohio. That is why I put the default fall back image to show if anything goes wrong.
I have also seen that when I plug in on different isps it is not always able to determine that I am in Ohio.