Barns2 Plugin QuickView Pro Event Listener
How to track Barns2 Plugin Item QuickView Modal Engagement with google tag manager
This step-by-step guide will show you how to use the Barns2 Plugin QuickView Pro event listener and Google Tag Manager (GTM) to track website visitors’ interactions with the Quick View Modal (expand, close, and add to cart). By integrating this tracking into your analytics platforms, such as Google Analytics (GA4), Piwik Pro, and others, you can gain deeper insights into user engagement with your item quick view modal widget in your e-commerce store.
Step 1: Add the Event Listener Script in GTM
You can start by copying the Barns2 Plugin QuickView Pro event listener script provided in this resource and creating a Custom HTML tag in Google Tag Manager. Paste the script into the tag, and configure the trigger to fire on DOM Ready.
💡 Pro Tip: Firing the tag on DOM Ready ensures that the event listener initializes only after the Quick View Modal is available on the page.
This event listener script listens for interactions with the Barns2 Plugin QuickView Modal and pushes a dataLayer event named wp_quickview_interactions for the following actions:
- Expand: When the Quick View Modal is opened.
- Close: When the modal is closed.
- Add to Cart: When a product is added to the cart through the modal.
- Load: When the modal content is fully loaded.
Each event includes details about the interaction, such as the action type (wp_qp_action) and additional information (e.g., cart message, errors).
Step 2: Create a Custom Event Trigger in GTM
To track these interactions, create a Custom Event Trigger in GTM. Set the Event Name to:
wp_quickview_interactions
This trigger will fire for all QuickView Pro interactions tracked by the script.
Step 3: Define DataLayer Variables
Next, set up Data Layer Variables in GTM to capture the interaction details. Below is a list of the variables you should create:
- wp_qp_action: This returns the type of interaction or event that occurred (e.g., quick_view_pro:open, quick_view_pro:close, quick_view_pro:added_to_cart).
- Additional variables for specific interactions (optional):
- cart_message: Captures the cart-related message when adding a product.
- error: Indicates if there was an error during the Add to Cart process.
- cart_hash: Stores the cart hash after a successful Add to Cart action.
Step 4: Configure Marketing Tags and Pixels
Once you’ve set up the variables and triggers, the next step is to create your marketing tags (e.g., Google Analytics [GA4], Piwik Pro, Mixpanel, or other platforms).
- Attach the Custom Event Trigger (wp_quickview_interactions) to the tag.
- Use the Data Layer Variables (wp_qp_action, cart_message, etc.) in the tag configuration to add context to the interaction events.
This setup will allow you to track Quick View Modal interactions in your analytics platform and enrich your event data with valuable details about user behavior.
Implementation Notes:
The Barns2 Plugin QuickView Pro event listener can be implemented with other Tag Management Solutions (TMS). Note that when doing this, the principles outlined here, such as creating event triggers and variables, remain the same across different platforms.
GTM Recipe Template
To speed up the setup process, you should scroll down this resource page to find a downloadable GTM recipe template. This recipe can be customized and used to track Quick View Modal interactions, saving you time during implementation.
<script>
(function() {
// Check if WCQuickViewPro is available
if (typeof window.WCQuickViewPro === 'undefined') {
console.error('WCQuickViewPro is not available.');
return;
}
// Function to push event to dataLayer
function pushToDataLayer(eventName, additionalData) {
var eventData = {
event: "wp_quickview_interactions",
wp_qp_action: eventName
};
// Merge additional data if available
if (additionalData) {
for (var key in additionalData) {
if (additionalData.hasOwnProperty(key)) {
eventData[key] = additionalData[key];
}
}
}
// Push to dataLayer
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(eventData);
}
// Event listeners
jQuery(document).on('quick_view_pro:open', function() {
pushToDataLayer('quick_view_pro:open');
});
jQuery(document).on('quick_view_pro:load', function() {
pushToDataLayer('quick_view_pro:load');
});
jQuery(document).on('quick_view_pro:close', function() {
pushToDataLayer('quick_view_pro:close');
});
jQuery(document).on('quick_view_pro:added_to_cart', function(event, data) {
var additionalData = {};
if (data && data.response) {
additionalData.cart_message = data.response.cart_message || null;
additionalData.error = data.response.error || null;
additionalData.cart_hash = data.response.cart_hash || null;
}
pushToDataLayer('quick_view_pro:added_to_cart', additionalData);
});
})();
</script>
Video of how to use the listener
Related Event Listener
Amelia Event Registration Form
Amelia Appointment Booking Form
Barns2 WooCommerce Restaurant Ordering
download the google tag manager recipe for tracking Barns2 Plugin Item QuickView Modal Engagement
