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

PreviousWelcome NextIntegration Guide

Last updated 3 years ago

Was this helpful?

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

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

PreviousWelcome NextIntegration Guide

Last updated 3 years ago

Was this helpful?