Jak śledzić przesyłanie formularzy Elementor w zdarzeniach Google Analytics za pomocą JQuery

Od kilku tygodni pracuję nad stroną kliencką WordPress, która ma sporo zawiłości. Używają WordPress z integracją do ActiveCampaign za pielęgnowanie leadów i Zapier integracja do Zendesk Sprzedaj przez Formularze Elementora. To świetny system… rozpoczynający kampanie kroplowe dla osób, które proszą o informacje i przepychający kontakt do odpowiedniego przedstawiciela handlowego na żądanie. Jestem pod wrażeniem elastyczności formy oraz wyglądu i stylu Elementora.

Ostatnim krokiem było udostępnienie klientowi pulpitu analitycznego za pośrednictwem Google Analytics, który zapewniał mu miesięczne wyniki w zakresie przesyłania formularzy. Mają zainstalowany Menedżer tagów Google, więc rejestrujemy już transakcje e-commerce i aktywność związaną z oglądaniem YouTube w witrynie.

Podjąłem kilka prób wykorzystania DOM, wyzwalaczy i zdarzeń w Menedżerze tagów Google, aby przechwycić pomyślne przesłanie formularza dla Elementora, ale nie miałem szczęścia. Przetestowałem mnóstwo różnych sposobów monitorowania strony, obserwując komunikat o sukcesie, który pojawiał się za pośrednictwem AJAX i po prostu nie działał. Więc… poszukałem i znalazłem świetne rozwiązanie od Tracking Chef, o nazwie Kuloodporne śledzenie formularzy Elementora za pomocą GTM.

Skrypt wykorzystuje jQuery i Menedżera tagów Google, aby popchnąć Zdarzenie Google Analytics po pomyślnym przesłaniu formularza. Z kilkoma drobnymi poprawkami i jednym ulepszeniem składni, miałem wszystko, czego potrzebowałem. Oto kod:

<script>
jQuery(document).ready(function($) {
    $(document).on('submit_success', function(evt) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
            'event': 'ga_event',
            'eventCategory': 'Form ',
            'eventAction': evt.target.name,
            'eventLabel': 'Submission'
        });
    });
});
</script>

To całkiem pomysłowe, patrzeć na udane zgłoszenie, a następnie zdanie Forma jako kategoria, nazwa docelowa jako Akcja, oraz Uległość jako etykieta. Dzięki zautomatyzowaniu celu możesz po prostu umieścić ten kod w stopce każdej strony, aby obserwować przesyłanie formularza. Tak więc… kiedy dodajesz lub modyfikujesz formularze, nigdy nie musisz się martwić o aktualizację skryptu ani dodanie go do innej strony.

Zainstaluj skrypt za pomocą niestandardowego kodu Elementora

Jeśli jesteś agencją, gorąco polecam nieograniczoną aktualizację i korzystanie z Elementora dla wszystkich Twoich klientów. To solidna platforma, a liczba integracji partnerów stale rośnie. Połącz to z wtyczką jak Formularz kontaktowy DB możesz też zbierać wszystkie przesłane formularze.

Elementor Pro ma wbudowaną świetną opcję zarządzania skryptami. Oto jak możesz wprowadzić swój kod:

• Nawigować do Elementor > Kod niestandardowy
• Nazwij swój kod
• Ustaw lokalizację, w tym przypadku koniec tag body.
• Ustaw priorytet, jeśli masz więcej niż jeden skrypt, który chcesz wstawić i ustaw ich kolejność.

• Kliknij zaktualizuj
• Zostaniesz poproszony o ustawienie warunku i ustawienie go na domyślny dla wszystkich stron.
• Odśwież pamięć podręczną, a Twój skrypt jest aktywny!

Podgląd integracji Menedżera tagów Google

Google Tag Manager ma fantastyczny mechanizm łączenia się z instancją przeglądarki i testowania kodu w celu sprawdzenia, czy zmienne są poprawnie wysyłane. Jest to niezbędne, ponieważ Google Analytics nie działa w czasie rzeczywistym. Możesz testować, testować i testować i naprawdę denerwować się, że dane nie są wyświetlane w Google Analytics, jeśli nie zdajesz sobie z tego sprawy.

Nie zamierzam tu przedstawiać samouczka, jak to zrobić podgląd i debugowanie Menedżera tagów Google… Zakładam, że wiesz. Mogę przesłać formularz na połączonej stronie testowej i zobaczyć dane przekazane do danych GTM, tak jak to konieczne:

W tym przypadku kategoria została zakodowana na stałe jako Formularz, celem był formularz Skontaktuj się z nami, a etykieta to Przesłanie.

W Menedżerze tagów Google skonfiguruj zmienne danych, zdarzenie, wyzwalacz i tag

Ostatnim krokiem jest skonfigurowanie Menedżera tagów Google do przechwytywania tych zmiennych i wysyłania ich do tagu Google Analytics skonfigurowanego dla zdarzenia. Elad Levy szczegółowo opisuje te kroki w swoim innym poście – Ogólne śledzenie zdarzeń w Menedżerze tagów Google.

Po ich skonfigurowaniu będziesz mógł zobaczyć wydarzenia w Google Analytics!

Pobierz Elementora Pro

Ujawnienie: używam moich linków partnerskich w tym artykule.