Quick Start

Overview

These basic steps are required to train and retrieve recommendations.

  • Load the Frontend API

  • Get Recommendations

  • Report events to train and improve recommendations

The frontend API is extremely lightweight, and can be loaded synchronously in the <head> tag. However, If there are any concerns about performance, consider either using "defer", or asynchronous module loading.

HTML / UMD

Place the script tag into the <head> section of the DOM. The obviyo API is added to the window object, or added to the UMD module system, if one exists.

<script src="https://cdn.obviyo.net/lib/obv-api.js"></script>

To fetch recommendations, use $fetchRecommendationData. Here is a basic example which fetches the most popular items.

By convention, functions prefixed by $ return promises.

const data = await obviyo.$fetchRecommendationData({
    siteId: '{your siteId}',
    qualifiedName: 'psz-mpop'
})

const items = data.items

To directly report user/product interactions, use reportProductInteraction.

// fire and forget
obviyo.reportProductInteraction({
    siteId: '{your siteId}',
    visitorId: '{visitorId}',
    item: '{product id}',
    type: 'viewed'
})

MODULES / ESM

Modules are widely supported by modern browsers. To use modules, simply use import or import(). No need to include a script tag.

import { $fetchRecommendationData, reportProductInteraction }
  from 'https://cdn.obviyo.net/lib/obv-api.esm.js'

...

// get recommendations
const data= await obviyo.$fetchRecommendationData({
    siteId: '{your siteId}',
    qualifiedName: 'psz-mpop'
})

const items = data.items

...

// report product interactions
obviyo.reportProductInteraction({
    siteId: '{your siteId}',
    ecommerceId: '{your ecommerceId}',
    item: '{product id}',
    type: 'viewed'
})

Use dynamic imports to easily try things out in your browser console.

const obviyo = await import ('https://cdn.obviyo.net/lib/obv-api.esm.js')

// do stuff with obviyo

Next Steps

  • Learn more about where and how to integrate

  • Api reference

PreviousWelcomeNextIntegration Guide

Last updated

Was this helpful?