Ś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.

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)

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.

Śledzenie Contact Form 7 w Google Analytics (Universal)

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

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

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 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 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.

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ę

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

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

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.

Stwórz nową konwersję 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ć!

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.

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

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.

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

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:

• https://www.facebook.com/business/help/402791146561655?id=1205376682832142
• https://developers.facebook.com/docs/facebook-pixel/reference#standard-events

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.

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!