Jak śledzić formularz Contact Form 7 w Google Tag Manager i GA4 - krok po kroku

Najpewniej śledzisz formularz Contact Form 7, nasłuchując zdarzenia wpcf7mailsent, które wtyczka wywołuje dopiero po wysłaniu wiadomości, i przekazując je przez warstwę danych do Google Tag Manager, a stamtąd do GA4. W raportach liczysz wtedy tylko formularze, które naprawdę dotarły, a nie każde kliknięcie przycisku. Konfiguracja zajmuje kilkanaście minut i nie wymaga zmian w kodzie motywu.

Dlaczego zwykłe śledzenie formularzy nie wystarcza

Contact Form 7 wysyła formularz bez przeładowania strony (Ajax). Przez to dwa popularne skróty dają zawyżone dane:

• reguła kliknięcia przycisku - liczy też próby z błędami w polach i formularze zablokowane jako spam,
• zdarzenie form_submit z pomiaru zaawansowanego GA4 - Google opisuje je jako wysyłane, gdy użytkownik przesyła formularz. Nie mówi ono, czy wiadomość faktycznie wyszła.

Wtyczka ma własne zdarzenia DOM, które odróżniają te sytuacje, i to na nich warto oprzeć pomiar.

Zdarzenia DOM w Contact Form 7

Zdarzenie	Kiedy się uruchamia
wpcf7submit	po każdym przesłaniu formularza, niezależnie od wyniku
wpcf7invalid	gdy pola mają błędne dane i wiadomość nie została wysłana
wpcf7spam	gdy wtyczka uznała zgłoszenie za możliwy spam
wpcf7mailfailed	gdy wysyłka e-maila się nie powiodła
wpcf7mailsent	gdy wiadomość została wysłana - to zdarzenie mierzymy

Według dokumentacji wtyczki zdarzenia przechodzą w górę drzewa DOM aż do document, więc jeden nasłuchiwacz obsłuży wszystkie formularze na stronie. Obiekt zdarzenia zawiera m.in. detail.contactFormId (identyfikator formularza) i detail.containerPostId (identyfikator strony lub wpisu, na którym formularz jest osadzony).

Krok 1. Tag z nasłuchiwaczem w GTM

Jeśli nie masz jeszcze kontenera, zacznij od poradnika jak założyć konto Google Tag Manager.

1. W obszarze roboczym wejdź w Tagi i kliknij Nowy.
2. Wybierz typ Niestandardowy kod HTML i wklej kod poniżej.
3. Jako regułę ustaw wyświetlenie strony: wszystkie strony albo tylko te, na których jest formularz.
4. Nazwij tag, np. „CF7 - nasłuchiwacz”, i zapisz.

<script>
document.addEventListener(
  'wpcf7mailsent',
  function (event) {
    window.dataLayer =
      window.dataLayer || [];
    window.dataLayer.push({
      event: 'cf7_wyslany',
      cf7_form_id:
        event.detail.contactFormId,
      cf7_post_id:
        event.detail.containerPostId
    });
  },
  false
);
</script>

Krok 2. Zmienne warstwy danych

1. Wejdź w Zmienne i w sekcji zmiennych zdefiniowanych przez użytkownika kliknij Nowa.
2. Wybierz typ Zmienna warstwy danych, jako nazwę zmiennej warstwy danych wpisz cf7_form_id i tak samo nazwij całą zmienną.
3. Zapisz i powtórz to samo dla cf7_post_id.

Dzięki tym zmiennym rozróżnisz w GA4 np. formularz kontaktowy w stopce od formularza wyceny na stronie usługi.

Krok 3. Reguła zdarzenia niestandardowego

1. Wejdź w Reguły, kliknij Nowa i wybierz typ Zdarzenie niestandardowe.
2. W polu Nazwa zdarzenia wpisz cf7_wyslany - dokładnie tak, jak w kodzie z kroku 1.
3. Zostaw Wszystkie zdarzenia niestandardowe albo zawęź regułę do jednego formularza warunkiem: cf7_form_id równa się np. 123.

Krok 4. Tag zdarzenia GA4

1. W Tagach kliknij Nowy i wybierz typ Google Analytics: zdarzenie GA4.
2. W polu Identyfikator pomiaru wpisz identyfikator swojej usługi GA4 (zaczyna się od G-).
3. Jako Nazwę zdarzenia wpisz generate_lead. To zdarzenie zalecane przez Google do mierzenia pozyskanych leadów, np. z formularza.
4. W parametrach zdarzenia dodaj form_id z wartością {{cf7_form_id}}.
5. Jako regułę wybierz regułę z kroku 3 i zapisz tag.

Krok 5. Test w trybie podglądu

1. Kliknij Podgląd, podaj adres strony z formularzem i kliknij Połącz.
2. Wyślij formularz z poprawnymi danymi. W Tag Assistant powinno pojawić się zdarzenie cf7_wyslany, a przy nim uruchomiony tag GA4. Uprzedź osobę, która odbiera zgłoszenia, że przyjdą wiadomości testowe.
3. Wyślij formularz z pustym polem wymaganym. Tym razem cf7_wyslany nie może się pojawić.
4. W GA4 otwórz Administracja > DebugView. Tryb podglądu GTM włącza tryb debugowania dla Twojego urządzenia, więc generate_lead zobaczysz tam razem z parametrami.
5. Gdy wszystko działa, kliknij Prześlij i opublikuj wersję kontenera.

Na koniec oznacz generate_lead w GA4 jako kluczowe zdarzenie, żeby trafiało do raportów konwersji i mogło zostać zaimportowane do Google Ads. Pozostałe ustawienia, które warto przy tym sprawdzić, znajdziesz w liście kontrolnej konfiguracji GA4.

Najczęstsze problemy

• Zdarzenie w ogóle się nie pojawia - zdarzenia DOM działają przy wysyłce przez Ajax. Jeśli inny skrypt lub wtyczka psuje JavaScript na stronie, formularz może wysyłać się w inny sposób i nasłuchiwacz nic nie złapie. Sprawdź konsolę przeglądarki.
• Każdy formularz liczy się podwójnie - nasłuchiwacz jest wstawiony dwa razy, np. w GTM i w kodzie motywu albo przez dodatkową wtyczkę.
• W GA4 jest mniej leadów niż e-maili - część osób nie zgadza się na pliki cookie analityczne, a GA4 dostaje wtedy ograniczone dane albo nie dostaje ich wcale (zależnie od wdrożenia trybu zgody). Pewne różnice są normalne.

Jeśli na stronie masz też formularze z Elementora, opisaliśmy je w poradniku jak śledzić formularz Elementor w GTM i GA4. A gdy wolisz zlecić całość, zobacz nasze wdrożenie Google Analytics 4.

Najczęściej zadawane pytania

Czy mogę użyć zdarzenia wpcf7submit zamiast wpcf7mailsent?

Do liczenia leadów nie. wpcf7submit uruchamia się po każdym przesłaniu, także gdy pola mają błędy albo zgłoszenie zostało uznane za spam.

Czy potrzebuję osobnej wtyczki do GTM w WordPressie?

Nie. Wystarczy, że kod kontenera GTM jest raz na każdej stronie. Nie ma znaczenia, czy wstawisz go wtyczką, czy w motywie, byle nie dwa razy.

Jak zobaczyć w raportach, który formularz został wysłany?

Parametr form_id trzeba zarejestrować w GA4 jako wymiar niestandardowy (zakres: zdarzenie). Dopiero wtedy pojawi się w raportach i eksploracjach.