הפניה לאחר שליחת טופס 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. גוגל אנליטיקס 4 מאפשרת מעקב אחר שליחת טפסים ללא צורך בהתערבות מצידכם.

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

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

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

לסיכום

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

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