So verfolgen Sie Elementor-Formularübermittlungen in Google Analytics-Ereignissen mit JQuery

So verfolgen Sie Elementor-Formularübermittlungen in Google Analytics-Ereignissen

Ich habe in den letzten Wochen an einer WordPress-Client-Site gearbeitet, die einige Komplexitäten hat. Sie benutzen WordPress mit einer Integration zu ActiveCampaign zur Pflege von Leads und a Zapier Integration in Zendesk Sell Elementor-Formulare. Es ist ein großartiges System ... Drip-Kampagnen für Personen zu starten, die Informationen anfordern und auf Anfrage einen Lead an den entsprechenden Vertriebsmitarbeiter weiterleiten. Ich bin wirklich beeindruckt von der Formflexibilität und dem Aussehen und der Haptik von Elementor.

Der letzte Schritt war die Bereitstellung eines Analyse-Dashboards für den Kunden über Google Analytics, das ihm monatliche Leistung bei der Formularübermittlung lieferte. Sie haben Google Tag Manager installiert, sodass wir bereits E-Commerce-Transaktionen und YouTube-Aufrufaktivitäten auf der Website erfassen.

Ich habe mehrere Versuche unternommen, DOM, Trigger und Ereignisse in Google Tag Manager zu verwenden, um die erfolgreiche Formularübermittlung für Elementor zu erfassen, hatte aber überhaupt kein Glück. Ich habe eine Menge verschiedener Möglichkeiten getestet, um die Seite zu überwachen, und auf die Erfolgsmeldung geachtet, die über AJAX angezeigt wird, und es funktionierte einfach nicht. Also… ich habe etwas gesucht und eine großartige Lösung von Tracking Chef gefunden, genannt Bulletproof Elementor-Formularverfolgung mit GTM.

Das Skript verwendet jQuery und Google Tag Manager, um die Google Analytics-Ereignis wenn das Formular erfolgreich gesendet wurde. Mit einigen kleineren Änderungen und einer Syntaxverbesserung hatte ich alles, was ich brauchte. Hier ist der 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>

Es ist ziemlich genial, auf die erfolgreiche Einreichung zu achten und dann zu bestehen Form als Kategorie, die Zielname als Aktion, und Einsendung als Etikett. Indem Sie das Ziel programmatisch machen, können Sie diesen Code einfach in die Fußzeile jeder Seite einfügen, um eine Formularübermittlung zu beobachten. Wenn Sie Formulare hinzufügen oder ändern, müssen Sie sich also nie um die Aktualisierung des Skripts oder das Hinzufügen zu einer anderen Seite kümmern.

Installieren Sie das Skript über Elementor Custom Code

Wenn Sie eine Agentur sind, kann ich allen Ihren Kunden das unbegrenzte Upgrade und die Nutzung von Elementor wärmstens empfehlen. Es ist eine solide Plattform und die Zahl der Partnerintegrationen steigt weiter in die Höhe. Kombiniere es mit einem Plugin wie Kontaktformular DB und Sie können auch alle Ihre Formulareinsendungen sammeln.

Elementor Pro hat eine großartige Skriptverwaltungsoption direkt integriert. So können Sie Ihren Code eingeben:

Benutzerdefinierter Elementor-Code

  • Navigieren Sie zu Elementor > Benutzerdefinierter Code
  • Benennen Sie Ihren Code
  • Legen Sie den Ort fest, in diesem Fall das Ende Body Tag.
  • Legen Sie eine Priorität fest, wenn Sie mehr als ein Skript einfügen möchten, und legen Sie deren Reihenfolge fest.

Elementor-Formular-Einreichung bei GA-Event über GTM

  • Klicken Sie auf Aktualisieren
  • Sie werden aufgefordert, die Bedingung festzulegen und sie einfach auf den Standard aller Seiten zu setzen.
  • Aktualisieren Sie Ihren Cache und Ihr Skript ist live!

Vorschau Ihrer Google Tag Manager-Integration

Google Tag Manager verfügt über einen fantastischen Mechanismus, um eine Verbindung zu einer Browserinstanz herzustellen und Ihren Code tatsächlich zu testen, um zu beobachten, ob die Variablen ordnungsgemäß gesendet werden. Dies ist wichtig, da Google Analytics nicht in Echtzeit arbeitet. Sie können testen und testen und testen und wirklich frustriert sein, dass die Daten nicht in Google Analytics angezeigt werden, wenn Sie dies nicht bemerken.

Ich werde hier kein Tutorial zur Verfügung stellen, wie es geht Vorschau und Debugging von Google Tag Manager… Ich gehe davon aus, dass Sie es wissen. Ich kann mein Formular auf meiner verbundenen Testseite absenden und die an die GTM-Daten übertragenen Daten sehen, wie sie sein müssen:

Google Tag Manager-Datenschicht

In diesem Fall war die Kategorie als Formular fest codiert, das Ziel war das Kontaktformular und die Bezeichnung lautet Übermittlung.

In Google Tag Manager Datenvariablen, Ereignis, Trigger und Tag einrichten

Der letzte Schritt besteht darin, Google Tag Manager so einzurichten, dass diese Variablen erfasst und an ein für ein Ereignis eingerichtetes Google Analytics-Tag gesendet werden. Elad Levy beschreibt diese Schritte in seinem anderen Beitrag – Generische Ereignisverfolgung im Google Tag Manager.

Sobald diese eingerichtet sind, können Sie die Ereignisse in Google Analytics sehen!

Holen Sie sich Elementor Pro

Offenlegung: Ich verwende meine Partner-Links in diesem Artikel.

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.