Wisepops Event Listener
How to track Wisepops Popups with google tag manager
Measuring Wisepops popup conversions in your measurement stacks (Google Analytics, Piwik Pro, Mixpanel, etc.) will help enrich your marketing data.
With this data you can have valuable insights on how Wisepops interactions impact your marketing funnel, conversions, website engagement metrics, and other business KPIs.
For this implementation, we’ll use Google Tag Manager and the Wisepops event listener script.
Start by pasting the event listener script in the GTM custom HTML tag and firing it on pageview or DOM ready (always recommended).
PRO TIP: if you installed the Wisepops script through Google Tag Manager, please use the DOM-ready trigger instead.
Your next step should be creating a custom event with the name [wisepopsEvent], which happens on all Wisepops activity.
Create a DataLayer variable with the key [wisepopupAction] as it will help you capture in GTM the Wisepops popup interaction type.
[wisepopupAction] returns the following event description;
- popup form submitted
- popup closed
- popup displayed
- tab displayed
- interact with the popup
You can use the [wisepopupAction] dataLayer variable as event parameters or for streamlining your trigger to fire on specific Wispops interactions.
to get more data about each Wisepops event, create a dataLayer variables with the name;
[wisepopsdetails] –> Returns the popup HTML
[wisepopsID] –> Returns the Wisepops pop-up ID
[userLanguage] –> Returns the the user browser language
[userOS] –> Returns the user browser operating system.
[userBrowser] –> Returns the user browser name.
[pageTitle] –> Returns the page title
The last step will be connecting your marketing tags to the trigger and use the dataLayer variables you created to push more information about each interaction.
<script> //The after-form-submit event is fired after the submission of a signup block form wisepops('listen', 'after-form-submit', function (event) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'wisepopsEvent', 'wisepopupAction': 'popup form submitted', 'wisepopsdetails': event.target, 'wisepopsID': event.detail.popup.id, 'eventType': event.type, 'userLanguage': navigator.language, 'userOS': navigator.userAgentData.platform, 'userBrowser': navigator.userAgentData.brands[2].brand, 'pageTitle': document.title }); }); //The after-popup-close event is fired after the popup has been closed wisepops('listen', 'after-popup-close', function (event) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'wisepopsEvent', 'wisepopupAction': 'popup closed', 'wisepopsdetails': event.target, 'wisepopsID': event.detail.popup.id, 'eventType': event.type, 'userLanguage': navigator.language, 'userOS': navigator.userAgentData.platform, 'userBrowser': navigator.userAgentData.brands[2].brand, 'pageTitle': document.title }); }); //The before-popup-display event is fired before the display of a popup. wisepops('listen', 'before-popup-display', function (event) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'wisepopsEvent', 'wisepopupAction': 'popup displayed', 'wisepopsdetails': event.target, 'wisepopsID': event.detail.popup.id, 'eventType': event.type, 'userLanguage': navigator.language, 'userOS': navigator.userAgentData.platform, 'userBrowser': navigator.userAgentData.brands[2].brand, 'pageTitle': document.title }); }); //The before-tab-display event is fired before the display of a tab. wisepops('listen', 'before-tab-display', function (event) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'wisepopsEvent', 'wisepopupAction': 'tab displayed', 'wisepopsdetails': event.target, 'wisepopsID': event.detail.popup.id, 'eventType': event.type, 'userLanguage': navigator.language, 'userOS': navigator.userAgentData.platform, 'userBrowser': navigator.userAgentData.brands[2].brand, 'pageTitle': document.title }); }); //The after-tracked-click event is fired after the conversion of a popup. wisepops('listen', 'after-tracked-click', function (event) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'wisepopsEvent', 'wisepopupAction': 'interact with the popup', 'wisepopsdetails': event.target, 'wisepopsID': event.detail.popup.id, 'eventType': event.type, 'userLanguage': navigator.language, 'userOS': navigator.userAgentData.platform, 'userBrowser': navigator.userAgentData.brands[2].brand, 'pageTitle': document.title }); }); </script>