Crobox
Product TourWhy CroboxSuccess StoriesAbout
Search
⌃K
Links

Javascript API

This document describes the functionality available of the Crobox Javascript API.

Introduction

There are 2 ways for Crobox to collect data on the website
  1. 1.
    By using extractors Crobox can hook onto an existing tag management solution (f.e. using the GTM dataLayer in combination with Google Enhanced E-commerce. This is available for Enterprise customers.
  2. 2.
    By pushing the events to Crobox using custom code snippets per page.
This document describes how to push the events towards Crobox

Asynchronous accessing to the API

The Javascript API exposes one global variable onto the window object called crobox
Because the Crobox Javascript library may be loaded asynchronously, for example, using a tag manager, you should use the following logic to get a callback when the API is ready for usages.
1
window.crobox = window.crobox || [];
2
crobox.push(function(crobox) {
3
// Crobox API is now ready to used and methods are available
4
});

Pageviews

On each pageview an event should be sent to to Crobox using the crobox.pageview(data: object, force?: boolean) API.
The first argument is an object with properties that are different per pagetype.
The second argument is a boolean which only should be set to true when you are using an SPI interface and you want to force a new pageview. Normally multiple pageview calls with refreshing the browser will augment each other.

Page types

Crobox uses page types internally to categorize certain types of pages together, built-in system ones are:
  • index (Home Page)
  • overview (Product Lister Page)
  • detail (Product Detail Page)
  • cart (Cart Page)
  • checkout (Checkout Page)
  • complete (Complete / Confirmation page)
  • search (Search Result page)
  • other (Fallback)

Properties available per page type

All pages

These properties are required on all pageview calls.
Property
Type
Description
pt
number
Indicates what pagetype is currently being viewed. Should be one of built-in system one available on the crobox object:
  • crobox.PAGE_INDEX
  • crobox.PAGE_OVERVIEW
  • crobox.PAGE_DETAIL
  • crobox.PAGE_CART
  • crobox.PAGE_CHECKOUT
  • crobox.PAGE_COMPLETE
  • crobox.PAGE_SEARCH
lc
string
Used to correctly identifying which country / language the pageview is for. Must be formatted with valid language and country ISO codes combined with a dash or underscore (language first). f.e. nl-NL or en-GB
Code example
1
// make sure to wrap this in the async logic
2
crobox.pageview({
3
pt: crobox.PAGE_INDEX,
4
lc: "en-GB"
5
});

Overview pages

Property
Type
Description
imp
string[]
Array of strings that contains the product-ids of the impressions that are shown on the overview page in the same order, f.e. ["1","2","3"]
Code example
1
// make sure to wrap this in the async logic
2
crobox.pageview({
3
pt: crobox.PAGE_OVERVIEW,
4
lc: "en-GB"
5
imp: [
6
"123", // First product id
7
"345", // Second product id
8
"567", // Third product id
9
.... // etc..
10
});

Detail pages

Property
Type
Description
pi
string
The product-id of the product that is currently being viewed. "123"
Code example
1
// make sure to wrap this in the async logic
2
crobox.pageview({
3
pt: crobox.PAGE_DETAIL,
4
lc: "en-GB"
5
pi: "123"
6
});

Cart pages

Property
Type
Description
imp
{id: string, qty: number }[]
Array of objects containing the product-id and quantity of the products currently in the cart f.e. [{id: "1", qty: 2}, {id: "2", qty: 1}]
Code example
1
// make sure to wrap this in the async logic
2
crobox.pageview({
3
pt: crobox.PAGE_CART,
4
lc: "en-GB"
5
imp: [
6
{ id: "123", qty: 1},
7
{ id: "345", qty: 3},
8
.... // etc..
9
]
10
});

Checkout pages

Property
Type
Description
stp
number?
Optional number that can be used to track at which step the visitor is into the checkout
Code example
1
// make sure to wrap this in the async logic
2
crobox.pageview({
3
pt: crobox.PAGE_CHECKOUT,
4
lc: "en-GB"
5
stp: 2,
6
});

Complete pages

Property
Type
Description
tid
string
The order-id. This is used to uniquely identify and deduplicate a transaction / order.
rev
number
Number containing total revenue for this order
imp
{ id:string, qty: number}\[\]
Array of objects containing the id and quantity of the products being sold f.e. \[{id: "1", qty: 2}, {id: "2", qty: 1}\]
Code example
1
// make sure to wrap this in the async logic
2
crobox.pageview({
3
pt: crobox.PAGE_COMPLETE,
4
lc: "en-GB"
5
tid: "27493", // Order id
6
rev: 162.23, // Order revenue
7
imp: [
8
{ id: "123", qty: 1},
9
{ id: "345", qty: 3},
10
.... // etc..
11
]
12
});

Search pages

Property
Type
Description
st
string?
Search term that was used for the search
Code example
1
// make sure to wrap this in the async logic
2
crobox.pageview({
3
pt: crobox.PAGE_SEARCH,
4
lc: "en-GB"
5
st: "Orange running shoes",
6
});

Actions

On pages normally a lot of other actions are happening aswell. In order todo more advanced analytics about products it's possible to track other actions as well. 2 are built-in namely:

Impression click action

Execute this code when on a product lister page a specific product is clicked. This is so at Crobox we can register which products are most commonly clicked
1
// make sure to wrap this in the async logic
2
crobox.click({
3
productId: "123"
4
});

Add-to-cart action

Execute this code when a product is added to the cart.
1
// make sure to wrap this in the async logic
2
crobox.addToCart({
3
productId: "123"
4
quantity: 2
5
});

Custom actions, f.e. add-to-favorites

Last it's also possible to sent custom actions f.e. when you want to track the nr of favorites of a specific product the following logic could be used:
// make sure to wrap this in the async logic
crobox.track('addToFavorites', {
productId: "123" // Optional
})

Event system

There is an events API available that can be used to communicate with the third-parties to have a stable connection between the Crobox Platform and the integrating party. This could be used to integrate with third-party analytics or:
Register a new event-listener on the event system

crobox.on(event, callback)

Use this method to register a new event-listener on the event system.
Argument
Type
Description
event
string
Name of the event that needs to be listened to.
callback
function
Functionality that needs to be executed when the event fires, as arguments it received the extra arguments that are added when an event is fired
De-register an existing event-listener on the event system

crobox.off(event, callback)

Use this method to de-register an existing event-listener on the event system. Note: for this, you do need to have a reference to the existing callback.
Argument
Type
Description
event
string
Name of the event that needs to be stopped listening to
callback
function
Functionality that was previously registered
Fire a new event in the event system

crobox.emit(event, args...)

Use this method to fire a new event in the event system.
Argument
Type
Description
event
string
Name of the event that you want to emit a new event for
args...
vararg
Extra argument that are passed will be add as arguments to the callback function that are registered on the event.
Technical Documentation - Previous
APIs
Next - Technical Documentation
Get Started with Crobox
Last modified 6d ago