This article describes all the current Javascript Events for Onsite Campaigns and general tracking. These are useful for creating your own functions and action based on events in widgets and other events. Mostly you will need to use the Widget and Campaign ID, which you find by looking at the address bar in your browser when editing the campaign:
https://app.triggerbee.com/campaigns/12345/widgets/67890/editor
12345 is the Campaign ID.
67890 is the Widget ID
Campaign Actions
Open a campaign without targeting
This snippet allows you to open a certain campaign by its ID. It does not take into account audience, scheduling etc.
triggerbee.widgets.api.open(widgetId)
Open a campaign with targeting
This snippet allows you to open a certain campaign by its ID. It does also check the campaigns targeting such as audience, conditions and scheduling. If no variant matches, no campaign is shown.
triggerbee.widgets.api.trigger(campaignId)
Close a campaign
This snippet allows you to close a certain campaign by its ID.
triggerbee.widgets.api.close(widgetId)
Initiate the campaign script
This snippet allows you to initiate the campaign script.
triggerbee.widgets.api.init()
Open a specific step in a widget:
triggerbee.widgets.api.switchState(widgetId, newStateId, undefined);
Campaign Event listeners
For each campaign event, there are different output data points that you can use in your code. These 3 are available for all events. See what other output data is available under each event.
id: ID of the widget triggering the event
campaignName: Name of the campaign of the widget triggering the event
campaignId: ID of the campaign of the widget triggering the event
onTriggerbeeWidgetOpened
The event is fired when an Onsite Campaign widget is opened.
document.addEventListener("onTriggerbeeWidgetOpened", function (event) { console.log(event.detail);
// Example output:
/* { id: 1103,
campaignName: "Newsletter sign up",
campaignId: 1059,
variantName: 1234,
tags: ['tag1', 'tag2']
} */
});onTriggerbeeWidgetClosed
The event is fired when an Onsite Campaign widget is closed.
document.addEventListener("onTriggerbeeWidgetClosed", function (event) { console.log(event.detail);
// Example output:
/* { id: 1103,
campaignName: "Newsletter sign up",
campaignId: 1059,
variantName: 1234,
tags: ['tag1', 'tag2']
} */
});onBeforeTriggerbeeFormSubmitted
The event is fired before a form in an Onsite Campaign widget is submitted.
document.addEventListener("onBeforeTriggerbeeFormSubmitted", function (event) {
console.log(event.detail);
// Example output: /* {
id: 1103,
campaignName: "Newsletter sign up",
campaignId: 1059,
variantName: 1234,
tags: ['tag1', 'tag2']
} */
});onAfterTriggerbeeFormSubmitted
The event is fired after a form in an Onsite Campaign widget is submitted.
document.addEventListener("onAfterTriggerbeeFormSubmitted", function (event) {
console.log(event.detail);
// Example output: /* {
id: 1103,
campaignName: "Newsletter sign up",
campaignId: 1059, variantName: 1234,
tags: ['tag1', 'tag2']
} */
});onTriggerbeeWidgetButtonClicked
The event is fired when a button in an Onsite Campaign widget is clicked.
document.addEventListener("onTriggerbeeWidgetButtonClicked", function (event) {
console.log(event.detail);
// Example output: /* {
id: 1103,
campaignName: "Newsletter sign up",
campaignId: 1059,
variantName: 1234, url: "http://example.com?utm_custom=Newsletter+sign+up",
tags: ['tag1', 'tag2'],
} */ });onTriggerbeeWidgetStateSwitched
The event is fired when there's a change of slide in an Onsite Campaign widget.
document.addEventListener("onTriggerbeeWidgetStateSwitched", function (event) {
console.log(event.detail);
// Example output: /* {
id: 1103,
campaignName: "Newsletter sign up",
campaignId: 1059,
variantName: 1234,
stateId: 1213,
tags: ['tag1', 'tag2']
} */
});onTriggerbeeWidgetsInitializing
Do something at the beginning of initializing widgets
document.addEventListener("onTriggerbeeWidgetsIsInitializing", function () {
// your code
});onTriggerbeeWidgetsInitialized
Do something when the initialization of widgets is done
document.addEventListener("onTriggerbeeWidgetsInitialized", function () { // your code
});
Tracking Events
beforeTriggerbeeReady
Do something before Triggerbee is initialized. (mtr does not exist yet)
document.addEventListener("beforeTriggerbeeReady", function () {
// your code
});afterTriggerbeeReady
mtr exists (most common event, always use this for ex logging)
document.addEventListener("afterTriggerbeeReady", function () {
// your code
});onTriggerbeeSpaPageChanged
Do something when Triggerbee detects a SPA page view change (useful for scripting via Triggerbee client script).
document.addEventListener("onTriggerbeeSpaPageChanged", function (e) {
// your code, for example: console.log(e);
});triggerbeeTagAdded
The event is fired when a tag has been added to the session.
document.addEventListener("triggerbeeTagAdded", function (event) { console.log('tag: ' + event.detail.name);
});triggerbeeGoalAdded
The event is fired when a goal has been set on the session.
document.addEventListener("triggerbeeGoalAdded", function (event) { console.log('goal: ' + event.detail.name);
});triggerbeePersonConsented
The event is fired when a visitor has given consent
document.addEventListener("triggerbeePersonConsented", function (event) { console.log('goal: ' + event.detail.name);
});triggerbeePersonIdentified
The event is fired when a visitor has been identified
document.addEventListener("triggerbeePersonIdentified", function (event) { console.log('goal: ' + event.detail.name);
});
Enriching Visitors
Log an event
triggerbee.event({
type: 'goal',
name: 'Logged in'
});Log an event with identification
triggerbee.event({
type: 'goal',
name: 'Logged in',
data: {
identity: {
email: 'someone@triggerbee.com'
}
}
});
Log a purchase
triggerbee.event({
type: 'purchase',
id: 123, // Could be Order ID
data: {
couponCode: 'welcome15',
revenue: 1500,
identity: {
email: 'someone@triggerbee.com',
firstname: 'Some',
lastname: 'One'
}
}
});Identify a visitor
triggerbee.identify({
email: 'someone@triggerbee.com',
firstname: 'Some',
lastname: 'One'
});Add a tag to a visitor
Tags are used to organize your visitors. Is the visitor a supplier, co-worker, customer, or perhaps a competitor? You can use them to segment your visitor lists or to personalize their onsite experience.
Use our standard tags, or compose your own. Tags can be set manually or through Automations in Triggerbee, but can also be added via Javascript onsite, according to this article.
Add tags to Session
// You can add one tag document.addEventListener('afterTriggerbeeReady', function() {
triggerbee.session.addTags('Orange');
});
// Or many tags
document.addEventListener('afterTriggerbeeReady', function() {
triggerbee.session.addTags(['Orange', 'Apple', 'Banana']);
});
Adding tags to a Profile
// You can add one tag document.addEventListener('afterTriggerbeeReady', function() {
triggerbee.identity.addTags('Orange');
});
// Or many tags document.addEventListener('afterTriggerbeeReady', function() {
triggerbee.identity.addTags(['Orange', 'Apple', 'Banana']);
});