Kako pratiti podnošenja obrazaca elemenata u događajima Google Analyticsa pomoću JQueryja

Kako pratiti podnošenja obrazaca elemenata u događajima Google Analyticsa

Zadnjih nekoliko tjedana radim na web stranici klijenta WordPress koja ima dosta složenosti. Oni koriste WordPress s integracijom u ActiveCampaign za njegovanje tragova i a Zapier integracija u Zendesk Prodaja preko Obrasci elementa. To je sjajan sustav… započinjanje kampanja kapanja ljudima koji traže informacije i traženje vodstva odgovarajućem prodajnom predstavniku na zahtjev. Zaista sam impresioniran fleksibilnošću i izgledom Elementora.

Posljednji korak bio je pružanje analitičke nadzorne ploče za klijenta putem Google Analyticsa koja mu je omogućila mjesečnu izvedbu pri podnošenju obrazaca. Imaju instaliran Google Tag Manager, pa već bilježimo transakcije e-trgovine i aktivnosti pregleda YouTubea na web mjestu.

Pokušao sam nekoliko puta upotrijebiti DOM, okidače i događaje unutar Google upravitelja oznaka za snimanje uspješne predaje obrasca za Elementor, ali nisam imao sreće. Testirao sam hrpu različitih načina praćenja stranice, tražeći poruku o uspjehu koja će se pojaviti preko AJAX -a i jednostavno nije radila. Pa ... Malo sam pretražio i pronašao sjajno rješenje od Tracking Chefa, zvanog Praćenje obrasca Elementor otporno na metke s GTM -om.

Skripta koristi jQuery i Google upravitelj oznaka za guranje Događaj Google Analytics kada je obrazac uspješno poslan. Uz neke manje izmjene i jedno poboljšanje sintakse, imao sam sve što mi je potrebno. Evo koda:

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

Prilično je genijalno, gledati uspješnu predaju, a zatim proći Oblik kao kategorija, naziv odredišta kao Akcija, i Podnošenje kao oznaka. Postavljanjem ciljanog programa na mjesto, ovaj kôd jednostavno možete imati u podnožju svake stranice kako biste promatrali podnošenje obrasca. Dakle ... dok dodajete ili mijenjate obrasce, nikada ne morate brinuti o ažuriranju skripte niti o dodavanju na drugu stranicu.

Instalirajte skriptu putem prilagođenog koda Elementor

Ako ste agencija, toplo bih preporučio neograničenu nadogradnju i korištenje Elementora za sve vaše klijente. To je solidna platforma, a broj partnerskih integracija i dalje raste. Uparite ga s dodatkom poput Obrazac za kontakt DB a možete i prikupiti sve svoje obrasce.

Elementor Pro ima izvrsnu opciju upravljanja skriptama. Evo kako možete unijeti svoj kôd:

Prilagođeni kôd elementa ili elementa

  • Dođite na Elementor> Prilagođeni kôd
  • Imenujte svoj kôd
  • Postavite mjesto, u ovom slučaju kraj oznaka tijela.
  • Postavite prioritet ako želite umetnuti više skripti i postavite njihov redoslijed.

Podnošenje obrasca elementa na GA događaj putem GTM -a

  • Kliknite ažuriraj
  • Od vas će se tražiti da postavite uvjet i postavite ga na zadane vrijednosti za sve stranice.
  • Osvježite predmemoriju i vaša je skripta aktivna!

Pregledajte integraciju Google upravitelja oznaka

Google upravitelj oznaka ima fantastičan mehanizam za povezivanje s instancom preglednika i testiranje vašeg koda kako bi se utvrdilo jesu li varijable ispravno poslane. To je bitno jer Google Analytics nije u stvarnom vremenu. Možete testirati, testirati i testirati te se zaista razočarati što se podaci ne prikazuju u Google Analyticsu ako to niste shvatili.

Ovdje neću pružati vodič o tome kako to učiniti pregled i ispravljanje pogrešaka Google upravitelja oznaka... Pretpostavit ću da znate. Mogu poslati svoj obrazac na svoju povezanu testnu stranicu i vidjeti podatke koji se šalju u podatke GTM -a onako kako to trebaju biti:

podatkovni sloj google upravitelja oznaka

U ovom slučaju kategorija je bila teško kodirana kao Obrazac, cilj je bio obrazac Kontaktirajte nas, a oznaka je Predaja.

U Google upravitelju oznaka postavite podatkovne varijable, događaj, okidač i oznaku

Posljednji korak u tome je postavljanje Google upravitelja oznaka za hvatanje tih varijabli i njihovo slanje na oznaku Google Analytics postavljenu za događaj. Elad Levy detaljno opisuje ove korake u svom drugom postu - Općenito praćenje događaja u Google upravitelju oznaka.

Nakon što ih postavite, moći ćete vidjeti Događaje u Google Analyticsu!

Nabavite Elementor Pro

Objava: U ovom članku koristim svoje povezane veze.

Što vi mislite?

Ova web stranica koristi Akismet za smanjenje neželjene pošte. Saznajte kako se podaci vašeg komentara obrađuju.