כיצד לעקוב אחר הגשת טפסים של Elementor באירועי Google Analytics באמצעות JQuery

כיצד לעקוב אחר הגשת טפסים של Elementor באירועי Google Analytics

אני עובד על אתר לקוח וורדפרס בשבועות האחרונים שיש בו לא מעט מורכבות. הם משתמשים וורדפרס עם שילוב ל ActiveCampaign לטיפוח לידים וא Zapier שילוב ל זנדסק מכר באמצעות אלמנטור טפסים. זוהי מערכת נהדרת ... פותחת קמפיינים של טפטוף לאנשים המבקשים מידע ומובילים לנציג המכירות המתאים כאשר מתבקשים. אני ממש מתרשם מהגמישות והצורה והתחושה של אלמנטור.

השלב האחרון היה מתן לוח מחוונים ללקוח באמצעות Google Analytics שסיפק לו ביצועים מחודש לחודש בהגשת טפסים. יש להם את מנהל התגים של Google מותקן, כך שאנו כבר לוכדים עסקאות מסחר אלקטרוני ופעילות צפייה ב- YouTube באתר.

עשיתי מספר ניסיונות לנצל DOM, טריגרים ואירועים בתוך מנהל התגים של Google כדי ללכוד את הגשת הטופס המוצלחת עבור Elementor אך לא היה לי מזל כלל. בדקתי המון דרכים שונות לפקח על הדף, חיפשתי את הודעת ההצלחה שתופיע באמצעות AJAX וזה פשוט לא עבד. אז ... חיפשתי ומצאתי פתרון מצוין מאת Tracking Chef, שנקרא מעקב אחר טפסים של Elementor עם GTM.

התסריט מנצל jQuery ומנהל התגים של Google לדחוף את אירוע גוגל אנליטיקס כאשר הטופס נשלח בהצלחה. עם כמה עריכות קלות ושיפור תחביר אחד, היה לי כל מה שהייתי צריך. הנה הקוד:

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

זה די גאוני, צופה אחר ההגשה המוצלחת ואז עובר טופס כקטגוריה, ה שם היעד כמו הפעולה, ו הגשה כתווית. על ידי הפיכת היעד לתכנותי, תוכל פשוט להכניס את הקוד הזה לכותרת התחתונה של כל דף כדי לצפות בהגשת טופס. אז ... כשאתה מוסיף או משנה טפסים, לעולם לא תדאג לעדכן את הסקריפט או להוסיף אותו לדף אחר.

התקן את הסקריפט באמצעות קוד מותאם אישית

אם אתה סוכנות, אני ממליץ בחום על השדרוג הבלתי מוגבל והשימוש ב- Elementor עבור כל הלקוחות שלך. זוהי פלטפורמה מוצקה ומספר האינטגרציות של שותפים ממשיך לזנק. חבר אותו עם תוסף כמו צור קשר עם טופס DB ותוכל גם לאסוף את כל הגשות הטופס שלך.

פרו Elementor יש אפשרות נהדרת לניהול תסריטים ישירות. כך תוכל להזין את הקוד שלך:

קוד מותאם אישית של אלמנטור

  • נווט אל Elementor> קוד מותאם אישית
  • תן שם לקוד שלך
  • הגדר את המיקום, במקרה זה את הסוף תג גוף.
  • הגדר עדיפות אם יש לך יותר מסקריפט אחד שברצונך להוסיף והגדר את הסדר שלו.

הגשת טופס אלמנטור לאירוע GA באמצעות GTM

  • לחץ על עדכן
  • תתבקש להגדיר את התנאי ופשוט להגדיר אותו כברירת מחדל של כל הדפים.
  • רענן את המטמון והתסריט שלך חי!

צפה בתצוגה מקדימה של שילוב מנהל התגים שלך ב- Google

למנהל התגים של Google יש מנגנון פנטסטי לחיבור למופע דפדפן ולמעשה לבדוק את הקוד שלך כדי לראות אם המשתנים נשלחים כראוי או לא. זה חיוני מכיוון ש- Google Analytics אינו בזמן אמת. אתה יכול לבדוק ולבדוק ולבדוק ובאמת להתסכל מכך שהנתונים אינם מופיעים ב- Google Analytics אם לא הבנת זאת.

אני לא מתכוון לתת כאן הדרכה כיצד לעשות זאת תצוגה מקדימה וניפוי באגים של מנהל התגים של Google… אני מניח שאתה יודע. אני יכול לשלוח את הטופס שלי בדף הבדיקה המחובר שלי ולראות את הנתונים מועברים לנתוני GTM כפי שהם צריכים להיות:

שכבת הנתונים של מנהל התגים של גוגל

במקרה זה, הקטגוריה הייתה מקודדת כטופס, המטרה הייתה טופס צור קשר והתווית היא הגשה.

ב- Google Tag Manager הגדר משתני נתונים, אירוע, טריגר ותג

השלב האחרון בנושא זה להגדיר את מנהל התגים של Google כדי ללכוד את המשתנים האלה ולשלוח אותם לתג של Google Analytics שהוגדר לאירוע. אלעד לוי מפרט את השלבים האלה בפוסט השני שלו - מעקב אחר אירועים כללי במנהל התגים של Google.

לאחר הגדרת אלה, תוכל לראות את האירועים ב- Google Analytics!

קנה את Elementor Pro

גילוי נאות: אני משתמש בקישורי השותפים שלי לאורך מאמר זה.

תגובות 6

  1. 1
  2. 3

    אני משתמש במספר שלבים בצורת אלמנטור, אבל אני רוצה לעקוב אחר אירוע כאשר המשתמש לוחץ על כפתור הבא.
    אתה יכול להכיר אותי את האירוע הזה. תודה!

  3. 5

מה אתה חושב?

אתר זה משתמש Akismet כדי להפחית דואר זבל. למד כיצד הנתונים שלך מעובדים.