Hoe Elementor-formulierinzendingen in Google Analytics-gebeurtenissen te volgen met behulp van JQuery

Inzendingen van Elementor-formulieren bijhouden in Google Analytics-gebeurtenissen

Ik heb de afgelopen weken gewerkt aan een WordPress-site voor een klant die nogal wat complexiteit heeft. Ze gebruiken WordPress met een integratie naar ActiveCampaign voor het koesteren van leads en a Zapier integratie in Zendesk Verkoop via Elementor-formulieren. Het is een geweldig systeem… het starten van drip-campagnes voor mensen die om informatie vragen en een lead naar de juiste verkoopvertegenwoordiger sturen wanneer daarom wordt gevraagd. Ik ben echt onder de indruk van Elementor's vormflexibiliteit en uiterlijk en gevoel.

De laatste stap was het leveren van een analysedashboard voor de klant via Google Analytics dat hen maand-op-maand prestaties opleverde bij het indienen van formulieren. Ze hebben Google Tag Manager geïnstalleerd, dus we zijn al bezig met het vastleggen van e-commercetransacties en YouTube-weergaveactiviteit op de site.

Ik heb verschillende pogingen gedaan om DOM, triggers en gebeurtenissen in Google Tag Manager te gebruiken om de succesvolle formulierinzending voor Elementor vast te leggen, maar ik had helemaal geen geluk. Ik heb een heleboel verschillende manieren getest om de pagina te controleren, kijkend naar het succesbericht dat via AJAX zou verschijnen en het werkte gewoon niet. Dus... Ik heb wat gezocht en vond een geweldige oplossing van Tracking Chef, genaamd Bulletproof Elementor formulieren volgen met GTM.

Het script gebruikt jQuery en Google Tag Manager om de Google Analytics-evenement wanneer het formulier succesvol is verzonden. Met een paar kleine aanpassingen en een verbetering van de syntaxis had ik alles wat ik nodig had. Hier is de code:

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

Het is behoorlijk ingenieus, kijken naar de succesvolle inzending en dan slagen Formulier als de categorie, de bestemmingsnaam als de actie, en Onderwerping als het etiket. Door het doel programmatisch te maken, kunt u deze code eenvoudig in de voettekst van elke pagina plaatsen om een ​​formulierinzending te observeren. Dus... terwijl u formulieren toevoegt of wijzigt, hoeft u zich nooit zorgen te maken over het bijwerken van het script of het toevoegen aan een andere pagina.

Installeer het script via de aangepaste code van Elementor

Als je een bureau bent, zou ik de onbeperkte upgrade en het gebruik van Elementor ten zeerste aanbevelen voor al je klanten. Het is een solide platform en het aantal partnerintegraties blijft stijgen. Koppel het met een plug-in zoals Contactformulier DB en u kunt ook al uw formulierinzendingen verzamelen.

Elementor Pro heeft een geweldige optie voor scriptbeheer ingebouwd. Zo kunt u uw code invoeren:

Elementor aangepaste code

  • Navigeer naar Elementor > Aangepaste code
  • Geef je code een naam
  • Stel de locatie in, in dit geval het einde body-tag.
  • Stel een prioriteit in als u meer dan één script hebt dat u wilt invoegen en stel de volgorde ervan in.

Elementor Formulier indienen bij GA Event via GTM

  • Klik op bijwerken
  • U wordt gevraagd om de voorwaarde in te stellen en deze in te stellen op de standaardwaarde van alle pagina's.
  • Ververs je cache en je script is live!

Bekijk een voorbeeld van uw Google Tag Manager-integratie

Google Tag Manager heeft een fantastisch mechanisme om verbinding te maken met een browserinstantie en om uw code daadwerkelijk te testen om te zien of de variabelen correct worden verzonden. Dit is essentieel omdat Google Analytics niet realtime is. Je kunt testen en testen en testen en echt gefrustreerd raken dat de gegevens niet worden weergegeven in Google Analytics als je dit niet wist.

Ik ga hier geen tutorial geven over hoe je dat moet doen preview en debuggen van Google Tag Manager… Ik ga ervan uit dat je het weet. Ik kan mijn formulier indienen op mijn verbonden testpagina en de gegevens zien die naar de GTM-gegevens zijn gepusht zoals het moet zijn:

google tag manager gegevenslaag

In dit geval was de categorie hard gecodeerd als Form, het doel was het Contact Us-formulier en het label is Submission.

In Google Tag Manager Gegevensvariabelen, Gebeurtenis, Trigger en Tag instellen

De laatste stap hierbij is om Google Tag Manager in te stellen om die variabelen vast te leggen en ze naar een Google Analytics-tag te sturen die is ingesteld voor een evenement. Elad Levy beschrijft deze stappen in zijn andere post - Algemene gebeurtenistracking in Google Tag Manager.

Zodra deze zijn ingesteld, kunt u de gebeurtenissen in Google Analytics zien!

Koop Elementor Pro

Openbaarmaking: ik gebruik mijn gelieerde links in dit artikel.

6 reacties

  1. 1
  2. 3
  3. 5

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.