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

כיצד לבצע הפנייה לעמוד תודה באמצעות Contact Form 7?

התוסף 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). אם אתם משתמשים בספרייה הישנה (ga.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 -->

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

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

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

document.addEventListener( 'wpcf7mailsent', function( event ) {
    ga( 'send', 'event', 'Contact Form', 'submit' );
}, 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');

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

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

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

לסיכום

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

אשמח להערות, תגובות ורעיונות לשיפור  🙂

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

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

{ 5 תגובות… הוסף אחת }
  • אורי 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 );

השאירו תגובה

פעימות
Up!
בניית אתר דו לשוני בוורדפרס באמצעות Polylang
בניית אתר דו לשוני בוורדפרס באמצעות פולילנג

יצירת אתר וורדפרס דו לשוני הוא תהליך די פשוט בעזרת התוסף Polylang. התוסף Polylang הוא...