Jak skonfigurować analitykę śledzenia formularzy za pomocą Menedżera tagów Google i Google Analytics
Opublikowany: 2022-04-12Współczynnik konwersji to jeden z najprostszych i jednocześnie najważniejszych mierników efektywności marketingu. Pokazuje, ilu użytkowników wykonało docelową akcję: dokonało zakupu, zarejestrowało się na e-maile, poprosiło o telefon itp. Do rejestrowania i analizowania sprzedaży e-commerce mamy Google Analytics, które jest stosunkowo łatwe w konfiguracji. Jednak śledzenie formularzy przesłanych w witrynie wymaga większego wysiłku.
Dzieje się tak, ponieważ formularze są różnych typów i używają różnych technologii do wysyłania danych na serwer. Po pomyślnym przesłaniu danych niektóre pola formularza są aktualizowane. Inne pokazują wyskakujące okienko. Trzeci typ przekierowuje użytkownika do strony z podziękowaniem. Sposób śledzenia formularzy zależy od używanej technologii.
Z tego artykułu dowiesz się, jak na różne sposoby zbierać dane z formularzy i przesyłać je do Google Analytics.
Spis treści
- Metoda 1. Oddzielna strona z podziękowaniami
- Metoda 2. Prześlij wyzwalacz formularza w Menedżerze tagów Google
- Krok 1. Aktywuj zmienne formularza
- Krok 2. Dostosuj spust
- Krok 3. Sprawdź, czy wyzwalacz działa
- Krok 4. Utwórz tag
- Krok 5. Ustaw cel w Google Analytics
- Metoda 3. Wyzwalacz dostępności elementu w Menedżerze tagów Google
- Metoda 4. Śledź formularze używające AJAX
- Krok 1. Utwórz tag, aby sprawdzić, jak działa Twój formularz
- Krok 2. Utwórz zmienną warstwy danych
- Krok 3. Utwórz wyzwalacz
- Metoda 5. Zdarzenia DataLayer jako wyzwalacz
- Ile czasu użytkownicy spędzają na wypełnianiu formularzy
Metoda 1. Oddzielna strona z podziękowaniami
Jeśli po wypełnieniu formularza użytkownik zostanie przekierowany na oddzielną stronę z innym adresem URL, śledzenie odwiedzin pod tym adresem URL jest najłatwiejszą metodą śledzenia przesłania formularza. Wystarczy, że utworzysz target z typem „Strona docelowa” w Google Analytics.
Załóżmy, że chcesz śledzić rejestracje na webinarium. Strona z podziękowaniami po pomyślnej rejestracji wygląda tak: https://www.site.com/registration/thankyou
W panelu administracyjnym, w obszarze Ustawienia widoku , w obszarze Cele kliknij Cel, a następnie kliknij Niestandardowe . Podaj nazwę celu, wybierz typ celu i wprowadź adres strony z podziękowaniem:

Co należy wziąć pod uwagę: Adres URL strony z podziękowaniami powinien być unikalny – to znaczy, że w witrynie powinna znajdować się tylko jedna strona o takim adresie, a użytkownicy nie powinni być w stanie dostać się na tę stronę bez wypełnienia formularza. W przeciwnym razie Google Analytics może rejestrować niedokładne dane o osiągnięciu celu.


Najlepsze przypadki marketingowe OWOX BI
PobierzMetoda 2. Prześlij wyzwalacz formularza w Menedżerze tagów Google
Jeśli Twoi programiści poprawnie skonfigurowali transmisję danych z formularza za pomocą przycisku prześlij, to do śledzenia zgłoszeń możesz użyć wbudowanego wyzwalacza Menedżera tagów Google. Sądząc po komentarzach w Internecie, ta sytuacja jest rzadko spotykana, ale warto spróbować.
Używając tej metody, gdy użytkownik wypełnia i wysyła formularz, wyzwalacz wysyła zdarzenie gtm.formSubmit do tablicy dataLayer.
Uwaga: zanim przejdziesz do ustawień, upewnij się, że tag Widok strony jest włączony w Menedżerze tagów Google dla wszystkich stron w witrynie.
Krok 1. Aktywuj zmienne formularza
W tym celu otwórz menu Zmienne w GTM, kliknij Konfiguruj i zaznacz wszystkie zmienne w sekcji Formularze:

Krok 2. Dostosuj spust
Aby utworzyć wyzwalacz, potrzebujesz identyfikatora formularza lub atrybutu klasy formularza. Możesz je zobaczyć w kodzie HTML, klikając formularz prawym przyciskiem myszy i klikając Przeglądaj element w przeglądarce Firefox lub Wyświetl kod w przeglądarce Chrome:

W naszym przykładzie identyfikator formularza to send-request-form, którego użyjemy podczas konfigurowania wyzwalacza.
Przejdź do menu Wyzwalacze , kliknij Nowy , otwórz Ustawienia wyzwalacza i wybierz Prześlij formularz :

W oknie, które się otworzy, zobaczysz dwa pola wyboru:
Czekaj na tagi — jeśli włączysz tę opcję, formularz nie zostanie wysłany, dopóki wszystkie powiązane z nim tagi nie zostaną aktywowane lub nie upłynie określony czas.
Sprawdź walidację — najlepiej włączyć tę opcję. W przeciwnym razie wyzwalacz uruchomi się, nawet jeśli użytkownik nie wypełni wymaganych pól.
Po aktywowaniu sprawdzania błędów pojawią się dodatkowe ustawienia. Jeśli włączysz regułę, określ adres URL strony zawierającej formularz. A jeśli aktywujesz wyzwalacz, podaj identyfikator formularza, o którym wspomnieliśmy powyżej:

Wymyśl wygodną i zrozumiałą nazwę wyzwalacza, taką jak Prześlij żądanie, i zapisz ją.
Krok 3. Sprawdź, czy wyzwalacz działa
Przed opublikowaniem zmian w kontenerze użyj trybu podglądu w Menedżerze tagów Google. Otwórz stronę z formularzem, wypełnij go i naciśnij Wyślij. W konsoli debugowania powinno pojawić się zdarzenie gtm.formSubmit.

Jeśli to zdarzenie się nie pojawi, ta metoda śledzenia nie będzie działać w Twoim przypadku. W takim przypadku wypróbuj jedną z innych metod opisanych w tym artykule.
Jeśli zdarzenie się pojawi, nadal należy przeprowadzić jeszcze jeden test, aby sprawdzić, czy wyzwalacz działa poprawnie. Otwórz formularz, pozostaw niektóre obowiązkowe pola puste i wyślij formularz. Jeśli zdarzenie gtm.formSubmit ponownie pojawi się w konsoli debugowania, wbudowana reguła działa nieprawidłowo i nie pomoże. Jeśli wydarzenie nie zostało przeniesione, to świetnie! Przejdź do kolejnych kroków.
Krok 4. Utwórz tag
Teraz musisz stworzyć tag, który będzie wysyłał do Google Analytics informację, że formularz został wysłany. W tym celu przejdź do menu Tagi , kliknij Nowy, otwórz Konfiguracja tagów i wybierz Google Analytics – Universal Analytics.
Dla jasności możesz nazwać tag tak samo jak wyzwalacz. Następnie wypełnij następujące pola:
- Typ tagu – wybierz {{Ustawienia Google Analytics}}
- Typ utworu – wybierz „Wydarzenie”
- Kategoria – taka sama jak tag i wyzwalacz dla wygody
- Akcja – Wysyłanie
- Etykieta – na przykład {{identyfikator formularza}})
- Brak interakcji – pozostaw „Fałsz”
Jeśli chcesz aktywować tag, wybierz regułę utworzoną w kroku 3 i kliknij Zapisz :

Gotowe! Możesz sprawdzić, jak działa wygenerowany tag, przesyłając formularz, korzystając z trybu podglądu Menedżera tagów Google lub korzystając z raportu Zdarzenia w czasie rzeczywistym w Google Analytics.
Krok 5. Ustaw cel w Google Analytics
Gdy opublikujesz kontener ze zmianami, musisz skonfigurować cel w Google Analytics, aby rozważyć przesyłanie formularzy jako konwersji. Aby to zrobić, dodaj nowy własny cel w ustawieniach widoku Google Analytics. Wybierz typ zdarzenia i wypełnij pola Kategoria, Akcja i Skrót tak samo jak podczas konfigurowania tagu w Menedżerze tagów Google:

Zapisz cel. Zrobione. Skonfigurowałeś śledzenie formularzy bez zmiany kodu w swojej witrynie!
Metoda 3. Wyzwalacz dostępności elementu w Menedżerze tagów Google
Jeśli po wysłaniu formularza na stronie pojawi się okno z podziękowaniem lub komunikatem o pomyślnym przesłaniu formularza, możesz wypróbować inny wbudowany wyzwalacz GTM. Uruchamia się, gdy określony element pojawia się na ekranie (w naszym przypadku wyskakujące okienko) i wysyła zdarzenie gtm.elementVisibility do dataLayer.
Aby skonfigurować ten wyzwalacz, musisz znać selektor CSS monitorowanego elementu. Aby znaleźć ten selektor, kliknij prawym przyciskiem myszy okno i wybierz Wyświetl kod . Szukasz następującej linii:

Aby skopiować selektor CSS, kliknij prawym przyciskiem myszy linię i wybierz Kopiuj – selektor Kopiuj:

W naszym przykładzie selektor wygląda tak: #webinar_marketing_automation > div.
Następnie utwórz nowy wyzwalacz, wybierając typ Widoczność elementu :

Wypełnij następujące pola:
- Nazwa wyzwalacza – na przykład „Pobierz nagranie webinaru”
- Metoda wyboru – selektor CSS
- Selektor elementu — wstaw wartość skopiowaną z kodu HTML wyskakującego okna.
- Reguła wyzwalania – jeśli masz jeden formularz na stronie, pozostaw opcję „Raz na stronę”. Jeśli istnieje wiele formularzy i pojawi się jedna wiadomość, możesz wybrać „Raz na element”.

- Następnie zaznacz pole „Zarejestruj zmiany DOM”.
- Warunki aktywacji wyzwalacza — wybierając opcję „Niektóre zdarzenia związane z widocznością”, możesz określić stronę, na której pojawi się wyskakujący komunikat lub tekst.
- Zapisz wyzwalacz.

Po utworzeniu wyzwalacza dostępności elementu należy dostosować te same ustawienia, jak opisano szczegółowo w metodzie 2:
- Dodaj nowy tag do GTM, który wyśle dane o przesłaniu formularza do Google Analytics i dołączy do niego utworzony wyzwalacz.
- Wyświetl podgląd działania tagu po przesłaniu formularza.
- W Google Analytics ustaw cel zdarzenia, aby śledzić konwersje.
Metoda 4. Śledź formularze używające AJAX
Jeśli formularze na Twojej stronie wykorzystują technologię AJAX, to dane są przesyłane z przeglądarki na serwer w tle i strona nie przeładowuje się. Aby skonfigurować śledzenie przesyłanych formularzy AJAX, możesz użyć tego skryptu z Lunametrics:
<script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>
<script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>
Ten kod sprawdza, czy formularz rzeczywiście używa AJAX, a następnie tworzy zmienną i wyzwalacz w Menedżerze tagów Google.

Krok 1. Utwórz tag, aby sprawdzić, jak działa Twój formularz
W Menedżerze tagów Google otwórz Tagi , kliknij Nowy , kliknij Konfiguracja tagów , a następnie wybierz Niestandardowy kod HTML . Skopiuj powyższy kod i wklej go w polu tekstowym. Określ wszystkie strony jako wyzwalacze:

Następnie włącz podgląd GTM, otwórz stronę formularza, wypełnij formularz i prześlij go.

Jeśli w konsoli debugowania pojawi się zdarzenie ajaxComplete (jak na powyższym zrzucie ekranu), to Twój formularz używa AJAX i ta metoda śledzenia Ci odpowiada. W takim przypadku czytaj dalej.
Krok 2. Utwórz zmienną warstwy danych
Jeśli klikniesz zdarzenie ajaxComplete w konsoli podglądu, a następnie otworzysz kartę Warstwa danych, zobaczysz, jakie informacje są przekazywane do tablicy warstwy danych po przesłaniu formularza.
Interesuje nas linia odpowiedzi w tym kodzie; zawiera tekst informujący o pomyślnym przesłaniu formularza:

Ten wiersz może służyć do tworzenia zmiennej i wyzwalacza w Menedżerze tagów Google. Otwórz sekcję Zmienne w GTM, kliknij Utwórz i na ekranie Konfiguracja zmiennej wybierz Zmienna warstwy danych. W polu Nazwa zmiennej warstwy danych wpisz atrybuty.odpowiedź (dwóm zmiennym można nazwać to samo) i zapisz ustawienia.

Po co wpisywać atrybuty.response zamiast odpowiedzi ? Ponieważ atrybuty to obiekt, który zawiera klucz odpowiedzi i jego wartość. W ten sposób wskazujemy GTM dokładną ścieżkę do danych, które nas interesują.
Po utworzeniu zmiennej należy ją sprawdzić. W tym celu prześlij formularz w trybie podglądu. Kliknij zdarzenie ajaxComplete i otwórz kartę Zmienne w Menedżerze tagów Google. Jeśli widzisz zmienną attribute.response i tekst o pomyślnym wysłaniu formularza, oznacza to, że wszystko skonfigurowałeś poprawnie.
Krok 3. Utwórz wyzwalacz
W sekcji Konfiguracja wyzwalacza kliknij Utwórz, a następnie Konfiguracja wyzwalacza i wybierz typ zdarzenia użytkownika . Określ ajaxComplete w polu Nazwa zdarzenia. Następnie jako warunek aktywacji reguły wybierz Niektóre zdarzenia niestandardowe i zarejestruj warunek: zmienna attribute.response zawiera {wpisz niestandardowy tekst o pomyślnym wysłaniu formularza}.

Po tym pozostaje:
- Dodanie nowego tagu śledzenia zdarzeń do GTM, który wyśle informacje o przesłaniu formularza do Google Analytics i dołączy do niego utworzony wyzwalacz.
- Korzystanie z trybu podglądu, aby sprawdzić, jak działa tag podczas przesyłania formularza.
- Ustawienie celu zdarzenia do śledzenia konwersji w Google Analytics.
Te ustawienia opisaliśmy szczegółowo powyżej w sekcji Metoda 2. Wyślij wyzwalacz formularza w Menedżerze tagów Google.
Metoda 5. Zdarzenia DataLayer jako wyzwalacz
Śledzenie formularzy metodą dataLayer .push jest naszym zdaniem najbardziej niezawodnym i wszechstronnym rozwiązaniem. Jedyną wadą jest to, że jeśli nie rozumiesz kodu, będziesz potrzebować pomocy programistów.
Przygotuj specyfikacje techniczne dla programistów
Zrób listę ustawień, które chcesz przenieść w dataLayer po pomyślnym przesłaniu formularza. Poproś programistów o dodanie tego kodu do wszystkich stron z formularzami, które chcesz monitorować:
dataLayer.push({
'zdarzenie':'Formularze',
„zmienna”: „wartość”
})
Gdzie:
- Wydarzenie to nazwa wydarzenia. Możesz go zastąpić dowolnym, dogodnym dla Ciebie wydarzeniem.
- Zmienna to zbiór wszystkich zmiennych, które chcesz przenieść wraz ze zdarzeniem.
Po tym, jak Twoi programiści skonfigurują metodę dataLayer.push dla wszystkich formularzy, możesz sprawdzić, jak to działa. W tym celu dołącz podgląd w Google Tag Manager i wypełnij formularz na swojej stronie. W konsoli debugowania powinno pojawić się nowe zdarzenie (w naszym przykładzie nazywa się OWOX). Po kliknięciu na zdarzenie i przejściu do zakładki dataLayer zobaczysz wszystkie parametry, które są przesyłane do tablicy danych:

W przykładzie naszego wydarzenia na powyższym zrzucie ekranu (pobieranie pliku PDF z bloga) zastanawiamy się, jak skonfigurować śledzenie za pomocą GTM.
Najpierw utwórz wszystkie wymagane zmienne użytkownika: eventCategory, eventAction, eventLabel itp. Następnie wybierz typ zmiennej w sekcji Zmienne definiowane przez użytkownika i wpisz nazwę zmiennej w nawiasach klamrowych: {{eventCategory}}:

Następnie utwórz wyzwalacz typu Zdarzenie niestandardowe. W ustawieniach określ nazwę zdarzenia i ustaw wyzwalacz, aby uruchamiał się we wszystkich zdarzeniach niestandardowych:

Następnie utwórz tag, który przekaże zdarzenia do Google Analytics. Ustaw typ tagu na Google Analytics – Universal Analytics, a typ śledzenia na Zdarzenie.
Następnie wypełnij te pola:
- Kategoria – {{eventCategory}}
- Akcja – {{eventAction}}
- Etykieta – {{etykieta wydarzenia}}
Następnie wybierz zmienną {{ustawienia Google Analytics}} i regułę utworzoną w poprzednim kroku:

Wszystko jest gotowe. Pozostaje tylko sprawdzić, czy tag działa w trybie podglądu GTM oraz w raportach Google Analytics w czasie rzeczywistym.
Ile czasu użytkownicy spędzają na wypełnianiu formularzy
Teraz, gdy już wiesz, ilu użytkowników pomyślnie wypełniło formularz, pomocne będzie ustalenie, jakie problemy napotkali ci, którzy go nie wypełnili.
Twoi programiści muszą dodać do dataLayer nazwy i wartości wszystkich parametrów wymaganych do analizy formularzy. Pomoże Ci to śledzić:
- Czas od otwarcia strony do aktywacji pola
- Czas od aktywacji pola do dezaktywacji pola
- Czas od aktywacji pierwszego pola do pierwszego wysłania formularza
- Czas od aktywacji pierwszego pola do pomyślnego przesłania formularza
- Czas od aktywacji pierwszego pola do nieudanego przesłania formularza
- Czas na odpowiedź z serwera o pomyślnym przesłaniu formularza
- Czas na odpowiedź z serwera o nieudanym przesłaniu formularza
- Czas od aktywacji formularza do momentu opuszczenia formularza przez użytkownika (bez jego pomyślnego przesłania)
Po skonfigurowaniu zbierania tych danych w Google Analytics będziesz mógł zaimportować te dane do Google BigQuery – na przykład za pomocą OWOX BI. Następnie możesz tworzyć dowolne raporty analityczne formularzy w Arkuszach Google, korzystając z bezpłatnego dodatku OWOX BI BigQuery Reports.
Raporty te pomogą Ci znaleźć i naprawić problemy z użytecznością formularzy, a tym samym zwiększyć współczynnik konwersji.
Oto kilka przykładów takich raportów i pytania, na które mogą odpowiedzieć:
1. Podczas interakcji z jakimi polami formularza użytkownicy najczęściej napotykają błąd?

2. Jak długo użytkownicy spędzają na wypełnianiu formularza?

3. Ile czasu użytkownicy spędzają na wypełnianiu formularza i od czego to zależy?

PS Jeśli potrzebujesz pomocy w konfiguracji analityki formularzy i tworzeniu niestandardowego systemu metryk dla Twojej firmy, napisz do nas na [email protected] lub wypełnij formularz kontaktowy na stronie OWOX.