Implementing Idio analytics and content recommendations on an Episerver site

Episerver has recently acquired Idio which is a service that automatically delivers relevant 1:1 experiences across digital channels. Read the press release here: https://www.episerver.com/about/news/press-room/pressreleases/episerver-signs-definitive-agreement-to-acquire-11-personalization-company-idio/

I wanted to try Idio out for myself and integrate it into an Episerver solution. So I managed to get an instance from the team at Idio and decided to add Idio recommendations to this blog (which runs Episerver). This post documents the process I went through and tries to share some knowledge about "how it works" and "how to implement Idio on Episerver" to help other people who are implementing Idio on Episerver sites.

There were three stage I went through when implementing Idio on Episerver:

1. Ensure your Episerver page can be analysed by Idio
2. Ensure pages are recognised for content analysis and tracked in analytics
3. Add recommendations to the site

Ensure your Episerver page can be analysed by Idio

In my experience by default Idio does a great job of analysing the content on your site in order to extract the topics that your content is talking about. An example of the topics being discussed on this blog post can be seen below: 

However there are some things that can be done to make the content analysis even better and that is to add meta tags to the page. Luckily Idio uses Open Graph tags to add meta data which you may already be implementing on your content pages. Find out more about Open Graph here: https://ogp.me/.

There are some recommended tags to implement for this from Idio which are listed below but these can change from implementation to implementation depending on the content you are publishing and what is available:

Ensure pages are recognised for analysis and tracked in analytics

Once pages have been tagged up then you need to add the Idio tracking script to a page. This script has two functions:

Sends tracking analytics data to Idio

This is your typical analytics tracking script that ensures we are tracking visitor journeys on the site.

Adds pages to a queue for content analysis

Idio needs to get content of a site so it can be analysed. There are a couple of methods for doing this such as an RSS feed or looking for anchor tags on a listing page. Idio can also use the analytics script to check for URLs it doesn't recognise. If a URL has not been seen before then its considered fresh content and can optionally be sent off for analysis and added to the list of content available for analysis and recommendations.

Add recommendations to the site

It's possible to add a javascript component on your site that can be used to render recommendations using the mustache (http://mustache.github.io/mustache.5.html) templating language. The example below shows an example of the default template that can be used for recommendations:

In my blog I added recommendations on the homepage and also at the bottom of each blog post. This in theory should drive engagement on my site, see the results section below for more thoughts on this.

There is also an Javascript API only option which delivers the recommendations to the page as JSONP. For my blog I was already using the Episerver Content Delivery API so I re-purposed some of the Vue.js rendering to allow the Episerver to deliver the content required to render the actual recommendation on page, once a recommendation has been received from Idio. Should be noted that I send the content guid as content meta data to Idio for this purpose.

The results

I must be honest and say I was impressed that Idio manages to "auto-magically" extract a rich amount of data from HTML content. For example this is what was learned about the Episerver Ascend 2018 post which had a lot of information around the content delivery (headless) API:

Even though my blog is a low traffic site I’ve managed to extract some interesting insights too. For instance based on everything I wrote on my blog, the number one topic is "Solution" followed by "User interface" which perhaps means I like a nice UI!

However on a very limited set of data it seems that this is also reflected on the users who consume my content as seen in the topic dashboard which compares the volume of content in the site (Y axis) verses the number of unique visitors (X axis) which is likely more of a reflection of my SEO rankings:

Also the average number of page views per interaction is 1.5 which given mine is a technical blog isn't surprising as the majority of my traffic comes straight from Google.

Finally I have implemented a "Recommendations for you" section on the site that provides recommendations based on blogs in the last 2 years which match the topic interests of the current user. I will see if this affects the 1.5 interactions per visit in the coming weeks...

Final thoughts

The process of adding meta tags and adding the analytics script is a relatively simple task. It was also simple enough to add some recommendations using some Javascript. It should be noted that I did this on my own after some discussions with the awesome people at Idio. However as with all Episerver services, during a typical implementation a customer success manager will work with you all the way from on boarding all the way through to go live so there is no need to work things out as you go along!

Also it should be noted that as part of implementation it's possible to customise rules that helps Idio read content from your site but I did not do this for this implementation. There will also be Episerver roadmap items to remove/reduce this need as Idio gets even more deeply embedded into the Episerver platform.

Want to know more?

As an Episerver customer if the capability that Idio offers is something that could be of interest then please get in touch with your local Episerver customer success manager or account manager: https://www.episerver.com/contact/customer/contact-us/.

Comments