The Conversion Pixels addon version 1.1.0 introduced an easy way to track custom Pixel events when a HTML element is clicked.
Basic setup
The basic setup for this type of event consists in indicating the CSS selector of the element that you want to target, the custom event name and the event value.
It’s important to make your CSS Selector as specific as possible to avoid confusion, ideally you will use an unique id for the button or anchor that you want to target. More details about how to find a CSS Selector can be found in this article.
Both the event name and value are optional. If you don’t want to use a custom event name you can choose a standard event for each of the pixels in the second part of the form where you choose which pixels you want to send this event to:
Choosing Pixels and Standard Events
The pixels area of the form shown above, allows you choose which pixels to send the event to and also choose a Standard Event to override the custom event set above (if any). This makes it easy to use relevant Standard Events for each pixel or a single custom event for all the pixels for more flexibility in how you track conversions.
Please note: For the Google Ads pixel instead of the Standard Events picker you can input a Conversion Label – in which case the Google Ads event for this click will always be “Conversion” with the Conversion Label set here. This value is separate from the Conversion Label set in the eCommerce settings in the Google Ads Pixel setup. If you want to read more about creating a new Conversion Label for Google Ads please see this article.
Adding multiple Click Events
At the bottom of the settings page you will notice you can add as many custom click event handlers as you want by clicking the “Add New Click Event” button.
Each event can be configured separately so you have full flexibility on which pixels the event is used for and which event label is used.
More Details
Once you have a click event configured the WPCode Conversion Pixels addon will add a custom event handler for each of the click events configured and will only track 1 click for each element on a pageload (meaning that if your user clicks the same button 2 times you won’t have a double report unless they reload the same page).
The JavaScript code needed for the plugin to execute click events correctly is not loaded unless you have a click handler set up and it’s very lightweight.
The script automatically checks if your pixels are correctly loaded on the page and will not attempt to send any events if the pixel code is not found for any reason.