With the help of Triggebee Onsite Campaigns JavaScript API, it is possible to push events and data about your campaign activity to your data layer, to be facilitated in your Google Tag Manager account. Whenever a visitor interacts with a Triggerbee campaign, the event will be logged to Google Tag Manager's data layer. From this, you can create custom triggers to push data to Google Analytics or other tools for follow-up.
1. Add Triggerbee Events to the Data Layer
First, you need to add all the Triggerbee Campaign Events to Google Tag Manager data layer.
Start by creating a new Tag in GTM. Select Custom HTML as Tag Type.
Make sure to only trigger the tag after the Triggerbee tracking code has been initialized.
Paste the full code example (below), or select a few events from our list of campaign events if you do not wish to use them all.
Trigger your Tag on Pageview (or Window loaded for SPA sites).
Save and Publish! Now you will be able to see the events in the data layer when there is a campaign activity onsite:
<script>
// Triggers when a visitor sees a campaign
document.addEventListener("onTriggerbeeWidgetOpened", function (event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'onTriggerbeeWidgetOpened',
'campaignName': event.detail.campaignName,
'campaignId': event.detail.campaignId,
'variantId': event.detail.id
});
});
// Triggers when a visitor closes a campaign
document.addEventListener("onTriggerbeeWidgetClosed", function (event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'onTriggerbeeWidgetClosed',
'campaignName': event.detail.campaignName,
'campaignId': event.detail.campaignId,
'variantId': event.detail.id
});
});
// Triggers when a visitor submits a form in a campaign, but before the submit has actually happened
document.addEventListener("onBeforeTriggerbeeFormSubmitted", function (event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'onBeforeTriggerbeeFormSubmitted',
'campaignName': event.detail.campaignName,
'campaignId': event.detail.campaignId,
'variantId': event.detail.id
});
});
// Triggers when a visitor submits a form in a campaign, after the submit is successful
document.addEventListener("onAfterTriggerbeeFormSubmitted", function (event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'onAfterTriggerbeeFormSubmitted',
'campaignName': event.detail.campaignName,
'campaignId': event.detail.campaignId,
'variantId': event.detail.id
});
});
// Triggers when a visitor clicks a button in a campaign (not close buttons)
document.addEventListener("onTriggerbeeWidgetButtonClicked", function (event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'onTriggerbeeWidgetButtonClicked',
'campaignName': event.detail.campaignName,
'campaignId': event.detail.campaignId,
'variantId': event.detail.id,
'url': event.detail.url
});
});
// Triggers when the campaign switches state, eg. between primary and success state
document.addEventListener("onTriggerbeeWidgetStateSwitched", function (event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'onTriggerbeeWidgetStateSwitched',
'campaignName': event.detail.campaignName,
'campaignId': event.detail.campaignId,
'variantId': event.detail.id,
'stateId': event.detail.stateId
});
});
</script>
This is what it will look like in the data layer:
2. Create custom triggers in GTM
Once you have all the events logged to the data layer, you can use them to create Custom Event Triggers, which can be used as triggers for other tags, such as sending campaign data to Google Analytics.
Create a new Trigger in GTM and Select Trigger Configuration: Custom Event and enter the event name to match each event. You will need one Trigger per Triggerbee Campaign event.
Give your trigger a name and save it.
Done! Now you will see the events as triggers in your GTM environment
To use a trigger for other tags, simply create your tag and select your trigger:
