Trackboxx Conversion Tracking

Mit dem Conversion Tracking von Trackboxx kannst du messen, welche Aktionen Besucher auf deiner Webseite ausführen – z. B. Klicks auf wichtige Links, gesendete Formulare oder Aufrufe bestimmter Seiten.
Diese Daten helfen dir, den Erfolg deiner Marketing- und Website-Maßnahmen präzise auszuwerten.

Welche Conversion-Arten kann Trackboxx erfassen?

Trackboxx unterstützt folgende Ereignisse:

• Klicks auf Links, Buttons oder Menüeinträge
• Aufrufe bestimmter Seiten (z. B. eine Danke-Seite)
• Formularversand
• Eigene JavaScript-Events

Jeder Abschluss wird im Dashboard mit folgenden Daten angezeigt:

• Name des Zielvorhabens
• Anzahl der Auslösungen
• Wert (optional)
• Conversion Rate im gewählten Zeitraum

1. Conversion anlegen

So legst du ein neues Zielvorhaben an:

1. Klicke oben rechts auf das Zahnrad
2. Wähle Webseiten
3. Wähle die Webseite und klicke auf Ziele
4. Klicke auf Zielvorhaben anlegen
5. Vergib Name & Beschreibung
6. Du erhältst Code wie diesen:

Diese Basis-ID wird später in die passenden Code-Beispiele integriert.

2. Klicktracking

Du kannst Klicks auf verschiedene Arten tracken.
Trackboxx empfiehlt die JavaScript-Variante, da sie stabiler, flexibler und DSGVO-freundlicher ist.

2.1 Klicktracking über JavaScript

a) Tracking über eine CSS-ID

<a href="/kontakt/" id="kontakt-link">Kontakt</a>
Code-Sprache: HTML, XML (xml)

Tracking-Code:

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

b) Tracking über eine CSS-Klasse

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

⚠️ Hinweis:
querySelector() trackt nur das erste Element mit dieser Klasse.

Für mehrere Elemente gleichzeitig:

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

2.2 Klicktracking mit sofortiger Weiterleitung (externe Links, Downloads, Mailto, Tel)

Wenn ein Link die Seite sofort verlässt, kann der Browser das Tracking manchmal nicht rechtzeitig senden.

Lösung:
► Weiterleitung kurz verzögern und erst nach dem Tracking ausführen.

Beispiel:

<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-Sprache: HTML, XML (xml)

Empfohlen für:

• externe Links
• PDF-Downloads
• Mailto-Links
• Tel-Links
• Affiliate-Links

2.3 Klicktracking über Inline-HTML (onclick)

Diese Methode funktioniert, ist aber nicht optimal:

<a href="/kontakt/" onclick="trackboxx('trackGoal', 'DEINE-ID');">Kontakt</a>
Code-Sprache: HTML, XML (xml)

⚠️ Nachteile:

• schlechter wartbar
• wird oft von Pagebuildern überschrieben
• technisch unsauber

Empfehlung: JavaScript statt inline.

3. Seitenaufrufe (Pageview-Conversions)

Um zu messen, wie oft eine bestimmte Seite aufgerufen wird:

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

Ideal für:

• Danke-Seiten
• Bestellbestätigungen
• Erfolgreich-versendet-Seiten

4. Formulartracking

Es gibt drei Wege:

4.1 Formular überwachen über onsubmit (wenn Zugriff möglich)

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

Einfach – funktioniert überall, wo HTML bearbeitet werden kann.

4.2 Formularversand über JavaScript tracken

Wenn eventListener benötigt wird:

<script>
document.querySelector('#kontaktformular').addEventListener('submit', () => {
    trackboxx('trackGoal', 'DEINE-ID');
});
</script>
Code-Sprache: HTML, XML (xml)

4.3 Formularsysteme mit eigener Erfolgslogik (z. B. smarte Builder)

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

→ korrekt für Tools, die ihren eigenen „success“-Hook besitzen.

4.4 Tracking über Danke-Seite (Fallback)

Wenn nichts davon geht:

1. Formular erfolgreich
2. Redirect auf neue Seite (z. B. /danke/)
3. Auf dieser Seite Pageview-Tracking-Code verwenden

Das ist die universellste Lösung.

5. WordPress-spezifisches Tracking

5.1 Menü-Klicktracking über CSS-Klasse

WordPress-Menüeintrag erhält z. B.:

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

Tracking:

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

Automatischer Conversion Code Generator

// Bitte trage zuerst deine Conversion-ID ein.

Weiterführende Artikel:

Google Ads / Facebook Ads per UTM tracken – in diesem Artikel zeigen wir dir wie du deine Paid Kampagnen bei Google oder auch Meta/Facebook mit Trackboxx tracken und auswerten kannst.