Personalization based on current weather

Personalization based on current weather

A few months ago, we had a client that wanted to personalize header images based on a season. That is nothing new, we already did this 12 years ago. You just create four images that are then called based on date criteria. This got me thinking - what about displaying content based on current weather? This is used in some video games.

Imagine playing a horror game that has same weather as your physical location. Scary? But also very impressive. Now imagine a web shop that offers rain coats when it is raining or sun glasses when it is sunny. That would impress a visitor.

I didn’t have time to play around with the code this time, so I assigned the task to our new junior developer Marija. Her job was to investigate what service we could use for tracking the weather and to build code for this example. We will show you in a very simple way how you can use this custom condition for weather personalization.

In our example we will get data from openweathermap.org. We will not read your current city. It will be predefined in settings, but this can be also easily populated by Kentico geolocation in Contacts:
https://docs.kentico.com/k10/on-line-marketing-features/configuring-and-customizing-your-on-line-marketing-features/configuring-contacts/using-geolocation-for-contacts

If you are a marketer you won’t have a problem creating this example and if you are a developer feel free to extend it!

Deploy some files

We have three files that we need to place in the App_Code folder in the CMS folder:

  • CustomMacroModule.cs (registers a custom macro)
  • WeatherApiClient.cs (reads Weather API from openweathermap.org)
  • WeatherData.cs (API data model)

Create some settings

We need to add two custom settings. If you don't know how to do this, please refer to this documentation:
https://docs.kentico.com/k10/custom-development/creating-custom-modules/adding-custom-website-settings

We need two settings:

Setting Name:  API Key for openwather.org
Setting Value: OpenweatherAPPID
Type: Text
 
Setting Name: City
Setting Value: WeatherCity
Type: Text

After the settings keys are created open "Setting" and you should see your custom setting fields.

Visit openwather.org, create an account and get an API key and populate City.

Add some condition

Now let’s got to the Dancing Goat site and open the Design tab on root. We will add a new personalization text with four variants. This is something similar I did in my last blog: Starting with personalization in Kentico EMS with welcome message. The difference is that I will use Static Text and new conditions.

So right click on the yellow zone area and Add New Web Part > Static text (in Text & Images category). In Content text add a message like: "It is a nice day". This will represent a default message. You can also leave it blank.

Now add personalization variant with the condition: Weather == “Clouds”.

After a variant is added you will get a new web part window and you can add new message.
You have a total of four conditions: "Clear", "Rain", "Clouds" or "Snow.

I have populated the city settings to London and these are my results:

Conclusion

In this simple example you can see how you can add interesting personalization to your site. This will create a unique experience for you visitors. I would recommend trying this with header images or different product categories.