Documentation
Feedback
Guides
API Reference

Guides
Guides
Recommendations

Integrating product recommendations in headless stores (Beta)

Learn how to integrate product recommendations in headless stores.

This feature is in beta, and we are actively working to improve it. If you have any questions, please contact our Support.

This guide describes how to integrate product recommendations to headless stores using the VTEX Recommendations BFF API.

Before you begin

Before implementing headless recommendations, make sure you have:

  • A frontend capable of adding third-party scripts and making authenticated HTTPS requests
  • Requested and received approval for the product recommendations feature setup from VTEX Support.

Step 1: Initial setup

After you request and receive approval for using the product recommendations feature, the VTEX Support team will prepare your environment by:

  • Creating a workspace for recommendations
  • Synchronizing your product catalog with the recommendation service
  • Setting up API keys for secure access
  • Generating a custom integration script for your store.

Once these configurations are complete, you can proceed with the implementation steps below.

Step 2: Script implementation in the store

After receiving the integration script from VTEX Support, implement it in your headless store:

  1. Create a dedicated component or module in your codebase for third-party integrations.
  2. Implement the script based on your framework's best practices for third-party script management. Check an example of implementation in FastStore: Third-party Scripts
  3. Ensure the script runs on all pages where you want to enable recommendations or track user behavior.

The script handles:

  • User tracking initialization
  • Browsing and behavioral data collection
  • Model training data gathering.
  1. Save the _snrs_uuid in the user's order form, so that when the order is placed, you can associate that sale with the user identified during navigation.

When the ID is generated, you must save the user's ID in the orderForm during navigation using PUT Set multiple custom field values as shown below:


_10
fetch(`/api/checkout/pub/orderForm/$\{orderForm.id\}/customData/synerise`, {
_10
method: 'PUT',
_10
body: JSON.stringify({
_10
uuid: snrsUuidCookie,
_10
source: isMobile() ? 'WEB_MOBILE' : 'WEB_DESKTOP',
_10
}),
_10
})

To validate that it worked, request to retrieve the orderForm using GET Get current cart. The customData field returned should contain the added information.

  1. Send the POST Product View event following the API reference.

Step 3: Model training and configuration

Once the tracking script collects enough browsing data, the VTEX Support team will train and configure the recommendation models. The available strategies are:

NameDescription
Most popularProducts with the highest number of views
Recommended for youCustom recommendations based on user profile and behavior
Similar productsProducts similar to a specific one
Cross-sellComplementary products for a specific one that are commonly purchased together.
Best sellersThe store's best-selling products
Last seenProducts recently viewed by the user
Recent interactionsProducts most likely to engage the user in the future
Visually similar productsProducts visually similar to a specific one
Manual collectionRecommendations from a collection created manually

After the models are trained, they will be available for API-based recommendation displays in your store.

Step 4: Product recommendations implementation flow

To implement product recommendations in your headless store, follow these steps:

  1. Start a user session to get a unique identifier
  2. Fetch recommendations for your shelves.
  3. Track user interactions with the recommendations.

Use the same user identifier (recommendationsUserId) across all requests in a session.

Starting the user session

Use the POST Start Session endpoint to create a unique user ID for recommendations. This endpoint:

  • Creates a unique user ID (recommendationsUserId) for the session.
  • Links it to the provided order form ID.
  • Stores the ID in the vtex-rec-user-id cookie for session continuity.
  • Initializes recommendation tracking and personalization.

Call this endpoint on the first page view of each visit, before displaying any recommendations, and only if the _snrs_uuid is not already present. If orderFormId is not provided in the request body, the API attempts to retrieve it from the checkout.vtex.com cookie.

Request example:


_10
curl --request post \
_10
--url https://api.vtexcommercestable.com.br/api/recommend-bff/v2/users/start-session \
_10
--header 'Accept: application/json' \
_10
--header 'Content-Type: application/json' \
_10
--header 'host: apiexamples.vtexcommercestable.com.br' \
_10
--header 'x-forwarded-host: www.apixamples.com' \
_10
--header 'x-vtex-rec-origin: apiexamples/storefront/vtex.recommendation-shelf@2.x' \
_10
--data '{"orderFormId":"d761924de4254f6883a8ec2e9a28597d"}'

Response example:


_10
{
_10
"recommendationsUserId": "198e0f50-acf8-42f7-998a-5cd125464749"
_10
}

Persist the returned recommendationsUserId as _snrs_uuid and include it in all subsequent requests.

Implementing recommendation shelves

Use the GET Fetch recommendations endpoint to fetch products for each shelf whenever a page contains a recommendation component (homepage, PDP, cart, PLP, etc.).

The campaign determines the type of recommendations returned, such as personalized recommendations, similar items, cross-sell, and others.

This endpoint retrieves a list of recommended products based on:

  • Campaign VRN (Virtual Resource Name) identifying the recommendation strategy. The VRN follows the pattern vrn:recommendations:{store-name}:{campaignType}:{campaignId}. Contact our Support to obtain the campaignId

    Available campaign types:

    • rec-top-items-v2: Best sellers
    • rec-persona-v2: Personalized recommendations
    • rec-similar-v2: Similar items
    • rec-cross-v2: Cross-sell
    • rec-cart-v2: Cart-based recommendations
    • rec-last-v2: Last seen
    • rec-interactions-v2: Recent interactions
    • rec-visual-v2: Visual similarity
    • rec-search-v2: Search-based recommendations
    • rec-next-v2: Next interaction
  • User context (from recommendationsUserId)

  • Page context (product ID, cart items, etc.).

Request example:


_10
curl --request get \
_10
--url 'https://api.vtexcommercestable.com.br/api/recommend-bff/v2/recommendations?an=apiexamples&campaignVrn=vrn%3Arecommendations%3Aapiexamples%3Arec-top-items-v2%3A123e4567-e89b-12d3-a456-426614174000&userId=198e0f50-acf8-42f7-998a-5cd125464749&products=product-id-1%2Cproduct-id-2%2Cproduct-id-3&salesChannel=1&locale=en-US' \
_10
--header 'Accept: application/json' \
_10
--header 'x-vtex-rec-origin: apiexamples/storefront/vtex.recommendation-shelf@2.x'

Response example:


_13
{
_13
"products": [
_13
"1234",
_13
"5678",
_13
"91011"
_13
],
_13
"correlationId": "rec-123e4567-e89b-12d3-a456-426614174000",
_13
"campaign": {
_13
"id": "123e4567-e89b-12d3-a456-426614174000",
_13
"title": "Most Popular Items",
_13
"type": "TOP_ITEMS"
_13
}
_13
}

Render the returned items as product cards on the shelf. After rendering, proceed to event tracking.

Tracking recommendation events

To improve recommendation accuracy and measure effectiveness, you need to track how users interact with the recommended products. There are three types of events to track:

⚠️ For accurate tracking, ensure that:

  • All events include the same recommendationsUserId.
  • Events are properly debounced to prevent duplicates.
  • View events are triggered only when shelves enter the viewport.

Recommendation views

Use the POST Recommendation view endpoint when a recommendation shelf becomes visible. This endpoint:

  • Records when recommendations are shown to users.
  • Provides data for click-through rate (CTR) analysis.
  • Helps train and improve recommendation models.
  • Should be called when shelves enter the viewport.

Request example:


_10
curl --request post \
_10
--url 'https://api.vtexcommercestable.com.br/api/recommend-bff/v2/events/recommendation-view?an=apiexamples' \
_10
--header 'Content-Type: application/json' \
_10
--data '{"userId":"user-id","correlationId":"correlation-id--from-recommendation-request","products":["product-id-1","product-id-2","product-id-3"]}'

Recommendation clicks

Use the POST Recommendation click endpoint when users interact with recommended products. This endpoint tracks user engagement with recommendations and should be called for each click on a product card.

Request example:


_10
curl --request post \
_10
--url 'https://api.vtexcommercestable.com.br/api/recommend-bff/v2/events/recommendation-click?an=apiexamples' \
_10
--header 'Content-Type: application/json' \
_10
--data '{"userId":"user-id","correlationId":"correlation-id--from-recommendation-request","product":"product-id"}'

Product views

Use the POST Product View endpoint when users view product details. This endpoint tracks all product detail page views.

⚠️ VTEX automatically tracks product views once the Recommendations feature is set up in your store’s website as instructed in Step 2. This event is only required for app implementations or other channels. Track product views for all sources to ensure comprehensive data collection for the recommendation models.

Request example:


_10
curl --request post \
_10
--url 'https://api.vtexcommercestable.com.br/api/recommend-bff/v2/events/product-view?an=apiexamples' \
_10
--header 'Content-Type: application/json' \
_10
--header 'user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36' \
_10
--header 'x-vtex-rec-origin: apiexamples/storefront/vtex.recommendation-shelf@2.x' \
_10
--data '{"userId":"user-id","product":"product-id-1","source":"WEB_DESKTOP"}'

Learn more

Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Suggest edits (GitHub)
On this page