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

Ideal for:

• Thank you pages
• order confirmations
• Successful-submission 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)

→ Recommended for tools that provide 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

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.