הפנייה לכתובת אחרת לאחר שליחת טופס – 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). אם אתם משתמשים בספרייה הישנה (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 לגוגל אנליטיקס

שליחת טופס ניתנת למעקב על ידי event. כמובן שאנו מעוניינים לשלוח 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 );

השאירו תגובה

שיתופים
קראו גם את:
אופטימיזציה תמונות וורדפרס – קידום אתרים
אופטימיזציה לתמונות באתרי וורדפרס – קידום אתרים | SEO

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