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.

Important: At Trackboxx, we also offer the option to track conversions/goals via automatic tracking. This method is significantly simpler and requires no additional code to be implemented on your website. Click here for the article – Automatic goals

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 submissions
• Custom JavaScript events

Each conversion is shown in the dashboard with the following data:

• Conversion name
• Number of triggers
• Value (optional)
• Conversion rate in the selected period

1. Create conversion

How to create a new goal:

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 goal
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="/kontakt/" id="kontakt-link">Kontakt</a>
Code language: HTML, XML (xml)

Tracking code:

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

b) Tracking via a CSS class

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

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

For multiple elements simultaneously:

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

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

If following a link causes the visitor to leave the page immediately, the browser may not have enough time to send the tracking signal.

Solution:
► Briefly delay the redirect and continue only after the tracking signal has been sent.

Example:

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

Recommended for:

• Outbound 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="/kontakt/" onclick="trackboxx('trackGoal', 'DEINE-ID');">Kontakt</a>
Code language: HTML, XML (xml)

⚠️ Disadvantages:

• harder to maintain
• is often overwritten by page builders
• less reliable technically

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', 'DEINE-ID');
});
</script>
Code language: HTML, XML (xml)

Ideal for:

• Thank you pages
• order confirmations
• Pages shown after a successful form submission

4. Form tracking

There are four ways:

4.1 Monitor the form via onsubmit (if access is possible)

<form onsubmit="trackboxx('trackGoal', 'DEINE-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('#kontaktformular').addEventListener('submit', () => {
    trackboxx('trackGoal', 'DEINE-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', 'DEINE-ID');
  }
});
</script>
Code language: HTML, XML (xml)

→ Works with tools that have their own “success” hook.

4.4 Tracking via thank you page (fallback)

If none of these work:

1. Submit the form successfully
2. Redirect to a new page (e.g. /thank-you/)
3. Add the page-view tracking code to that page

This is the most universally compatible solution.

5. WordPress-specific tracking

5.1 Menu click tracking via CSS class

For example, assign this CSS class to a WordPress menu item:

CSS-Klasse: neu-hier
Code language: HTTP (http)

Tracking:

<script>
document.querySelector('.neu-hier').addEventListener('click', () => {
    trackboxx('trackGoal', 'DEINE-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.