Javascript API

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

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 specific step in a widget:

triggerbee.widgets.api.switchState(widgetId, newStateId, undefined); 

Log a click

This snippet allows you to log a click of the widget to Triggerbee. This is useful for campaigns that doesn't track click automatically, eg. if you have a button to execute a script instead of URL-redirect. 

mtr.widget('clickthrough', 16553);

Campaign Event listeners

For each campaign event, there are different output data 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 initializing 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);    
});