Enabling events
When calling Circular.init(), set emitEvents: true. This will enable Circular to send events (page views, user actions, end of journey conversions) to the parent page.
Listening for Circular events
To listen for events from the parent page, add a message event listener to window of the parent page and ensure non Circular events are filtered out by using if (event.data.circular).
Events can be pushed to the dataLayer or any other service as needed as they happen.
Each event has a type and a value, which allows specific events to have different actions or just ignored.
Example message eventListener pushing to the datalayer
window.addEventListener('message', (event) => {
if (event.data.circular) {
const eventType = event.data.circular.type;
const eventValue = event.data.circular.value;
// example push to GTM
// format page view events separately
if (eventType === 'page-view') {
dataLayer.push({
'event': 'pageview',
'page': {
'path': eventValue
}
});
} else {
dataLayer.push({
'event': 'circular',
'eventAction': eventType,
'eventLabel': eventValue,
});
}
}
});
Available Event Types:
| event type | values | happens when... |
|---|---|---|
| page-view | /path | page-view events are triggered when the view changes (i.e. /search) |
| navigate | Back / Start again | A condition and valuation has been displayed in the UI |
| splash-screen | CTA label | The primary call to action button is clicked on the splash screen |
| button-action | button label | A standard button is clicked (Next stage / Yes / No) |
| quick-search-selected | suggestion label | A device search suggestion is selected |
| search-query | query | Search query entered into the text field (debounced, but may fire multiple times) |
| search-result-count | number | Number of results returned from search |
| selected-result-item | device name | An items has been selected from the search results |
| selected-variant | variant value | A value has been selected from a variant drop down (storage size / network) |
| show-question | question # & title | A condition question has been shown |
| valuation | "condition | price" | A condition and valuation has been displayed in the UI (for example: `good |
| conversion | conversion type | A email quote has been requested or clicked though to trade checkout ("Email to address" / "Complete My Trade In" |
| partnerId | partnerId | Emit the partnerId along with the conversion event |