Contact Form 7 jest popularną wtyczką obsługującą formularze kontaktowe w WordPressie. Co powinniśmy robić aby lepiej wykorzystać formularze znajdujące się na naszej stronie? Oczywiście śledzić ich skuteczność. Możemy do tego celu użyć Google Analytics. Do integracji naszej witryny z Google Analytics najlepiej nadaje się Google Tag Manager. W tym artykule spróbuje wytłumaczyć jak w prosty sposób zintegrować te narzędzia i śledzić podstawowe zdarzenie czyli poprawne wysłanie formularza.

Czy formularze z Contact Form 7 można śledzić?

Tak, formularze CF7 posiadają wbudowaną funkcjonalność, która obsługuje kilka typów niestandardowych zdarzeń DOM (DOM Events, więcej o nich znajdziecie na https://contactform7.com/dom-events/ ). Za pomocą tych zdarzeń i odpowiednio skonfigurowanych tagów w Google Tag Manager (GTM) możemy śledzić różne zachowania formularzy. W tym artykule zajmiemy się podstawowym zdarzeniem czyli poprawnym wysłaniem formularza.

W takim przypadku wywoływane jest zdarzenie wpcf7mailsent i sposób jego śledzenia opiszę poniżej.

1. Tag nasłuchujący

W pierwszej kolejności musimy dodać w Google Tag Manager tzw. tag nasłuchujący, który sprawdzi czy nie pojawiło się zdarzenie wpcf7mailsent.

W GTM dodajemy nowy tag:

Typ Tagu: Niestandardowy kod HTML:
Reguła: Wszystkie strony
Treść tagu:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission"
 })
}); 
</script>

Tag ten w momencie wysłania formularza wywoła zdarzenie o nazwie cf7submission.

2.Dodanie reguły cf7submission

Kolejnym krokiem jest dodanie w GTM niestandardowej reguły. W zakładce reguły dodajemy „Nowe” a następnie „Zdarzenie niestandardowe”. W „ Nazwa zdarzenia” wpisujemy cf7submission

3. Tag wysyłający zdarzenie do Google Analytics

Ostatnim krokiem jest dodanie tagu wysyłającego zdarzenie do Google Analytics.

Dodajemy nowy tag „Google Analytics – Universal Analytics” i zmieniamy „Typ śledzenia” na „Zdarzenie”. Podajemy „Kategorie”, „Działanie” oraz ewentualnie „Etykietę” (dowolne – tak jak chcemy je zobaczyć w Google Analytics).

Jako regułę ustawiamy przygotowaną wcześniej regułę niestandardową cf7submission