In the following example, we implement conversion tracking for a click on a menu item on a WordPress site.
In our example, we want to track all clicks that are made on the "New here?" menu item.
Step 1 – Creating the Conversion in Trackboxx
To do this, we call up the overview of websites via the settings (cogwheel) and select the "Destinations" item for the corresponding website.
Here we add a new target project and give it a suitable name. In our case, click "New here?" - Main menu.
Once the goal is created, we now have the corresponding code snippet. The most important element here is actually the ID in the script.
In our article "How do I use Conversion Tracking" you will now find various methods for integrating the conversion script here. In our case, I will now explain the "OneClick" event. This means that we track the click on the menu item through the unique labelling (CSS class) of the menu item.
In the case of WordPress, for example, it is not easy to enter our conversion code in the menu, but we can label the menu item "unique" and thus track it without any problems.
Step 2 – Adding a CSS Class to the Menu Item
First, go to the WordPress admin panel and navigate to Appearance – Menus to access your corresponding menu.
To be able to add a CSS class here, you may need to activate this option first. To do this, click on the "Customise view" option at the top and activate the "CSS classes" checkbox.
After activation, we now have an input field for the CSS class under the corresponding menu item and enter "new-here" in our case, for example, and save the whole thing.
Step 3 – Adjusting and Implementing the Conversion Code
Now, we take our conversion code and adjust it accordingly. For integration via the OneClick event, there is a specific format. These formats can also be found on our main overview on the topic of Conversion Tracking.
We need to insert our unique CSS class into the code, and our final script will look like this:
<script type='text/javascript'>
document.querySelector('.new-here').addEventListener('click', () => {
trackboxx(trackGoal', WNUXTLZ2GT');
});
</script>Code language: HTML, XML (xml)Additional information! In general, you have the option to use either a CSS ID or a CSS class to uniquely identify a menu item or button. In WordPress menus, only the CSS class can be used, which is why in this script we use document.querySelector instead of document.getElementById.
If you assigned a CSS ID, the code would look like this:
<script>
document.getElementById('new-here').addEventListener('click', () => {
trackboxx(trackGoal', WNUXTLZ2GT');
});
</script>Code language: HTML, XML (xml)Important: Your code will have a different `trackgoal: ID`, and depending on the CSS class you used, the class name in the code must also reflect the correct name.
Step 4 – Embedding the Conversion Code into Your Website
In our case, we want to track the click on the corresponding menu item "Page-wide". Therefore, in our case, we will insert the code into the footer of the page.
If you want to track a click on a specific page only, it’s sufficient to embed the conversion script on that page alone.
Embedding the code in the footer in WordPress can be done using various methods, such as:
- Embedding via a template + page builder:
- Integration via plugin e.g. "Header Footer Script"
- Embedding via Theme Settings or Page Builder Settings:
- Embedding via Child Theme and functions.php:
In our case, we use Elementor for the website and therefore use the "Custom Code" option.
We set the location setting here to </body> End.
We save everything, and the integration of the conversion tracking is now successfully completed. The clicks on the button should now be displayed in the goals section of the Trackboxx dashboard.
