Samouczek Menedżera tagów Google, część 4: przesyłanie formularzy śledzenia – zaawansowane

W części 3 naszego zaktualizowanego samouczka Menedżera tagów Google omówiliśmy śledzenie formularzy za pomocą wyzwalacza przesłania formularza , który jest prostym sposobem na śledzenie głównego formularza kontaktowego. Jednak w zależności od kodu formularza i jego technologii może to nie zawsze działać. Może to być powiązane z problemami z JavaScriptem na stronie lub przesłanymi formularzami, które nie są odbierane przez GTM.

W ostatniej części naszej serii przyjrzymy się bliżej śledzeniu przesyłania formularzy za pomocą wyzwalacza widoczności elementu . Ten typ wyzwalacza jest przydatny nie tylko w przypadku formularzy, ale także we wszystkich typach wyskakujących okienek oraz banerów wyświetlania i powiadomień.

Google Analytics nie śledzi automatycznie tej aktywności, ale Menedżer tagów Google (GTM) oferuje automatyczne rozwiązanie do śledzenia przesyłanych formularzy.

W tym samouczku zakładamy, że masz już konto Menedżera tagów Google, utworzyłeś kontener i zainstalowałeś go w swojej witrynie. Powinieneś również mieć skonfigurowane konto Google Analytics dla swojej witryny i powiązać ją z GTM.

Co sprawia, że ​​śledzenie formularzy jest trudne?

Cofnijmy się o krok i rzucmy trochę światła na to, dlaczego istnieje tak wiele różnych technik śledzenia formularzy. Istnieją różne rodzaje formularzy i brak globalnych standardów dotyczących ich opracowywania, co w konsekwencji może utrudnić ich śledzenie. Oto przegląd najczęstszych scenariuszy/zdarzeń, które mogą wystąpić w Twojej witrynie po przesłaniu formularza:

• Do przekierowania formularza użytkownika na stronę thank you: Świetnie, to jest śledzone automatycznie poprzez odsłonę.
• Te pokazy forma podziękowania yo zgłoszenie u po formularzu przycisk submit został kliknięty: Fantastyczny, jeśli wysyła formularz do przedłożenia GTM. Przeczytaj więcej na ten temat w naszym samouczku dotyczącym wpisów na blogu .
• Formularz zostaje odświeżony i wyświetla tekst z podziękowaniem : Trudne, ale możliwe do wykonania dzięki wyzwalaczowi widoczności elementu .
• Wyskakujące okienko informuje użytkownika o pomyślnym przesłaniu: Trudne, ale nie niemożliwe dzięki wyzwalaczowi widoczności elementu .

Jak zacząć od śledzenia formularzy

Na początek zalecamy włączenie wbudowanych zmiennych formularza GTM i utworzenie wyzwalacza przesyłania formularzy, który nasłuchuje wszystkich przesłanych formularzy. Przeczytaj więcej o konfiguracji w naszym samouczku dotyczącym ostatniego wpisu na blogu . Odbiornik automatycznych zdarzeń formularza wykryje wszystkie standardowe zdarzenia przesłania przeglądarki. Przeprowadź kilka testów ze swoim formularzem.

Jeśli GTM nie zarejestruje przesłania formularza w trybie podglądu i debugowania, standardowe podejście do śledzenia nie zadziała i zamiast tego będziesz musiał użyć alternatywnej metody. Jest to dość powszechne, dlatego będziemy pracować z niesamowitą alternatywą: wyzwalaczem widoczności elementu .

Wyjaśnienie wyzwalacza widoczności elementu

Wyzwalacz widoczności elementu (EVB) śledzi, kiedy określony element pojawia się na ekranie (poprzez kliknięcie, przewijanie lub inne interakcje), a zatem ma wiele różnych przypadków użycia. Tę technikę można zastosować do formularzy, gdy po pomyślnym przesłaniu formularza pojawi się konkretna wiadomość z podziękowaniem . Może to być powiadomienie z podziękowaniem na tej samej stronie formularza, baner z podziękowaniem po ponownym załadowaniu strony formularza lub wyskakujące okienko. Więcej praktycznych przykładów znajdziesz tutaj .

Krótko mówiąc, wyzwalacz widoczności elementu uruchamia się za każdym razem, gdy określony element (elementy) pojawia się w widoku przeglądarki. Rzutnia to widoczny obszar okna przeglądarki. Gdy element jest tam widoczny, jest on widoczny dla użytkownika.

W przypadku metody wyboru, aby określić, na który element chcesz kierować, masz do wyboru dwie opcje:

• Identyfikator elementu : dopasowuje pierwszy element na stronie o podanym identyfikatorze. Działa to dobrze, jeśli masz tylko jeden element do śledzenia.
• Selektor CSS : dopasowuje element lub grupę elementów na stronie, która pasuje do Twojego selektora i jest odpowiedni do śledzenia wielu elementów, które mogą pojawić się na stronie.

Krok 1: Znajdź unikalny identyfikator

Zacznij od sprawdzenia komunikatu o powodzeniu formularza, który jest wyświetlany.

Aby to zrobić, kliknij prawym przyciskiem myszy, aby uzyskać dostęp do narzędzi programistycznych przeglądarki. Na przykład w przeglądarce Chrome kliknij prawym przyciskiem myszy element, który chcesz sprawdzić i wybierz opcję Sprawdź element . Spowoduje to wyświetlenie różnych informacji, takich jak treść wiadomości, jej klasa CSS, identyfikator i inne elementy. W poniższym przykładzie wiadomość ma identyfikator przesłanej wiadomości, który jest unikalny i może być użyty jako warunek w wyzwalaczu EVB .

Krok 2: Utwórz wyzwalacz widoczności elementu

Wyzwalacz określa, co dokładnie chcemy śledzić, co staje się widoczne w widocznym miejscu użytkownika. W takim przypadku jest to sprawdzenie, czy pojawi się komunikat z podziękowaniem .

Aby skonfigurować wyzwalacz, wykonaj następujące kroki:

• Przejdź do Wyzwalaczy na lewym pasku bocznym i utwórz nowy.
• Zastąp wyzwalacz bez tytułu nazwą opisową, np. EVB – Kontakt – Przesłany formularz .
• Wybierz typ wyzwalacza: Widoczność elementu .

Do konfiguracji wyzwalacza ustawisz:

• Metoda wyboru : Wybierz identyfikator z listy rozwijanej.
• Identyfikator elementu : przesłana wiadomość
  • Wykorzystuje unikalny identyfikator, który zidentyfikowałeś w kroku 1, aby dokładnie określić, którą wiadomość z podziękowaniem chcesz śledzić.
• Kiedy uruchomić ten wyzwalacz : Raz na stronę
  • Oznacza to, że uruchomi się tylko raz na bieżącej stronie, gdy element pasujący do identyfikatora będzie widoczny dla widza.
  • Pozostałe dwie opcje mogą być przydatne, gdy więcej niż jeden element jest śledzony na stronie za pomocą selektora CSS
• Minimalny procent widocznych : 50
  • Tutaj możesz określić wartość w procentach, czyli jaka część elementu musi być widoczna w widocznym obszarze, aby wyzwalacz został uruchomiony. Jeśli więc ustawisz wartość na „50”, co najmniej 50% dopasowanego elementu musi być widoczne.
  • Domyślnie elementy muszą być widoczne na ekranie w co najmniej 50%, aby wyzwolić zdarzenie. W naszym przypadku to wystarczy.
• Obserwuj zmiany DOM : zaznacz to pole, aby włączyć śledzenie dopasowanych elementów, które pojawiają się jako zmiany DOM.
  • To ustawienie pozwala śledzić widoczność elementów, które mogą nie istnieć w DOM (Document Object Model), gdy formularz kontaktowy jest ładowany po raz pierwszy. Innymi słowy, będzie to czekać na pojawienie się elementu HTML z podziękowaniem .
• Dalsze warunki uruchomienia spustu:
  • Ponieważ używamy identyfikatora , który powinien być unikalny dla tego formularza, nie musimy tutaj ustawiać więcej warunków.
  • Jeśli ten identyfikator jest używany również w innych formularzach, zaleca się ustawienie ścieżki strony tak, aby zawierała stronę, na której prezentowany jest odpowiedni formularz

Kliknij Zapisz, aby sfinalizować konfigurację wyzwalacza.

Krok 3: Utwórz tag zdarzenia przesyłania formularza

Ostatnim krokiem w śledzeniu przesyłanych formularzy jest po prostu utworzenie tagu, który zarejestruje zdarzenie w Google Analytics z żądanymi informacjami. Zdarzenie zostanie uruchomione, gdy zostaną spełnione warunki wyzwalacza widoczności elementu ustawionego w poprzednim kroku. Teraz utwórz tag, jak pokazano na poniższym zrzucie ekranu:

Krok 4: Zapisz wersję, przetestuj i opublikuj

Utworzony właśnie tag nie zacznie działać, dopóki go nie opublikujesz, ale najpierw powinieneś dokładnie sprawdzić, czy działa zgodnie z oczekiwaniami. Po zapisaniu tagu włącz tryb podglądu (kliknij „Podgląd” w prawym górnym rogu), przejdź do swojej witryny i odśwież stronę.

Pamiętaj, aby uwzględnić te scenariusze testowe dotyczące śledzenia formularzy:

• Prześlij formularz kontaktowy bez jego wypełnienia. W takim przypadku tag nie powinien się uruchamiać.
• Wypełnij formularz poprawnymi danymi, a następnie kliknij Prześlij. Tag powinien zostać uruchomiony, gdy tylko na ekranie pojawi się wiadomość z podziękowaniem .

Raport zdarzeń Google Analytics w czasie rzeczywistym powinien pokazywać trafienia zdarzeń, jeśli wszystko działa poprawnie. Przeczytaj nasz post na blogu o problemach z testowaniem Menedżera tagów Google i o tym, jak je rozwiązać, jeśli napotkasz jakiekolwiek problemy.

Jeśli wszystkie twoje testy zakończą się pomyślnie, możesz kliknąć przycisk Prześlij w GTM. Nadaj tej opublikowanej wersji opisową nazwę, np. Dodano zdarzenie przesłania formularza kontaktowego i kliknij Opublikuj .

Wniosek

Chociaż śledzenie formularzy standardowych jest najłatwiejsze do skonfigurowania, często nie działa z powodu komplikacji w języku JavaScript na stronie. Praca z wyzwalaczem widoczności elementu stanowi alternatywę dla radzenia sobie z tymi skrajnymi przypadkami. Dzięki temu Twoje dane są znacznie bardziej wiarygodne i dokładne. W ten sposób masz pewność, że żadne nieprawidłowe lub niechciane kliknięcia przycisku przesyłania nie będą śledzone, a jedynie te przesłane formularze, które zostały faktycznie wypełnione i pomyślnie wysłane.

Nasz samouczek dotyczący Menedżera tagów Google obejmuje śledzenie zewnętrznych (wychodzących) linków , śledzenie linków do pobrania i podstawowe przesyłanie formularzy . Czy są inne rodzaje wydarzeń, które chciałbyś śledzić? Potrzebujesz pomocy w bardziej skomplikowanej sprawie? Zapraszamy do kontaktu – chętnie pomożemy! Aby otrzymywać ekscytujące aktualizacje, zapisz się do naszego biuletynu .