Τρόπος παρακολούθησης υποβολών φόρμας Elementor σε Συμβάντα Google Analytics χρησιμοποιώντας το JQuery

Τρόπος παρακολούθησης υποβολών φόρμας Elementor σε Συμβάντα Google Analytics

Εργάζομαι σε έναν ιστότοπο πελάτη WordPress τις τελευταίες εβδομάδες που έχει αρκετές πολυπλοκότητες. Χρησιμοποιούν WordPress με ενσωμάτωση σε ActiveCampaign για την καλλιέργεια οδηγών και α Zapier ένταξη στο Πώληση Zendesk μέσω Elementor FormsΤο Είναι ένα εξαιρετικό σύστημα… που ξεκινά τις καμπάνιες στάγδην σε άτομα που ζητούν πληροφορίες και προωθούν τον κατάλληλο αντιπρόσωπο πωλήσεων όταν τους ζητηθεί. Είμαι πραγματικά εντυπωσιασμένος με την ευελιξία και την εμφάνιση και την αίσθηση του Elementor.

Το τελευταίο βήμα ήταν η παροχή ενός πίνακα εργαλείων ανάλυσης για τον πελάτη μέσω του Google Analytics που τους παρείχε απόδοση από μήνα σε μήνα στις υποβολές φόρμας. Έχουν εγκατεστημένο τον Διαχειριστή ετικετών Google, επομένως καταγράφουμε ήδη συναλλαγές ηλεκτρονικού εμπορίου και δραστηριότητα προβολής YouTube στον ιστότοπο.

Έκανα αρκετές προσπάθειες να χρησιμοποιήσω DOM, κανόνες ετικέτας και συμβάντα στο Google Tag Manager για να καταγράψω την επιτυχημένη υποβολή φόρμας για το Elementor, αλλά δεν είχα καμία τύχη. Δοκίμασα πολλούς διαφορετικούς τρόπους παρακολούθησης της σελίδας, παρακολουθώντας το μήνυμα επιτυχίας που θα εμφανιζόταν μέσω του AJAX και απλώς δεν λειτουργούσε. Έτσι… Έψαξα και βρήκα μια εξαιρετική λύση από τον Tracking Chef, που ονομάζεται Αλεξίσφαιρο στοιχείο παρακολούθησης φόρμας με GTM.

Το σενάριο χρησιμοποιεί jQuery και το Διαχειριστή ετικετών Google για να πιέσετε το Εκδήλωση Google Analytics όταν η φόρμα υποβληθεί επιτυχώς. Με μερικές μικρές τροποποιήσεις και μία βελτίωση σύνταξης, είχα όλα όσα χρειαζόμουν. Εδώ είναι ο κωδικός:

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

Είναι αρκετά έξυπνο, να παρακολουθείς την επιτυχημένη υποβολή και μετά να περνάς Μορφή ως κατηγορία, το όνομα προορισμού ως η Δράση, και Υποβολή ως ετικέτα. Κάνοντας τον προγραμματικό στόχο, μπορείτε απλά να έχετε αυτόν τον κώδικα στο υποσέλιδο κάθε σελίδας για να παρατηρήσετε μια υποβολή φόρμας. Έτσι ... καθώς προσθέτετε ή τροποποιείτε φόρμες, δεν χρειάζεται ποτέ να ανησυχείτε για την ενημέρωση του σεναρίου ούτε για την προσθήκη του σε άλλη σελίδα.

Εγκαταστήστε το Script Via Elementor Custom Code

Εάν είστε μια εταιρεία, θα συνιστούσα ανεπιφύλακτα την απεριόριστη αναβάθμιση και χρήση του Elementor για όλους τους πελάτες σας. Είναι μια σταθερή πλατφόρμα και ο αριθμός των ενσωματώσεων συνεργατών συνεχίζει να εκτοξεύεται. Συνδυάστε το με ένα πρόσθετο όπως Φόρμα επικοινωνίας DB και μπορείτε επίσης να συλλέξετε όλες τις υποβολές της φόρμας σας.

Element Pro έχει μια εξαιρετική επιλογή διαχείρισης σεναρίων ενσωματωμένη. Δείτε πώς μπορείτε να εισαγάγετε τον κωδικό σας:

Προσαρμοσμένος κώδικας Elementor

  • Πλοηγηθείτε στο Στοιχείο> Προσαρμοσμένος κώδικας
  • Ονομάστε τον κωδικό σας
  • Ορίστε τη θέση, σε αυτήν την περίπτωση το τέλος ετικέτα σώματος.
  • Ορίστε μια προτεραιότητα εάν έχετε περισσότερα από ένα σενάρια που θέλετε να εισαγάγετε και ορίστε τη σειρά τους.

Υποβολή φόρμας Elementor στο GA Event μέσω GTM

  • Κάντε κλικ στην ενημέρωση
  • Θα σας ζητηθεί να ορίσετε την συνθήκη και απλώς να την ορίσετε στην προεπιλογή όλων των σελίδων.
  • Ανανεώστε την προσωρινή μνήμη και το σενάριό σας είναι ζωντανό!

Προεπισκόπηση της ενσωμάτωσης του Διαχειριστή ετικετών Google

Ο Διαχειριστής ετικετών Google διαθέτει έναν φανταστικό μηχανισμό για τη σύνδεση με μια παρουσία του προγράμματος περιήγησης και τον έλεγχο του κώδικα σας για να διαπιστώσει εάν οι μεταβλητές αποστέλλονται σωστά ή όχι. Αυτό είναι απαραίτητο επειδή το Google Analytics δεν είναι σε πραγματικό χρόνο. Μπορείτε να δοκιμάσετε και να δοκιμάσετε και να απογοητευτείτε πραγματικά ότι τα δεδομένα δεν εμφανίζονται στο Google Analytics αν δεν το καταλάβατε.

Δεν πρόκειται να δώσω ένα σεμινάριο εδώ για το πώς προεπισκόπηση και εντοπισμός σφαλμάτων στον Διαχειριστή ετικετών Google… Θα υποθέσω ότι ξέρεις. Μπορώ να υποβάλω τη φόρμα μου στη συνδεδεμένη δοκιμαστική μου σελίδα και να δω τα δεδομένα που ωθούνται στα δεδομένα GTM όπως πρέπει:

επίπεδο δεδομένων διαχειριστή ετικετών google

Σε αυτήν την περίπτωση, η κατηγορία ήταν σκληρά κωδικοποιημένη ως Φόρμα, στόχος ήταν η φόρμα Επικοινωνήστε μαζί μας και η ετικέτα είναι Υποβολή.

Στο Διαχειριστή ετικετών Google Ρύθμιση μεταβλητών δεδομένων, συμβάντος, ενεργοποίησης και ετικέτας

Το τελευταίο βήμα για αυτό είναι να ρυθμίσετε τον Διαχειριστή ετικετών Google για να καταγράψει αυτές τις μεταβλητές και να τις στείλετε σε μια ετικέτα Google Analytics που έχει δημιουργηθεί για ένα συμβάν. Ο Elad Levy αναφέρει αυτά τα βήματα στην άλλη του ανάρτηση - Γενική παρακολούθηση συμβάντων στον Διαχειριστή ετικετών Google.

Μόλις ρυθμιστούν, θα μπορείτε να δείτε τα Συμβάντα στο Google Analytics!

Αποκτήστε το Elementor Pro

Αποκάλυψη: Χρησιμοποιώ τους συνδέσμους συνεργατών μου σε αυτό το άρθρο.

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.