Tips and Tricks
All the jQuery event listeners on this page will only work if jQuery has not been moved to the footer or delayed by a JavaScript optimizer. In case that happened use the following code to wait asynchronously (non page load blocking) until jQuery is loaded and then attach the event listeners.
A way to always attach event listeners after jQuery has been loaded
Some shop owners use JavaScript optimizers to delay or lazy load jQuery and tracking scripts, including Pixel Manager for WooCommerce.
Pixel Manager for WooCommerce itself can handle this seamlessly. But if you want to track your own events using the Pixel Manager for WooCommerce API, handling delayed and lazy loaded scripts is a challenge because hooking into jQuery, only after it loaded, is not straight forward. So if jQuery gets delayed or lazy loaded we need a way to deal with this.
The following code example will wait until jQuery is loaded. Once done it will attach an event listener to any element and execute the code each time the event is triggered.
The advantage of the method is, that it won't block any other page loading execution, because it runs asynchronously.
// This first part of the code waits until jQuery has been loaded
// without blocking the main page loading thread
new Promise((resolve) => {
(function waitForjQuery() {
if (window.jQuery) return resolve()
setTimeout(waitForjQuery, 100)
})()
}).then(() => {
// Replace the following code with your event listener
jQuery(document).on("SOME_EVENT", function () {
// Here is your custom code
})
// End replacement code
})
Add the product name to add-to-cart events with a label
Ever wanted to see which products are added to the cart in real-time? Then this filter is for you. Simply add the following code to functions.php and from then on it will send the product name as the event label to Google Analytics
add_action('wp_footer', function () {
?>
<script>
jQuery(document).on("pmw:add-to-cart", function (event, product) {
gtag("event", "add_to_cart", {
event_category: "add_to_cart",
event_label : product.name,
})
})
</script>
<?php
});
Add an event listener to any element on the website
You can use the following example to attach an event listener to any element on your website and trigger a tracking event.
In the following example we're attaching an event listener to a contact form button and triggering a Google Ads conversion for every submit form click.
This example is only to illustrate how this can be done.
To track contact form submissions we recommend to only track successful form submissions. This can be easily done by creating a redirect to a thank-you page after a successful form submission and place a tracking shortcode on the thank-you page.
add_action('wp_footer', function () { ?>
<script>
// Attach the event to a button or any element on your page
jQuery(".contact-form-button").on("click", function() {
// Fire a tracking event like "gtag" for Google, "fbq" for Facebook, etc.
gtag("event", "conversion", {
send_to: "AW-123456789/AABBCCDDEEFFGG",
value: 0.0,
currency: "USD",
transaction_id: "",
});
})
</script>
<?php });
Track custom events for Meta (Facebook)
If for some reason you want to track custom events in Meta (Facebook) there is a way to do this with Pixel Manager for WooCommerce.
The Pixel Manager offers the function wpm.trackCustomFacebookEvent("CUSTOM_EVENT_NAME", OPTIONAL_CUSTOM_DATA_OBJECT). When you run this function it will send CUSTOM_EVENT_NAME to Meta (Facebook), including the OPTIONAL_CUSTOM_DATA_OBJECT if it is added. And if Meta (Facebook) CAPI is enabled in the pro version, it will also send it using Meta (Facebook) CAPI.
For instance, if you want to track ViewCategory events, which are not part of the standard events in Meta (Facebook), you can do that. The Pixel Manager emits a pmw:view-category event when a visitor visits a category page. We can track this event in Meta (Facebook) using the following code in functions.php:
add_action('wp_footer', function () {
?>
<script>
jQuery(document).on("pmw:view-category", function () {
wpm.trackCustomFacebookEvent("ViewCategory", OPTIONAL_CUSTOM_DATA_OBJECT)
})
</script>
<?php
});
Adjust pixel IDs and other settings per country domain
There is a use case where shop owners want to run the same shop instance on different country domains (e.g. example.com, example.nl, example.br) and run paid ads traffic from different accounts to each of those domains.
But the Pixel Manager for WooCommerce user interface only allows to set one pixel ID in the settings.
In this case you can use the pmw_options filter to adjust the pixel IDs based on the domain.
The pmw_options filter allows you to modify the options before they are processed by the Pixel Manager.
The $options array contains all the options that are set in the Pixel Manager for WooCommerce settings.
Use the error_log function to output and see the structure of the $options array to find out how the options for other pixels are structured.
The structure of the $options array may change in future releases. It happens very rarely, but it can happen. Subscribe to our newsletter and read the changelogs to be informed about new releases and breaking changes.
/**
* Filter the Pixel Manager's options before it processes them.
*
* Place this code into functions.php of your child theme.
*
* This example shows how to set different GA4 and Google Ads conversion IDs and labels.
*
* Use the error_log function to output and see the structure of the $options array
* if you want to see how the options for other pixels are structured.
**/
add_filter('pmw_options', function ( $options ) {
// error_log('options: ' . print_r($options, true));
$host = $_SERVER['HTTP_HOST'];
if (preg_match("/.*example.nl/", $host)) {
$options['google']['analytics']['ga4']['measurement_id'] = 'abc';
$options['google']['ads']['conversion_id'] = '1234567890';
$options['google']['ads']['conversion_label'] = 'abc123';
} elseif (preg_match("/.*example.fr/", $host)) {
$options['google']['analytics']['ga4']['measurement_id'] = 'xyz';
$options['google']['ads']['conversion_id'] = '1122334455';
$options['google']['ads']['conversion_label'] = 'def123';
} elseif (preg_match("/.*example.us/", $host)) {
$options['google']['analytics']['ga4']['measurement_id'] = 'def';
$options['google']['ads']['conversion_id'] = '9988776655';
$options['google']['ads']['conversion_label'] = 'ghi123';
}
return $options;
});
Fire the ViewContent event on variable products when no variation is pre-selected
The Pixel Manager doesn't fire the ViewContent event on variable products when no variation is pre-selected.
The reason is, that for dynamic remarketing events, like the ViewContent event, the product information sent with the event must match a product in the uploaded catalog. If variations are uploaded to the catalog, the parent product is not. That means when no product is pre-selected on the product page there is no way for the Pixel Manager to know which product variation ID to send.
Also, the dynamic remarketing will yield much more precise ad sets if the correct variation ID is sent with the event.
Some advertisers don't mind if not the correct variation ID is sent in case no variation is pre-selected.
For that case the Pixel Manager offers a away to fire the ViewContent event without sending a product ID.
Add the following code to your functions.php file to activate this feature.
add_action('wp_footer', function () {
?>
<script>
jQuery(function() {
jQuery(".single_variation_wrap").on("hide_variation", function() {
jQuery(document).trigger("pmw:view-item")
})
});
</script>
<?php
});
Modify the page_title and page_location in GA4
The following code examples show how to modify the page_title and page_location in GA4 based on GA4's documentation.
The first code example disables the default page_view event.
add_filter('pmw_ga_4_parameters', function ($analytics_parameters, $analytics_id) {
$analytics_parameters['send_page_view'] = false;
return $analytics_parameters;
}, 10, 2);
The second code example shows how to send a custom page_view event with custom page_title and page_location parameters. Make sure to replace PAGE_TITLE and PAGE_LOCATION with your own values.
add_action('wp_footer', function(){
?>
<script>
gtag('event', 'page_view', {
page_title: 'PAGE_TITLE',
page_location: 'PAGE_LOCATION'
});
</script>
<?php
});
Track mailto: links with Google Ads conversions
add_action('wp_footer', function () {
?>
<script>
jQuery(document).on("click", "a[href^='mailto:']", function (event) {
gtag("event", "conversion", {
// replace with own conversion ID and label
"send_to": "AW-1000000000/0000000000",
});
});
</script>
<?php
});
Track add-to-cart and begin-checkout events with Google Ads conversions
Google Ads offers conversion actions for add-to-cart and begin-checkout events. But we highly discourage tracking these events as conversions in Google Ads because they will be detrimental for optimizing campaigns for profitable revenue.
If you chose to track these events as conversions in Google Ads, you can use the following code to track the add-to-cart and begin-checkout events with Google Ads as conversion actions.
/**
* The following snippet allows you to track the add-to-cart
* and begin-checkout events with Google Ads as conversion actions.
*
* We highly discourage tracking add-to-cart and begin-checkout events
* as conversions in Google Ads because they will be detrimental
* for optimizing campaigns for profitable revenue.
*
* Place this in your child theme's functions.php file and replace
* the AW-CONVERSION_ID and CONVERSION_LABEL with your actual values.
*/
add_action('wp_footer', function () {
?>
<script>
jQuery(document).on("pmw:add-to-cart", function (event, product) {
gtag("event", "conversion", {
"send_to" : "AW-CONVERSION_ID/CONVERSION_LABEL",
"value" : product.price,
"currency": product.currency,
});
});
jQuery(document).on("pmw:begin-checkout", function () {
gtag("event", "conversion", {
"send_to" : "AW-CONVERSION_ID/CONVERSION_LABEL",
});
});
</script>
<?php
});
The Pixel Manager Command Queue
Available from version 1.49.0 of the Pixel Manager.
The Pixel Manager offers an asynchronous command queue for developers who want to run Pixel Manager API commands safely, no matter if the Pixel Manager is immediately available or not.
The command queue is a JavaScript array that stores all commands that are sent to the Pixel Manager. The commands are executed in the order they were added to the queue.
If the Pixel Manager is already loaded, the commands are executed immediately. If the Pixel Manager is not loaded yet, the commands are stored in the queue and executed as soon as the Pixel Manager is loaded.
The command queue is available as window._pmwq.
Example API call to the Pixel Manager:
window._pmwq = window._pmwq || [];
window._pmwq.push(function () {
/// Add your command here
console.log('API call to the Pixel Manager API');
});
