---
title: "Śledzenie wysyłania formularzy Contact Form 7 przy pomocy Google Tag Manager"
description: "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."
date: 2020-12-04
author: "Roman Rozenberger"
url: "https://rozenberger.com/posts/p/sledzenie-wysylania-formularzy-contact-form-7-przy-pomocy-google-tag-manager/"
categories:
- "Narzędzia"
- "Poradniki"
tags:
- "Google Ads"
- "Google Analytics"
- "Google Tag Manager"
- "Strony Internetowe"
---
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.
**Na tej stronie:** [pokaż](#)
[ Kod odbiornika dla CF7 (Contact form 7 listener) ](#Kod_odbiornika_dla_CF7_Contact_form_7_listener) [ Objaśnienia zdarzeń ](#Objasnienia_zdarzen)
[ Jak dodać kod odbiornika CF7 do GTM? ](#Jak_dodac_kod_odbiornika_CF7_do_GTM)
[ Zdarzenia niestandardowe dla Contact Form 7 ](#Zdarzenia_niestandardowe_dla_Contact_Form_7)
[ Śledzenie Contact Form 7 w Google Analytics (Universal) ](#Sledzenie_Contact_Form_7_w_Google_Analytics_Universal) [ Konfiguracja celów i antycelów w Universal Analytics ](#Konfiguracja_celow_i_antycelow_w_Universal_Analytics)
[ Konfiguracja Contact Form 7 Google Analytics 4 ](#Konfiguracja_Contact_Form_7_Google_Analytics_4) [ Konfiguracja niestandardowego zdarzenia dla formularza GA4 ](#Konfiguracja_niestandardowego_zdarzenia_dla_formularza_GA4)
[ Konfiguracja konwersji przesłania formularza GA4 ](#Konfiguracja_konwersji_przeslania_formularza_GA4)
[ Konfiguracja konwersji formularza w Google Ads. ](#Konfiguracja_konwersji_formularza_w_Google_Ads) [ Tag łączący konwersje ](#Tag_laczacy_konwersje)
[ Konfiguracja zdarzenia formularza w Facebook Pixel ](#Konfiguracja_zdarzenia_formularza_w_Facebook_Pixel)
[ Podsumowanie ](#Podsumowanie)
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 jako niestandardowy kod HTML w GTMReguł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 7Jeż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Ś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 AnalyticsW 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 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 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](https://rozenberger.com/posts/p/google-analytics-4-gtm-podstawowa-konfiguracja/).
### 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 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
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Ż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
Teraz wprowadź nazwę przed momentem stworzonego zdarzenia – *contact\_form\_send*.
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
Stwórz nową konwersję 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 1Wybierz 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 konwersjiNie 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 formularzaPrzejdź 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 –
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:
- [https://www.facebook.com/business/help/402791146561655?id=1205376682832142 ](https://www.facebook.com/business/help/402791146561655?id=1205376682832142%20)
-
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.
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!