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.
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 transakcja jest wyświetlana na pulpicie nawigacyjnym z następującymi danymi:
- Nazwa projektu docelowego
- Liczba wydań
- Wartość (opcjonalnie)
- Współczynnik konwersji w wybranym okresie
1. utworzyć konwersję
W ten sposób tworzy się nowy projekt docelowy:
- Kliknij koło zębate w prawym górnym rogu.
- Wybierz Strony internetowe
- Wybierz stronę internetową i kliknij Cele
- Kliknij Utwórz projekt docelowy
- Przypisz nazwę i opis
- 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 link prowadzi do strony odchodzi natychmiast, Czasami przeglądarka nie może wysłać śledzenia na czas.
Rozwiązanie:
► Krótkie opóźnienie przekierowania i tylko po śledzeniu wykonać.
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:
- mniej łatwe w utrzymaniu
- jest często nadpisywana przez kreatory stron
- technicznie nieczysty
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 Tworzenie systemów z własną logiką sukcesu (np. smart builder)
<scenariusz>
sk('formularz', 'init', {
onSuccess: funkcja() {
trackboxx('trackGoal', 'YOUR-ID');
}
});
</scenariusz>
Język kodu: HTML, XML (xml)
→ Popraw dla narzędzi, które mają własny haczyk „sukcesu“.
4.4 Śledzenie za pośrednictwem strony z podziękowaniem (rozwiązanie awaryjne)
Jeśli nic z tego nie zadziała:
- Forma zakończona sukcesem
- Przekierowanie do nowej strony (np. /thanks/)
- Użyj kodu śledzenia odsłon na tej stronie
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
Użyj tego narzędzia, aby utworzyć indywidualny kod śledzenia dla konwersji. Wprowadź identyfikator konwersji, wybierz typ zdarzenia i skopiuj gotowy kod.
Wprowadź identyfikator konwersji
Identyfikator konwersji można znaleźć na pulpicie nawigacyjnym Trackboxx w sekcji „Konwersje“.
Wybierz typ zdarzenia
Generowanie i kopiowanie kodu
// Najpierw wprowadź swój identyfikator konwersji.
Wklej kod na swojej stronie internetowej - zalecane: przed zamknięciem </body>-dzień.
Dobrze wiedzieć
- Z klasami CSS Wszystkie elementy śledzone przez tę klasę.
- Kod jest kompatybilny z kreatorami stron (Elementor, Divi itp.).
- Aktywuj odpowiednią opcję dla łączy przekierowujących.
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.
