Śledzenie Formularzy Contact Form 7 za pomocą GTM

Jedno z 5 najczęściej pojawiających się pytań dotyczących Google Tag Managera podczas konsultacji marketingowych 1×1 oraz szkoleń GTM, które prowadzę dotyczy śledzenia formularzy Contact Form 7. Wtyczka ta jest jednym z najpopularniejszych rozwiązań służących do budowania formularzy w WordPress. Niestety z tym typem formularza, nie możemy skorzystać z zmiennej wbudowanej, automatycznie zliczającej wysłania formularzy. Jak to zrobić poprawnie?

Jak sprawdzić czy korzystasz z ContactForm7

Zacznijmy od sprawdzenia czy strona www korzysta z wtyczki contactform7. Możemy to zrobić na dwa sposoby.

Pierwszy to skorzystanie z wtyczki do chrome (np. wpdetect) , która powie nam, czy strona korzysta z pluginu contact form 7.

Drugi to wyświetlenie źródła strony – klasyka gatunku. Wchodzimy na stronę www którą chcemy sprawdzić, klikamy prawy przycisk -> Wyświetl źródło lub skrót CTRL + SHIFT + U) .

Następnie sprawdzamy, czy w kodzie strony pojawia się fragment: wpcf7 (CTRL+F) – jeżeli tak to na 99% strona korzysta z tej wtyczki.

Śledzenie formularzy ContactForm7 w 3 krokach

Łatwo, szybko i przyjemnie – tutorial na 15-20 minut wraz ze sprawdzeniem czy konfiguracja działa. Zaczynamy

#1 – Niestandardowy kod html

Na początku dodajemy tag nasłuchujący na każdej podstronie, czy formularz nie został wysłany. W momencie, gdy to nastąpi tag wysyła zdarzenie niestandardowe o nazwie formSubmit . Klikamy w Dodaj nowy tag a następnie:

Typ Tagu: Niestandardowy kod HTML:

Reguła: Wszystkie strony

Treść tagu:

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

Całość powinna wyglądać następująco:

#2 – Niestandardowa reguła formSubmit

Drugim krokiem jest dodanie reguły. Wybieramy dodaj nową regułę, następnie: Zdarzenie niestandardowe a w nazwie wybieramy: formSubmit

#3 – Tag wysyłający zdarzenie

To już prawie koniec – ostatnim krokiem jest tag wysyłający zdarzenie do Google Analytics. Wybieramy typ zdarzenia, nadajemy kategorię, akcje i etykietę. W moim przypadku było to kolejno:

Kategoria: Wysłanie Formularza

Akcja: {{Page URL}} – zmienna wbudowana, która powie nam na jakiej stronie był wysłany formularz

Etykieta: {{Form ID}} zmienna, która powie nam jaki ID miał formularz (to w przypadku gdy na stronie mamy np 2 formularze i chcemy wiedzieć który z nich został wysłany. Możemy też zostawić to pole puste.

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

#4 – Debugowanie i sprawdzenie działania

Oczywiście standardowo musimy sprawdzić, czy to co sprawdziliśmy działa – w tym celu uruchamiamy tryb podglądu i tryb na żywo analytics. Wysyłamy formularz i sprawdzamy czy zdarzenie zostało wysłane do Analytics.

Podsumowanie

Śledzenie wysłań formularza za pomocą GTM jest proste, nie wymaga dostępu do kodu strony i konfiguracji po stronie wtyczki – wszystko zrobimy sami za pomocą GTM. Jeżeli masz jakiś problem z GTM i Contact Form 7 – daj znać w komentarzu.