Trackboxx Conversion Tracking

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ą precyzyjnie analizować sukces działań marketingowych i internetowych.

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. utworzyć konwersję

W ten sposób tworzy się nowy projekt docelowy:

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 projekt docelowy
5. Przypisz nazwę i opis
6. Otrzymasz następujący kod:

Ten podstawowy identyfikator jest później zintegrowany z odpowiednimi przykładami 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="contact-link">Skontaktuj się z nami</a>
Język kodu: HTML, XML (xml)

Kod śledzenia:

<scenariusz>
dokument.getElementById('contact-link').addEventListener('kliknij', () => {
    trackboxx('trackGoal', 'YOUR-ID');
});
</scenariusz>
Język kodu: HTML, XML (xml)

b) Śledzenie za pomocą klasy CSS

<scenariusz>
dokument.querySelector('.contact-link').addEventListener('kliknij', () => {
    trackboxx('trackGoal', 'YOUR-ID');
});
</scenariusz>Język kodu: HTML, XML (xml)

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

Dla kilku elementów jednocześnie:

<scenariusz>
dokument.querySelectorAll('.contact-link').forEach(el => {
    el.addEventListener('kliknij', () => {
        trackboxx('trackGoal', 'YOUR-ID');
    });
});
</scenariusz>
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:

<scenariusz>
dokument.querySelectorAll('.external-link').forEach(el => {
  el.addEventListener('kliknij', (e) => {
    e.preventDefault();
    trackboxx('trackGoal', 'YOUR-ID');
    setTimeout(() => {
      okno.location = el.href;
    }, 150);
  });
});
</scenariusz>
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');">Skontaktuj się z nami</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 (konwersje odsłon)

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

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

Idealny dla:

• Dziękuję za strony
• Potwierdzenia zamówień
• Pomyślnie wysłane strony

4. śledzenie formularzy

Istnieją trzy sposoby:

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

<forma 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:

<scenariusz>
dokument.querySelector('Formularz kontaktowy #').addEventListener('submit', () => {
    trackboxx('trackGoal', 'YOUR-ID');
});
</scenariusz>
Język kodu: HTML, XML (xml)

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

<scenariusz>
sk('formularz', 'init', {
  onSuccess: funkcja() {
    trackboxx('trackGoal', 'YOUR-ID');
  }
});
</scenariusz>
Język kodu: HTML, XML (xml)

→ Zalecane dla narzędzi, które udostępniają 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 WordPress

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

Wpis w menu WordPress otrzymuje np:

Klasa CSSnowy tutaj
Język kodu: HTTP (http)

Śledzenie:

<scenariusz>
dokument.querySelector('.new-here').addEventListener('kliknij', () => {
    trackboxx('trackGoal', 'YOUR-ID');
});
</scenariusz>
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.