Barns2 WooCommerce QuickView Pro GTM Event Listener

Track Barns2 Plugin QuickView Pro interactions in GTM. Monitor product quick view open, add-to-cart, and close events in WooCommerce stores with wp_qp_action variable.

woocommercequickviewbarns2ecommercegtmga4product-interaction

Event fired

wp_quickview_interactions

Key variable

wp_qp_action

Barns2 Plugin QuickView Pro

Overview

WooCommerce QuickView Pro by Barns2 allows customers to view product details in a modal overlay without navigating to the product page. This listener tracks quick view interactions which are precursors to add-to-cart events.

Event fired: wp_quickview_interactions Variable: wp_qp_action

Common Use Cases

Track product quick view opens as GA4 view_item events
Measure quick view to add-to-cart conversion rates
Identify which products get the most quick views vs. full page visits
Optimize product catalog layout based on quick view engagement

Tracked Events

wp_qp_action	Description
`quickview opened`	Modal opens for product
`add to cart clicked`	Add-to-cart from quick view
`quickview closed`	Modal dismissed
`image swiped`	Image gallery navigated

Installation

html

<!-- GTM Custom HTML Tag: QuickView Pro Listener -->
<script>
(function() {
  function qvPush(action, extra) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push(Object.assign({
      'event': 'wp_quickview_interactions',
      'wp_qp_action': action
    }, extra || {}));
  }

  jQuery(document).on('b2quickview:open', function(e, product) {
    qvPush('quickview opened', {
      productId: product && product.id,
      productName: product && product.name,
      productPrice: product && product.price
    });
  });

  jQuery(document).on('b2quickview:addedToCart', function(e, product) {
    qvPush('add to cart clicked', {
      productId: product && product.id,
      productName: product && product.name,
      productPrice: product && product.price,
      quantity: product && product.quantity
    });
  });

  jQuery(document).on('b2quickview:close', function() {
    qvPush('quickview closed');
  });
})();
</script>

Fire on: DOM Ready. Requires jQuery (included with WooCommerce).

Data Layer Output

Quick View Opened

json

{
  "event": "wp_quickview_interactions",
  "wp_qp_action": "quickview opened",
  "productId": "123",
  "productName": "Blue T-Shirt",
  "productPrice": "29.99"
}

Add to Cart

json

{
  "event": "wp_quickview_interactions",
  "wp_qp_action": "add to cart clicked",
  "productId": "123",
  "productName": "Blue T-Shirt",
  "productPrice": "29.99",
  "quantity": 1
}

Triggers to Create

Trigger	Event	Condition
CE – QV Open	`wp_quickview_interactions`	`wp_qp_action = quickview opened`
CE – QV Add to Cart	`wp_quickview_interactions`	`wp_qp_action = add to cart clicked`

GA4 Mapping

GA4 Event	Trigger	Parameters
`view_item`	quickview opened	item_id, item_name, price
`add_to_cart`	add to cart clicked	item_id, item_name, price, quantity

Related Listeners

More eCommerce

Barns2 Restaurant Ordering

wcRestaurant_interactions

← All eCommerce GTM Cookbook →