Product recommendations using our JS SDK

Our SDK helps making requests against our API eaiser for you. It works both with strongly-typed TypeScript and with JavaScript. You can also use it direcly via a CDN provider. Read more about that here. If you do use it directly from a CDN, then all of our types are namespaced with a Relewise.-prefix. So to get the recommender you need to write new Relewise.Recommender() instead of new Recommender().

To get started with recommendations we need to start by making an Recommender-instance.

const recommender = new Recommender(RELEWISE_DATASET_ID, RELEWISE_API_KEY, {
    serverUrl: RELEWISE_SERVER_URL,
});

Before going any further, make sure you have read the following:

• Read about how to authenticate against our API here.
• Read about handling different types of users here.

Product Details Page (PDP)

On the Product Details Page (PDP), the most commonly used recommendations are PurchasedWithProduct and ProductsViewedAfterViewingProduct. Here are examples on how to implement those requests. We recommend that you batch the request into a single request. Read more about why and how here.

PurchasedWithProduct

const settings: Settings = {
    language: 'da-DK',
    currency: 'DKK',
    displayedAtLocation: 'Product Details Page',
    user: getUser()
};

const purchasedWithBuilder = new PurchasedWithProductBuilder(settings)
    .setSelectedProductProperties({
        displayName: true,
        pricing: true,
        allData: true
    })
    .product({productId: 'p-1', variantId: 'v-1'})
    .setNumberOfRecommendations(10);

await recommender.recommendPurchasedWithProduct(purchasedWithBuilder.build());

ProductsViewedAfterViewingProduct

const settings: Settings = {
    language: 'da-DK',
    currency: 'DKK',
    displayedAtLocation: 'Product Details Page',
    user: getUser()
};

const viewedAfterViewingbuilder = new ProductsViewedAfterViewingProductBuilder(settings)
    .setSelectedProductProperties({
        displayName: true,
        pricing: true,
        allData: true
    })
    .product({productId: 'p-1', variantId: 'v-1'})
    .setNumberOfRecommendations(10);

await recommender.recommendProductsViewedAfterViewingProduct(viewedAfterViewingbuilder.build());

By using setSelectedProductProperties or setSelectedVariantProperties it is possible to select the specific properties, from Relewise, that you need for rendering a product tile, list etc.,. That way we can store fields that is needed for e.g. filtering or Merchandising, but maybe is not needed when rendering the actual product. That way we can reduce the payload on the HTTP responses, by only returning a minimum set of the information that is needed.

Power Step

On the Power Step the most commonly used recommendation is PurchasedWithProduct.

const settings: Settings = {
    language: 'da-DK',
    currency: 'DKK',
    displayedAtLocation: 'Powerstep',
    user: getUser()
};

const purchasedWithBuilder = new PurchasedWithProductBuilder(settings)
    .setSelectedProductProperties({
        displayName: true,
        pricing: true,
        allData: true
    })
    .product({productId: 'p-1', variantId: 'v-1'})
    .setNumberOfRecommendations(10);

await recommender.recommendPurchasedWithProduct(purchasedWithBuilder.build());

Cart / Basket Page

On the Basket Page the most commonly used recommendation is the PurchasedWithMultipleProducts. This algorithm works for both identified and anonymous users, making it easy to use a recommendation slider on your basket page to boost your conversions.

const settings: Settings = {
    language: 'da-DK',
    currency: 'DKK',
    displayedAtLocation: 'Powerstep',
    user: getUser()
};

const purchasedWithMultipleProductsBuilder = new PurchasedWithMultipleProductsBuilder(settings)
    .setSelectedProductProperties({
        displayName: true,
        pricing: true,
        allData: true
    })
    .addProducts([
        {productId: 'p-1', variantId: 'v-1'}, 
        {productId: 'p-2', variantId: 'v-2'}
    ])
    .setNumberOfRecommendations(10);

await recommender.recommendPurchasedWithMultipleProducts(purchasedWithMultipleProductsBuilder.build());

Batching recommendation requests.

It's best practice to batch all recommendation requests on a page into a single request against the Relewise API. This has the benefit of ensuring unique products between different recommendations for anonymous users - and also minimizing network traffic.

const productRecommendationsBuilder = new ProductsRecommendationCollectionBuilder(settings)
    .addRequest(viewedAfterViewingBuilder.build())
    .addRequest(purchasedWithBuilder.build());

recommender.batchProductRecommendations(productRecommendationsBuilder.build());

The example here uses product recommendations, but the same can be done for product categories, content and content categories.