Jak śledzić zdarzenia quiz funnelu i przekazywać dane do Google Tag Managera

Wprowadzenie

Quiz funnele to jedno z najskuteczniejszych narzędzi do generowania leadów w marketingu cyfrowym. Angażują odwiedzających, zbierają cenne dane first-party i pomagają zrozumieć potrzeby odbiorców, a przy tym kwalifikują leady i maksymalizują współczynniki konwersji.

Jest jednak problem: bez właściwego śledzenia działasz po omacku.

Możesz zbierać leady i przekazywać je do platform dystrybucji leadów, takich jak LeadsPedia czy LeadProsper, ale czy naprawdę wiesz, które pytania quizu rezonują najbardziej? Gdzie użytkownicy odpadają? Jakie kombinacje odpowiedzi wskazują na leady o wysokiej intencji, które kupujący faktycznie przyjmą? A co najważniejsze, czy wykorzystujesz tę kopalnię danych do budowania precyzyjnie dobranych grup odbiorców dla kampanii reklamowych na Facebooku i w Google?

Właśnie tu do gry wchodzą Google Tag Manager (GTM) i DataLayer.

W LanderLab nasi użytkownicy zbudowali tysiące stron docelowych i quiz funneli o wysokiej konwersji w różnych branżach. Jedno pytanie słyszymy raz po raz: „Jak śledzić swój quiz i wykorzystać te dane do lepszych reklam i leadów wyższej jakości?”

W tym przewodniku dowiesz się dokładnie, jak wdrożyć śledzenie quiz funnelu za pomocą GTM i DataLayer.

Omówimy:

• Czym jest DataLayer i dlaczego jest niezbędny do śledzenia quizów
• Kluczowe zdarzenia, które warto śledzić w każdym quiz funnelu
• Wdrożenie krok po kroku, z przykładami kodu
• Jak skonfigurować GTM, by zbierał i rozdzielał dane z Twojego quizu
• Realne scenariusze wykorzystania tych danych do poprawy jakości leadów i targetowania reklam

DataLayer a GTM: jaka jest różnica?

Zanim zaczniemy, wyjaśnijmy te dwa elementy:

DataLayer = Posłaniec

dataLayer to tablica JavaScript, która przechowuje dane o działaniach użytkowników na Twojej stronie:

dataLayer.push({
  'event': 'quiz_step_view',
  'step_name': 'Personal Information'
});

GTM = Dystrybutor

Google Tag Manager nasłuchuje DataLayer i wysyła te dane do Facebooka, Google Ads, Analytics i innych platform.

Wyobraź to sobie tak:

DataLayer speaks -> GTM listens -> GTM tells Facebook, Google, etc.

Potrzebujesz obu elementów działających razem. DataLayer bez GTM jest bezużyteczny, dane po prostu leżą. GTM bez DataLayer nie ma czego nasłuchiwać.

Dwa zdarzenia do śledzenia

W quiz funnelach skupimy się na tych dwóch zdarzeniach:

1. Wyświetlenie kroku quizu

Uruchamia się, gdy użytkownik zobaczy dany krok.

Po co to śledzić:

• Wykrywanie punktów porzucenia
• Budowanie grup retargetingowych (np. „obejrzało 3+ kroki, ale nie ukończyło”)
• Mierzenie głębokości zaangażowania
• Ocenianie jakości leada na podstawie postępu

2. Wysłanie quizu

Uruchamia się, gdy użytkownik wyśle quiz.

Po co to śledzić:

• Śledzenie faktycznych konwersji
• Zbieranie wszystkich wysłanych quizów do segmentacji
• Wysyłanie bogatych danych do kupujących leady (wyższy odsetek akceptacji)

Krok 1: Zainstaluj Google Tag Manager w LanderLab

LanderLab sprawia, że integracja z GTM jest niezwykle prosta dzięki bezpośredniej, wbudowanej obsłudze.

Utwórz konto GTM

1. Wejdź na tagmanager.google.com
2. Utwórz kontener (lub użyj istniejącego)
3. Pobierz identyfikator kontenera (np. GTM-XXXXXX)

Dodaj GTM do swojego quizu w LanderLab

Zamiast ręcznie dodawać fragmenty kodu, LanderLab ma wbudowaną integrację z GTM:

1. W LanderLab przejdź do Landing Page Settings
2. Kliknij Pixels
3. Znajdź sekcję Google Tag Manager
4. Wpisz identyfikator kontenera GTM (np. GTM-XXXXXX)
5. Zapisz ustawienia

To wszystko! LanderLab automatycznie zajmuje się całym kodem instalacyjnym GTM. Nie trzeba ręcznie umieszczać kodu.

Krok 2: Wdróż śledzenie zdarzeń quizu

LanderLab uruchamia określone zdarzenia JavaScript, które możesz nasłuchiwać i przesyłać do DataLayer.

Źródło: LanderLab Quiz Events API

Śledź wyświetlenia kroków quizu

Dodaj ten kod do strony quizu (w Code Editor, Settings -> Custom Code lub przez GTM):

window.addEventListener('ll-quiz-step-view', (event) => {
  const { quizId, stepId, stepName } = event.detail;
    
    if (window.dataLayer) {
        window.dataLayer.push({
            'event': 'll_quiz_step_view',
            'quiz_id': quizId,
            'step_id': stepId,
            'step_name': stepName
        });
    }
});

Co robi ten kod:

• Nasłuchuje zdarzenia ll-quiz-step-view z LanderLab
• Wyodrębnia informacje o quizie i kroku
• Przekazuje je do DataLayer ze zdarzeniem o nazwie ll_quiz_step_view

Śledź wysłania quizu

window.addEventListener('ll-quiz-submit', (event) => {
    const { quizId, stepId, stepName, fieldsSimple } = event.detail;
    
    if (window.dataLayer) {
        window.dataLayer.push({
            'event': 'll_quiz_submit',
            'quiz_id': quizId,
            'step_id': stepId,
            'step_name': stepName,
            'submitted_data': fieldsSimple,
            'timestamp': new Date().toISOString()
        });
    }
});

Co robi ten kod:

• Nasłuchuje zdarzenia ll-quiz-submit z LanderLab
• Zbiera wszystkie wysłane dane i informacje o quizie
• Przekazuje je do DataLayer ze zdarzeniem o nazwie ll_quiz_submit
• Zawiera pełne dane z formularza w fieldsSimple (np. { Name: ‘John’, Email: ‘john@example.com’, Zip: ‘12345’ })
• Dodaje znacznik czasu, by śledzić moment wysłania

Krok 3: Skonfiguruj Google Tag Manager

Skoro dane trafiają już do DataLayer, musimy skonfigurować GTM tak, by je zbierał i wysyłał do Twoich platform śledzących.

Utwórz zmienne DataLayer

Zmienne w GTM wyciągają z DataLayer konkretne dane, dzięki czemu możesz używać ich w tagach.

W panelu GTM:

1. Przejdź do Variables w lewym pasku bocznym
2. Przewiń w dół do User-Defined Variables
3. Kliknij New

Utwórz te 5 zmiennych:

Dla każdej zmiennej kliknij New -> wybierz Data Layer Variable -> wpisz nazwy z tabeli powyżej -> Save.

Gdy skończysz, powinno być utworzonych 5 zmiennych.

Utwórz triggery

Triggery mówią GTM, kiedy uruchamiać tagi. Potrzebujemy dwóch triggerów: jednego dla wyświetleń kroków i jednego dla wysłań quizu.

Trigger 1: Quiz Step View

Trigger 2: Quiz Submit

Utwórz tagi dla piksela Facebooka

Teraz utworzymy tagi wysyłające dane z Twojego quizu do Facebooka. Upewnij się, że piksel Facebooka jest już zainstalowany na Twojej stronie (przez ustawienia Pixels w LanderLab lub przez GTM).

Tag 1: Facebook Pixel – Quiz Step View

1. Przejdź do Tags w lewym pasku bocznym
2. Kliknij New
3. Kliknij obszar konfiguracji tagu
4. Wybierz Custom HTML
5. Kod HTML:

<script>
  fbq('track', 'ViewContent', {
    content_name: {{DL - Quiz ID}},
    content_category: 'quiz_step',
    content_ids: [{{DL - Step ID}}],
    step_name: {{DL - Step Name}}
  });
</script>

1. Kliknij Triggering
2. Wybierz trigger: LL Quiz Step View
3. Nazwij swój tag: Facebook Pixel – Quiz Step View
4. Kliknij Save

Co to daje: za każdym razem, gdy użytkownik zobaczy krok quizu, piksel Facebooka wywołuje zdarzenie ViewContent z informacjami o quizie i kroku. Dzięki temu możesz budować grupy odbiorców według tego, jak daleko doszli.

Tag 2: Facebook Pixel – Quiz Submit (zdarzenie Lead)

1. Kliknij New, aby utworzyć kolejny tag
2. Kliknij obszar konfiguracji tagu
3. Wybierz Custom HTML
4. Kod HTML:

<script>
  fbq('track', 'Lead', {
    content_name: {{DL - Quiz ID}},
    content_category: 'quiz_completion',
    value: 10.00,
    currency: 'USD'
  });
</script>

1. Kliknij Triggering
2. Wybierz trigger: LL Quiz Submit
3. Nazwij swój tag: Facebook Pixel – Quiz Submit
4. Kliknij Save

Co to daje: gdy użytkownik wyśle Twój quiz, piksel Facebooka wywołuje zdarzenie Lead. To Twoje główne zdarzenie konwersji do optymalizacji. Dostosuj pole wartości do średniej wartości Twojego leada.

Dostęp do pojedynczych pól formularza (opcjonalnie)

submitted_data zawiera wszystkie pola formularza jako obiekt, np. { Name: ‘John’, Email: ‘john@example.com’, Zip: ‘12345’ }. Aby uzyskać dostęp do konkretnych pól (np. kodu pocztowego do geotargetowania lub e-maila do parametrów niestandardowych), musisz utworzyć w GTM zmienne Custom JavaScript.

Przykład: wyciągnięcie kodu pocztowego z przesłanych danych

1. W GTM przejdź do Variables -> User-Defined Variables -> New
2. Kliknij obszar konfiguracji zmiennej
3. Wybierz Custom JavaScript
4. Kod Custom JavaScript:

function() {
  const data = {{DL - Submitted Data}};
  return data && data.Zip;
}

1. Nazwij swoją zmienną: DL – Submitted Zip
2. Kliknij Save

Użyj jej w tagu Facebooka:

<script>
  fbq('track', 'Lead', {
    content_name: {{DL - Quiz ID}},
    content_category: 'quiz_completion',
    zip_code: {{DL - Submitted Zip}},
    value: 10.00,
    currency: 'USD'
  });
</script>

Podobne zmienne możesz utworzyć dla dowolnego pola w quizie

Utwórz tagi dla Google Analytics 4

Teraz skonfigurujmy śledzenie GA4. Potrzebujesz identyfikatora pomiaru GA4 (Measurement ID, wygląda jak G-XXXXXXXXXX).

Tag 3: Tag konfiguracji GA4 (tag bazowy)

Najpierw utwórz bazowy tag konfiguracji, jeśli jeszcze go nie masz:

1. Przejdź do Tags -> New
2. Kliknij obszar konfiguracji tagu
3. Wybierz Google Analytics: GA4 Configuration
4. Measurement ID: wpisz swój identyfikator pomiaru GA4 (np. G-XXXXXXXXXX)
5. Kliknij Triggering
6. Wybierz All Pages
7. Nazwij swój tag: GA4 Configuration
8. Kliknij Save

Uwaga: jeśli masz już w GTM tag GA4 Configuration, pomiń ten krok.

Tag 4: GA4 – Quiz Step View

Tag 5: GA4 – Quiz Submit (generowanie leadów)

Dlaczego warto użyć generate_lead? To zalecane w GA4 zdarzenie dla generowania leadów. Pojawi się automatycznie w raportach konwersji i może służyć do optymalizacji w Google Ads.

Krok 4: Przetestuj konfigurację

Przed publikacją musisz wszystko przetestować, żeby upewnić się, że działa poprawnie.

Test w trybie podglądu GTM

1. W GTM kliknij przycisk Preview w prawym górnym rogu
2. Wpisz adres URL swojego quizu LanderLab w polu „Your website’s URL”
3. Kliknij Connect
4. Strona quizu otworzy się w nowej karcie z panelem debugowania GTM na dole

Przetestuj zdarzenie wyświetlenia kroku quizu

Przetestuj zdarzenie wysłania quizu

Weryfikacja w Facebook Events Manager

Weryfikacja w Google Analytics 4

Jeśli wszystko działa: wróć do GTM i kliknij Submit, aby opublikować zmiany w kontenerze. Dodaj nazwę wersji, np. „Quiz Tracking Setup”, i opis, a potem kliknij Publish.

Praktyczne zastosowania

Zastosowanie 1: retargeting zaangażowanych użytkowników

Problem: użytkownicy zaczynają quiz, ale go nie kończą.

Rozwiązanie: utwórz grupę niestandardową na Facebooku z użytkowników, którzy w ciągu ostatnich 7 dni zobaczyli co najmniej 2 kroki quizu, wyklucz osoby, które wysłały quiz, i pokazuj im reklamy nastawione na dokończenie.

Efekt: odzyskasz 20-30% porzucających przy CPA niższym o 50% niż w zimnym ruchu.

Zastosowanie 2: budowanie wartościowych grup podobnych (lookalike)

Problem: CPL z zimnego ruchu jest zbyt wysoki.

Rozwiązanie: utwórz grupę niestandardową z osób, które ukończyły quiz i skonwertowały, a następnie zbuduj na jej podstawie grupę podobnych odbiorców (lookalike).

Efekt: współczynniki konwersji 2-3 razy lepsze niż przy targetowaniu na zainteresowania.

Zastosowanie 3: segmentacja według wzorców odpowiedzi

Problem: nie wszystkie leady są takie same, kupujący płacą więcej za leady wysokiej jakości.

Rozwiązanie: śledź kombinacje odpowiedzi, aby odróżnić leady o wysokiej i niskiej intencji, i twórz osobne kampanie dla każdego segmentu.

Efekt: wzrost odsetka zaakceptowanych leadów o ponad 40% i wyższe wypłaty.

Zastosowanie 4: wykluczanie osób, które już skonwertowały

Problem: marnowanie budżetu na pokazywanie reklam quizu osobom, które już go ukończyły.

Rozwiązanie: utwórz grupę odbiorców z osób, które wysłały quiz, i wyklucz ją z kampanii pozyskujących.

Efekt: ograniczenie zmarnowanych wydatków o 15-25%.

Podsumowanie

Właściwe śledzenie quiz funnelu zamienia generowanie leadów z zgadywania w system oparty na danych.

Wdrażając śledzenie GTM i DataLayer w LanderLab:

• Rozumiesz dokładnie, gdzie użytkownicy odpadają i dlaczego
• Budujesz precyzyjnie dobrane grupy odbiorców na podstawie faktycznego zachowania w quizie
• Poprawiasz jakość leadów i odsetek akceptacji
• Skalujesz kampanie rentownie dzięki lepszym danym
• Udowadniasz ROI dzięki dokładnej atrybucji

Konfiguracja zajmuje 1-2 godziny, ale zysk jest ogromny: niższe CPA, leady wyższej jakości i możliwość optymalizacji każdego kroku quiz funnelu.

Potrzebujesz pomocy? Zajrzyj do dokumentacji zdarzeń quizu w LanderLab lub skontaktuj się z naszym zespołem wsparcia.