Thursday, 5 October, 2017 UTC
Summary
Want to add recommendation engines and personalization to your app to drive engagement and conversions?
Implementing your own recommendation or personalization engine is no mean feat.
Google, Apache Spark and Amazon Web Services may provide boilerplate code for recommenders and collaborative filtering algorithms, but setting up the infrastructure, making the system work real-time and tracking conversions takes a lot more time and effort.
Why personalization?
If you're not convinced as to why you should invest in personalization, let's look at the numbers.
- 42% of millennials say they will spend more time reading content if it is tailored to their interest
- 35% of sales from Amazon come from personalization
- 80+% of engagement from Youtube come from personalization
Personalization can be implemented easily on any website and continue to drive engagement and conversions over the lifetime of your business.
Without much further ado, let's dive into the tutorial.
About this tutorial
In this tutorial, we'll show you how you can incorporate recommendation engines and personalization in your website and mobile apps for free in minutes with Metisa.
The example we're going to look at is a movie recommendations website. I'm going to show you how you can create a personalized movie site like this using Metisa's Javascript SDK and a few lines of code.
First, users pick movies they like.
Then, we use Metisa to provide provide recommendations based on their selection.
You can refer to the completed site here and, if you're curious, the code here.
This tutorial might be specific to movies but the same principles can apply for any ecommerce, content website or consumer facing web app.
1. Create a Metisa account
First, hop over to Metisa and create a free account.
After you've created your account, log into the Metisa dashboard and select Integrate your Store - Custom.
2. Send data to Metisa
Let's give you some background on how Metisa makes recommendations. Metisa analyzes the way users interact with the items on your website. Thus, you'll have to send Metisa data in the form of
<user> <action> <item>.Let's quickly define each of these terms:
- Users are the people that use your website
- Items are products or services that you want to recommend and sell to customers
- Action is interaction between your users and products. For instances, users purchase items or users click on items.
There are two main steps to sending data to Metisa:
a. Embed site-wide code
b. Embed template-specific code
b. Embed template-specific code
a. Embed site-wide code snippets
Metisa requires v1.5+ jQuery, a library used frequently by web developers. Please make sure jQuery is available.
Add this to your base template file if your site uses an older version of jQuery or does not use it at all. (Note: adding this code block when your site already loads jQuery has a very slim chance of breaking your site due to differences between versions.)
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
TIP: Your base template filename will vary depending on how your developer named it. Common names are index and theme, with file extensions like .html, .erb, .ejs, .liquid (eg. index.ejs or theme.liquid)
Once jQuery is available, paste the following script to the same file below jQuery. This will load the Metisa script that is needed to send and receive data to/from Metisa.
<script src="https://metisa-sdk.s3-ap-southeast-1.amazonaws.com/js/v0.0/metisa.js"></script>
b. Embed template-specific code snippets
Next, you will need to embed code snippets into specific template files. One submits item data, and the other submits action data to Metisa.
Sending Item data
Let's start with the code that submits item data to Metisa.
Using the movie app as an example, individual movie data is sent to the Metisa server every time a user browses a movie on the app. That is why the item template file (ie. the file that shows details about a specific movie) is where you should place this code snippet, which sends data about that specific movie to Metisa.
With the code snippet in place, on every page load, the movie information is created or updated in the Metisa database.
<script type="text/javascript">
// Initialize the correct Metisa account to send data to
mt('slug', '{{ metisa_account_slug }}');
// Send movie data to Metisa
mt('item', {
id: '{{ movie_id }}',
name: '{{ movie_name }}',
maker: '{{ movie_director }}',
variants: [
{
id: '{{ variant_id }}',
name: '{{ variant_name }}',
availability: '{{ variant_availability }}',
image_url: '{{ variant_image_url }}',
url: '{{ variant_url }}',
price: '{{ variant_price }}',
price_discounted: '{{ variant_price_discounted }}'
}
]
});
</script>
DETAIL: For technical information about which fields are required, please refer to our data schema specifications.
TIP: You will see missing field errors in your browser console if there are any, to help you debug and send the right data.
Sending Action data
Now let's move on to submitting action data to Metisa.
An action refers to an event that is of importance to your app. For a news site, this might be a "read" event (in the past tense). For our demo movie recommendations app, this might be a "heart" event, which the user uses to indicate interest in a particular movie.
For action data, you can embed a code snippet in either your action-specific template, item template or list template, depending on which page the event will be triggered.
Some examples:
- For an e-commerce store, the code snippet should be embedded in the order checkout template, which is an action-specific template where customers view a summary of their order after payment
- For a news website, a "read" is triggered on the article page itself. Therefore the code snippet should be embedded in the item template
For our movie recommendation app, because the user is able to "heart" movies on the catalogue page, we embed the following code in the list template.
<script type="text/javascript">
// Initialize the correct Metisa account to send data to
// (Skip this line if working in same file as item data)
mt('slug', '{{ metisa_account_slug }}');
// Send action data to Metisa
mt('action', {
id: '{{ action_id }}',
user: {
id: '{{ user_id }}',
first_name: '{{ user_first_name }}',
last_name: '{{ user_last_name }}',
email: '{{ user_email }}'
},
line_items: [
{
variant_id: '{{ variant_id }}',
item_id: '{{ item_id }}',
}
]
});
</script>
Customizing Action trigger
To customize when this action will be triggered, you can wrap the action with your own JavaScript implementation. For example, if your app considers a user to have "read" an article when she has spent more than 15 seconds on the page, you can set a time delay before sending the request.
// Example of adding 15s delay before submitting action data
setTimeout(function () {
mt('action', { ... });
}, 15000);
DETAIL: For technical information about which fields are required, please refer to our data schema specifications.
TIP: You will see missing field errors in your browser console if there are any, to help you debug errors.
For instance, if you are an app for room bookings, your product is a timeslot for a room and your main actions would be bookings.
3. Install recommendation widgets
To embed a recommendation block on your site, you need to decide which widget(s) you want and where they should show up.
- Log in to your Metisa dashboard
- Click on Widgets on the left side bar
- Preview the various widgets
Once you have chosen a spot on a specific page to embed, copy and paste your customized code from your Metisa account.
To get your customized code for the widget:
- Select the Widget you want to embed (eg. Things you may like)
- Click on Activate Now -> Customize your options -> Click Next
- Copy and paste the code from the page into your template file
If your code is embedded correctly, save the changes and you should see your recommendation widget appearing on your site immediately.
IMPORTANT: If you had just installed the code from the Install section, your recommendations may not be ready yet, in which case you will see an empty widget with no products.
In this situation, we recommend you to check back again in a few hours (the more traffic your store receives, the shorter the wait) before trying to embed recommendations on your site.
4. Track conversions
You can see how your widgets are performing in Metisa Dashboard - Widgets where you can see the click rates and sales from each widget.
5. Emails, predictive insights and more
You've set up widgets on your website, what's next?
You can also send personalized email newsletters and autoresponders with Metisa.
As part of our mission to help businesses maximize returns on email marketing, we offer one of the best email sending rates on the planet. Refer to our pricing page for details.
As we collect data about your business, we also produce customer insights including predictive customer lifetime value, predictive churn, customer personas and segmentation which you can use to continue to increase the value of your store. Explore our Insight Reports from your dashboard to learn more.
Over to you
That's it. Happy growing your business with your newly personalized website! If you have any comments or questions, feel free to drop us a line below.