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

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

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

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

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

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

הדרך הפשוטה ביותר היא להשתמש ב DOM events של התוסף Contact Form 7 בכדי להריץ JavaScript. כאשר טופס נשלח בהצלחה, התוסף מפעיל event בשם wpcf7mailsent.

הקוד הבא מדגים כיצד לבצע הפניה לכתובת אחרת לאחר שליחה מוצלחת:

<?php
function redirect_cf7_after_submission() { ?>

    <script>
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            window.location.href = 'https://example.com/thank-you/';
        }, false );
    </script>

<?php }

add_action( 'wp_footer', 'redirect_cf7_after_submission' );

הוסיפו את הפונקציה הזו לקובץ functions.php בתבנית הבת שלכם. שנו את הכתובת לכתובת אליה אתם מעוניינים להפנות את המשתמש.

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

document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( event.detail.contactFormId === '123' ) {
        window.location.href = 'https://example.com/thank-you-contact/';
    } else if ( event.detail.contactFormId === '456' ) {
        window.location.href = 'https://example.com/thank-you-quote/';
    }
}, false );

החליפו את 123 ו 456 ב ID של הטפסים שלכם.

מעקב אחר שליחת טופס ב Google Analytics 4

אם אתם משתמשים ב Google Analytics 4 (GA4) בכדי לנטר את התנועה באתר, כנראה שתרצו לעקוב אחר שליחת טפסים ולקבל events עבור כל שליחה מוצלחת.

דרך א׳ – שליחת event ישירות עם gtag.js

אם אתם משתמשים ב gtag.js ישירות (ולא דרך Google Tag Manager), הוסיפו את הקוד הבא לקובץ functions.php בתבנית הבת:

<?php
function send_ga4_event_cf7() { ?>

    <script>
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            gtag( 'event', 'generate_lead', {
                event_category: 'Contact Form',
                event_label: 'CF7 Submit',
                contact_form_id: event.detail.contactFormId
            });
        }, false );
    </script>

<?php }

add_action( 'wp_footer', 'send_ga4_event_cf7' );

שם ה event – generate_lead – הוא אחד מה events המומלצים של GA4 למעקב אחר המרות.

דרך ב׳ – שליחת event דרך Google Tag Manager

אם אתם משתמשים ב Google Tag Manager, הגישה היא לדחוף event ל dataLayer ולטפל בו דרך GTM.

הוסיפו את הקוד הבא לקובץ functions.php בתבנית הבת:

<?php
function push_cf7_to_datalayer() { ?>

    <script>
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({
                event: 'cf7_submission',
                formId: event.detail.contactFormId
            });
        }, false );
    </script>

<?php }

add_action( 'wp_footer', 'push_cf7_to_datalayer' );

לאחר מכן, ב GTM צרו Trigger מסוג Custom Event עם שם ה event – cf7_submission וחברו אותו ל Tag מסוג GA4 Event.

אם גם הפניה וגם שליחת event נדרשים, שלחו קודם את ה event ורק אחר כך בצעו הפניה באמצעות setTimeout עם עיכוב של 1-2 שניות.

DOM Events נוספים של Contact Form 7

מלבד wpcf7mailsent, התוסף מספק events נוספים שכדאי להכיר:

כל event מכיל אובייקט event.detail עם מידע שימושי כמו contactFormId, inputs (ערכי השדות) ו unitTag.

שאלות נפוצות

שאלות נפוצות לגבי הפניה ומעקב אחר שליחת טפסים ב Contact Form 7:

לסיכום

ראינו במדריך כיצד להפנות משתמשים לכתובת חדשה לאחר שליחת טופס ב Contact Form 7, וכיצד לשלוח events ל Google Analytics 4 ללא צורך בהפניה לעמוד תודה.

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

פוסטים נוספים שיכולים לעזור לכם: אופטימיזציה של CF7 לביצועים, מניעת ספאם עם Akismet ו-הוספת reCAPTCHA v3. להעמקה ב-GA4, בדקו את המדריכים על events בגוגל אנליטיקס והגדרת מעקב המרות ב-GA4.