Hoe om Elementor -vormvoorleggings in Google Analytics -geleenthede op te spoor met behulp van JQuery

Hoe om Elementor -vormvoorleggings in Google Analytics -geleenthede dop te hou

Ek werk die afgelope paar weke op 'n WordPress -webwerf met 'n kliënt wat 'n hele paar kompleksiteite het. Hulle gebruik WordPress met 'n integrasie by ActiveCampaign vir die koestering van leidrade en a Zapier integrasie aan Zendesk Verkoop via Elementor -vorms. Dit is 'n uitstekende stelsel ... om druppelveldtogte af te skop vir mense wat inligting versoek en 'n voorsprong na die toepaslike verkoopsverteenwoordiger stuur wanneer dit versoek word. Ek is regtig beïndruk met Elementor se buigbaarheid en voorkoms.

Die laaste stap was om 'n analitiese paneelbord vir die kliënt te verstrek via Google Analytics, wat hulle maand tot maand prestasie op vormvoorleggings gebied het. Hulle het Google Tag Manager geïnstalleer, so ons neem reeds e-handelstransaksies en YouTube-kykaktiwiteit op die webwerf af.

Ek het verskeie pogings aangewend om DOM, snellers en gebeurtenisse in Google Tag Manager te gebruik om die suksesvolle vormvoorlegging vir Elementor vas te lê, maar het glad nie geluk gehad nie. Ek het baie verskillende maniere getoets om die bladsy te monitor, en gekyk na die suksesboodskap wat via AJAX sou verskyn, en dit werk net nie. So ... ek het bietjie gesoek en 'n uitstekende oplossing gevind by Tracking Chef, genaamd Kogelvaste Elementor -vormopsporing met GTM.

Die draaiboek gebruik jQuery en Google Tag Manager om die Google Analytics -geleentheid wanneer die vorm suksesvol ingedien is. Met 'n paar klein wysigings en een sintaksisverbetering, het ek alles gehad wat ek nodig gehad het. Hier is die kode:

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

Dit is redelik vindingryk, kyk na die suksesvolle voorlegging en gaan dan verby Vorm as die kategorie, die bestemmingsnaam as die Aksie, en Voorlegging as die etiket. Deur die teiken programmaties te maak, kan u hierdie kode eenvoudig in die voettekst van elke bladsy hê om 'n vormvoorlegging te sien. Dus ... as u vorms byvoeg of verander, hoef u nooit bekommerd te wees oor die opdatering van die script of om dit op 'n ander bladsy te voeg nie.

Installeer die Script via Elementor Custom Code

As u 'n agentskap is, beveel ek die onbeperkte opgradering en gebruik van Elementor aan vir al u kliënte. Dit is 'n soliede platform en die aantal vennootintegrasies styg steeds die hoogte in. Koppel dit met 'n inprop soos Kontak vorm DB en u kan ook al u vormvoorleggings versamel.

Elementor Pro het 'n wonderlike opsie vir scriptbestuur, ingebou. Hier is hoe u u kode kan invoer:

Elementor pasgemaakte kode

  • Gaan na Elementor> Pasgemaakte kode
  • Noem jou kode
  • Stel die ligging in, in hierdie geval die einde liggaamsmerk.
  • Stel 'n prioriteit as u meer as een script het wat u wil invoeg en stel die volgorde daarvan in.

Elementor -vormvoorlegging aan GA -geleentheid via GTM

  • Klik op update
  • U sal gevra word om die toestand te stel en dit net op die standaard van alle bladsye te stel.
  • Herlaai u kas en u skrif is regstreeks!

Voorbeskou u integrasie van Google Tag Manager

Google Tag Manager het 'n fantastiese meganisme om aan te sluit op 'n blaaierinstansie en om u kode eintlik te toets om vas te stel of die veranderlikes behoorlik gestuur word. Dit is noodsaaklik omdat Google Analytics nie real-time is nie. U kan toets en toets en toets en regtig gefrustreerd raak dat die data nie in Google Analytics verskyn nie, as u dit nie besef het nie.

Ek gaan nie hier 'n handleiding gee oor hoe om dit te doen nie 'n voorskou en ontfout Google Tag Manager... ek gaan aanneem jy weet. Ek kan my vorm op my gekoppelde toetsbladsy indien en sien hoe die data na die GTM -data gestoot word:

google tag manager data laag

In hierdie geval was die kategorie hard gekodeer as Vorm, die doel was die Kontak ons-vorm en die etiket is Submission.

Stel in Google Tag Manager data veranderlikes, gebeurtenis, sneller en tag op

Die laaste stap hieroor is om Google Tag Manager op te stel om die veranderlikes vas te lê en na 'n Google Analytics -tag te stuur wat vir 'n geleentheid opgestel is. Elad Levy beskryf hierdie stappe in sy ander pos - Algemene opsporing van gebeurtenisse in Google Tag Manager.

Sodra dit opgestel is, sal u die gebeure in Google Analytics kan sien!

Kry Elementor Pro

Openbaarmaking: Ek gebruik my geaffilieerde skakels in hierdie artikel.

6 Comments

  1. 1
  2. 3
  3. 5

Wat dink jy?

Hierdie webwerf gebruik Akismet om spam te verminder. Leer hoe jou opmerking verwerk is.