Search the Help Center
  1. Spotler Activate
  2. Personalizations
  3. Step by step guides

Articles in this section

Step by step guide: Show personal recommendations on the website

Recommend specific products to profiles to increasing conversion. For recommending products, a product set needs to be inserted into the website content as a personalization.

Advanced steps:

Preparation

  • Make sure the following events are collected: ViewContent, AddToCart, Purchase
  • Make sure the following product fields are collected: SKU, Name, URL, Images

For the advanced steps:

  • Choose a product field containing the corresponding attribute (in this example custom_dier is used)
  • Make sure the following product fields are collected: Brand, Categories

Step 1: Create product set

Make a Items you may like product set of products that are in stock:

Step 2: Create personalization (embedded)

For recommending products, a product set is inserted into the website content as a personalization.

2.1 Create personalization

Create a personalization in which the product set is incorporated in the website content:

Warning The use of an element with a unique name is recommended in the query selector!

2.2 Test personalization

Test the personalization live on the website and view the product set in the 360° profile:

💡 Tip: add a control group to the personalization to compare conversions.

Step 3: Create personalization (pop-up)

For recommending products, a product set is inserted as a personalization in a pop-up.

3.1 Create personalization

Create a personalization in which the product set is incorporated in the pop-up:

3.2 Test personalization

Test the personalization live on the website and view the product set in the 360° profile:

Step 4: Create dynamic product set based on viewed product

To recommend products that have a similar characteristic to the viewed product, a dynamic product set is processed as personalization on the product page.

4.1 Create product set

Create an Items you may like product set with a dynamic filter on the custom_dier field:

English translation video

This video is currently only available in Dutch, below you will find an English summary. 

We are going to create a product set that has a matching feature with the product on which an event is currently taking place. The event must contain at least a product ID, such as a product page view.

In this example I want to use the custom_animal field as a dynamic product filter. If a dog is viewed, I want to show dogs. And if a cat is viewed, I want to show cats.

I am creating a product set of items you may like. I choose the Custom_animal field from the event. Because that is the field where I want to dynamically show products.

4.2 Create personalization

Create a personalization based on the trigger ViewContent event:

English translation video

This video is currently only available in Dutch, below you will find an English summary. 

You will apply the created product set in a new personalization. You have a choice of limited triggers because product information from the event is needed.

I select the element by inspecting the element so that you can enter the name directly. Sometimes the standard query selector can be too specific, for example it sets 'the fourth element on the page' but it could be that the element on another page is the fifth element. That is why I now choose the inspect method. Use an element with a unique name in the query selector.

In the settings I adjust the trigger to viewcontent event. If I select product event with data I can add more filters as desired.

4.3 Test personalization

Test the personalization live on the website:

English translation video

This video is currently only available in Dutch, below you will find an English summary.

I'm going to test the personalization. I change the include URL to ?test. I save and publish this.

Then I go to the website to the page with the product where the personalization should be shown. I change the URL there with /?test.

There we see that hundreds of products are recommended. If I go to a cat there is no personalization, until I add the test URL. Then I see cat products. There are only 2 products with the custom_animal field cat, that's why you only see 2.

All products that have a matching value in the custom_animal field in the Spotler Activate database, we match and show as personalization. The product ID in the event is required for this.

Step 5: Create dynamic product set based on favorite category

5.1 Create a product set based on favorite brand/category

Creating a product set that dynamically displays items with favorite brands/categories:


Preperation.png

Note: A user's favorites are stored on their profile based on events with products, as long as they contain SKUs that are also present in your feed. Thus, for each profile we keep a counter for each brand, and the three brands with the most event interactions are considered favorites. 

5.2 Display the dynamic set on your website

Select an embedded product personalization and set it up to show as desired: Embedded products.

Our tracker automatically does a check if a product set for a user contains items. Therefore, if a user does not have favorites yet, the personalization will not show.

5.3 List favorite brands based on template variable

You can make the above personalization even more dynamic and personal, by calling the favorite items in the template itself. This can be done by doing “edit template” to the above personalization, or setting up a custom embedded personalization.

If you press “help” in the variant designer, you will see all available variables. For this use case, they are:

Favorite.png

So you can easily expand personalization that way:

<h4>Products of {{ favorite_brand_1 }} </h4>

However, a user has three favorites, and number 1 will always be filled when they see the personalization, but 2 and 3 not necessarily. You can catch this by if statements:

<h4>Products of {{ favorite_brand_1 }}
{% if favorite_brand_2 %}
,{{ favorite_brand_2 }} 
{% endif %}
{% if favorite_brand_3 %}
en {{ favorite_brand_3 }} 
{% endif %}
especially for you!</h4>

This results in:
"Products of Ibzmode, ZAG and Moost Wanted especially for you!
IBIZmode.png

However, when a user has only 1 favorite, he sees the following:
"Products from Miss June especially for you!"

Ibizmode2.png

5.4 Use variables in dynamic url

As long as the user's favorite brands are known, you can also put them in a link, a simple example is:

<a href="https://www.ibizamode.nl/nl/brands/{{ favorite_brand_1 }}">{{ favorite_brand_1 }}</a>

Here we place the brand dynamically in the URL, and then also between the tags, so that the text containing the link also shows the brand.

Note: The exact elaboration depends on your URL structure and whether it matches your product data. If not, you can alternatively pass the value as a search parameter, for example:
https://www.ibizamode.nl/nl/search/{{ favorite_brand_1 }}

Test this thoroughly with multiple brands, for example at Lightspeed, spaces in brands are indicated by -. This, too, can be caught with Nunjucks:

{{ favorite_brand_1 | replace(" ", "-") }}

Combined with the earlier example, you then get this result:

<h4>Products of <a href="https://www.ibizamode.nl/nl/brands/{{ favorite_brand_1 | replace(" ", "-") }}">{{ favorite_brand_1 }}</a>
{% if favorite_brand_2 %},
<a href="https://www.ibizamode.nl/nl/brands/{{ favorite_brand_2 | replace(" ", "-") }}">{{ favorite_brand_2 }}</a> 
{% endif %}
{% if favorite_brand_3 %}
en <a href="https://www.ibizamode.nl/nl/brands/{{ favorite_brand_3 | replace(" ", "-") }}">{{ favorite_brand_3 }}</a> 
{% endif %} 
especially for you!</h4>

"Products of Ibzmode, ZAG and Moost Wanted especially for you!

Ibizmode3.png