beacon.js

beacon.js is a TypeScript library for sending tracking events to SearchSpring's Beacon API. A full API reference is available here

Installation

npm install --save @searchspring/beacon

<script src="https://snapui.searchspring.io/beacon.js"></script>

Beacon Globals

import { Beacon } from '@searchspring/beacon';

// Initialize Beacon with globals
const beacon = new Beacon({ siteId: 'abc123', currency: { code: 'USD' } });

| option | description | default value | required | |---|---|:---:|:---:| | siteId | Required siteId | production | ✔️ | | currency.code | ISO 4217 currency code | | | | cart | array of current cart products | | | | cart[].uid | product uid | | | | cart[].sku | (optional) product sku | | | | cart[].childUid | (optional) product child uid | | | | cart[].childSku | (optional) product child sku | | | | cart[].qty | (optional) product qty | | | | cart[].price | (optional) product price | | |

Beacon Config

In addition to providing globals, a config object can be provided as the second parameter.

import { Beacon } from '@searchspring/beacon';

// Initialize Beacon with globals and config
const beacon = new Beacon(
    { siteId: 'abc123', currency: { code: 'USD' } },
    { mode: 'development' }
);

| option | description | default value | required | |---|---|:---:|:---:| | mode | application mode (production, development) | production | | | initiator | unique identifier for the beacon | beaconjs/{version} | | | apis | configure various api options | | | | apis.fetch | FetchAPI reference to use | window.fetch | | | requesters.personalization.origin | alternative endpoint for personalization preflight api | https://{siteId}.a.searchspring.io | | | requesters.beacon.origin | alternative endpoint for beacon api | https://beacon.searchspring.io/beacon/v2 | | | href | set href | window.location.href | | | userAgent | set userAgent | navigator.userAgent | |

Tracking Events

This section lists all available events and their corresponding schemas names provided to the data object. Refer to the API reference for data payloads and examples for each event.

An optional siteId can be provided to each event to override the siteId provided in the Beacon globals constructor.

beacon.events.autocomplete.render({
    data: AutocompleteSchemaData,
    siteId: 'abc123'
});

Shopper Login

beacon.events.shopper.login({ id: 'shopper-id' });

Autocomplete Render

beacon.events.autocomplete.render({
    data: AutocompleteSchemaData
});

Autocomplete Impression

beacon.events.autocomplete.impression({
    data: AutocompleteSchemaData
});

Autocomplete Add to Cart

beacon.events.autocomplete.addToCart({
    data: AutocompleteAddToCartSchemaData
});

Autocomplete Click Through

beacon.events.autocomplete.clickThrough({
    data: AutocompleteSchemaData
});

Autocomplete Redirect

beacon.events.autocomplete.redirect({
    data: AutocompleteRedirectSchemaData
});

Search Render

beacon.events.search.render({
    data: SearchSchemaData
});

Search Impression

beacon.events.search.impression({
    data: SearchSchemaData
});

Search Add to Cart

beacon.events.search.addToCart({
    data: SearchAddToCartSchemaData
});

Search Click Through

beacon.events.search.clickThrough({
    data: SearchSchemaData
});

Search Redirect

beacon.events.search.redirect({
    data: SearchRedirectSchemaData
});

Category Render

beacon.events.category.render({
    data: CategorySchemaData
});

Category Impression

beacon.events.category.impression({
    data: CategorySchemaData
});

Category Add to Cart

beacon.events.category.addToCart({
    data: CategoryAddToCartSchemaData
});

Category Click Through

beacon.events.category.clickThrough({
    data: CategorySchemaData
});

Recommendations Render

beacon.events.recommendations.render({
    data: RecommendationsSchemaData
});

Recommendations Impression

beacon.events.recommendations.impression({
    data: RecommendationsSchemaData
});

Recommendations Add to Cart

beacon.events.recommendations.addToCart({
    data: RecommendationsAddToCartSchemaData
});

Recommendations Click Through

beacon.events.recommendations.clickThrough({
    data: RecommendationsSchemaData
}); 

Product Page View

beacon.events.product.pageView({
    data: ProductPageViewSchemaData
});

Cart Add

beacon.events.cart.add({
    data: CartSchemaData
});

Cart Remove

beacon.events.cart.remove({
    data: CartSchemaData
});

Order Transaction

beacon.events.order.transaction({
    data: OrderTransactionSchemaData
});

Methods

setCurrency

If a currency is not provided in the Beacon globals constructor, or if switching currencies, the setCurrency method can be used to set the currency code.

const beacon = new Beacon({ siteId: 'abc123' });

beacon.setCurrency({ code: 'EUR' })