Jak sledovat odesílání formulářů Elementor v událostech Google Analytics pomocí JQuery

Jak sledovat odesílání formulářů Elementor v událostech Google Analytics

V posledních týdnech jsem pracoval na klientském webu WordPress, který má docela dost složitosti. Oni používají WordPress s integrací do Aktivní kampaň za péči o potenciální zákazníky a Zapier integrace do Zendesk Prodat přes Formuláře Elementor. Je to skvělý systém… zahajuje odkapávací kampaně lidem, kteří požadují informace, a na požádání vede potenciálního obchodního zástupce. Jsem opravdu ohromen flexibilitou a vzhledem a tvarem Elementoru.

Posledním krokem bylo poskytnutí analytického řídicího panelu pro klienta prostřednictvím služby Google Analytics, který mu poskytoval měsíční výkon při odesílání formulářů. Mají nainstalovaný Google Tag Manager, takže již zaznamenáváme transakce elektronického obchodování a aktivitu zobrazení na webu.

Udělal jsem několik pokusů o využití DOM, spouštěčů a událostí ve Správci značek Google k zachycení úspěšného odeslání formuláře pro Elementor, ale neměl jsem vůbec štěstí. Testoval jsem spoustu různých způsobů monitorování stránky, sledoval jsem zprávu o úspěchu, která by vyskočila přes AJAX a prostě nefungovala. Takže ... Provedl jsem nějaké hledání a našel jsem skvělé řešení od Tracking Chef, nazvaný Neprůstřelné sledování formulářů Elementor pomocí GTM.

Skript využívá jQuery a Správce značek Google, které tlačí Událost Google Analytics po úspěšném odeslání formuláře. S několika drobnými úpravami a jedním vylepšením syntaxe jsem měl vše, co jsem potřeboval. Zde je kód:

<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>

Je to docela důmyslné, sledovat úspěšné odevzdání a poté projít Formulář jako kategorie název destinace jako Akce a Podání jako štítek. Tím, že nastavíte cíl jako programový, můžete tento kód jednoduše umístit do zápatí každé stránky a sledovat odeslání formuláře. Takže ... při přidávání nebo úpravách formulářů si už nemusíte dělat starosti s aktualizací skriptu ani s jeho přidáním na jinou stránku.

Nainstalujte si skript pomocí vlastního kódu Elementor

Pokud jste agentura, vřele doporučuji neomezený upgrade a využití Elementor pro všechny vaše klienty. Je to solidní platforma a počet partnerských integrací stále raketově roste. Spojte to s Pluginem jako Kontaktní formulář DB a také můžete sbírat všechna vaše podání formulářů.

Elementor Pro má integrovanou skvělou možnost správy skriptů. Kód můžete zadat takto:

Vlastní kód Elementor

  • přejděte na Elementor> Vlastní kód
  • Pojmenujte svůj kód
  • Nastavte umístění, v tomto případě konec tělesná značka.
  • Nastavte prioritu, pokud máte více než jeden skript, který chcete vložit, a nastavte jejich pořadí.

Odeslání formuláře Elementor na akci GA prostřednictvím GTM

  • Klikněte na Aktualizovat
  • Budete požádáni, abyste nastavili podmínku a nastavili ji jako výchozí pro všechny stránky.
  • Obnovte mezipaměť a váš skript je aktivní!

Zobrazte náhled své integrace Správce značek Google

Správce značek Google má fantastický mechanismus pro připojení k instanci prohlížeče a ve skutečnosti testuje váš kód, aby zjistil, zda jsou proměnné správně odesílány. To je zásadní, protože Google Analytics není v reálném čase. Můžete testovat a testovat a testovat a opravdu vás frustruje, že se data nezobrazují v Google Analytics, pokud jste si toho neuvědomili.

Nebudu zde poskytovat návod, jak na to náhled a ladění Správce značek Google… Budu předpokládat, že víš. Mohu odeslat svůj formulář na svou připojenou testovací stránku a zobrazit data vložená do dat Správce značek Google, jak je třeba:

datová vrstva správce značek Google

V tomto případě byla kategorie pevně zakódována jako formulář, cílem byl formulář Kontaktujte nás a štítek je Odeslání.

Ve Správci značek Google nastavte datové proměnné, událost, spoušť a značku

Posledním krokem je nastavení Správce značek Google, aby tyto proměnné zachytil a odeslal do značky Google Analytics nastavené pro událost. Elad Levy podrobně popisuje tyto kroky ve svém dalším příspěvku - Sledování obecných událostí ve Správci značek Google.

Jakmile jsou nastaveny, uvidíte události v Google Analytics!

Získejte Elementor Pro

Zveřejnění: V tomto článku používám své přidružené odkazy.

Co si myslíte?

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.