Contact Form 7 παρακολούθηση συμβάντων με το Google Tag Manager και Google Analytics 4

Το Contact form 7 είναι ένα απο τα πιο δημοφιλή plugins του Wordpress, με πολλές δυνατότητες εύκολο στην χρήση και μεγάλη ευελιξία, υπάρχουν φορές που σε μια ιστοσελίδα-ηλεκτρονικό κατάστημα χρειάζετε να μετρήσουμε την απόδοση μίας ή περισσοτέρων φορμών όπως:

• Ποια φόρμα χρησιμοποιούν περισσότερο οι χρήστες
• Από ποια συσκευή προέρχονται οι φόρμες
• Τι δυσκολίες αντιμετωπίζουν οι χρήστες στην συμπλήρωση μιας φόρμας

Ένας από τους δημοφιλείς τρόπους για να παρακολουθούμε οποιαδήποτε αλληλεπίδραση στη ιστοσελίδα / ηλεκτρονικό κατάστημα μας είναι με τον Διαχειριστή ετικετών της Google-Google Tag Manager.
Συνεχίζοντας παρακάτω θα σας αναλύσω το τρόπο για να παρακολουθήσετε την αποστολή ή μη μιας φόρμας επικοινωνίας (Contact Form 7) με την χρήση του Google Tag Manager σε συνδυασμό με το Google Analytics 4.
Κάποιοι ίσως χρησιμοποιείται το Universal Analytics, προτιμώ να χρησιμοποιώ το GA4 ωστόσο θα ετοιμάσω έναν οδηγό και για το Universal Analytics, εδώ και κάποιους μήνες χρησιμoποιώ το GA4 και όχι το UA γιατί μου δίνει την δυνατότητα απευθείας σύνδεσης με το BigQuery και γιατί οι όποιες μετρήσεις είναι event-based.

Υπάρχουν διάφοροι τρόποι που μπορείτε να υλοποιήσετε για την παρακολούθηση του Contact Form 7 με το GTM ωστόσο πιθανόν να συναντήσετε κάποια προβλήματα και περιορισμούς με αυτούς, η μέθοδος που θα σας περιγράψω παρακάτω είναι ολοκληρωμένη και λειτουργεί απροβλημάτιστα.

Για να λειτουργήσει η μέθοδος που θα σας περιγράψω στην συνέχεια πρέπει :

• Μετά την αποστολή της φόρμας να μην γίνεται redirect σε άλλη σελίδα.
• Η φόρμα σας να αποτελείται από μια σελίδα, φόρμες πολλαπλών σελίδων δεν καλύπτονται από αυτή την μέθοδο

Η μέθοδος που χρησιμοποιώ για να καταγράψω την αποστολή της φόρμας επικοινωνίας βασίζεται στα DOM events της Contact Form 7 που στέλνονται μετα την αποστολή, ακολουθεί η λίστα με τα DOM events:

• wpcf7invalid - Ενεργοποιείται όταν η υποβολή φόρμας έχει ολοκληρωθεί με επιτυχία, αλλά δεν έχει σταλεί αλληλογραφία επειδή υπάρχουν πεδία με μη έγκυρη τιμή ή καθόλου.
• wpcf7spam - Ενεργοποιείται όταν η υποβολή φόρμας έχει ολοκληρωθεί με επιτυχία, αλλά δεν έχει σταλεί αλληλογραφία επειδή έχει εντοπιστεί πιθανή δραστηριότητα ανεπιθύμητης αλληλογραφίας.
• wpcf7mailsent - Ενεργοποιείται όταν η υποβολή φόρμας έχει ολοκληρωθεί με επιτυχία και έχει σταλεί αλληλογραφία.
• wpcf7mailfailed - Ενεργοποιείται όταν η υποβολή φόρμας έχει ολοκληρωθεί με επιτυχία, αλλά για κάποιο λόγο απέτυχε στην αποστολή αλληλογραφίας.
• wpcf7submit - Ενεργοποιείται όταν η υποβολή φόρμας έχει ολοκληρωθεί με επιτυχία, ανεξάρτητα από άλλα συμβάντα.

Το event που παρακολουθώ για την ορθή αποστολή της φόρμας είναι το wpcf7mailsent.

Προχωράμε με την δημιουργία των tags, trigger, variables που χρειαζόμαστε στον Google Tag Manager

Δημιουργία event-listener

Το πρώτο βήμα είναι να δημιουργήσουμε ένα tag που θα περιμένει να ακούσει την υποβολή της φόρμας, για να γίνει αυτό πρέπει να δημιουργήσουμε ένα tag που σαν Tag Type θα επιλέξουμε Custom HTML και μέσα στο HTML πλαίσιο θα κάνουμε επικόλληση το script που ακολουθεί

Στη συνέχεια στο πεδίο Triggering επιλέγουμε το All pages εφόσον θέλουμε να παρακαλουθούμε όλες τις σελίδες, αν θέλουμε να παρακολουθούμε 1-2 σελίδες μπορούμε να το περιορισούμε.
Και στο τέλος δίνουμε ένα σχετικό όνομα και πατάμε Save.

Δημιουργία μεταβλητών που χρειαζόμαστε

Συνεχίζοντας αν υποθέσουμε ότι έχουμε μια φόρμα επικοινωνίας που αποστέλλεται σε διάφορα τμήματα της εταιρείας μας και θέλουμε να πάρουμε σαν στατιστικό πόσες φόρμες λαμβάνει κάθε τμήμα και τι αφορά  θα χρειαστεί να αντλήσουμε από την φόρμα τα :

• Κωδικός φόρμας - formId
• Θέμα φόρμας - Subject
• Τμήμα - Department

Οπότε το επόμενο βήμα είναι να δημιουργήσουμε αυτές τις τρεις μεταβλητές στο Google Tag Manager, επιλέγουμε δεξιά Variables  και στο User-Defined Variables επιλέγουμε New εκεί επιλέγουμε Data layer Variables δίνουμε το όνομα της μεταβλητής που επιθυμούμε και πατάμε Save επαναλαμβάνουμε το ίδιο και για τις άλλες που αναφέρθηκαν πιο πάνω.

Όπως βλέπετε στα εικονίδια των μεταβλητών στο Data Layer Variable Name χρησιμοποίησα σαν ονόματα τα

• formId για το dlv - formId
• response.2.value για dlv - Form_Subject
• response.3.value για dlv - Form_Department

Οι παραπάνω μεταβλητές προκύπτουν από την φόρμα που στέλνει ο χρήστης η μεταβλητή formId είναι το Id της φόρμας οι άλλες δύο response.2 & 3.value είναι μεταβλητές της φόρμας που συμπληρώνει ο χρήστης και συμπεριλαμβάνονται σε μορφή πίνακα, στην παρακάτω εικόνα απο το debug view του Google Tag Manager φαίνεται η δομή των μεταβλητών και του πίνακα.

Δημιουργία trigger

Μέχρι τώρα έχουμε δημιουργήσει το event listener για να συλλέξουμε τα πεδία της φόρμας και τις μεταβλητές που θα αποθηκευτούν τα πεδία της φόρμας που χρειαζόμαστε, το επόμενο βήμα είναι να δημιουργήσουμε το trigger που θα ενεργοποιεί το tag που θα στέλνει τα δεδομένα στο Google Analytics 4 καθώς και το Tag που θα στέλνει τα δεδομένα.
Για να δημιουργήσουμε το trigger επιλέγουμε απο το μενού αριστερά Triggers και μετά New δίνουμε ένα σχετικό όνομα και στο Trigger Type επιλέγουμε Custom και στο Event name βάζουμε το cf7submission αφήνουμε το This trigger fires on
όπως είναι δηλαδή τσεκαρισμένο στο All Custom Events και πατάμε Save.

Δημιουργία Tag αποστολής δεδομένων στο Google Analytics 4

Παραθέτω την εικόνα του TAG

Όπως βλέπετε στην εικόνα που παρέθεσα σαν Tag Type επιλέγουμε Google Analytics: GA4 Event στο Configuration βάζουμε το Track-ID του Google Analytics 4 (εδώ δεν το βλέπετε γιατί χρησιμοποιώ μεταβλητή), στο Event Name βάζουμε το όνομα που θα εμφανιστεί στο Google Analytics 4 (contact_form_leads)  και σαν Event Parameters βάζουμε τις τρείς μεταβλητές που θα πάρουμε στο Google Analytics 4

• form_id  —— {{dlv - formId}}
• form_subject —— {{dlv - Form_Subject}}
• form_department  —— {{dlv - Form_Department}}
  Στο Triggering - Firing Triggers επιλέγουμε το Custom Event που δημιουργήσαμε στο βήμα 3, πατάμε Save και είμαστε έτοιμοι να δοκιμάσουμε.

Το τελευταίο βήμα που πρέπει να κάνουμε είναι να δοκιμάσουμε αν η αποστολή της φόρμα στέλνει το event με τα αποτελέσματα που έχουμε επιλέξει στο Google Analytics 4, για να το δούμε αυτό στο Google Tag Manager επιλέγουμε πάνω δεξιά το κουμπι preview στο url βάζουμε την διευθυνση της ιστοσελίδας μας πατάμε connect και μετά μας ανοίγει ένα παράθυρο με την ιστοσελίδα μας πηγαίνουμε στην φόρμα επικοινωνίας την συμπληρώνουμε και κάνουμε μια αποστολή.
Εφόσον έχουν πάει όλα καλά θα δούμε το event να εμφανίζεται στο DebugView του Google Analytics 4 όπως φαίνεται στην παρακάτω εικόνα.

Κατόπιν κλείνουμε το preview του Google Tag Manager και επιλέγουμε Submit στη σελίδα του Google Tag Manager για οριστικοποιηθούν οι προσθήκες που κάναμε και είμαστε έτοιμοι.

Τα νέα events στα reports του Google Analytics 4 θέλουν περίπου 24 ώρες για να εμφανιστούν οπότε αν θέλετε να πάρετε κάποιο σχετικό report σχετικά με παραπάνω event πρέπει να περιμένετε.

Μέσο του Google Tag Manager μπορείτε να καταγράψετε και τα υπόλοιπα DOM Events που σας δίνει η Contact Form 7 καθώς και να χρησιμοποιήσετε όσες μεταβλητές θέλετε, ανέφερα το συγκεκριμένο παράδειγμα για να σας δείξω τη λογική και πως λειτουργεί, εκτός του Contact Form 7 η ίδια περίπου διαδικασία χρειάζετε και για το plugin Gravity Form.

Διαβάζοντας αυτό τον οδηγό θα παρατηρήσετε οτι δεν χρειάζετε να γίνει καμία προσθήκη ή μεταβολή κώδικα στο διαχειριστικό του Wordpress το μόνο που χρειάζετε είναι να χρησιμοποιείτε το plugin Contact Form 7 και να έχετε εγκαταστήσει το code snippet του Google Tag Manager που περιγράφω στο link που ακολουθεί.

Τι είναι ο Google Tag Manager

Αν το δοκιμάσετε και δεν καταφέρατε να το υλοποιήσετε ή αν έχετε κάποια απορία σχετικά με το Google Tag Manager επικοινωνήστε μαζί μου και θα χαρώ να βοηθήσω.