How to track user interaction and conversion of the opt-in dialog?

how-to
web
marketing

#1

You have configured the opt-in mode to trigger automatically or only on some specific pages, but you want to measure user interaction and conversion rate with your existing tools in order to validate this new reengagement lever.

You will need to listen to the specific events our optin-dialog plugin triggers and report them to your analytics tool of choice.

Track with Google Analytics

Put the following code in your pages, preferably before calling WonderPush.init():

if (self.ga) {
    document.addEventListener('wonderpush-webplugins-optin-dialog.show', function(event) {
        ga('send', 'event', 'PushOptinDialog', 'show');
    });
    document.addEventListener('wonderpush-webplugins-optin-dialog.hide', function(event) {
        ga('send', 'event', 'PushOptinDialog', 'hide');
    });
    document.addEventListener('wonderpush-webplugins-optin-dialog.positiveButton.click', function(event) {
        ga('send', 'event', 'PushOptinDialog', 'accept');
    });
    document.addEventListener('wonderpush-webplugins-optin-dialog.negativeButton.click', function(event) {
        ga('send', 'event', 'PushOptinDialog', 'decline');
    });
    document.addEventListener('wonderpush-webplugins-optin-dialog.closeButton.click', function(event) {
        ga('send', 'event', 'PushOptinDialog', 'close');
    });
}

Feel free to rename the 3rd and 4th arguments of the call to ga(), that is 'PushOptinDialog' and the one after it.

Track with pixels

Put the following code in your pages, preferably before calling WonderPush.init():

function trackOptinDialogWithPixel(action) {
    var pixel = document.createElement('IMG');
    // Change this fake URL for the one provided by your tracking service:
    pixel.src = 'https://yourtracking.service/some/api/track?action=' + encodeURIComponent(action);
    pixel.width = pixel.height = 1;
    pixel.border = 0;
    pixel.alt = '';
    pixel.style.display = 'none';
    document.body.appendChild(pixel);
}
document.addEventListener('wonderpush-webplugins-optin-dialog.show', function(event) {
    trackOptinDialogWithPixel('show');
});
document.addEventListener('wonderpush-webplugins-optin-dialog.hide', function(event) {
    trackOptinDialogWithPixel('hide');
});
document.addEventListener('wonderpush-webplugins-optin-dialog.positiveButton.click', function(event) {
    trackOptinDialogWithPixel('accept');
});
document.addEventListener('wonderpush-webplugins-optin-dialog.negativeButton.click', function(event) {
    trackOptinDialogWithPixel('decline');
});
document.addEventListener('wonderpush-webplugins-optin-dialog.closeButton.click', function(event) {
    trackOptinDialogWithPixel('close');
});

Make sure to update the URL in the trackOptinDialogWithPixel function with the one provided by your tracking service.


#2