עקיבת אירועים של Fluent Forms ב-Google Analytics (GA4) דרך Google Tag Manager #
מסמך זה חל על הגרסה העדכנית ביותר של Google Analytics : GA4
הודעה: זה יעבוד הן בטפסים קלסיים והן בטפסים שיחתיים
- יצירת משתנים של Fluent Forms
- יצירת טריגר של Fluent Forms
- יצירת תגיות של Fluent Forms
- התוצאה הסופית ב-Google Analytics
בואו נניח שאתה כבר מכיר את Google Analytics גרסה 3 ואת אינטגרציית Fluent Forms. מכיוון ש-Google Analytics 4 הוא גרסה חדשה יותר, קצת יותר מורכבת ושונה מגרסה 3 המכונה “Universal Analytics”, אנא סקור קודם את המדריך גרסה 3 שלנו להבנה טובה יותר. זה לא יהיה בעיה אם אתה חדש וגם עוקב ישירות אחרי המדריך זה. אנחנו ננסה לספק מספיק, קל וצעדים ברורים כדי שתראה עד כמה Fluent Forms הוא חזק במונחים של אינטגרציה וניתוח עם פלטפורמות מובילות בעולם כמו Google Analytics דרך Google Tag Manager.
אין עוד הקדמה. בואו נתחיל!
קודם כל בואו נראה כיצד Google Tag Manager (GTM) ו-Google Analytics (GA) משתפים פעולה עם נתוני אתר או אנחנו יכולים לשתף או להזרים נתונים לכיוון פלטפורמות שונות:
במדריך זה, אנחנו נעקוב אחרי 2 סוגים של אירועי Fluent Forms (Form View (צפייה בטופס) ו-Form Submission (הגשת טופס)) עם Google Tag Manager ואז נעביר את האירועים ל-GA לייצוגים גרפיים וניתוח נוסף. ישנן הרבה שיטות לעקוב אחרי אירועי טופס על ידי GTM. Fluent Forms משדרת jQuery Events במצבי טופס שונים, כך שיהיה קל מאוד לעקוב אחרי אירועים עם Google Tag Manager דרך Custom Code (קוד מותאם אישית), וקשיוט מתקדם נוסף לא נדרש בתוך GTM, כמו במצב Preview (תצוגה מקדימה).
אנחנו מניחים שGoogle Tag Manager מותקן באתר שלך באופן גלובלי או בכל הדפים. אנא עקוב בעדינות אחרי ההוראות למטה כדי ליישם את עקיבת אירועי Fluent Forms דרך GTM.
הנה מספר האלמנטים שאנחנו נתקיים איתם בתוך GTM עבור אירועי Fluent Forms שלנו ואז נעביר את הנתונים ל-Google Analytics:
| תגיות (Tags) | טריגרים (Triggers) | משתנים (Variables) | |
| 2 | 1 | 3 (2 נדרשים, 1 אופציונלי) | |
| סוג (Type) | cHTML, GA 4 Configuration |
Custom Event (אירוע מותאם אישית) | 2 Data Layer (שכבת נתונים), 1 JavaScript |
אנחנו גם נשתמש במשתנה מובנה [Event (אירוע)] לזיהוי סוג האירועים שהתרחשו ב-Fluent Forms.
1. יצירת משתנים של Fluent Forms: #
משתנים הם סוגי נתונים להגדרת המאפיינים והערכים שלהם שמגיעים או נדחפים מהאתר.
עבור ל-Google Tag Manager לוח הבקרה שלך, עבור ל-Variables (משתנים) ואז תחת User-Defined Variables (משתנים שהוגדרו על ידי המשתמש), ואז לחץ על כפתור ה-New (חדש).
מאפייני ה-Variable (משתנה) שלך צריכים להיות כמו זה:
| Title (כותרת) | FluentFormID |
| Variable Type (סוג משתנה) | Data Layer Variable (משתנה שכבת נתונים) |
| Data Layer Variable Name (שם משתנה שכבת נתונים) | FluentFormID |
| Data Layer Version (גרסת שכבת נתונים) | Version 2 (גרסה 2) |
צור משתנה נוסף בעזרת התצורה הבאה:
| Title (כותרת) | FluentFormEventAction |
| Variable Type (סוג משתנה) | Data Layer Variable (משתנה שכבת נתונים) |
| Data Layer Variable Name (שם משתנה שכבת נתונים) | eventAction |
| Data Layer Version (גרסת שכבת נתונים) | Version 2 (גרסה 2) |
[אופציונלי] צור משתנה נוסף בעזרת התצורה הבאה כדי להציג את כותרת הדף של הטופס (Form Page Title):
2. יצירת טריגר של Fluent Forms: #
טריגרים הם הדבר החשוב ביותר לזיהוי בדיוק מתי GTM יעשה משימה בהתאם לכוונות שלנו. לדוגמה: כאשר דף אתר נטען עם Fluent Form, מה GTM יעשה כאשר מישהו שולח Fluent Form?
ליצירת טריגר עבור Fluent Forms, עבור ל-Trigger (טריגר) והוסף טריגר חדש כמתחת:
עכשיו עקוב אחרי הנתונים הבאים של הטריגר בעלון המטרה:
| Title (כותרת) | FluentFormActivitiesEvent |
| Event Type (סוג אירוע) | Custom Event (אירוע מותאם אישית) |
| Event Name (שם אירוע) | FluentFormActivities |
| Trigger Fires on (טריגר משדר על) | All Custom Events (כל אירועים מותאמים אישית) |
3. יצירת תגיות של Fluent Forms: #
תגיות הן הדברים שעבורם אנחנו משתמשים ב-Google Tag Manager. תגיות יכולות להיות בסוגים שונים המוגדרים בהתאם לצרכים שלנו. זה יותר כמו מופע אוטומציה כאשר טריגר משדר ומוביל למשימה המוגדרת בתגית.
אנחנו נשתמש ב-Google Analytics: GA4 Configuration סוג של Tag (תגית) ואז נעביר את נתוני אירועי הטופס מהאתר בעזרת Custom JavaScript Snippet (קטע JavaScript מותאם אישית) מחובר לדפי אתר וגם על ידי Google Tag Manager עצמו על ידי עוד Custom HTML (HTML מותאם אישית) סוג תגית.
בואו ניצור תחילה את ה-Custom HTML (HTML מותאם אישית) תגית כמתחת:
עבור ל-Tags (תגיות) ולחץ על New (חדש)
לאחר מכן בחר Tag Type (סוג תגית) כ-Custom HTML (HTML מותאם אישית) והכנס את הקוד המותאם אישית שסופק למטה בתוך עורך הקוד של GTM עם הנתונים שסופקו למטה:
| Title (כותרת) | cHTML – FluentFormsDataPush |
| Tag Type (סוג תגית) | Custom HTML (HTML מותאם אישית) |
<script>
(function($){
var fluentForms = $('.frm-fluent-form');
fluentForms.each(function() {
var $form = $(this);
var formId = $form.attr('data-form_id');
dataLayer.push({
'event': 'FluentFormActivities',
'eventCategory': 'FluentForm',
'eventAction': 'FormView',
'FluentFormID' : formId
});
$form.on('fluentform_submission_success', function() {
dataLayer.push({
'event': 'FluentFormActivities',
'eventCategory': 'FluentForm',
'eventAction': 'FormSubmitted',
'FluentFormID' : formId
});
});
});
}(jQuery));
</script>
כאשר הקוד הזה מוכנס אנא לחץ בכל מקום בתוך שדה ה-Triggering (הפעלה) ובחר Firing Triggers (הפעלת טריגרים) כ-Page View [ All Pages] (צפייה בדף [כל הדפים]) כמתחת:
עכשיו אנחנו כמעט קרוב להשגת היעד שלנו וצריכים ליצור תגית אחת אחרונה שתביא את נתוני האירוע ואז תעביר אותם ל-Google Analytics. אנחנו גם נעצב את המאפיינים שישלחו ל-Google Analytics.
שוב עבור ל- Tags (תגיות) ובחר Google Tag (תגית Google) כמתחת:
עכשיו כאן אתה צריך לתת Google Analytics 4 Measurement ID (מזהה מדידה של Google Analytics 4) ואז להגדיר את משתנה ההגדרות.
| Title (כותרת) | FluentForms – GA4 |
| Tag Type (סוג תגית) | Google Analytics: GA4 Configuration |
| Measurement ID (מזהה מדידה) | G-XXXXXXXX [עקוב אחרי הוראות למטה כדי לתפוס קוד זה] |
שדות להגדרה:
| debug_mode | true | לצפייה בחשיפה |
| EventType | {{Event}} | בחר כמשתנה |
| EventAction | {{FluentFormEventAction}} | בחר כמשתנה |
| FormID | {{FluentFormID}} | בחר כמשתנה |
| FormName | {{FluentFormName}} | בחר כמשתנה |
מזהה מדידה של Google Analytics 4 #
כדי לקבל את מזהה המדידה של Google Analytics 4 אנא עקוב אחרי ההוראה הבאה:
עבור ל-לוח הבקרה של Google Analytics ואז לחץ על Admin (ניהול) (סמל ההילוך בצד שמאל בתחתית הדף)
לאחר מכן בחר בחשבון היעד או צור חשבון חדש עם הפרטים הרצויים שלך. כמו כן, בחר כל רכוש קיים אם כבר יש לך או צור כל רכוש חדש עם הפרטים הרצויים. תחת שם הרכוש, אפשרות Data Streams (זרמי נתונים) זמינה ואז לחץ עליה.
עכשיו צור DataStream (זרם נתונים) חדש כ-Web (אתר) אם האתר שלך עדיין לא מוגדר. ספק URL מתאים ללא פרוטוקול ו-Stream Name (שם הזרם).
[אופציונלי] לאחר מכן אנא לחץ על סמל ההילוך כדי לבחור את הנתונים שנצטרך עבור Fluent Forms עקיבת אירועים (Event Tracking) בלבד. נצטרך רק Page Views (צפיות בדף) ולא נצטרך סוגים אחרים. אלה סוגים של נתונים גם יביאו נתונים מיותרים ל-Google Analytics שלא נצטרך עבור אירועי Fluent Forms.
עכשיו לאחר לחיצה על Save (שמור) תראה את פרטי זרם הנתונים ועכשיו העתק את Measurement ID (מזהה המדידה), שאנחנו צריכים להכניס ב-Google Tag Manager.
עכשיו בואו נחזור ל-Tag (תגית) האחרונה שיצרנו. כאשר גם Google Analytics Setting (הגדרה) נבחרה, זה הזמן לבחור את הטריגר כמו שעשינו בעבר עבור Custom HTML (HTML מותאם אישית).
הפעם בחר את Trigger (הטריגר) שיצרנו בעבר בשם FluentFormActivitiesEvent
עכשיו סיימנו עם משימות. אנחנו יכולים עכשיו להשתמש בחשיפה למטה מה שעשינו בחי במצב ה-Preview (תצוגה מקדימה) או לעשות את ההגדרות בציבור על ידי Publishing (פרסום) מ-ה-Workspace (מרחב עבודה).
הקלד ב-Version Name (שם גרסה) משמעותי, שיכול להיות כל דבר למטרות עתידיות; אם משהו הולך לא בסדר תוך כדי עבודה בעתיד, זהה עבודות שבוצעו עד עכשיו וחזור לשלב זה אם אנחנו אוהבים.
מכיוון ששיטה זו אושרה עבור Fluent Forms אני הולך לפרסם את מרחב העבודה שלי ואז לבדוק ב-Google Analytics על ידי פתיחת דף המכיל Fluent Form ואז שליחת הטופס עם כמה נתונים ובדיקת אירועים בתוך Google Analytics.
4. התוצאה הסופית ב-Google Analytics #
טופס הדוגמה שנבדק נראה כמו הבא:
לאחר טעינת הדף, אפילו ללא לחיצה על דבר כלשהו בדף, הטופס שולח אירוע בשם FormView ל-GTM, ואז הוא מופעל על ידי התצורה שלנו ועכשיו מופיע ב-Google Analytics.
הרחב את אירוע ה-page_view (צפייה בדף) לפרטים נוספים.
כמו כן לאחר הגשת הטופס, אנחנו יכולים לראות שיש עוד אירוע שדחוף שהוא FormSubmitted (טופס הוגש)
הרחב כל 4 סוגים של Event Data (נתוני אירוע) כדי לראות פרטים נוספים:
יש תכונה מתקדמת מאוד של Google Analytics 4 שנחקור עבור אירועי Fluent Forms שלנו. בזמן תצורת Google Tag Manager שלנו תצורת Google Analytics GA4 הפעלנו Debug View (צפייה בחשיפה), ועכשיו אנחנו יכולים לבדוק את זה עכשיו כמתחת:
זה הכל. עכשיו אתה תקבל אירועים ל-Google Analytics עבור כל Fluent Forms באתר שלך.
תהנה מ-Fluent Forms כתוסף הטופס החזק ביותר עבור WordPress!