Śledzenie konwersji w Trackboxx

Dzięki funkcji śledzenia konwersji Trackboxx możesz mierzyć działania podejmowane przez odwiedzających Twoją witrynę - np. kliknięcia w ważne linki, wysłane formularze lub wyświetlenia określonych stron.
Dane te pomagają dokładnie ocenić skuteczność działań marketingowych i działań prowadzonych w witrynie.

Ważne: W Trackboxx oferujemy również opcję śledzenia konwersji/celów za pomocą śledzenia automatycznego. Ta metoda jest znacznie prostsza i nie wymaga implementacji dodatkowego kodu na stronie internetowej. Kliknij tutaj, aby przeczytać artykuł – Cele automatyczne

Jakie typy konwersji może rejestrować Trackboxx?

Trackboxx obsługuje następujące zdarzenia:

• Kliknięcia łączy, przycisków lub elementów menu
• Widoki niektórych stron (np. strona z podziękowaniem)
• Wysyłka formularzy
• Własne zdarzenia JavaScript

Każda konwersja jest wyświetlana w panelu wraz z następującymi danymi:

• Nazwa konwersji
• Liczba uruchomień
• Wartość (opcjonalnie)
• Współczynnik konwersji w wybranym okresie

1. Utwórz konwersję

Jak utworzyć nowy cel:

1. Kliknij koło zębate w prawym górnym rogu.
2. Wybierz Strony internetowe
3. Wybierz stronę internetową i kliknij Cele
4. Kliknij Utwórz cel
5. Przypisz nazwę i opis
6. Otrzymasz następujący kod:

Ten identyfikator bazowy zostanie później użyty w odpowiednich przykładach kodu.

2. Śledzenie kliknięć

Kliknięcia można śledzić na różne sposoby.
Trackboxx zaleca wariant JavaScript, ponieważ jest bardziej stabilny, elastyczny i przyjazny dla RODO.

2.1 Śledzenie kliknięć przez JavaScript

a) Śledzenie za pomocą identyfikatora CSS

<a href="/kontakt/" id="kontakt-link">Kontakt</a>
Język kodu: HTML, XML (xml)

Kod śledzenia:

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

b) Śledzenie za pomocą klasy CSS

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

⚠️ Uwaga:
querySelector() utwory tylko pierwszy element z tą klasą.

Dla kilku elementów jednocześnie:

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

2.2 Śledzenie kliknięć z natychmiastowym przekierowaniem (linki zewnętrzne, pobieranie, mailto, tel)

Jeśli kliknięcie linku powoduje opuszczenie strony od razu, przeglądarka może nie zdążyć wysłać sygnału śledzenia.

Rozwiązanie:
► Krótko opóźnij przekierowanie i wykonaj je dopiero po wysłaniu sygnału śledzenia .

Przykład:

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

Zalecane dla:

• linki zewnętrzne
• Pliki do pobrania w formacie PDF
• Linki Mailto
• Tel-Links
• Linki partnerskie

2.3 Śledzenie kliknięć za pomocą wbudowanego kodu HTML (onclick)

Ta metoda działa, ale nie jest optymalna:

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

⚠️ Wady:

• trudniejsza w utrzymaniu
• jest często nadpisywana przez kreatory stron
• mniej niezawodna technicznie

Zalecenie: JavaScript zamiast inline.

3. Odsłony stron (konwersje na podstawie odsłon)

Aby zmierzyć, jak często dana strona jest odwiedzana:

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

Idealny dla:

• Strony z podziękowaniem
• Potwierdzenia zamówień
• Strony potwierdzające wysłanie formularza

4. Śledzenie formularzy

Istnieją cztery sposoby:

4.1 Monitorowanie formularza poprzez onsubmit (jeśli dostęp jest możliwy)

<form onsubmit="trackboxx('trackGoal', 'DEINE-ID');">
Język kodu: HTML, XML (xml)

Prosty - działa wszędzie tam, gdzie można edytować HTML.

4.2 Śledzenie wysyłania formularzy przez JavaScript

Jeśli eventListener jest wymagany:

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

4.3 Systemy formularzy z własną logiką powodzenia (np. inteligentne kreatory)

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

→ Działa z narzędziami, które mają własny hook „success”.

4.4 Śledzenie za pośrednictwem strony z podziękowaniem (rozwiązanie awaryjne)

Jeśli nic z tego nie zadziała:

1. Pomyślne wysłanie formularza
2. Przekierowanie na nową stronę (np. /dziekujemy/)
3. Dodaj na tej stronie kod śledzenia odsłon

To jest najbardziej uniwersalne rozwiązanie.

5. Śledzenie specyficzne dla WordPressa

5.1 Śledzenie kliknięć menu za pomocą klasy CSS

Przypisz na przykład tę klasę CSS do pozycji menu w WordPressie:

CSS-Klasse: neu-hier
Język kodu: HTTP (http)

Śledzenie:

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

Automatyczny generator kodu konwersji

// Najpierw wprowadź swój identyfikator konwersji.

Powiązane artykuły:

Śledzenie reklam Google Ads / Facebook Ads przez UTM - W tym artykule pokażemy, jak można śledzić i analizować płatne kampanie w Google lub Meta/Facebook za pomocą Trackboxx.