Recipes
Retail

Personalize e-commerce site search to increase conversion rates

In this recipe, we’ll look at how to deliver a personalized e-commerce site experience with Twilio Engage (formerly Segment Personas) & Algolia (a tool that allows you to deliver extremely fast and intelligent search). We will be focusing on the beginner level of personalization, specifically personalizing the site search experience based on users’ behaviour.

Segment

Made by Segment

What do you need?

  • Javascript or Mobile source to track and collect events

  • Algolia, a search-as-a-service platform

Optimize e-commerce site search to increase conversion rates

With a huge integration catalog and plenty of no-code features, Segment provides easy-to-maintain capability to your teams with minimal engineering effort. Great data doesn't have to be hard work!

Get started for free

Delivering a truly personalized experience for customers is the dream for any company. Imagine customers visit your site and they find exactly what they’re looking for within a few seconds. Your customers start to think… “Wow this company really knows what I want, maybe even better than I do!”. Let’s dive into what a typical personalization journey implementation looks like.

The world of personalization is vast and wide. Most companies start small by personalizing their site based on user traits like gender, location, etc. As they mature, they personalize based off users’ behaviour, such as promoting items based on the most frequently visited categories or promoting cheaper items for price-sensitive customers. And finally, some companies get to a sophisticated level of personalization by using machine learning/AI to build a product recommendation engine. In this recipe, we’ll look at how to deliver a personalized e-commerce site experience with Twilio Engage & Algolia (a search-as-a-service platform). We will be focusing specifically on personalizing the site search experience based on users’ behaviour. Let’s imagine that, we are running an e-commerce store that sells shoes and sports apparel from many different brands. When a customer visits our site, they’re presented with different products that are not personalized to the needs of the customer, this leads to poor customer experience and low conversion rates. In the following steps, we will walk you through how to personalize the search experience based on a user’s behaviour using Engage and Algolia.

generic-ecommerce-search-results

Step 1: Identify a use-case for site personalization

Before we start, we need to identify a use-case for personalizing user’s experience on your site. Here are some ideas:

  1. Boost most frequently viewed brands in search results

  2. Boost items based on gender in search or category browse

  3. Boost high-value items for high-value buyers on search or category browse

  4. Promote items that only have stock with user’s size

 Let’s pick the first idea of boosting most frequently viewed brands in search results.

Step 2: Understand your user behaviour with Segment

Once you decide on your use case, the next step is to understand your users and how they are interacting with your site. This is where Segment comes in — by instrumenting Segment’s Analytics library on your website, you can implement event tracking to understand your user behaviour. A good comprehensive list of events that covers most basic use cases can be found in our e-commerce spec. Our e-commerce spec helps you define the journey for a user as they browse your store, click on promotions, view products, add those products to a cart, and complete a purchase. Once you implement these events on your website (or servers), we are ready for step 3!

Segment Event Debugger

Tip: If you are tracking events on your website and want to implement events without code, check out Visual Tagger.

Step 3: Enrich user profiles with Computed Traits/Audiences

When you implement event tracking (step #2), you are collecting information about your users like their name, email, phone number etc. by sending an Identify call to Segment.

Here’s a sample payload of an identify call with most common fields removed:

identify-call-payload

We can easily query this information directly from the Profile API (which we’ll get to later), but there are other instances where you may need to understand things about your user that require certain calculations (ex: Most frequent, last seen, etc.). 

Using the Computed Traits feature under Engage, you can calculate user traits based on events that are happening in real-time. Let’s say in our case, we want to personalize the site experience based on the most frequent brand that a user has viewed. First, we need to create a computed trait would look something like this: 1. Go to Engage > Computed Traits feature and click on “New Computed Trait”

personas-computed-trait

2. Click on Most Frequent, and if you followed our Ecommerce Spec while implementing track events, your criteria would look like the below:

preview-trait

3. Click Preview, ignore Select Destinations and save your audience by giving it a name. We will be later using this trait via the Profile API.

Pro tip: We don’t need to necessarily use Computed Traits, but can also personalize based on Audiences.

Step 4: Generate an access token for the Profile API.

Engage allows you to query for a user’s traits, audiences, or events via Profile API. We will be using the Profile API to query for user’s information and send this to Algolia to personalize our site search results/experience. 

In order to create an API Access token, go to Profiles > Profiles Settings > API access and click the Generate button:

API-access

Step 5: Connect Algolia account with Segment Profile API

Note: You would need a developer to assist you with this step.

In order to personalize site search experience based on user behaviour, we’ll be using Algolia (a search-as-a-service platform). We will be requesting Profile API to get user traits and pass this information to Algolia’s Optional Filters to get personalized results for search queries.

What are Algolia’s Optional Filters? Algolia’s Optional Filters is a feature where you can pass in filters and scores that boost results you want to show before others, or bury results that you want to show last. If we were to go back to our example, assuming we have a facet (search world term for filter) in Algolia called brand, we would be able to boost results by sending Algolia an optional filter that looks like this: brand:Nike<score=2>. So let’s dive into what an actual implementation could look like. 

First, let’s assume that we call Algolia in our backend (in this example pretend we have a Node.js server). Algolia encourages you to call their API on the frontend, but there are some benefits to calling Algolia on the backend:

  1. Server-Side Rendering

  2. Better security (no need to expose any API keys in the frontend)

Our simple Algolia server could look something like the below (See how easy it is to implement Algolia in the backend here):

algolia-server-code

The next step would be to call the Profile API before we make the search request. Let’s create a helper function that helps query the profile API:

helper-function

Make sure that you are using your own spaceId and API key. Note that the userId here can be an email, anonymous_id, or user_id. Make sure you change the API call accordingly based on the ID you use.

Finally let’s call this helper in our search request, and pass it as an optional filter:

optional-filters-helper-function

That's it! Now when we render the site, we get personalized results on our category pages with our favourite brand on top.

ecommerce-search-results-personalized

Wrapping up

Here’s what we’ve done in this recipe:

  • Identified a use case for personalizing e-commerce site search

  • Created a Segment source and implemented event tracking to understand user behaviour

  • Enriched user profiles with the Computed Traits using Twilio Engage

  • Connected Algolia with Segment Profile API to boost search results based on user behaviour

Getting started is easy

Start connecting your data with Segment.