Trackboxx Conversion Tracking

With Trackboxx conversion tracking, you can measure what actions visitors take on your website – e.g. clicks on important links, submitted forms or visits to specific pages.
This data helps you to accurately evaluate the success of your marketing and website activities.

What types of conversions can Trackboxx track?

Trackboxx supports the following events:

• Clicks on links, buttons or menu items
• Views of specific pages (e.g. a thank you page)
• form dispatch
• Custom JavaScript events

Each transaction is displayed in the dashboard with the following data:

• Name of the target project
• Number of releases
• Value (optional)
• Conversion rate in the selected period

1. Create conversion

How to create a new target project:

1. Click on the cogwheel in the top right-hand corner.
2. Select websites
3. Select the website and click on objectives
4. Click on Create target project
5. Assign name & description
6. You will receive code like this:

This base ID will be integrated into the appropriate code examples later on.

2. Click tracking

You can track clicks in various ways.
Trackboxx recommends the JavaScript variant, as it is more stable, flexible and GDPR-friendly.

2.1 Click tracking via JavaScript

a) Tracking via a CSS ID

<a href="/contact/" id="contact link">Contact Us</a>
Code language: HTML, XML (xml)

Tracking code:

<script>
document.getElementById('contact-link').addEventListener('click', () => { trackboxx(trackGoal', 'YOUR ID');
});
</script>
Code language: HTML, XML (xml)

b) Tracking via a CSS class

<script>
document.querySelector('.contact-link').addEventListener('click', () => { trackboxx(trackGoal', 'YOUR ID');
});
</script>Code language: HTML, XML (xml)

⚠️ Note:
querySelector() tracks only the first element with this class.

For multiple elements simultaneously:

<script>
document.querySelectorAll('.contact-link').forEach(el => { el.addEventListener('click', () => { trackboxx(trackGoal', 'YOUR ID');
    });
});
</script>
Code language: HTML, XML (xml)

2.2 Click tracking with immediate redirection (external links, downloads, mailto, tel)

If a link opens the page immediately leaves, the browser may sometimes be unable to send the tracking signal in time.

Solution:
► Delay forwarding briefly and only after tracking execute.

Example: You would like to know how often the link to your contact form is clicked on your website.

<script>
document.querySelectorAll('.external-link').forEach(el => { el.addEventListener('click', (e) => { e.preventDefault(); trackboxx(trackGoal', 'YOUR ID'); setTimeout(() => {
      window.location = el.href; }, 150);
  });
});
</script>
Code language: HTML, XML (xml)

Recommended for:

• external links
• PDF downloads
• Mailto links
• Tel-Links
• affiliate links

2.3 Click tracking via inline HTML (onclick)

This method works, but it is not ideal:

<a href="/contact/" onclick="trackboxx('trackGoal', 'YOUR-ID');">Contact Us</a>
Code language: HTML, XML (xml)

⚠️ Disadvantages:

• more difficult to maintain
• is often overwritten by page builders
• technically imprecise

Recommendation: JavaScript instead of inline.

3. Page views (pageview conversions)

To measure how often a particular page is accessed:

<script>
document.addEventListener('DOMContentLoaded', () => { trackboxx(trackGoal', 'YOUR ID');
});
</script>
Code language: HTML, XML (xml)

Ideal for:

• Thank you pages
• order confirmations
• Successfully-sent pages

4. Form tracking

There are three ways:

4.1 Monitor form via onsubmit (if access is possible)

<form onsubmit="trackboxx('trackGoal', 'YOUR-ID');">
Code language: HTML, XML (xml)

Simple – works anywhere HTML can be edited.

4.2 Tracking form submissions via JavaScript

If eventListener is required:

<script>
document.querySelector('#contact form').addEventListener('submit', () => { trackboxx(trackGoal', 'YOUR ID');
});
</script>
Code language: HTML, XML (xml)

4.3 Form systems with their own success logic (e.g. smart builders)

<script>
sk('form', 'init', {
  onSuccess: function() { trackboxx(trackGoal', 'YOUR ID');
  }
});
</script>
Code language: HTML, XML (xml)

→ Correct for tools that have their own „success“ hook.

4.4 Tracking via thank you page (fallback)

If none of these work:

1. Form submitted successfully
2. Redirect to new page (e.g. /thank-you/)
3. Use pageview tracking code on this page

That is the most universal solution.

5. WordPress-specific tracking

5.1 Menu click tracking via CSS class

WordPress menu entry receives, for example:

CSS class: new here
Code language: HTTP (http)

Tracking:

<script>
document.querySelector('.new-here').addEventListener('click', () => { trackboxx(trackGoal', 'YOUR ID');
});
</script>
Code language: HTML, XML (xml)

Automatic Conversion Code Generator

// Please enter your conversion ID first.

Related Articles:

Track Google Ads / Facebook Ads using UTM – In this article, we will show you how to track and evaluate your paid campaigns on Google or Meta/Facebook with Trackboxx.