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

In Recommendations v2, you can:

  • use filters in recommendations.
  • include (==) and exclude (!=) parameter values in filters.
  • add new filters using the AND and OR statements.
  • replace the campaign’s filters with new ones using the REPLACE statement.

Setting filters

To set a filter, use the following syntax: 

{% set filters = 'your_params=="value_params"ANDyour_params2!="value_params2"' %}

Combining/replacing filters

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

This is done by using the filtersJoiner and additionalFilters attributes.
additionalFilters stores your filters.
filtersJoiner takes one of the following values:

  • 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.

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

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

Example

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 = 'your_params=="' + 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.