Sådan spores elementorformularindsendelser i Google Analytics -begivenheder ved hjælp af JQuery

Sådan spores elementorformularindsendelser i Google Analytics -begivenheder

Jeg har arbejdet på et WordPress -klientwebsted i de sidste par uger, der har en del kompleksiteter. De bruger WordPress med en integration til ActiveCampaign til pleje af kundeemner og a Zapier integration til Zendesk Sælg via Elementor -formularer. Det er et fantastisk system ... der starter drop -kampagner til folk, der anmoder om oplysninger og skubber et lead til den relevante salgsrepræsentant, når det bliver anmodet om det. Jeg er virkelig imponeret over Elementors formfleksibilitet og udseende.

Det sidste trin var at levere et analysedashboard til klienten via Google Analytics, der gav dem måned-til-måned-ydelse på formularindsendelser. De har Google Tag Manager installeret, så vi registrerer allerede e-handelstransaktioner og YouTube-visningsaktivitet på webstedet.

Jeg har gjort flere forsøg på at udnytte DOM, udløsere og begivenheder i Google Tag Manager til at fange den vellykkede formularindsendelse til Elementor, men havde slet ikke held. Jeg testede masser af forskellige måder at overvåge siden på, og kiggede efter den succesbesked, der ville dukke op via AJAX, og det virkede bare ikke. Så ... Jeg søgte lidt og fandt en fantastisk løsning fra Tracking Chef, kaldet Skudsikker Elementor -formsporing med GTM.

Scriptet udnytter jQuery og Google Tag Manager for at skubbe Google Analytics -begivenhed når formularen er indsendt. Med nogle mindre redigeringer og en syntaksforbedring havde jeg alt, hvad jeg havde brug for. Her er koden:

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

Det er ret genialt, at se efter den vellykkede indsendelse og derefter passere Form som kategorien, destinationsnavn som Handlingen, og Indsendelse som etiketten. Ved at gøre målet programmatisk, kan du simpelthen have denne kode i sidefoden på hver side for at observere en formularindsendelse. Så ... når du tilføjer eller ændrer formularer, behøver du aldrig bekymre dig om at opdatere scriptet eller tilføje det til en anden side.

Installer scriptet via Elementor eller brugerdefineret kode

Hvis du er et bureau, vil jeg stærkt anbefale den ubegrænsede opgradering og udnyttelse af Elementor til alle dine kunder. Det er en solid platform, og antallet af partnerintegrationer fortsætter med at skyrocket. Par det med et Plugin -lignende Kontakt formular DB og du kan også indsamle alle dine formularindlæg.

Elementor Pro har en fantastisk scriptstyringsindstilling indbygget lige her. Sådan kan du indtaste din kode:

Elementor brugerdefineret kode

  • Naviger til Elementor> Brugerdefineret kode
  • Navngiv din kode
  • Indstil placeringen, i dette tilfælde slutningen kropsmærke.
  • Angiv en prioritet, hvis du har mere end et script, du vil indsætte, og angiv rækkefølgen af ​​dem.

Elementor -formular indsendelse til GA -begivenhed via GTM

  • Klik på opdater
  • Du bliver bedt om at indstille betingelsen og bare indstille den til standard for alle sider.
  • Opdater din cache, og dit script er live!

Forhåndsvisning af din Google Tag Manager -integration

Google Tag Manager har en fantastisk mekanisme til at oprette forbindelse til en browserinstans og faktisk teste din kode for at se, om variablerne sendes korrekt eller ej. Dette er vigtigt, fordi Google Analytics ikke er i realtid. Du kan teste og teste og teste og virkelig blive frustreret over, at dataene ikke vises i Google Analytics, hvis du ikke var klar over dette.

Jeg vil ikke give en tutorial her om hvordan få vist og fejlsøge Google Tag Manager... Jeg går ud fra, at du ved det. Jeg kan indsende min formular på min tilsluttede testside og se dataene skubbet til GTM -dataene, som de skal være:

google tag manager datalag

I dette tilfælde var kategorien hårdt kodet som formular, målet var kontaktformularen, og etiketten er indsendelse.

Konfigurer datavariabler, begivenhed, udløser og tag i Google Tag Manager

Det sidste trin på dette er at konfigurere Google Tag Manager til at fange disse variabler og sende dem til et Google Analytics -tag, der er konfigureret til en begivenhed. Elad Levy beskriver disse trin i sit andet indlæg - Generisk hændelsessporing i Google Tag Manager.

Når disse er konfigureret, kan du se begivenhederne i Google Analytics!

Hent Elementor Pro

Offentliggørelse: Jeg bruger mine tilknyttede links i hele denne artikel.

4 Kommentarer

  1. 1
  2. 3

Hvad mener du?

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.