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"). When you run this function it will send CUSTOM_EVENT_NAME to Meta (Facebook). 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>
new Promise((resolve) => {
(function waitForjQuery() {
if (window.jQuery) return resolve()
setTimeout(waitForjQuery, 100)
})()
}).then(()=>{
jQuery(document).on("pmw:view-category", function () {
wpm.trackCustomFacebookEvent("ViewCategory")
})
})
</script>
<?php
});
Unique Google Account conversion IDs 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 Google Ads traffic from different Google Ads accounts to each of those domains.
But the Pixel Manager for WooCommerce only allows to set one conversion ID and label in the standard settings.
There are two ways how you can solve this with the Pixel Manager for WooCommerce. Which way is the more suitable one depends on the shop setup and traffic behavior.
- Use the following filter to add the conversion IDs and label of each Google Ads account to all country domains: Additional Google Ads Conversion Pixels
It will add additional conversion IDs and labels on every page of every country store. That way you won't miss out conversions of visitors who switch from one country domain to another, and you still can use different Google Ads accounts to drive traffic to specific country pages.
This is the preferred way to do this because it will track orders of visitors who visit website A coming from Google Ads account A, but then switch to website B and then purchase on website B.
- You can also use an experimental filter to set a specific Google Ads conversion pixel for each country domain. It uses an experimental filter. We may remove it at any time without prior notice. So be careful when you use the following solution. We might add stable filters in an upcoming version of PMW, but we can't promise anything for sure right now.
/**
* If you are running one instance of PMW and run ads on multiple domains
* for the same shop, but with different Google Ads accounts for each country,
* then you can use the following example code to change the Google Ads
* conversion ID and conversion label for each domain.
*
* Add this to functions.php and change the domains and the conversion IDs
* and labels to match your shops settings.
*/
add_action('template_redirect', function() {
$host = $_SERVER['HTTP_HOST'];
if(preg_match("/.*example.nl/", $host)) {
add_filter('pmw_experimental_data_layer', function ( $data_layer ) {
$data_layer['pixels']['google']['ads']['conversionIds'] = [
'CONVERSION_ID' => 'CONVERSION_LABEL',
];
return $data_layer;
});
} elseif(preg_match("/.*example.us/", $host)) {
add_filter('pmw_experimental_data_layer', function ( $data_layer ) {
$data_layer['pixels']['google']['ads']['conversionIds'] = [
'CONVERSION_ID' => 'CONVERSION_LABEL',
];
return $data_layer;
});
} elseif(preg_match("/.*example.fr/", $host)) {
add_filter('pmw_experimental_data_layer', function ( $data_layer ) {
$data_layer['pixels']['google']['ads']['conversionIds'] = [
'CONVERSION_ID' => 'CONVERSION_LABEL',
];
return $data_layer;
});
}
});
- You may also create a Google Ads MCC account, then create subaccount for each country under that MCC account and then use a conversion action of the MCC account to track all traffic and conversions.
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>
new Promise((resolve) => {
(function waitForjQuery() {
if (window.jQuery) return resolve()
setTimeout(waitForjQuery, 100)
})()
}).then(() => {
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
});
