Elementor Popup Event Listener
How to track Elementor Popup Interactions with google tag manager
To track Interactions with Elementor popups in Google Tag Manager, you’ll have to copy the event listener code, paste it into your custom HTML tag in GTM, and trigger it on DOM ready.
When a popup is shown, the code pushes a dataLayer event with the event name “show_Popup” and the ID of the popup that was shown.
Similarly, when a popup is hidden, the code pushes another dataLayer event with the event name “close_Popup” and the hidden popup ID.
You’ll have to create two custom event triggers and one dataLayer variable;
The trigger [show_Popup] is emitted when a popup is shown to a user, and [close_Popup] happens when the user closes the popup.
To get the Elementor Popup ID, create the dataLayer variable with the key [popupID].
When the event happens, you can fire your tags/pixels (Google Analytics (GA4), Piwik Pro, etc.).
<script>
jQuery(document).on('elementor/popup/show', function(Event, popupId) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': "show_Popup",
'popupID': popupId
});
});
jQuery(document).on('elementor/popup/hide', function(Event, popupId) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': "close_Popup",
'popupID': popupId
});
});
</script>
Video of how to use the listener
Related Event Listener
Optin Monster
Poptin Popup
Social Intents
