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 use the PurchasedWithCurrentCart-recommendation, if the user has accepted cookies:

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

const purchasedWithCurrentCartBuilder = new PurchasedWithCurrentCartBuilder(settings)
    .setSelectedProductProperties({
        displayName: true,
        pricing: true,
        allData: true
    })
    .setNumberOfRecommendations(10);

await recommender.recommendPurchasedWithCurrentCart(purchasedWithCurrentCartBuilder.build());

If the user has declined cookies and thus is anonymous, then instead you should use the PurchasedWithMultipleProductsBuilder-recommendation.

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());

Since the user is anonymous, Relewise does not know anything about the user, so you need to provide the content of the cart/basket to Relewise in order to get recommendations for the anonymous user's basket.

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.