Barns2 WooCommerce Restaurant Ordering Event Listener
How to track Interactions With The Barns2 WooCommerce Restaurant Ordering Form with google tag manager
This section highlights how to use the Barns2 Plugin WooCommerce Restaurant Ordering event listener in conjunction with Google Tag Manager (GTM) to track visitor interactions with the WooCommerce Restaurant Ordering widget. This widget enables users to add meals to their cart, and by tracking these interactions, you can gain insights in analytics platforms such as Google Analytics (GA4), Piwik Pro, Mixpanel, and more.
Step 1: Add the Event Listener Script to a GTM Custom HTML Tag
Begin by creating a new tag in Google Tag Manager of the Custom HTML tag type. Copy the Barns2 Plugin WooCommerce Restaurant Ordering event listener script provided below and paste it into this tag. Name the tag appropriately, such as “cHTML – WooCommerce Restaurant Event Listener,” and set the trigger to DOM Ready to ensure the event listener is fired after the page content has loaded.
What Does the Event Listener Do?
This event listener script monitors user interactions with the WooCommerce Restaurant Ordering widget and triggers a dataLayer event named wcRestaurant_interactions. The script tracks various interactions, such as opening and closing the ordering modal, adding products to the cart, and updating product quantities. You can then capture and analyze these interactions in your analytics tools.
Step 2: Create a Custom Event Trigger in GTM
Next, set up a custom event trigger in Google Tag Manager. Navigate to the Triggers section in GTM and create a new trigger with the following settings:
- Trigger Type: Custom Event
- Event Name: wcRestaurant_interactions
This trigger will fire whenever the event listener pushes the wcRestaurant_interactions event to the dataLayer.
Step 3: Define DataLayer Variables
To capture the data pushed by the event listener, you’ll need to create the following dataLayer variables in GTM:
- wcRestaurant_action: Returns the type of interaction or event that occurred, such as wro:modal:open or wro:modal:add_product.
Additional variables you can define depending on your tracking needs:
- success: Indicates whether the event was successful.
- product_data: Contains information about the product involved in the event.
- updated_price: Provides the updated price if the price was modified.
- quantity: Indicates the product quantity involved in the interaction.
Step 4: Create Marketing Tags and Utilize Variables
With your trigger and variables set up, the next step is to create your marketing tags (e.g., Google Analytics [GA4] Event tags or Piwik Pro Event tags). Configure your tags to:
- Attach the custom event trigger you created in Step 2.
- Use the dataLayer variables defined in Step 3 to enrich your tag configuration, adding context to the tracked events. For example, in Google Analytics, you can send the wcRestaurant_action as the event name, along with additional parameters such as product data or quantity.
Useful Notes:
The Barns2 Plugin WooCommerce Restaurant Ordering event listener is usable outside GTM and in other TMS; however, setting up and configuring principles remain consistent across platforms.
To save time when implementing, you can download a pre-configured GTM recipe template from this resource page. Customize the recipe as needed to start seamlessly tracking WooCommerce Restaurant Ordering interactions.
Following these steps will allow you to effectively track and analyze visitor interactions with the Barns2 Plugin WooCommerce Restaurant Ordering widget. You will gain valuable insights to enhance your marketing and user experience strategies.
<script>
(function() {
// Function to push dataLayer events
function pushToDataLayer(eventName, additionalData) {
var eventData = {
event: "wcRestaurant_interactions",
wcRestaurant_action: eventName
};
// Add additional data if available
if (additionalData) {
for (var key in additionalData) {
if (additionalData.hasOwnProperty(key)) {
eventData[key] = additionalData[key];
}
}
}
// Push to the dataLayer
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(eventData);
}
// Event listeners for WooCommerce Restaurant Ordering events
jQuery(document).on('wro:modal:load', function(event, response) {
pushToDataLayer('wro:modal:load', {
success: response.success,
product_data: response.product_data
});
});
jQuery(document).on('wro:modal:init', function() {
pushToDataLayer('wro:modal:init');
});
jQuery(document).on('wro:modal:open', function() {
pushToDataLayer('wro:modal:open');
});
jQuery(document).on('wro:modal:close', function() {
pushToDataLayer('wro:modal:close');
});
jQuery(document).on('wro:modal:update_price', function(event, price) {
pushToDataLayer('wro:modal:update_price', {
updated_price: price
});
});
jQuery(document).on('wro:modal:change_quantity', function(event, quantity) {
pushToDataLayer('wro:modal:change_quantity', {
quantity: quantity
});
});
jQuery(document).on('wro:modal:add_quantity', function(event, quantity) {
pushToDataLayer('wro:modal:add_quantity', {
quantity: quantity
});
});
jQuery(document).on('wro:modal:remove_quantity', function(event, quantity) {
pushToDataLayer('wro:modal:remove_quantity', {
quantity: quantity
});
});
jQuery(document).on('wro:modal:before_add_product', function(event, formData) {
pushToDataLayer('wro:modal:before_add_product', {
formData: formData
});
});
jQuery(document).on('wro:modal:add_product', function(event, response) {
pushToDataLayer('wro:modal:add_product', {
product_name: response.product_name,
quantity_added: response.quantity_added,
cart_hash: response.cart_hash
});
});
jQuery(document).on('wro:modal:add_product_complete', function() {
pushToDataLayer('wro:modal:add_product_complete');
});
jQuery(document).on('wro:modal:add_product_fail', function() {
pushToDataLayer('wro:modal:add_product_fail');
});
jQuery(document).on('wro:before_add_product', function(event, data) {
pushToDataLayer('wro:before_add_product', {
product_id: data.product_id,
quantity: data.quantity
});
});
jQuery(document).on('wro:add_product', function(event, response) {
pushToDataLayer('wro:add_product', {
product_name: response.product_name,
num_products_added: response.num_products_added,
quantity_added: response.quantity_added,
cart_hash: response.cart_hash
});
});
jQuery(document).on('wro:add_product_complete', function() {
pushToDataLayer('wro:add_product_complete');
});
jQuery(document).on('wro:add_product_fail', function() {
pushToDataLayer('wro:add_product_fail');
});
})();
</script>
Video of how to use the listener
Related Event Listener
Barns2 Plugin QuickView Pro
Saber Feedback
PaperForm
download the google tag manager recipe for tracking Interactions With The Barns2 WooCommerce Restaurant Ordering Form
