Obecnie 136 forumowiczów jest online
Obecnie 136 forumowiczów jest online
Poprowadź mnie
star_border
Odpowiedz

Dodawanie kodu wysyłania formularza GTM + Analytics + Contact form 7

Nowicjusz ✭

Witam,
Prosiłbym o pomoc we wstawieniu kodu który będzie mierzył konwersje/cel/zdarzenie w Analytics. Chcę to zrobić za pomocą Google Tag Menager, ale nie wiem jak to zrobić. Korzystam z wtyczki Contact Form 7, chciałbym aby dane były wyświetlane w Analytics do tej pory korzystałem z metody: 

on_sent_ok:

lecz ma zostać wycofana.
 Na stronie wtyczki jest opisane w taki sposób: https://contactform7.com/tracking-form-submissions-with-google-analytics/ 
ale nie wiem jak to wstawić ustawić.

Odpowiedź eksperta 2verified_user
1 ZAAKCEPTOWANE ROZWIĄZANIE

Zaakceptowane rozwiązania
Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: technik a
październik

Dot.: Dodawanie kodu wysyłania formularza GTM + Analytics + Contact fo

Wschodząca Gwiazda

1. Stwórz w GTM nowy tag typu "Niestandardowy kod HTML" uruchamiany na wszystkich stronach (lub tylko na stronie, gdzie jest formularz) wstawiając do niego następujący kod:

 

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

 

2. Utwórz regułę typu "Zdarzenie niestandardowe" i jako nazwę zdarzenia wpisz formSubmit (regułę możesz nazwać tak samo)

3. Utwórz tag Google Analytics przesyłający zdarzenie uruchamiany Twoją niestandardową regułą, którą utworzyłeś w kroku 2.

 

I to powinno zadziałać.

Tomasz Ciepłucha

Wyświetl rozwiązanie w oryginalnym poście

Dodawanie kodu wysyłania formularza GTM + Analytics + Contact form 7

Profesjonalista ✭

Cześć.

Tutaj masz wideo, gdzie pokazuje jak dodać takie Zdarzenie i Cel: https://goo.gl/aQfnQb

 

Kanał YT- Google Tag Manager: https://goo.gl/S2RM7X
Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: technik a
październik

Dot.: Dodawanie kodu wysyłania formularza GTM + Analytics + Contact fo

Wschodząca Gwiazda

1. Stwórz w GTM nowy tag typu "Niestandardowy kod HTML" uruchamiany na wszystkich stronach (lub tylko na stronie, gdzie jest formularz) wstawiając do niego następujący kod:

 

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

 

2. Utwórz regułę typu "Zdarzenie niestandardowe" i jako nazwę zdarzenia wpisz formSubmit (regułę możesz nazwać tak samo)

3. Utwórz tag Google Analytics przesyłający zdarzenie uruchamiany Twoją niestandardową regułą, którą utworzyłeś w kroku 2.

 

I to powinno zadziałać.

Tomasz Ciepłucha

Dot.: Dodawanie kodu wysyłania formularza GTM + Analytics + Contact fo

Wschodząca Gwiazda

Ja bym jednak wykorzystał pełną moc GTMa.

 

1) Włącz zmienną "Form Classes"

2) Ustaw regułę wg zrzutu

 

Zrzut ekranu 2017-10-08 o 11.07.02.png

 

3) Uruchom tag wysyłający zdarzenie do GA, uruchamiany wg  reguły pkt 2.

Zrzut ekranu 2017-10-08 o 11.11.49.png

 

4) W GA ustaw cel "zdarzenie" 

 

Zrzut ekranu 2017-10-08 o 11.14.05.png

 

 

Pozdrawiam Adaśko

 

 

Dodawanie kodu wysyłania formularza GTM + Analytics + Contact form 7

Wschodząca Gwiazda

Adam - śledzenie formularzy z użyciem wbudowanych w GTM mechanizmów to najczęściej zły pomysł - niestety Emotikon: Smutny

 

Dzieje się tak dlatego, że ten mechanizm skonstruowany jest tak, że śledzi wysłanie formularza przez przeglądarkę do serwera.

A to nie jest równoważne z prawidłowym wysłaniem formularza i jego przetworzeniem.

 

W efekcie, przy tak skonfigurowanej regule, jak pokazałeś na zrzucie ekranu, reguła zostaje uruchomiona już w momencie kliknięcia przycisku "Wyślij" bez względu na to czy wypełniliśmy jakiekolwiek pole - a zazwyczaj jakieś trzeba wypełnić w formularzu Emotikon: Szczęśliwy

Czyli przy kliknięciu przycisku "Wyślij" formularz wysyłany jest z przeglądarki do serwera, reguła się uruchamia, a wraz z nią tag zdarzenia o wysłaniu formularza, ale ze względu na brak wypełnionych pól dostajemy negatywną odpowiedź wraz z komunikatem błędu. To samo dzieje się przy nieprawidłowo wypełnionym formularzu (brak jakiegoś pola/błędny email/itp.).

 

A nawet jeśli wypełnimy formularz prawidłowo, ale z jakiegoś powodu (błędu po stronie serwera) formularz nie zostanie prawidłowo przetworzony również reguła się uruchomi i tag wyśle, mimo iż faktycznie nie nastąpi ostateczne wysłanie formularza.

Zaznaczenie opcji "Sprawdź weryfikację" też tu nie pomoże, bo wówczas reguła się nigdy nie uruchomi.

 

Dlatego jeżeli chcemy mieć pewność, że tag zdarzenia (lub jakikolwiek inny) zostanie uruchomiony dopiero gdy formularz rzeczywiście zostanie wysłany (prawidłowo przetworzony przez serwer) to najlepiej jeśli zdarzenie uruchamiające regułę w GTM występuje dopiero po pozytywnej odpowiedzi serwera.

 

W przypadku formularza CF7 najlepszym rowiązaniem jest więc skorzystać z metody śledzenia opisanej przez twórce formularza i zaadaptować ją tylko do GTM'a.

W tej metodzie przeglądarka "nasłuchuje" wystąpienie zdarzenia "wpcf7mailsent", które powstaje dopiero w momencie pozytywnej odpowiedzi z serwera po faktycznym prawidłowym wysłaniu formularza.

Wystarczy to wykorzystać do przesłania do warstwy danych jakiegoś niestandardowego zdarzenia (w mojej propozycji było to formSubmit), które następnie uruchomi tag GA przesyłający zdarzenie o wysłaniu formularza. 

 

Oczywiście żeby ta nowa metoda działała trzeba mieć pewnie zaktualizowaną wtyczkę wpcf7.

Tomasz Ciepłucha

Dodawanie kodu wysyłania formularza GTM + Analytics + Contact form 7

Wschodząca Gwiazda

Tomasz przyznaje ci rację, że twoje wdrożenie, może przynieść większość jakość pomiaru ale o około 2-4 %. Dlaczego? Po pierwsze z testów przeprowadzonych przez moją skromną osobę, błędnych formularzu przy wdrożonej kontroli danych w inputach jest bardzo mała. Po za tym (to już tylko moja fanaberia jako marketingowca), doszedłem do wniosku, że zdarza się, że ktoś próbował wysłać formularz i się nie udało. Zdenerwowany, opuszcza formularz i szuka innej drogi komunikacji albo ucieka ze strony (zdenerwowanie). Dla marketingowca informacja, że był próba wysłania z formularza (choć nie udana) i został przypisana do danego kanału marketera jest bardzo cenna. PS. Jedynie co pozostaje, uprościć i zoptymalizować formularz tak, aby był jak najmniej niewysłanych formularzy :-) 

Dodawanie kodu wysyłania formularza GTM + Analytics + Contact form 7

Wschodząca Gwiazda

Dlatego ja dodatkowo mierzę samo kliknięcie przycisku "Wyślij" by wyłapać sytuacje, gdy przycisk został kliknięty, a fizycznie formularz się nie wysłał.

I rzeczywiście są sytuacje, gdy po nieudanym wysłaniu formularza (z powodu błędów po stronie serwera lub innych) klient kontaktuje się inną drogą - e-mailowo lub telefonicznie - ale formalnie formularz wysłany nie został, więc konwersja nie powinna być zliczona Emotikon: Szczęśliwy

 

Natomiast co do błędów spotykałem się z sytuacjami, że przy mierzeniu wysłań formularzy lub mierzeniu samych kliknięć w przycisk "Wyślij" błędy były ogromne, bo formularz był wysyłany przez roboty. Nie wiem czy jest to również możliwe w przypadku WP i CF7.

 

Ale dobrze, że wywiązała się dyskusja. Każdy może samemu ocenić za i przeciw i wybrać metodę implementacji najbardziej odpowiednią dla siebie i swoich celów Emotikon: Szczęśliwy

Tomasz Ciepłucha

Dodawanie kodu wysyłania formularza GTM + Analytics + Contact form 7

Wschodząca Gwiazda

@Tomasz_C dokładnie, bo nie można wyłącznie opierać się na cyferkach, a włączyć myślenie :-).

Dodawanie kodu wysyłania formularza GTM + Analytics + Contact form 7

Nowicjusz ✭

Punkt 3.
Jeśli chodzi o utworzenie zdarzenia to nie podaję żadnych "Parametrów śledzenia zdarzeń"?


Universal Analytics > Typśledzenia = 'zdarzenie' > i jako kategorie daje tą utworzoną regułę i tyle?

 

Dot.: Dodawanie kodu wysyłania formularza GTM + Analytics + Contact fo

Wschodząca Gwiazda

@technik a - Nie do końca wiem, do czego odnosi się Twoje pytanie, ale ogólnie konfigurując tag Google Analytics wysyłający zdarzenie musisz podać wszystkie niezbędne rzeczy - czyli przynajmniej kategorię i działanie oraz oczywiście albo zmienną ustawień GA (zdefiniowaną wcześniej w zmiennych), albo ustawienia wpisane ręcznie (po zaznaczeniu opcji "Włącz zastępowanie ustawień w tym tagu").

 

Tomasz Ciepłucha

Dodawanie kodu wysyłania formularza GTM + Analytics + Contact form 7

Nowicjusz ✭

@Tomasz_C - niestety nie działa mi w ten sposób nie mam pojęcia dlaczego robię chyba wszystko dobrze krok po kroku.
1. Tag zostaje bez reguły?
Chyba potrzebuje dokładniejszej instrukcji. 
Chciałbym właśnie aby były zliczane tylko wysłane poprawnie formularze. Mógłbyś ocenić metodę @Bartek K czy w filmiku jest ta sama metoda co podał @Adam Grabowski

Dodawanie kodu wysyłania formularza GTM + Analytics + Contact form 7

Wschodząca Gwiazda

Który tag zostaje bez reguły?

Ten z niestandardowym kodem HTML ma być uruchamiany na każdej stronie lub na stronie formularza. Dla uproszczenia możesz wybrać gotową regułę "All Pages".

A tag Analytics przesyłający zdarzenie ma być uruchamiany regułą stworzoną w kroku 2, czyli zdarzeniem niestandardowym formSubmit. 

Tomasz Ciepłucha

Dodawanie kodu wysyłania formularza GTM + Analytics + Contact form 7

[ Edytowane ]
Nowicjusz ✭

Ok dzięki działa.

1.Jeszcze pytanie: Czy w tagu universal analytics w ustawieniach zaawansowanych mam ustawic opcje uruchamiania tagów na: 'Raz na zdarzenie' , 'bez ograniczen' , raz na stronę?
Chodzi o to aby zliczało każdy wysłany formularz nawet jeśli ktoś wyśle jeden po drugim bez przeładowania strony. 


2.Jeszcze chciałbym zrobić aby zliczało kliknięcia w przycisk lub błędnie wypełniane formularze. Tak żeby porównywać to o czym pisaliście wyżej. Proszę o pomoc.

3.Jeszcze mam pytanie czemu te linijki się zmieniają w taki sposób jeśli mógłby mi ktoś wyjaśnić?

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

Dot.: Dodawanie kodu wysyłania formularza GTM + Analytics + Contact fo

Wschodząca Gwiazda

Ad.1 

Zostaw domyślną wartość, czyli "Raz na zdarzenie". Więcej o opcjach uruchamiania reguł znajdziesz tutaj:

https://support.google.com/tagmanager/answer/6279951?hl=pl

To ustawienie spowoduje, że każde wystąpienie zdarzenia spowoduje wyzwolenie reguły i wysłanie tagu GA.

Ale musisz pamiętać, że dany cel liczony jest tylko raz na sesję.

Zatem gdy ktoś wyśle w jednej sesji kilka razy formularz to w raportach będziesz mieć kilka zdarzeń, ale cel zostanie policzony tylko raz.

 

Ad.2 

Zliczanie kliknięć możesz zrobić mniej więcej tak, jak to opisał Adam, tylko przy tworzeniu reguły wybierasz kliknięcia i określasz warunek jak na zrzucie poniżej:

 

 click-trigger.png

Do tego oczywiście tworzysz nowy tag GA wysyłający zdarzenia, który będziesz uruchamiać tą regułą.

 

Ad. 3

Pierwszy kod wysyła do GA zdarzenie bezpośrednio. Można go użyć bezpośrednio na stronie jeśli ktoś korzysta z bezpośrednio z biblioteki analytics.js, a nie GTM.

Natomiast drugi kod służy do tego, by przekazać do warstwy danych GTM niestandardowe zdarzenia (które potem wykorzystujemy do utworzenia reguły i tą regułą wywołujemy tag GA).

Tomasz Ciepłucha