Web Engage Event Listener

WebEngage is a user retention platform that offers a wide variety of features. Measuring how users interact with Web Engage on-site notifications, feedback, web push, and survey widget give you insight into the impact these interactions have on your business KPIs. We’ve created an event listener that makes it easy to set up the tracking in Google Tag Manager.

How to track Web Engage Interactions (web push, notifications, survey and feedback) with google tag manager

Web Engage is a user retention tool that offers a variety of tools (feedback, on-site notifications, survey and web push). Using the Web Engage event listener and the help of Google Tag Manager, you’ll be able to track user interactions with these tools and have the data in your analytics stacks (Google Analytics, Piwik Pro, Mixpanel, etc.).

The data gives you valuable insights into what impact user interactions with Web Engage feedback, survey, web push and on-site notifications tools have on your marketing funnel, conversions, website engagement metrics, and other business KPIs.

In this implementation, we’ll be using Google Tag Manager, and the Web Engage event listener script on this page.

Your first step will be to copy, and paste the event listener script in the GTM custom HTML tag and fire it on pageview or DOM ready (always recommended) or Window Loaded.

PRO TIP: if you installed the Web Engage script through Google Tag Manager, please use the DOM-ready trigger instead or Window Loaded if the interaction with these tools isn’t pushed to the dataLayer.

Your next step should be creating a custom event with the name [webengage_event], which happens on all Web Engage activity.

In the next step, you’ll create a DataLayer variable with the key [webEngageAction] should be created for you to capture in GTM, the Tidio chat event type.

[webEngageAction] returns the following event description;

subscribe to push notifications
closed a notification
opened a notification
clicked a notification
survey is opened
survey is closed
answered survey question
survey is completed
opened feedback widget
closed feedback widget
submitted a feedback
web push notification permission prompt viewed
web push notification permission granted
web push notification permission denied
web push notification permission granted first time
web push notification permission revoked

You can use the [webEngageAction] dataLayer variable as an event parameter or for streamlining your trigger to fire on specific Web Engage events.

To understand which of the Web Engage tools the user just interacted with you’ll have to create a DataLayer variable with the key set to [webEngageType], it returns one of the following values;

feedback
survey
web push
notification

Depending on what Web Engage feature the user interacted with.

Also the following DataLayer key, gives more context on the DataLayer events emitted by the event listener.

[notificationID] – available on only for site notifications interactions, and it’s the notification ID

[surveyID] – available on only for site survey interactions, and it’s the survey ID

[webEngageEventData] – this is not available in all Web Engage activity, but it returns more information of that event that happened in object format.

To send the data of these interactions to your measurement stacks, you’ve to use add your marketing tags, attach the trigger and GTM variables you created to push more information about each Web Engage interaction.

Ensure to debug using the GTM preview mode (Google Tag Assistant), before publishing your implementation.

<script>
// when a visitor allows push notifications and the subscription completes successfully
webengage.onReady(function () {
webengage.webpush.onSubscribe(function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "web push",
'webEngageAction': 'subscribe to push notifications'
});
});
}); 
// when the on-site notification is opened
webengage.notification.onOpen(function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "notification",
'webEngageAction': 'opened a notification',
'notificationID': data.notificationId,
'webEngageEventData': data
});
});
// when the on-site notification is closed
webengage.notification.onOpen(function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "notification",
'webEngageAction': 'closed a notification',
'notificationID': data.notificationId,
'webEngageEventData': data
});
}); 
// when the on-site notification is closed
webengage.notification.onClick(function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "notification",
'webEngageAction': 'clicked a notification',
'notificationID': data.notificationId,
'webEngageEventData': data
});
}); 
// when the on-site survey is opened
webengage.survey.onOpen(function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "survey",
'webEngageAction': 'survey is opened',
'surveyID': data.surveyId,
'webEngageEventData': data
});
}); 
// when the on-site survey is closed
webengage.survey.onClose(function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "survey",
'webEngageAction': 'survey is closed',
'surveyID': data.surveyId,
'webEngageEventData': data
});
}); 
// when the on-site survey question is answered
webengage.survey.onSubmit(function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "survey",
'webEngageAction': 'answered survey question',
'surveyID': data.surveyId,
'webEngageEventData': data
});
});
// when the on-site survey is completed
webengage.survey.onComplete(function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "survey",
'webEngageAction': 'survey is completed',
'surveyID': data.surveyId,
'webEngageEventData': data
});
});
// when the on-site feedback widget is opened (Deprecated)
webengage.feedback.onOpen(function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "feedback",
'webEngageAction': 'opened feedback widget',
'webEngageEventData': data
});
});
// when the on-site feedback widget is closed (Deprecated)
webengage.feedback.onClose(function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "feedback",
'webEngageAction': 'closed feedback widget',
'webEngageEventData': data
});
});
// when the on-site feedback is submitted (Deprecated)
webengage.feedback.onSubmit(function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "feedback",
'webEngageAction': 'submitted a feedback',
'webEngageEventData': data
});
});
// when browser prompts the notification permission to the user
webengage.options('webpush.onWindowViewed', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "web push",
'webEngageAction': 'web push notification permission prompt viewed'
});
});
// when the user grants permission for Web Push
webengage.options('webpush.onWindowAllowed', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "web push",
'webEngageAction': 'web push notification permission granted'
});
});
// when the user denies permission for Web Push
webengage.options('webpush.onWindowDenied', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "web push",
'webEngageAction': 'web push notification permission denied'
});
});
// when the user grants permission for Web Push for the first time
webengage.options('webpush.onPushRegistered', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "web push",
'webEngageAction': 'web push notification permission granted first time'
});
});
// when the user revokes permission for Web Push after having granted it before
webengage.options('webpush.onPushUnregistered', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'webengage_event',
'webEngageType': "web push",
'webEngageAction': 'web push notification permission revoked'
});
});
</script>

Video of how to use the listener

Related Event Listener

GetSiteControl

Measure user interactions/conversions of your GetSiteControl popups on your website using this event listener.

Wisepops

Measure user interactions and conversions of your Wisepops pop-up using this event listener.

Gist (Formerly ConvertFox)

If you use Gist for lead generation, you can use this event listener to measure conversions and user interactions in Gist.

download the google tag manager recipe for tracking Web Engage Interactions (web push, notifications, survey and feedback)

we make you smarter with data

made with ❤️

The DumbData Team