Slik sporer du Elementor -skjemainnleveringer i Google Analytics -hendelser ved hjelp av JQuery

Slik sporer du Elementor -skjemainnleveringer i Google Analytics -hendelser

Jeg har jobbet med et WordPress -nettsted for klienter de siste ukene som har ganske mange kompleksiteter. De bruker WordPress med en integrasjon til ActiveCampaign for å pleie leads og a Zapier integrasjon til Zendesk Selg av Elementorformer. Det er et flott system ... som setter i gang dryppskampanjer til folk som ber om informasjon og skyver en ledelse til den aktuelle salgsrepresentanten når det blir forespurt. Jeg er virkelig imponert over Elementors formfleksibilitet og utseende.

Det siste trinnet var å tilby et analysedashboard for klienten via Google Analytics som ga dem resultater fra måned til måned på skjemainnleveringer. De har Google Tag Manager installert, så vi registrerer allerede e-handelstransaksjoner og YouTube-visningsaktivitet på nettstedet.

Jeg gjorde flere forsøk på å bruke DOM, utløsere og hendelser i Google Tag Manager for å fange den vellykkede skjemainnleveringen for Elementor, men hadde ikke hell i det hele tatt. Jeg testet massevis av forskjellige måter å overvåke siden på, og så etter suksessmeldingen som ville dukke opp via AJAX, og det fungerte bare ikke. Så ... Jeg søkte litt og fant en flott løsning fra Tracking Chef, kalt Skuddsikker Elementor formsporing med GTM.

Skriptet bruker jQuery og Google Tag Manager for å skyve Google Analytics -arrangement når skjemaet sendes inn. Med noen mindre redigeringer og en syntaksforbedring, hadde jeg alt jeg trengte. 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 ganske genialt, å se etter den vellykkede innsendingen og deretter passere Form som kategorien, destinasjonsnavn som handlingen, og Innlevering som etiketten. Ved å gjøre målet programmatisk, kan du ganske enkelt ha denne koden i bunnteksten på hver side for å observere en skjemainnlevering. Så ... når du legger til eller endrer skjemaer, trenger du aldri bekymre deg for å oppdatere skriptet eller legge det til på en annen side.

Installer Script Via Elementor Custom Code

Hvis du er et byrå, vil jeg anbefale ubegrenset oppgradering og bruk av Elementor for alle dine kunder. Det er en solid plattform og antall partnerintegrasjoner fortsetter å skyte i været. Koble den til en plugin -lignende Kontaktskjema DB og du kan også samle alle skjemainnleveringene dine.

Elementor Pro har et flott skriptadministrasjonsalternativ innebygd. Slik kan du legge inn koden din:

Elementor tilpasset kode

  • naviger til Elementor> Tilpasset kode
  • Gi koden et navn
  • Angi plasseringen, i dette tilfellet slutten kroppsmerke.
  • Angi en prioritet hvis du har mer enn ett skript du vil sette inn, og angi rekkefølgen på dem.

Elementor skjemainnlevering til GA -arrangement via GTM

  • Klikk på oppdater
  • Du blir bedt om å angi betingelsen og bare sette den til standard for alle sider.
  • Oppdater bufferen og skriptet ditt er live!

Forhåndsvis integreringen av Google Tag Manager

Google Tag Manager har en fantastisk mekanisme for å koble til en nettleserforekomst og faktisk teste koden din for å se om variablene blir riktig sendt eller ikke. Dette er viktig fordi Google Analytics ikke er i sanntid. Du kan teste og teste og teste og bli virkelig frustrert over at dataene ikke vises i Google Analytics hvis du ikke skjønte dette.

Jeg kommer ikke til å gi en opplæring her om hvordan forhåndsvis og feilsøk Google Tag Manager... Jeg kommer til å anta at du vet. Jeg kan sende inn skjemaet mitt på den tilkoblede testsiden min og se dataene skyves til GTM -dataene slik de må være:

google tag manager datalag

I dette tilfellet var kategorien hardkodet som skjema, målet var kontakt oss-skjemaet og etiketten er innsending.

Sett opp datavariabler, hendelser, utløsere og tagger i Google Tag Manager

Det siste trinnet på dette er å konfigurere Google Tag Manager for å fange disse variablene og sende dem til en Google Analytics -tag som er konfigurert for en hendelse. Elad Levy beskriver disse trinnene i sitt andre innlegg - Generisk hendelsessporing i Google Tag Manager.

Når de er konfigurert, vil du kunne se hendelsene i Google Analytics!

Skaff deg Elementor Pro

Offentliggjøring: Jeg bruker tilknyttede lenker gjennom hele denne artikkelen.

6 Kommentarer

  1. 1
  2. 3
  3. 5

Hva tror du?

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.