Search

הפניה לאחר שליחת טופס Contact Form 7 ושליחת Event לאנליטיקס

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

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

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

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

הפניה לכתובת אחרת לאחר שליחת טופס ב CF7

הדרך הפשוטה ביותר היא להשתמש ב DOM events של התוסף Contact Form 7 בכדי להריץ Javascript. הקוד הבא מתאר כיצד לבצע הפניה לכתובת אחרת (URL) לאחר שליחה מוצלחת של טופס כאשר ה event הנקרא wpcf7mailsent מתקבל:

<?php
// ***** BEGIN HERE
// This function redirects to a different URL after successful submission
function redirect_cf7_after_submission(){ ?>

    <script>
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            location = 'http://example.co.il/';
        }, false );
    </script>

<?php }

add_action('wp_footer', 'redirect_cf7_after_submission');

הוסיפו את הפונקציה הזו לקובץ functions.php בתבנית הבת שלכם. כמובן שיש לשנות את http://example.co.il לכתובת אליה אתם מעוניינים להפנות את המשתמש.

מעקב אחר שליחת טופס בגוגל אנליטיקס

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

שלב א׳ – בדיקה באיזו גירסת אנליטיקס אתם משתמשים

בכדי לדעת באיזה קוד להשתמש לשליחת האירוע לאנליטיקס עליכם להבין קודם כל באיזו גירסה של אנליטיקס אתם משתמשים. הסתכלו בקוד המקור של האתר שלכם, אם מופיע קוד בסגנון הבא אז אתם משתמשים ב analytics.js (קוד זה יכול להכלל גם על ידי Google Tag Manager):

<!-- Google Analytics -->
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXX-Y', 'auto');
    ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

לחילופין, אם מופיע קוד בסגנון המופיע מטה אז אתם משתמשים ב gtag.js:

<!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-60808845-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-60808845-1');
    </script>

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

שלב ב׳ – שליחת event לאנליטיקס לאחר שליחה מוצלחת של הטופס

שליחת טופס ניתנת למעקב על ידי events (אירועים) בגוגל אנליטיקס. כמובן שאנו מעוניינים לשלוח event רק כאשר מתבצעת שליחה מוצלחת של הטופס ב Contact form 7. נעזר באותו DOM Event בו השתמשנו בכדי לבצע הפניה בחלקו הראשון של המדריך והוא wpcf7mailsent, בצורה הבאה:

document.addEventListener( 'wpcf7mailsent', function( event ) {
    ga( 'send', 'event', 'Contact Form', 'submit', 'whatever value you want' );
}, false );

אם אתם משתמשים ב gtag.js ולא ב analytics.js אז הקוד בו עליכם להשתמש הוא זה:

document.addEventListener( 'wpcf7mailsent', function( event ) {
    gtag('event', 'event', {
                'event_category': 'Contact Forms',
                'event_label': 'Submit',
                'value': 'whatever value you want'
    });
}, false );

אנו צריכים להוסיף אחד מאלו ל html header של אתר הוורדפרס שלנו ולכן נשתמש בהוק של וורדפרס בשם wp_head. נוסיף את הקוד הבא לקובץ functions.php בתבנית הבת:

<?php
// ***** BEGIN HERE
//This function sends event to google analytics after successful submission
function send_event_cf7_after_submission(){ ?>

    <script>
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            ga('send', 'event', 'Contact Form 7', 'submit');
        }, false );
    </script>


<?php }

add_action('wp_head', 'send_event_cf7_after_submission');

שימו לב – בקוד זה אני מתאר את הוספת הקוד לשליחת ה event באמצעות analytics.js.

אם הגדרתם הכל נכון, גוגל אנליטיקס תעקוב עכשיו אחר כל שליחת טופס מוצלחת כאשר Contact Form 7 יהיה הקטגוריה של ה event ו submit יהיה הפעולה (action) של ה event.

בכדי לוודא שזה עובד כראוי אתם יכולים לגשת ל Behaviour > Events > Overview בכדי לראות את ה events.

ייתכן ותאלצו להמתין בין 24-48 שעות בכדי להתחיל לראות את ה events.

לסיכום

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

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

רועי יוסף
רועי יוסף

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

10 תגובות...
  • אורי 15 אוקטובר 2017, 9:47

    היי רועי,
    כיצד ניתן לשלב את ה ID של הטופס כדי שההפניה תתבצע לטופס ספציפי בלבד?

    • רועי יוסף 15 אוקטובר 2017, 13:47

      היי אורי,

      האם הטופס המדובר הוא הטופס היחיד בעמוד שלך או שישנם עוד טפסים באותו עמוד?

      • אורי 15 אוקטובר 2017, 14:36

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

        • רועי יוסף 15 אוקטובר 2017, 20:36

          כן אתה בהחלט יכול!

          הנה דוגמא לכיצד אתה מקבל את ה ID של הטופס (javascript) – אשתדל לעדכן את המאמר בקרוב עם אפשרות זו:

          document.addEventListener( 'wpcf7mailsent', function( event ) {
                     if ( '1561' === event.detail.contactFormId ) {
                          console.log('form ID is: ' + event.detail.contactFormId )
                      }
                      if ( '5678' === event.detail.contactFormId ) {
                          console.log('form ID is: ' + event.detail.contactFormId )
                      }
          }, false );
          • אורי 17 אוקטובר 2017, 10:01

            תודה רועי.

  • רוב 7 אוקטובר 2018, 13:48

    נהדר, המאמר שלך תיקן בעיה שהייתה בהפניה שהחליטה להפסיק לעבוד.אני קורא לקובץ של JS ושם יש את ההפניה שהפסידה לעבוד.

    טוב שעכשיו זה עובד..

  • מרינה 3 דצמבר 2018, 23:24

    תודה רבה על המאמר! יש רק משהו קטן שרציתי לחדד- למה אתה בעצם קורא ל –

    document.addEventListener( 'wpcf7mailsent', function( event )

    פעמיים, גם מההאדר וגם מ – functions.php?

    תודה.

    • רועי יוסף 4 דצמבר 2018, 0:06

      היי מרינה, על לא דבר 🙂

      לא כ״כ רלוונטי, אלי שתי פונקציות שונות לגמרי. פעם אחת קראתי לפונקציה בהאדר ופעם בפוטר אך באותה מידה שניהם יכולים (ואולי אף רצוי) שיהיו ב Footer… ז״א שתי הפונקציות צריכות להיות ב functions.php, ואת יכולה להשתמש ב wp_footer בשניהם במקום wp_head….

  • אלירן 27 מאי 2019, 18:10

    היי,

    אני מנסה להוסיף את הפונקציה הראשונה לתבנית בת של OCEAN ומשום מה זה לא עובד.
    משהו לא מסתדר עם ה SYNTAX של ה PHP…

    • רועי יוסף 27 מאי 2019, 18:15

      היי אלירן,

      מה בדיוק לא מסתדר? פשוט תדאג להוריד את תגית ה PHP הפותחת…

תגובה חדשה

ניווט מהיר

Up!
לבלוג