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 pmw.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 () {
pmw.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 view_item event on variable products when no variation is pre-selected
By default, when Variations Output is enabled, the Pixel Manager does not fire the view_item event on a variable product page until a variation is selected.
The reason is that for dynamic remarketing events like view_item, the product information sent with the event must match a product in the uploaded catalog. When variations are uploaded to the catalog, the parent product is not. So when no variation is pre-selected on the product page, there is no reliable way for the Pixel Manager to know which variation ID to send. Sending the correct variation ID also yields much more precise ad sets.
Recommended: use the Variations Output setting
If you are fine reporting the parent product ID for variable products, you do not need any custom code. Disable the Variations Output setting (Pixel Manager settings, Shop section). With it disabled, the Pixel Manager automatically fires a view_item event with the parent product data on page load for variable products, even when no variation is selected.
Keep in mind this setting is global: it switches all product reporting (remarketing, add_to_cart, purchase, and so on) from variation-level IDs to parent-product IDs. Only disable it if your product feed is built around parent products. See Variations Output for the full trade-offs.
Alternative: keep Variations Output enabled and fire a parent view_item on load
If you want to keep variation-level reporting enabled but also fire a view_item for the parent product on page load, add the following code to your functions.php file.
Do not use the hide_variation event for this. That event fires only when a customer deselects a variation that was already selected, not on a fresh page load when nothing is selected. The snippet below hooks the Pixel Manager's own pmwLoad event instead, which fires reliably on page load.
add_action('wp_footer', function () {
if (!function_exists('is_product') || !is_product()) {
return;
}
?>
<script>
jQuery(document).on("pmwLoad", function () {
try {
if (pmwDataLayer?.shop?.page_type !== "product") return;
if (pmwDataLayer?.shop?.product_type !== "variable") return;
var parentId = pmw.getMainProductIdFromProductPage();
if (!parentId) return;
pmw.triggerViewItemEventPrep(parentId);
} catch (e) {
console.error(e);
}
});
</script>
<?php
});
With Variations Output enabled, this fires a view_item for the parent product on page load, and the Pixel Manager will still fire an additional view_item for the specific variation once the customer selects one.
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
});
```## Filter the Pixel Manager's options based on the WPML language
If you are using WPML and want to set different Pixel IDs or other settings based on the current language, you can use the `pmw_options` filter. This allows you to modify the options before they are processed by the Pixel Manager.
```php title="/wp-content/themes/child-theme/functions.php"
/**
* Change the Facebook Pixel ID based on the current WPML language.
*/
add_filter('pmw_options', function ( $options ) {
// Get the current WPML language (returns e.g. 'en', 'de', etc.)
$current_language = apply_filters('wpml_current_language', null);
// Modify options based on language
switch ($current_language) {
case 'de':
$options['facebook']['pixel_id'] = '123456789';
break;
case 'fr':
$options['facebook']['pixel_id'] = '1122334455';
break;
default: // Fallback (e.g. English or unknown)
$options['facebook']['pixel_id'] = '5544332211';
break;
}
return $options;
});
