Javascript API

You can open and close campaigns using its "Widget 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

The number 67890 in above example would be the "Widget ID". The number 12345 would be the "Campaign ID"

Open a widget without targeting

This snippet allows you to open a certain widget by its ID. It does not take into account audience, scheduling etc.

triggerbee.widgets.api.open(widgetId)

Open a widget with targeting

This snippet allows you to open a certain widget 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 widget

This snippet allows you to close a certain widget by its ID.

triggerbee.widgets.api.close(widgetId)

Initiate the widgets

This snippet allows you to initiate the widget script.

triggerbee.widgets.api.init()

Note: This is done by default on page load. The snippet is only required for SPA sites.

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);

Javascript Events

This is a list of the current Javascript Events for Onsite Campaign widgets and general tracking. These are useful for creating your own functions and action based on events in widgets and other events.

Campaign Events

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	
        }
    */
});

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
        }
    */
});

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
        }
    */
});

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
        }
    */
});

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"
        }
    */
});

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
        }
    */
});

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);    
});