Qreative Header Footer Designer Pro emits browser events whenever a popup opens or closes. These events do not send information anywhere by themselves. You can connect them to Google Tag Manager, GA4, or another analytics platform.
Available events
qreative_hfd_popup_show
qreative_hfd_popup_hide
The event details can contain:
{
templateId: 123,
templateName: 'Newsletter Popup',
overlayId: '123',
trigger: 'exit_intent',
reason: 'close_button',
timestamp: 1786603200000
}
Send popup events to Google Tag Manager
Add this JavaScript through your child theme, code-snippet plugin, or custom JavaScript manager:
document.addEventListener('qreative_hfd_popup_show', function (event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'qreative_popup_show',
popup_id: event.detail.templateId,
popup_name: event.detail.templateName,
popup_trigger: event.detail.trigger
});
});
document.addEventListener('qreative_hfd_popup_hide', function (event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'qreative_popup_hide',
popup_id: event.detail.templateId,
popup_name: event.detail.templateName,
popup_close_reason: event.detail.reason
});
});
Configure Google Tag Manager
For popup opens:
- Create a new Custom Event trigger.
- Enter this event name:
qreative_popup_show
- Create a GA4 Event tag.
- Use an event name such as:
popup_open
- Add these event parameters:
| Parameter | Data Layer variable |
|---|---|
popup_id | popup_id |
popup_name | popup_name |
popup_trigger | popup_trigger |
- Attach the
qreative_popup_showtrigger to the GA4 tag.
Repeat these steps for popup closes using:
qreative_popup_hide
Available trigger values
Popup show events can report:
overlay_widget
elementor_id
delay
scroll
exit_intent
api
Available close reasons
Popup hide events can report:
close_button
close_link
backdrop
escape
replaced
api
Privacy note
The plugin only dispatches local browser events. It does not load Google Analytics, place analytics cookies, or transmit visitor information. Your website’s Google Tag Manager, analytics, and consent configuration determine whether data is sent.