ניתוח אירועים ב-Fluent Forms עם Google Analytics (v3) דרך Google Tag Manager #
מסמך זה חל על Google Analytics : Universal Analytics [גרסה 3]
על פי Google, Universal Analytics (v3) תיות מעוכה החל מ-1 ביולי 2023.
אנא עקבו אחר מדריך Google Analytics (GA4) שלנו לגרסה העדכנית ביותר של אינטגרציית Analytics.
- יצירת משתנים של Fluent Forms
- יצירת Trigger של Fluent Forms
- יצירת Tags של Fluent Forms
- התוצאה הסופית ב-Google Analytics
בואו נסתכל על סקירה קצרה של מה שהם Google Tag Manager (GTM) ו-Google Analytics (GA):
Google Tag Manager היא מערכת ניהול תגיות (TMS) המאפשרת לך לעדכן במהירות וביעילות קודי מדידה וקטעי קוד קשורים הידועים כתגיות באתר האינטרנט או באפליקציית הנייד שלך. לאחר הוספת קטע קוד Tag Manager קטן לפרויקט שלך, אתה יכול להציב בבטחה וביעילות הגדרות תגיות ניתוח ומדידה מממשק משתמש מבוסס אינטרנט.
Google Analytics כוללת תכונות שיכולות לעזור למשתמשים לזהות מגמות ודפוסים בכיצד מבקרים משתתפים באתרי האינטרנט שלהם. התכונות מאפשרות איסוף נתונים, ניתוח, מעקב, ויזואליזציה, דיווח ואינטגרציה עם יישומים אחרים.
בואו גם נסתכל על כיצד GTM ו-GA משתפים פעולה עם נתוני אתר או איך אנחנו יכולים לשתף או להזרים נתונים לכיוונים פלטפורמות שונות:
בהדרכה זו, אנו נעקוב אחרי 2 סוגים של אירועי Fluent Forms (Form View ו-Form Submission) עם Google Tag Manager ואז נעביר את האירועים ל-Google Analytics לייצוגים גרפיים וניתוח נוסף. יש הרבה שיטות לעקוב אחרי אירועי Form על ידי GTM. Fluent Forms משדרת jQuery Events במצבי Form שונים, לכן יהיה קל מאוד לעקוב אחרי אירועים ב-Google Tag Manager דרך Custom Code, וללא צורך בניפוי שגיאות מתקדם נוסף בתוך GTM, כמו ב-Preview Mode.
אנו מניחים ש-Google Tag Manager מותקן באתר שלך בעולם או בכל עמודים. אנא עקבו אחרי ההוראות להלן בעדינות ליישום ניתוח אירועי Fluent Forms דרך GTM.
הנה מספר האלמנטים שאנו יהיה משתפים פעולה איתם בתוך GTM עבור אירועי Fluent Forms שלנו ואז להעביר את הנתונים ל-Google Analytics:
| Tags | Triggers | משתנים (Variables) | |
| 2 | 1 | 3 (2 נדרשים, 1 אופציונלי) | |
| Type | cHTML, Universal Analytics |
Custom Event | 2 Data Layer, 1 Javascript |
נשתמש גם במשתנה מובנה [Event] לזיהוי סוג האירועים שהתרחשו ב-Fluent Forms.
שלב 1 – יצירת משתנים של Fluent Forms: #
משתנים הם Data Types להגדרת התכונות והערכים שלהם שמגיעים או מודחקים מאתר האינטרנט.
עבור לדלת הבקרה (Dashboard) של 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 |
צור משתנה נוסף באמצעות התצורה הבאה:
| Title | FluentFormEventAction |
| Variable Type | Data Layer Variable |
| Data Layer Variable Name | eventAction |
| Data Layer Version | Version 2 |
[אופציונלי] צור משתנה נוסף באמצעות התצורה הבאה להצגת Form Page Title (כותרת עמוד הטופס):
שלב 2 – יצירת Trigger של Fluent Forms: #
Triggers הם הדבר החשוב ביותר לזיהוי בדיוק מתי GTM תבצע משימה על פי כוונותינו. לדוגמה: כאשר דף אינטרנט נטוען עם Fluent Form, מה ייעשה ב-GTM כאשר מישהו שולח טופס Fluent.
ליצירת trigger עבור Fluent Forms, עבור אל Trigger והוסף Trigger חדש כמו להלן:
עכשיו עקבו אחרי הנתונים להלן עבור ה-trigger הלוקח:
| Title | FluentFormActivitiesEvent |
| Event Type | Custom Event |
| Event Name | FluentFormActivities |
| Trigger Fires on | All Custom Events |
שלב 3 – יצירת Tags של Fluent Forms: #
Tags הן הדברים שלהם אנו משתמשים Google Tag Manager. Tags יכולות להיות בסוגים שונים שהוגדרו על פי הצרכים שלנו. זה יותר כמו instance של אוטומציה כאשר trigger משדרגת וגומרת את המשימה המוגדרת ב-Tag.
אנחנו נשתמשים בסוג Google Analytics: Universal Analytics של Tag ואז נעביר את נתוני אירועי הטופס מאתר האינטרנט באמצעות Custom JavaScript Snippet המצורף לדפים אינטרנט גם על ידי Google Tag Manager עצמו על ידי Custom HTML נוסף סוג Tag.
בואו ניצור את Custom HTML Tag הראשון כמו להלן:
עבור אל Tags לחץ על New
אז בחר Tag Type כ-Custom HTML והנח את הקוד המותאם אישית המסופק להלן בתוך עורך ה-GTM Code עם הנתונים המסופקים להלן:
| Title | cHTML – FluentFormsDataPush |
| Tag Type | Custom HTML |
<script>
(function($){
var fluentForms = $('form.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 Field וחר Firing Triggers כ-Page View [ All Pages] כמו להלן:
עכשיו אנחנו כמעט קרוב להשגת המטרה שלנו ובצורך ליצור Tag אחרון אחד שיביא את נתוני האירוע ויעביר אותו ל-Google Analytics. נעצב גם את התכונות שישלחו ל-Google Analytics.
שוב עבור אל Tags וצור Tag חדש כמו להלן:
| Title | FluentFormEventData |
| Track Type | Event |
| Category | Fluent Forms |
| Action | {{Event}} |
| Label | {{FluentFormEventAction}} [{{FluentFormID}}] :{{FluentFormName}} |
| Google Analytics Settings | אנא עקוב אחרי ההוראות למטה |
צור משתנה חדש או בחר משתנה קיים שכבר מחובר לחשבון Google Analytics הרצוי שלך.
אם אתה רוצה ליצור חדש בחר Variable Type כ-Google Analytics Settings ובתוך Tracking ID הנח את Google Analytics Version 3 שלך או את ה-Universal Analytics Tracking Code המסורתי שנראה כמו UA-XXXXXXXX-X
לשיקול דעתך מציאת Tracking ID מ-Google Analytics מונחה גם להלן:
עבור אל לוח הבקרה (Dashboard) של Google Analytics שלך ואז לחץ על Admin (Gear Icon בתחתית השמאל של העמוד)
אז בחר את חשבון היעד או צור חדש עם הפרטים הרצויים שלך. בחר גם Property קיים אם יש לך כבר או צור חדש עם פרטים רצויים. תחת שם ה-Property Tracking Info Option זמין ואז לחץ עליו:
אז אתה תראה את Tracking Code option ולחץ כדי לקבל את Tracking ID כמו להלן:
עכשיו בואו נחזור ל-Tag האחרון שהיינו יוצרים. כאשר Google Analytics Settings גם נבחר עכשיו זה הזמן לבחור את ה-trigger בדיוק כמו בעבר עשינו עבור Custom HTML.
בפעם זו בחר את Trigger שיצרנו קודם בשם FluentFormActivitiesEvent
אז מהפופ-אפ של Selection בחר את FluentFormActivitiesEvent trigger:
עכשיו סיימנו את המשימות. אנחנו יכולים עכשיו לנפות את מה שעשינו בחי בפנים Preview Mode או להפוך את ההגדרות לציבוריות על ידי Publishing מה-Workspace.
הקלד שם Version Name משמעותי שיכול להיות הכל למטרות עתידיות אם משהו הולך לא בסדר בעבודה בעתיד זהה עבודות שנעשו עד עכשיו ותוכל להחזיר לשלב זה אם אנחנו אוהבים.
מכיוון ששיטה זו מאומתת עבור Fluent Forms אני הולך ל-Publish את Workspace שלי ואז בדוק ב-Google Analytics בעוד פתיחת עמוד שמכיל Fluent Form ואז שלח את הטופס עם כמה נתונים ובדוק את האירועים בתוך Google Analytics.
התוצאה הסופית ב-Google Analytics: #
טופס ה-Sample שמתבדק נראה כמו להלן:
לאחר טעינת דף אפילו בלי ללחוץ על דבר בעמוד הטופס שולח אירוע בשם FormView ל-GTM ואז הוא נפעל על ידי ההגדרה שלנו ועכשיו מוצג ב-Google Analytics. גם לאחר הגשת הטופס אנחנו יכולים לראות שיש אירוע נוסף שדחוף שהוא FormSubmitted.
אנחנו יכולים להבחין שתווית ה-Event מכילה את Event Name כולל Form Number באתר ואז כותרת העמוד שהכילה את הטופס.
זה הכל. עכשיו תקבל אירועים ל-Google Analytics עבור כל ה-Fluent Forms באתר שלך.