Zdarzenia - Revol

Przegląd

Zakładka Zdarzenia pozwala definiować zdarzenia śledzenia w celu rejestrowania konkretnych działań odwiedzających na Twojej stronie. Śledź kliknięcia przycisków, wysyłki formularzy, kamienie milowe przewijania, widoczność elementów lub wywoływaj niestandardowe zdarzenia z własnego kodu. Każde zdarzenie może być oznaczone jako cel konwersji do mierzenia skuteczności kampanii.

Lista zdarzeń

Tabela zdarzeń pokazuje wszystkie zdefiniowane zdarzenia z kluczowymi metrykami:

Kolumna	Opis
Nazwa	Nazwa zdarzenia
Typ	Typ zdarzenia (Kliknięcie, Przewijanie, Wysyłka formularza, Widoczność, Niestandardowe)
Wywołania	Łączna liczba wywołań tego zdarzenia
Konwersja	Czy zdarzenie liczy się jako cel konwersji
Status	Aktywne lub nieaktywne
Akcje	Edytuj lub usuń zdarzenie

Filtry

Filtruj listę zdarzeń według:

Filtr	Opis
Typ	Pokaż tylko zdarzenia określonego typu
Konwersja	Pokaż tylko zdarzenia będące celami konwersji
Status	Pokaż aktywne lub nieaktywne zdarzenia
Wyszukiwanie	Szukaj zdarzeń po nazwie

Tworzenie zdarzenia

Kliknij Utwórz zdarzenie, aby zdefiniować nowe zdarzenie śledzenia. Każde zdarzenie wymaga:

Pole	Wymagane	Opis
Nazwa	Tak	Nazwa zdarzenia do identyfikacji (np. “Kliknięcie CTA”, “Wysyłka formularza kontaktowego”)
Typ	Tak	Sposób wywoływania zdarzenia (zobacz Typy zdarzeń poniżej)
Selektor CSS	Zależy	Selektor CSS wskazujący element (wymagany dla Kliknięcia, Wysyłki formularza, Widoczności)
URL strony	Nie	Ogranicz zdarzenie do wywoływania tylko na konkretnej stronie
Cel konwersji	Nie	Przełącznik, aby liczyć zdarzenie jako konwersję w analityce

Typy zdarzeń

Każdy typ zdarzenia śledzi inny rodzaj interakcji odwiedzającego. Skrypt trackera obsługuje wszystkie automatyczne typy — kodowanie nie jest wymagane.

Kliknięcie

Wywołuje się, gdy odwiedzający kliknie element pasujący do selektora CSS.

Ustawienie	Opis
Selektor CSS	Selektor elementu docelowego (np. `#cta-button`, `.buy-now`, `a[href="/contact"]`)
URL strony	Opcjonalne — ogranicz śledzenie do konkretnej strony

Co jest rejestrowane:

Treść tekstowa elementu (pierwsze 100 znaków)
Nazwa tagu elementu (button, a, div itp.)
Selektor CSS, który pasował
Aktualny URL strony

Użyj DevTools przeglądarki, aby znaleźć odpowiedni selektor CSS. Kliknij prawym przyciskiem myszy element → Zbadaj → kliknij prawym przyciskiem myszy tag HTML → Kopiuj → Kopiuj selektor.

Przykłady selektorów CSS:

/* Przycisk po ID */
#buy-now-btn

/* Wszystkie przyciski z konkretną klasą */
.add-to-cart

/* Link do konkretnej strony */
a[href="/pricing"]

/* Przycisk wewnątrz konkretnej sekcji */
.hero-section .cta-button

/* Dowolny element z atrybutem data */
[data-action="subscribe"]

Przewijanie (Widoczność)

Wywołuje się, gdy odwiedzający przewinie obok konkretnego elementu na stronie. Używa IntersectionObserver do wykrywania, kiedy element pojawia się w oknie widoku.

Ustawienie	Opis
Selektor CSS	Element docelowy do obserwacji (np. `#pricing-section`, `.testimonials`)
Próg przewijania	Procent elementu, który musi być widoczny (domyślnie: 50%)

Przypadki użycia:

Śledź, ilu odwiedzających widzi Twoją sekcję cenową
Mierz zaangażowanie w konkretne bloki treści
Wykrywaj, czy odwiedzający docierają do końca długiej strony

Każde zdarzenie przewijania wywołuje się tylko raz na sesję na element — nawet jeśli odwiedzający przewinie obok niego wielokrotnie. Zapobiega to zawyżeniu liczników.

Wysyłka formularza

Wywołuje się, gdy odwiedzający wyśle formularz pasujący do selektora CSS.

Ustawienie	Opis
Selektor CSS	Element docelowy formularza (np. `#contact-form`, `.signup-form`)
Pola formularza	Opcjonalne — lista dozwolonych nazw pól do rejestrowania (np. `email, phone, name`)

Co jest rejestrowane:

Wartości z pól <input>, <select> i <textarea>
Nazwy pól i ich wartości (do 500 znaków na pole)
Pola hasła i ukryte są automatycznie wykluczane

Domyślnie rejestrowane są wszystkie widoczne pola formularza. Użyj listy dozwolonych Pól formularza, aby ograniczyć zbieranie danych do konkretnych pól i uniknąć rejestrowania wrażliwych informacji.

Widoczność elementu

Wywołuje się, gdy konkretny element staje się widoczny w oknie widoku przeglądarki. Podobne do Przewijania, ale skoncentrowane na śledzeniu, czy dany element interfejsu został zobaczony.

Ustawienie	Opis
Selektor CSS	Element docelowy (np. `.promo-banner`, `#special-offer`)

Przypadki użycia:

Śledź wyświetlenia banerów promocyjnych
Mierz widoczność ważnych CTA
Wykrywaj, czy dynamicznie ładowana treść jest widziana (działa z SPA)

Tracker używa MutationObserver do obserwacji dynamicznie dodawanych elementów. Jeśli element docelowy jest renderowany przez JavaScript po załadowaniu strony (React, Vue itp.), nadal zostanie wykryty.

Niestandardowe (ręczne)

Wywołuje się, gdy wywołasz JavaScript API z własnego kodu. To najbardziej elastyczny typ zdarzenia — sam kontrolujesz, kiedy i z jakimi danymi zdarzenie się wywołuje.

Ustawienie	Opis
Nazwa	Nazwa zdarzenia zgodna z nazwą używaną w `RevolTracker.track()`

Zdarzenia niestandardowe są szczegółowo opisane w sekcji API zdarzeń niestandardowych poniżej.

Cel konwersji

Każde zdarzenie może być oznaczone jako Cel konwersji poprzez włączenie przełącznika. Po włączeniu:

Zdarzenie jest liczone na karcie KPI Konwersje w Panelu analitycznym
Jest używane do obliczania Współczynnika konwersji w tabeli Wydajność kampanii
Sesje zawierające to zdarzenie są wyróżnione w widoku szczegółów sesji
Zdarzenie pojawia się w lejkach konwersji i raportach

Co stanowi dobry cel konwersji?

Generowanie leadów

Oznacz wysyłki formularzy jako konwersje — formularze kontaktowe, prośby o wycenę, zapisy na newsletter. To wyraźne wskaźniki, że odwiedzający stał się leadem.

E-commerce

Oznacz zdarzenia niestandardowe dodaj do koszyka lub zakup zakończony jako konwersje. Śledź pełny lejek od odsłony strony do zakupu.

Zaangażowanie

Oznacz zdarzenia przewinięcie za cennik lub odtworzenie wideo jako mikro-konwersje. Wskazują one na silne zainteresowanie nawet bez wysłania formularza.

Połączenia i czaty

Oznacz zdarzenia kliknięcie numeru telefonu lub otwarcie widżetu czatu jako konwersje. Pokazują one zamiar bezpośredniego kontaktu.

Możesz mieć jednocześnie wiele aktywnych celów konwersji. KPI Konwersje w Panelu analitycznym liczy unikalne sesje z co najmniej jednym zdarzeniem konwersji — więc sesja, która wywołuje 3 zdarzenia konwersji, nadal liczy się jako 1 konwersja.

API zdarzeń niestandardowych

Zdarzenia niestandardowe dają pełną kontrolę nad śledzeniem zdarzeń z własnego kodu JavaScript. Używaj ich, gdy automatyczne śledzenie (kliknięcia, formularze, widoczność) nie wystarczy — dla dynamicznych interakcji, wieloetapowych procesów lub działań specyficznych dla biznesu.

Podstawowe użycie

// Proste zdarzenie — bez dodatkowych danych
RevolTracker.track('button_clicked');

// Zdarzenie z niestandardowymi danymi
RevolTracker.track('item_added_to_cart', {
    item_id: 'SKU-12345',
    item_name: 'Running Shoes',
    price: 89.99,
    currency: 'USD'
});

Dokumentacja API

RevolTracker.track(eventName, data)

Parametr	Typ	Wymagany	Opis
`eventName`	`string`	Tak	Nazwa zdarzenia — musi odpowiadać nazwie zdefiniowanej w zakładce Zdarzenia, jeśli chcesz powiązać ją z definicją zdarzenia
`data`	`object`	Nie	Niestandardowy ładunek — dowolne dane serializowalne do JSON (obiekty, tablice, łańcuchy, liczby)

Automatycznie rejestrowane (nie musisz ich przekazywać):

Aktualny URL strony
Identyfikator sesji
Znacznik czasu
Identyfikator firmy

Przykłady e-commerce

Śledź pełny lejek zakupowy:

// Produkt obejrzany
RevolTracker.track('product_viewed', {
    product_id: 'SKU-12345',
    product_name: 'Running Shoes Pro',
    category: 'Footwear',
    price: 89.99
});

// Dodano do koszyka
RevolTracker.track('add_to_cart', {
    product_id: 'SKU-12345',
    quantity: 1,
    price: 89.99
});

// Rozpoczęto realizację zamówienia
RevolTracker.track('checkout_started', {
    cart_total: 89.99,
    items_count: 1
});

// Zakup zakończony
RevolTracker.track('purchase_completed', {
    order_id: 'ORD-9876',
    total: 89.99,
    currency: 'USD',
    items: [
        { id: 'SKU-12345', name: 'Running Shoes Pro', qty: 1, price: 89.99 }
    ]
});

Integracja Dodaj do koszyka

Kompletny przykład integracji zdarzeń niestandardowych z przyciskiem “Dodaj do koszyka”:

<button class="add-to-cart-btn"
        data-product-id="SKU-12345"
        data-product-name="Running Shoes Pro"
        data-price="89.99">
    Add to Cart
</button>

<script>
document.querySelectorAll('.add-to-cart-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        // Twoja istniejąca logika koszyka
        addItemToCart(this.dataset.productId);

        // Śledź zdarzenie w Revol
        RevolTracker.track('add_to_cart', {
            product_id: this.dataset.productId,
            product_name: this.dataset.productName,
            price: parseFloat(this.dataset.price)
        });
    });
});
</script>

Przykład formularza kontaktowego

Śledź wysyłki formularzy z danymi pól:

<form id="contact-form">
    <input name="name" type="text" placeholder="Your name">
    <input name="email" type="email" placeholder="Email">
    <input name="phone" type="tel" placeholder="Phone">
    <textarea name="message" placeholder="Message"></textarea>
    <button type="submit">Send</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', function(e) {
    var formData = new FormData(this);

    RevolTracker.track('contact_form_submitted', {
        name: formData.get('name'),
        email: formData.get('email'),
        has_phone: !!formData.get('phone'),
        message_length: (formData.get('message') || '').length
    });
});
</script>

Przykład SPA / React

Dla aplikacji jednostronicowych wywołuj zdarzenia przy zmianach tras lub interakcjach z komponentami:

// React — śledzenie odsłony strony przy zmianie trasy
useEffect(() => {
    RevolTracker.track('page_view', {
        page: location.pathname,
        title: document.title
    });
}, [location.pathname]);

// React — śledzenie kliknięcia przycisku
function handlePricingClick(plan) {
    RevolTracker.track('pricing_plan_selected', {
        plan: plan,
        page: '/pricing'
    });
}

Jak zdarzenia są wysyłane

Zdarzenia są buforowane i wysyłane partiami dla wydajności:

Każde wywołanie RevolTracker.track() dodaje zdarzenie do wewnętrznego bufora
Co 5 sekund wszystkie zbuforowane zdarzenia są wysyłane na serwer w jednym żądaniu
Przy opuszczaniu strony pozostałe zdarzenia są wysyłane przez sendBeacon() dla niezawodności
Maksymalnie 50 zdarzeń na partię — nadmiarowe zdarzenia są odrzucane

Nie musisz tworzyć definicji zdarzenia w panelu, aby zdarzenia niestandardowe były rejestrowane. Niezdefiniowane zdarzenia niestandardowe są nadal zapisywane z ich danymi — ale nie będą miały licznika wywołań na liście Zdarzeń. Dla pełnego śledzenia utwórz pasującą definicję zdarzenia o tej samej nazwie.

Przeanalizuj swoją stronę za pomocą Claude Code

Jeśli nie jesteś pewien, które elementy śledzić, możesz użyć Claude Code do analizy swojej strony i zasugerowania optymalnej konfiguracji śledzenia zdarzeń.

Prompt do analizy strony

Analyze the website at [YOUR_WEBSITE_URL] and create a comprehensive
event tracking plan for Revol Tracker. I need you to:

1. Identify all interactive elements on the page:
   - CTA buttons (purchases, signups, demos)
   - Navigation links that indicate intent
   - Forms (contact, subscribe, login)
   - Media elements (video plays, image galleries)
   - Scroll landmarks (pricing section, testimonials, FAQ)

2. For each element, provide:
   - A descriptive event name (snake_case)
   - The event type (click, form_submit, scroll, visibility, custom)
   - The exact CSS selector
   - Whether it should be a conversion goal (and why)
   - Priority (high/medium/low) based on business impact

3. Generate ready-to-use event definitions that I can create
   in the Revol Tracker Events tab.

4. For any elements that need custom JavaScript tracking,
   provide the complete RevolTracker.track() code snippets.

5. Suggest a conversion funnel with 3-5 key stages
   (e.g., Visit → View Pricing → Submit Form → Start Chat).

Format the output as a table with columns:
Event Name | Type | CSS Selector | Conversion | Priority

My website is: [PASTE URL]
My business type is: [e.g., e-commerce, SaaS, service business, agency]
My main conversion action is: [e.g., form submission, purchase, demo request]

Tracker

​Przegląd

​Lista zdarzeń

​Filtry

​Tworzenie zdarzenia

​Typy zdarzeń

​Kliknięcie

​Przewijanie (Widoczność)

​Wysyłka formularza

​Widoczność elementu

​Niestandardowe (ręczne)

​Cel konwersji

​Co stanowi dobry cel konwersji?

​API zdarzeń niestandardowych

​Podstawowe użycie

​Dokumentacja API

​Przykłady e-commerce

​Integracja Dodaj do koszyka

​Przykład formularza kontaktowego

​Przykład SPA / React

​Jak zdarzenia są wysyłane

​Przeanalizuj swoją stronę za pomocą Claude Code

Przegląd

Lista zdarzeń

Filtry

Tworzenie zdarzenia

Typy zdarzeń

Kliknięcie

Przewijanie (Widoczność)

Wysyłka formularza

Widoczność elementu

Niestandardowe (ręczne)

Cel konwersji

Co stanowi dobry cel konwersji?

API zdarzeń niestandardowych

Podstawowe użycie

Dokumentacja API

Przykłady e-commerce

Integracja Dodaj do koszyka

Przykład formularza kontaktowego

Przykład SPA / React

Jak zdarzenia są wysyłane

Przeanalizuj swoją stronę za pomocą Claude Code