Cum să urmăriți trimiterile de formulare Elementor în evenimentele Google Analytics utilizând JQuery

Cum să urmăriți trimiterile de formulare Elementor în evenimentele Google Analytics

Am lucrat pe un site WordPress client în ultimele săptămâni, care are destul de multe complexități. Ei folosesc WordPress cu o integrare la ActiveCampaign pentru hrănirea cablurilor și a Zapier integrare la Zendesk Sell de Formele Elementor. Este un sistem excelent ... lansarea campaniilor de degajare către persoanele care solicită informații și trimiterea unui lider către reprezentantul de vânzări corespunzător atunci când este solicitat. Sunt foarte impresionat de flexibilitatea și aspectul de formă ale Elementor.

Ultimul pas a fost furnizarea unui tablou de bord analitic pentru client prin Google Analytics, care le-a oferit performanțe de la o lună la alta la trimiterile de formulare. Au instalat Managerul de etichete Google, deci captăm deja tranzacții de comerț electronic și activități de vizualizare YouTube pe site.

Am făcut mai multe încercări de a utiliza DOM, declanșatoare și evenimente în cadrul Managerului de etichete Google pentru a captura trimiterea cu succes a formularului pentru Elementor, dar nu am avut deloc noroc. Am testat o mulțime de moduri diferite de a monitoriza pagina, urmărind mesajul de succes care va apărea prin AJAX și pur și simplu nu funcționa. Deci ... am făcut câteva căutări și am găsit o soluție excelentă de la Tracking Chef, numită Urmărirea formularelor antiglonț cu GTM.

Scriptul folosește jQuery și Google Tag Manager pentru a împinge Eveniment Google Analytics când formularul este trimis cu succes. Cu câteva modificări minore și o singură îmbunătățire a sintaxei, am avut tot ce aveam nevoie. Iată codul:

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

Este destul de ingenios, urmărește trimiterea cu succes, apoi trece Formă ca categorie, numele destinației ca Acțiune și Supunere ca etichetă. Făcând programarea țintă, puteți pur și simplu să aveți acest cod în subsolul fiecărei pagini pentru a observa trimiterea unui formular. Deci ... pe măsură ce adăugați sau modificați formulare, nu trebuie să vă faceți griji cu privire la actualizarea scriptului și nici la adăugarea acestuia la altă pagină.

Instalați scriptul prin intermediul codului personalizat Elementor

Dacă sunteți o agenție, aș recomanda cu tărie actualizarea nelimitată și utilizarea Elementor pentru toți clienții dvs. Este o platformă solidă, iar numărul integrărilor partenerilor continuă să crească. Cuplați-l cu un plugin de genul Formular de contact DB și puteți, de asemenea, să colectați toate formularele trimise.

Elementor Pro are o opțiune excelentă de gestionare a scripturilor încorporată chiar aici. Iată cum puteți introduce codul:

Cod personalizat Elementor

  • Navigheaza catre Elementor> Cod personalizat
  • Denumiți codul
  • Setați locația, în acest caz sfârșitul eticheta corpului.
  • Setați o prioritate dacă aveți mai multe scripturi pe care doriți să le inserați și setați ordinea acestora.

Trimiterea formularului Elementor la evenimentul GA prin GTM

  • Faceți clic pe actualizare
  • Vi se va cere să setați condiția și să o setați la valoarea implicită a tuturor paginilor.
  • Reîmprospătați memoria cache și scriptul dvs. este live!

Previzualizați integrarea Google Tag Manager

Managerul de etichete Google are un mecanism fantastic pentru conectarea la o instanță de browser și testarea codului dvs. pentru a observa dacă variabilele sunt sau nu trimise corect. Acest lucru este esențial, deoarece Google Analytics nu este în timp real. Puteți testa, testa și testa și puteți deveni foarte frustrat că datele nu apar în Google Analytics dacă nu ați realizat acest lucru.

Nu voi oferi aici un tutorial despre cum să previzualizați și depanați Google Tag Manager... Voi presupune că știi. Îmi pot trimite formularul pe pagina de test conectată și pot vedea datele trimise către datele GTM așa cum trebuie să fie:

stratul de date Google Tag Manager

În acest caz, categoria a fost codificată ca Formular, ținta a fost formularul Contactați-ne, iar eticheta este Trimitere.

În Google Tag Manager, configurați variabilele de date, evenimentul, declanșatorul și eticheta

Ultimul pas în acest sens este să configurați Google Tag Manager pentru a capta acele variabile și a le trimite la o etichetă Google Analytics configurată pentru un eveniment. Elad Levy detaliază acești pași în cealaltă postare a sa - Urmărirea generică a evenimentelor în Google Tag Manager.

Odată ce acestea sunt configurate, veți putea vedea Evenimentele în Google Analytics!

Obține Elementor Pro

Divulgare: folosesc linkurile mele de afiliere în acest articol.

4 Comentarii

  1. 1
  2. 3

    Folosesc mai mulți pași în forma elementar, dar vreau să urmăresc evenimentul când utilizatorul face clic pe butonul Următorul.
    Poți să mă cunoști acest eveniment. Mulțumiri!

  3. 5

Ce părere ai?

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.