Śledzenie wysyłania formularzy Contact Form 7 przy pomocy Google Tag Manager

Contact form 7 to jedna z popularniejszych wtyczek używanych do wysyłania formularzy. Chcąc zdefiniować wysłanie formularza jako konwersję potrzebujemy pobrać wartość zdarzenia związaną ze stanem formularza. W tym poradniku otrzymujesz gotowy odbiornik kliknięć dla CF7 do Google Tag Managera.

Kod odbiornika dla CF7 (Contact form 7 listener)

<script> document.addEventListener( 'wpcf7invalid', function( event ) { window.dataLayer.push({ "event" : "wpcf7invalid", "formId" : event.detail.contactFormId, "response" : event.detail.inputs, "pluginVersion" : event.detail.pluginVersion, "containerPostId" : event.detail.containerPostId, "contactFormLocale" : event.detail.contactFormLocale, "unitTag" : event.detail.unitTag }) }); document.addEventListener( 'wpcf7spam', function( event ) { window.dataLayer.push({ "event" : "wpcf7spam", "formId" : event.detail.contactFormId, "response" : event.detail.inputs, "pluginVersion" : event.detail.pluginVersion, "containerPostId" : event.detail.containerPostId, "contactFormLocale" : event.detail.contactFormLocale, "unitTag" : event.detail.unitTag }) }); document.addEventListener( 'wpcf7mailfailed', function( event ) { window.dataLayer.push({ "event" : "wpcf7mailfailed", "formId" : event.detail.contactFormId, "response" : event.detail.inputs, "pluginVersion" : event.detail.pluginVersion, "containerPostId" : event.detail.containerPostId, "contactFormLocale" : event.detail.contactFormLocale, "unitTag" : event.detail.unitTag }) }); document.addEventListener( 'wpcf7mailsent', function( event ) { window.dataLayer.push({ "event" : "wpcf7mailsent", "formId" : event.detail.contactFormId, "response" : event.detail.inputs, "pluginVersion" : event.detail.pluginVersion, "containerPostId" : event.detail.containerPostId, "contactFormLocale" : event.detail.contactFormLocale, "unitTag" : event.detail.unitTag }) }); document.addEventListener( 'wpcf7submit', function( event ) { window.dataLayer.push({ "event" : "wpcf7submit", "formId" : event.detail.contactFormId, "response" : event.detail.inputs, "pluginVersion" : event.detail.pluginVersion, "containerPostId" : event.detail.containerPostId, "contactFormLocale" : event.detail.contactFormLocale, "unitTag" : event.detail.unitTag }) }); </script>
Code language: HTML, XML (xml)

Objaśnienia zdarzeń

  • wpcf7invalid – Uruchamiany, gdy przesłanie formularza Ajax zakończyło się pomyślnie, ale wiadomość nie została wysłana, ponieważ istnieją pola z nieprawidłowymi danymi wejściowymi.
  • wpcf7spam – Uruchamiany, gdy przesyłanie formularza Ajax zakończyło się pomyślnie, ale poczta nie została wysłana, ponieważ wykryto możliwą aktywność spamu.
  • wpcf7mailsent – Uruchamiany po pomyślnym zakończeniu przesyłania formularza Ajax i wysłaniu poczty.
  • wpcf7mailfailed – Uruchamiany, gdy przesłanie formularza Ajax zakończyło się pomyślnie, ale nie udało się wysłać poczty.
  • wpcf7submit – Uruchamiany po pomyślnym zakończeniu przesyłania formularza Ajax, niezależnie od innych incydentów.

Jak dodać kod odbiornika CF7 do GTM?

Te kod dodajesz jako Niestandardowy Tag Html i najlepiej uruchamiać go na stronach, gdzie znajduje się formularz. Nie musisz go uruchamiać na każdej podstronie swojej witryny. Wystarczy, że w regule określisz stronę z formularzem kontaktowym.

Odbiornik CF7 jako niestandardowy kod HTML w GTM
Odbiornik jako niestandardowy kod HTML w GTM
Reguła dla uruchomienia odbiornika
Reguła dla uruchomienia odbiornika

Zdarzenia niestandardowe dla Contact Form 7

Ten kod wywoła zdarzenia, które możesz zdefiniować w Google Tag Manager jako zdarzenia niestandardowe. Żeby śledzić te zdarzenia jedną regułą, jak i oddzielnie w zależności od potrzeb. Dla śledzenia wszystkich zdarzeń formularza utwórz nową Regułę jako zdarzenie niestandardowe. Zaznacz pole Użyj dopasowania do wyrażeń regularnych i Nazwie zdarzenia wprowadź wartość poniżej.

(wpcf7submit|wpcf7mailsent|wpcf7mailfailed|wpcf7spam|wpcf7invalid)
Zdarzenie niestandardowe uruchamiane przy każdej próbie wysłania formularza contact form 7
Zdarzenie niestandardowe uruchamiane przy każdej próbie wysłania formularza contact form 7

Jeżeli potrzebujesz śledzić tylko prawidłowe wysłanie formularza to powinieneś skupić się na zdarzeniu wpcf7mailsent. Zdarzenie wpcf7submit jest wywoływane nawet w przypadku, gdy formularz zawierał błędy. To właśnie to zdarzenie będzie najbardziej przydatne przy pomiarze formularzy pod kątem systemów reklamowych w Google Ads, Facebook Ads i innych.

Zdarzenie wpcf7mailsent potwierdzające wysłania wiadomości
Zdarzenie wpcf7mailsent potwierdzające wysłania wiadomości

Śledzenie Contact Form 7 w Google Analytics (Universal)

  • Stwórz nowy Tag Google Universal Analytics.
  • Typ śledzenia: Zdarzenie
  • Kategoria: contact_form
  • Działanie: {{Event}}
Tag zdarzenia w Universal Analytics
Tag zdarzenia w Universal Analytics

W ten sposób wszystkie zdarzenia formularza kontaktowego będą przesyłane do Google Analytics.

Konfiguracja celów i antycelów w Universal Analytics

Teraz pozostała konfiguracja celu w Google Analytics. Przejdź do ustawień konwersji, dodaj nowy cel. Wybierz typ niestandardowy. Jako typ celu wybierz zdarzenie. W szczegółach celu wpisz następujące wartości:

  • Kategoria zdarzenia równa się contact_form
  • Działanie równa się wpcf7mailsent
Konfiguracja celu przesłania formularza w Google Universal Analytics
Konfiguracja celu przesłania formularza Contact Form 7 w Google Universal Analytics

Teraz skonfigurujmy nasze antycele. Czyli zdarzenia, które powinny nas zaniepokoić jeżeli pojawią się w celach. Dodaj nowy cel. Wybierz jako cel niestandardowy, typ zdarzenie i wprowadź warunki zdarzenia:

  • Kategoria zdarzenia równa się contact_form
  • Działanie wyrażenie regularne (wpcf7mailfailed|wpcf7spam|wpcf7invalid)
Konfiguracja błędu formularza jako cel w Google Analytics (Universal)
Konfiguracja błędu formularza jako cel w Google Analytics (Universal)

Konfiguracja Contact Form 7 Google Analytics 4

Jeżeli nie masz zainstalowanego Google Analytics 4 w swojej witrynie to zrobisz to korzystając z poradnika instalacji Google Analytics 4 z wykorzystaniem Google Tag Manager.

Konfiguracja niestandardowego zdarzenia dla formularza GA4

Aby śledzić zdarzenia związane z formularzem kontaktowym musimy utworzyć nowy tag – Google Analytics: zdarzenie GA4. W konfiguracji zdarzenia wybierz swój tag konfiguracji.

W polu nazwa zdarzenia wpisz taką nazwę zdarzenia, którą będziesz dobrze rozumiała lub rozumiał. W moim przypadku jest to contact_form. W związku z tym, że chcemy zbierać informacje o wszystkich komunikatach wysyłanych przez formularz oraz stronę, z której został przesłany formularz to zdefiniujmy dwa parametry i wartości.

  • contact_form_message – {{Event}}
  • contact_form_url – {{Page Path}}

Jako regułę uruchamiania ustaw CF7 Events.

Konfiguracja zdarzenia formularza GA4
Konfiguracja zdarzenia formularza GA4

Konfiguracja konwersji przesłania formularza GA4

Po konfiguracji zdarzenia musimy jeszcze skonfigurować to zdarzenie jako konwersję. Po zalogowaniu się do Google Analytics 4 wybierz z lewego menu Wszystkie zdarzenia, następnie wybierz niebieski przycisk z napisem Utwórz zdarzenie.

Tworzenie nowego zdarzenia w GA4
Tworzenie nowego zdarzenia w GA4

W ustawieniach nowego zdarzenia dodaj nazwę contact_form_send z następującymi warunkami:

  • event_name równa się contact_form
  • contact_form_message równa się
Ustawienia zdarzenia GA4 dla przesłania formularza
Ustawienia zdarzenia GA4 dla przesłania formularza

Żeby nie czekać aż Google Analytics zliczy zdarzenie to przejdź teraz do zakładki Konwersje i stwórz nowe zdarzenie konwersji.

Tworzenie zdarzenia konwersji w Google Analytics 4
Tworzenie zdarzenia konwersji w Google Analytics 4

Teraz wprowadź nazwę przed momentem stworzonego zdarzenia – contact_form_send.

Nazwa zdarzenia konwersji w GA4
Nazwa zdarzenia konwersji w GA4

Zdarzenie jest już śledzone jako konwersja. Pamiętaj żeby sprawdzić czy dane są zbierane!

Konfiguracja konwersji formularza w Google Ads.

Przejdź do panelu konfiguracji konwersji poprzez wybór Narzędzia i ustawienia, następnie z kolumny pomiar skuteczności wybierz Konwersje.

Panel konwersji w Google Ads
Panel konwersji w Google Ads

Stwórz nową konwersję na podstawie działań w witrynie.

Konfiguracji konwersji na podstawie działań w witrynie
Konfiguracji konwersji na podstawie działań w witrynie

Jako działanie do śledzenia wybierz Przesłanie formularza kontaktowego. Nazwę konwersji wprowadź tak, aby było dla Ciebie jasne czego dotyczy. Warto wprowadzić wartość jaką ma dla Ciebie przesłania formularza. To można policzyć!

Konfiguracja konwersji przesłania formularza w Google Ads - krok 1
Konfiguracja konwersji przesłania formularza w Google Ads – krok 1

Wybierz w jaki sposób konwersja mają być zliczane (wielokrotnie czy pojedynczo). Wpisz ilość dni po jakich konwersja po kliknięciu zostanie przypisana do kampanii w przypadku kliknięć oraz wyświetleń (dla kampanii display i YouTube).

Jeżeli chodzi o model atrybucji to możesz zostać przy Ostatnim kliknięciu, ale w większości przypadków na początku warto rozważyć model liniowy, lub uwzględnienia pozycji. Po ustawieniach utwórz konwersje.

Na kolejnym ekranie zostaniesz zapytania albo zapytany o to w jaki sposób chcesz dodać kod konwersji do witryny. Oczywiście korzystamy z Menadżera tagów Google.

Wybór sposoby dodania kodu konwersji
Wybór sposoby dodania kodu konwersji

Nie zamykaj kolejnego okna. Znajdują się na nim identyfikator i etykieta konwersji potrzebne do konfiguracji tagu w Google Tag Manager.

Identyfikator i etykieta konwersji przesłania formularza
Identyfikator i etykieta konwersji przesłania formularza

Przejdź teraz do Google Tag Manager, utwórz nowy Tag – Google Ads – śledzenie konwersji. Wprowadź dane z panelu konfiguracji konwersji w Google Ads. Jako regułę wybierz CF7 Events wpcf7mailsent. Zapisz ustawienia.

Konfiguracja tagu śledzenia konwersji Google Ads w GTM

Tag łączący konwersje

Pozostaje Ci jeszcze do dodania tag łączący konwersje (jeżeli go jeszcze nie masz). Wybierz nowy Tag, z szablonów wybierz Tag łączący konwersję. Jako regułą wybierz wyświetlenie strony. Więcej o tagu łączącym konwersje przeczytasz w pomocy Google – https://support.google.com/tagmanager/answer/7549390

Dodawanie tagu łączącego konwersje
Dodawanie tagu łączącego konwersje

Konfiguracja zdarzenia formularza w Facebook Pixel

Śledzenie zdarzenia wysłania formularza w jest bardzo proste. Jedyne czego potrzebujesz to wcześniej wywołany kod Piksela Facebooka i dodanie kodu zdarzenia pozyskania kontaktu. Listę wbudowanych zdarzeń znajdziesz na stronach oficjalnej pomocy:

W przypadku formularzy korzystam często ze zdarzenia Lead, przypisując mu wartość jaką ma dla mojej firmy lub dla moich klientów.

Stwórz nowy Tag w Google Tag Manager wybierając Niestandardowy kod HTML. W polu na kod wpisz:

<script> fbq('track', 'Lead', {currency: "PLN", value: 50.00}); </script>
Code language: HTML, XML (xml)

Jako regułę wybierz CF7 Events wpcf7mailsent i zapisz ustawienia.

Kod zdarzenia Facebook.
Kod zdarzenia Facebook.

Podsumowanie

Nie zapomnij skorzystać z trybu debugowania przed publikacją kontenera! Do sprawdzenia poprawności działania pixeli konwersji wykorzystaj następujące wtyczki:

  • Google Tag Assistant
  • Facebook Pixel Helper

Powodzenia!

Default image
Roman Rozenberger
Specjalista SEM, SEO i PPC. Założyciel i autor na blogu dwapiksele.pl.
Articles: 16

Pixelowy Newsletter

Zapisz się do newslettera i otrzymuj na bezpośrednio swoją skrzynkę pocztową najnowsze artykuły, poradniki, cheklisty i materiały.

Nie, dziękuję