۶Ƶ

DocumentationCommerceProduct Recommendations Guide

Headless

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Admin

You can integrate Product Recommendations in a headless storefront using either or a custom frontend technology, such as React or Vue JS.

Custom and headless integrators should refer to these Luma and PWA instructions as a suggested implementation. There are many ways of implementing Product Recommendations into headless solutions and this documentation does not cover all scenarios. Integrators must cover eventing, design, and testing for their implementations.

Product Recommendations require behavioral and catalog data to operate. The catalog data sync process remains unchanged in a headless implementation, but changes are needed for behavioral data collection.

NOTE
Headless instances must implement eventing to power the Product Recommendations dashboard.

To integrate Product Recommendations in a headless storefront, you must:

  1. Send behavioral data to ۶Ƶ Sensei to analyze and compute Product Recommendation results. You can also send additional data to enable product recommendation metrics reporting.

  2. Fetch product recommendation results and render those results on the page.

You can perform both of these actions using the available SDKs as described in the following workflow.

  1. Install the Product Recommendations module.

  2. Install and use the to fire the behavioral events.

    The minimum required events to return Product Recommendations results:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Event Category
    view product
    add-to-cart product
    place-order checkout

    To enable metrics reporting, the following additional events are required:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    Event Category
    impression-render recommendation-unit
    view recommendation-unit
    rec-click recommendation-unit
    rec-add-to-cart-click recommendation-unit (if an “Add to cart” button is present in the recommendations template)

  3. When the events are fired, use the to handle the events and send them to ۶Ƶ Sensei.

  4. After the behavioral data is collected, you can create Product Recommendations in the Admin.

  5. Use the to fetch the recommendation units on the storefront. The SDK returns necessary product data to render recommendation units on a page.

recommendation-more-help
4bf3c55a-3844-4322-a5d2-42b4e56228e5