Website Personalization: Shouldn’t Sites be Smarter?

Amir Glatt
Personalized plates gallery

Photo: Malingering

As we all know, the web industry is moving fast.

We started with static websites that always look the same and are designed for people sitting in front of a desktop computer. Then we moved to mobile sites, which quickly evolved into responsive sites that provide a great experience regardless of whether a user is sitting in front of their desktop, using their smartphone in a supermarket line or browsing an iPad from their couch.

I believe the next breed of websites will need to dynamically display personalized content for each user based on more than just the device/screen he or she is using.

A user’s experience can also be defined by other factors like time, location, usage of the site and the user profile. This approach can help both consumers and businesses.

  • Consumers will get a more relevant web experience.
  • Businesses will see a higher conversion rate from visitors to actual customers.

Let’s look at three different personalization scenarios and how we might go about implementing each:

Scenario A – Location based personalization

I am a restaurant owner that has two locations; one in San Francisco and one in Los Angeles. Although I have a single website for both restaurants, each location has different promotions running.

I want to highlight the promotion on the homepage, but also want to ensure that users from Los Angeles will see the Los Angeles promotion and users from San Francisco will see the San Francisco specials.

This is how I want my site to look:

Visitors from Los Angeles:

View #1: Hollywood

Visitors from San Francisco:

View #2: San Francisco

How to implement it:

1. Implement the different promotions sections in your HTML, give them unique IDs and hide them using CSS.

<section id="promotion-la" style="display:none">
    <!-- your LA promotion html goes here -->
</section>
<section id="promotion-sf" style="display:none">
    <!-- your SF promotion html goes here -->
</section>

2. Add JavaScript code that will determine the visitor location based on their IP address and display the relevant section accordingly. In this example, we will use MaxMind JavaScript API (http://dev.maxmind.com/geoip/geoip2/javascript/) to get the location data. You can also use MaxMind from your server-side code.

In this example, I’ll assume that you’re using jQuery.

<script src="//js.maxmind.com/js/apis/geoip2/v2.1/geoip2.js" type="text/javascript"></script>
<script>
$(document).ready(function(){


    var onSuccess = function(location){
if(location.city && location.city.names && location.city.names.en)
        {
             if(location.city.names.en == "San Francisco")
            {
$("#promotion-sf").show();
            }
            else if(location.city.names.en == "Los Angeles")
            {
                 $("#promotion-la").show();
            }
        }
    );
    };
    var onError = function(error){
    alert(
      "Error:\n\n"
        + JSON.stringify(error, undefined, 4)
    );
    };

// get the user location
    geoip2.city(onSuccess, onError);
});
</script>

You can also use the mobile JavaScript location API (http://dev.w3.org/geo/api/spec-source.html) to build scenarios based on the exact location of the user (street address for example) but this approach has two main drawbacks:

  1. It will work only on location-enabled devices.
  2. It will show the user a “Do you allow this website to use your current location” alert, which can lead to higher bounce rates.

Scenario B – Time based personalization

Let’s say we want to show the daily specials on the menu page based on the current day.

This is what I want it to look like:

Menu page on Friday:

Friday special: Steak

Menu page on Saturday:

Saturday Special: Shrimp

Saturday Special: Shrimp

How to implement it:

  1. Implement the different daily special sections in your HTML, give them unique IDs and hide them using CSS.
<section  class=”Friday”  style="display:none">
    <!-- your Friday special html goes here -->
</section>
<section  class=”Saturday” style="display:none">
    <!-- your Saturday special html goes here -->
<section>

2. Add JavaScript code that will check the current day and show the relevant special section.

<script>
$(document).ready(function(){
 
var d = new Date();
var weekday = new Array(7);
weekday[0]=  "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var today = weekday[d.getDay()];
$('.'+today).show()});
</script>

You can add any other time-based scenarios. Happy hour messages during certain hours of the day, special effects on New Year’s Day, breakfast menu versus dinner menu, etc.

Scenario C –- Visits based personalization

Let’s add another cool example to the mix.

A first-time visitor to our site is usually looking for something different than a returning visitor, who is likely already a fan of our restaurant. So, let’s show returning visitors who have visited our website three or more times an offer to join our mailing list so they can be notified when we’re having special events.

This is how I want my site to look for visitors who have visited three or more times:

Mailing list

How to implement it:

  1. Implement the ‘join our mailing list’ section in your HTML, give it unique ID and hide it using CSS.
    <section id=”join”>
    your mailing list form goes here
    </section>
    1. Add JavaScript code that will check the number of visits of the user and show the section if it is three or more. We will use a cookie to store the number of visits of the user.
$(document).ready(function(){

function getTotalVisits()
{
    var  now = new Date(),
    // we will set a cookie to be valid for 1 year
    expireDays = 365, 
    // we will define a visit length as 30 minutes
            visitLength = 30 * 60000;
    
    // get the last pageview time.
    //We are using jQuery cookie plugin to get/set the cookies
    lastView = $.getCookie("last_view");
    if (lastView == null)
        lastView = now.getTime();
    // set the new last page view
    $.setCookie("last_view", now.getTime(), expireDays);
    
    // get the total visits from the cookie
    var numVisits = $.getCookie("total_visits");
    if(numVisits == null)
    {
        numVisits = 0;
    }
    // increment the total visits by 1
    numVisits = (numVisits* 1) + 1
    // set a new total visit if needed
    if (numVisits == 1 || now.getTime() - lastView &gt; visitLength) { // this is a new visit          
        $.setCookie("total_visits", numVisits, expireDays);             
    }
    return numVisits;
}
 
// show the join us section if total number of visits is bigger than 3
if(getTotalVisits() &gt;= 3)
{
    $("#join").show();
}
});

These are just three examples; you can probably think of dozens of other use cases that will make sense for you or your clients’ business. It can get really interesting and exceptionally targeted when you start to combine multiple triggers together.

Imagine doing something for users from NY at specific times, or for first-time visitors that are using a mobile device.

Obviously, you want to make sure that the personalization you are implementing is achieving your goals, so it’s a good idea to add tracking when an action is completed in those scenarios. You can use Google Analytics Events, Mixpanel or any other analytics software.

The biggest challenge with website personalization, in my opinion, is maintenance. How to add those use cases without making the code unreadable. How to remember when a promotion ends and remove the code. How to understand what the website will look like for each user if multiple scenarios are configured. These are things you need to consider before adding a lot of those hooks to your site.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://dev.maryus.ca/ Maryus Bio

    Excellent tips, thank you for sharing!

    • Amir Glatt

      Thanks, You’re very welcome!

  • Harry Oosterveen

    Why would you do this in the client? Why sending so many versions of the content, where only one version is needed? All information is also available on the server, so you can serve just the content that is needed. Makes the page load faster, and more accessible.

    • http://knowkalpesh.in/ Kalpesh Singh

      Hi @harryoosterveen:disqus ,

      I agree with you. But,I think it is worth to have such creative ideas in a particular class of website and here that restaurant example is serving hot.
      @amirglatt:disqus illustrated it very sleekly.

      • Harry Oosterveen

        Absolutely agree with that, the example is well chosen and clarifies the principle nicely.

    • Tony Pirat Gustafsson

      Well, the GPS position is hard to get on server level :) But time and sessions, absolutely!

      • http://ChiefAlchemist.com/ Mark Simchock

        While I don’t know one off the top of my head, I’m pretty sure there are at least IP to location APIs. If that’s not granular enough then why not a quick read-client-side then redirect? Too much time? Bad UX?

    • http://www.dudamobile.com Amir Glatt

      Harry,
      You are absolutely right, running those rules on the server side when possible will make it more efficient, it’s really the question if you have easy access and the skills to run it on the server. In fact, when we implemented Duda inSite, our own website personalization framework, we did exactly that.
      The purpose of my post was to show how creative personalization ideas can boost a standard website and make it much more relevant and interesting.
      Amir

    • Dima Taras

      mb bcause we can cash the page and no need to regenerate it fore veryone?

  • http://www.karlbrownvoiceover.com/ Karl Brown

    Excellent article. We’re doing something similar with a site upgrade project that will hopefully give us greater customer personalisation, although the strategy seems to be a back-end solution rather than the front-end examples above.

    Especially for e-commerce the possibilities are endless, if the marketing team use them intelligently and avoid trying to cover every base. The one worry I have is that sites try to personalise for everyone and start getting into hundreds of use cases, like male customers logged in with products x and y in their basket with services a, b and c in their purchase history who happen to have a Z in their name and are on the train. Personalisation could lead to server loads becoming too great, page speed dropping again, and end up not serving anyone by trying to serve everyone.

    I do like the restaurant example and despite my concern, I am excited for what the future holds! Thanks, Amir!

  • http://ChiefAlchemist.com/ Mark Simchock

    Not to split hair but calling Scenario B – Time based “personalization” feels like a stretch to me.

    I would prefer to just lump all of this under TREATRT (The Right Experience At The Right Time). That’s simple enough that everyone can understand it. When you have TREATRT as the means then your end will always be “personalization” AND an improved UX. That is, you can personalize and not actually improve the experience. And what good is that?