Recommendations v2 inserts

You can show a set of recommendations to the customer. They are calculated by the AI engine.

Note: This article is for Recommendations v2. If you’re looking for the legacy solution, see this section.

Recommendations on websites

Syntax

{% recommendations3 campaignId=campaign-hash %}
    {{recommended_products3}} 
{% endrecommendations3 %}

Example

The following code is an example of showing recommendations on a website. The insert loops through recommendations generated for a campaign (the number of recommendations depends on the settings) and produces an HTML list of recommended items.

Input

<div class="snrs-AI--banner" style="height: auto;">
    <div class="snrs-AI--slider">
        <div class="snrs-AI--products-slider">
            <ul>
                {% recommendations3 campaignId=campaign-hash %}
                {% for p in recommended_products3 %}
                <li data-snr-ai-product-id="{{p.itemId}}">
                    <a class="snrs-AI--item-link" href="{{p.link}}" title="{{p.title}}">
                        <img src="{{ p.imageLink }}"
                            class="products-slider__item-image snrAI-product-image snrAI-product-image-{{p.itemId}}"
                            width="90" alt="{{p.title}}" id="snrAI-image-{{p.itemId}}">
                        <h3 class="snrs-AI-product--product-name">
                            <span class="snrs-AI-product--name-first">{{p.title}}</span>
                        </h3>
                        <span class="snrs-AI-product--series">{{p.attributes.series}}</span>
                    </a>
                </li>
                {% endfor %}
                {% endrecommendations3 %}
            </ul>
        </div>
    </div>
</div>

Output

<div class="snrs-AI--banner" style="height: auto;">
    <div class="snrs-AI--slider">
        <div class="snrs-AI--products-slider">
            <ul>
                <li data-snr-ai-product-id="000097">
                    <a class="snrs-AI--item-link"
                        href="https://example.com/accessories-for-shaver/cleaner-contribution-to-shavers-brand-DDR2,id-2369"
                        title="Cleaning insert for shavers BRAND DDR22">
                        <img src="https://example.com/temp/thumbs-new/2/other/cd1c73e35b1db186e79e8a0039b27293_250x200w50.jpg"
                            class="products-slider__item-image snrAI-product-image snrAI-product-image-000097"
                            width="90" alt="Cleaning insert for shavers BRAND DDR2" id="snrAI-image-000097">
                        <h3 class="snrs-AI-product--product-name">
                            <span class="snrs-AI-product--name-first">Cleaning insert for shavers BRAND DDR2</span>
                        </h3>
                        <span class="snrs-AI-product--series">DDR2 8983</span> 
                    </a>
                </li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </div>
</div>

AI cart recommendations

When generating recommendations for a cart, you must first create an aggregate that stores the items currently in the cart. That aggregate is used as context for generating complementary item recommendations.

Tip:
Cart status aggregate
Cart status aggregate

Syntax

{% set recommendationProducts = [] %}
{% aggregate aggregate-hash %}
{% for r in aggregate_result|reverse %}
    {% set _noop = recommendationProducts.append(r.sku) %}
{% endfor %}
{% endaggregate %}

{% recommendations3 campaignId=campaign-hash itemsIds=recommendationProducts %}
    {{ recommended_products3 }}
{% endrecommendations3 %}

Example

The following code is an example of adding complementary item recommendations to a cart page.

Input

<div class="snrs-AI--banner" style="height: auto;">
<div class="snrs-AI--slider">
    <div class="snrs-AI--products-slider">
    <ul>
        {% set recommendationProducts = [] %}
        {% aggregate 4d08sdfe-4kof-3db5-mknj-7725f0283533 %}
        {% for r in aggregate_result|reverse %}
            {% set _noop = recommendationProducts.append(r.sku) %}
        {% endfor %}
        {% endaggregate %}

        {% recommendations3 campaignId=T5gNrNlMFC57 itemsIds=recommendationProducts %}
          {% for p in recommended_products3 %}
            <li data-snr-ai-product-id="{{p.itemId}}">
            <a class="snrs-AI--item-link" href="{{p.link}}" title="{{p.title}}">
                <img src="{{ p.imageLink }}" class="products-slider__item-image snrAI-product-image snrAI-product-image-{{p.itemId}}" width="90" alt="{{p.title}}" id="snrAI-image-{{p.itemId}}">
                <h3 class="snrs-AI-product--product-name">
                <span class="snrs-AI-product--name-first">{{p.title}}</span>
                </h3>
            </a>
            </li>
          {% endfor %}
        {% endrecommendations3 %}
    </ul>
    </div>
</div>
</div>

Output

<div class="snrs-AI--banner" style="height: auto;">
    <div class="snrs-AI--slider">
        <div class="snrs-AI--products-slider">
            <ul>
                <li data-snr-ai-product-id="000097">
                    <a class="snrs-AI--item-link"
                        href="https://example.com/accessories-for-shaver/cleaner-contribution-to-shavers-braun-CCR2,id-2369"
                        title="Cleaning insert for shavers BRAUN CCR2">
                        <img src="https://example.com/temp/thumbs-new/2/other/cd1c73e35b1db186e79e8a0039b27293_250x200w50.jpg"
                            class="products-slider__item-image snrAI-product-image snrAI-product-image-000097"
                            width="90" alt="Cleaning insert for shavers BRAUN CCR2" id="snrAI-image-000097">
                        <h3 class="snrs-AI-product--product-name">
                            <span class="snrs-AI-product--name-first">Cleaning insert for shavers BRAUN CCR2</span>
                        </h3>
                    </a>
                </li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </div>
</div>

Filters

You can combine filters and elastic filters from the campaign with your own, or replace the campaign’s filters completely.

First, define the filters to apply by using the following syntax: 

{% set filters = 'param1=="value"ANDparam2!="value2"' %}

where:

  • param1=="value" is a filter that includes (==) the value of param1
  • param2!="value2" is a filter that excludes (!=) the value2 of param2
  • AND combines the two filters
  • set filters saves the entire definition to the filter variable.

Now, filters can be added to the campaign’s filters or elastic filters by using the following attributes of the recommendation insert:

  • additionalFilters/additionalElasticFilters store your filters.
  • filtersJoiner/elasticFiltersJoiner set the logic:
    • REPLACE replaces the campaign’s filters with your filters.
    • AND matches if both your filters and the campaign filters are met.
    • OR matches if at least one of the filters is met.

Example: add to filters

This example adds the filters defined by set filters to the campaign’s filters:

{% set filters = 'param=="value"' %}
{% recommendations3 campaignId=campaign-hash additionalFilters=filters filtersJoiner=AND %}
    {{ recommended_products3 }}
{% endrecommendations3 %}

Example: add to elastic filters

This example adds the filters defined by set filters to the campaign’s elastic filters: 

{% set filters = 'param=="value"' %}
{% recommendations3 campaignId=campaign-hash additionalElasticFilters=filters elasticFiltersJoiner=AND %}
    {{ recommended_products3 }}
{% endrecommendations3 %}

Example: replace filter

This example generates recommendations limited to items from the Women>Dresses category. The original campaign’s filter is replaced.

Input

{% set filters = 'category=="Women>Dresses"' %}
{% recommendations3 campaignId=T5gNrNlMFC57 additionalFilters=filters filtersJoiner=REPLACE %}
     {% for p in recommended_products3 %}
            <li data-snr-ai-product-id="{{p.itemId}}">
            <a class="snrs-AI--item-link" href="{{p.link}}" title="{{p.title}}">
                <img src="{{ p.imageLink }}" class="products-slider__item-image snrAI-product-image snrAI-product-image-{{p.itemId}}" width="90" alt="{{p.title}}" id="snrAI-image-{{p.itemId}}">
                <h3 class="snrs-AI-product--product-name">
                  <span class="snrs-AI-product--name-first">{{p.title}}</span>
                </h3>
                <span class="snrs-AI-product--season">{{p.attributes.season}}</span>
            </a>
            </li>
        {% endfor %}
{% endrecommendations3 %}

Output

<div class="snrs-AI--banner" style="height: auto;">
    <div class="snrs-AI--slider">
        <div class="snrs-AI--products-slider">
            <ul>
                <li data-snr-ai-product-id="000097">
                    <a class="snrs-AI--item-link"
                        href="https://example.com/dresses/dress-alla"
                        title="Dresse Alla">
                        <img src="https://example.com/dresses/dress-alla_250x200w50.jpg"
                            class="products-slider__item-image snrAI-product-image snrAI-product-image-000097"
                            width="90" alt="Dresse Alla" id="snrAI-image-000097">
                        <h3 class="snrs-AI-product--product-name">
                            <span class="snrs-AI-product--name-first">Dresse Alla</span>
                        </h3>
                        <span class="snrs-AI-product--season">SUMMER</span>
                    </a>
                </li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </div>
</div>

Open Graph meta tags

When dynamic content is requested, the OG tags are sent as variables that you can access. The variables are stored in the metric_additional_params object.

Syntax

To assign a value of an OG tag to a variable, use the following syntax: 

{% set additionalParam = metric_additional_params["property_name"] %}

Example

The following example displays the value of product:season if <meta property="product:season" content="summer">, otherwise defaults to Promotion.

Input

{% set season = metric_additional_params["product:season"] %}
{% if season == "summer" %}
    <h1 class="snrs-AI-product--category-title"> Summer promotion </h1>
  {% else %}
    <h1 class="snrs-AI-product--category-title"> Promotion </h1>
{% endif%}

Output

Output if <meta property="product:season" content="summer">: 

<h1 class="snrs-AI-product--category-title"> Summer promotion </h1>

Output if <meta property="product:season" content="spring">: 

<h1 class="snrs-AI-product--category-title"> Promotion </h1>

Open Graph meta tags in filters

You can insert the value of an OG tag into your filters.

Syntax

{% set additionalParam = metric_additional_params["property_name"] %} // stores value of OG tag
{% set filters = 'param=="' + additionalParam +'"' %} // adds value of OG tag to your filter

Example

The following example of a recommendation on a category page replaces the campaign’s filter with a filter based on OG tags.

Input

{% set season = metric_additional_params["product:season"] %}
{% set filters = 'attributes.season=="' + season +'"' %}
{% recommendations3 campaignId=T5gNrNlMFC57 additionalFilters=filters filtersJoiner=REPLACE %}
     {% for p in recommended_products3 %}
            <li data-snr-ai-product-id="{{p.itemId}}">
            <a class="snrs-AI--item-link" href="{{p.link}}" title="{{p.title}}">
                <img src="{{ p.imageLink }}" class="products-slider__item-image snrAI-product-image snrAI-product-image-{{p.itemId}}" width="90" alt="{{p.title}}" id="snrAI-image-{{p.itemId}}">
                <h3 class="snrs-AI-product--product-name">
                  <span class="snrs-AI-product--name-first">{{p.title}}</span>
                </h3>
                <span class="snrs-AI-product--season">{{p.attributes.season}}</span>
            </a>
            </li>
        {% endfor %}
{% endrecommendations3 %}

Output

<div class="snrs-AI--banner" style="height: auto;">
    <div class="snrs-AI--slider">
        <div class="snrs-AI--products-slider">
            <ul>
                <li data-snr-ai-product-id="000097">
                    <a class="snrs-AI--item-link"
                        href="https://example.com/dresses/dress-alla"
                        title="Dresse Alla">
                        <img src="https://example.com/dresses/dress-alla_250x200w50.jpg"
                            class="products-slider__item-image snrAI-product-image snrAI-product-image-000097"
                            width="90" alt="Dresse Alla" id="snrAI-image-000097">
                        <h3 class="snrs-AI-product--product-name">
                            <span class="snrs-AI-product--name-first">Dresse Alla</span>
                        </h3>
                        <span class="snrs-AI-product--season">SUMMER</span>
                    </a>
                </li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </div>
</div>
😕

We are sorry to hear that

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

😉

Awesome!

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

Close modal icon Placeholder alt for modal to satisfy link checker