בניית פופאפ יציאה בוורדפרס ללא תוסף (Exit Intent Popup)

פופאפ יציאה (exit intent popup) הוא אחד מכלי ההמרה היעילים ביותר באתרי ווקומרס ובבלוגים עתירי תוכן בוורדפרס. הרעיון פשוט: JavaScript עוקב אחרי תנועת העכבר של המשתמש, וכשנראה שהוא עומד לצאת מהאתר, קופץ פופאפ עם הצעה אחרונה, הרשמה לרשימת תפוצה, או קריאה אחרת לפעולה.

אני מריץ כזה בבלוג הזה כבר שנים, והוא מביא נרשמים באופן עקבי. אוהבים או לא אוהבים פופאפים – הם עובדים.

הנה כמה מצבים שבהם פופאפ יציאה הגיוני:

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

שלושה אנשים שאלו אותי באותו חודש באיזה תוסף אני משתמש לפופאפ יציאה בבלוג. התשובה: זה לא תוסף בכלל. זו גם הסיבה שקל לעצב את הפופאפ בדיוק איך שרוצים עם ידע בסיסי ב-CSS ו-JavaScript.

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

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

בניית פופאפ יציאה באמצעות Ouibounce

ouibounce.js היא ספריית JavaScript קטנה שמאפשרת להציג פופאפ לפני שהמשתמש עוזב את האתר.

הספרייה מספקת אופציות קונפיגורציה כמו רגישות, השהייה, שם ה-cookie, תפוגה ועוד. התהליך מסתכם בארבעה שלבים:

• טעינת הקובץ ouibounce.js בוורדפרס.
• יצירת אלמנט חבוי, הפופאפ שלנו בעצם (modal window).
• בחירת חלון זה באמצעות javascript או jquery וקריאה ל ouibounce.
• עיצוב הפופאפ כך שיופיע במרכז המסך וייראה נורמלי.

נטען את הקובץ ouibounce.min.js

כמו שראינו במדריכים רבים ברשת (כשאחד מהם הוא הוספת נכסים (קבצי Javascript ו- CSS) בוורדפרס), בכדי לבצע enqueue לקובץ javascript כותבים משהו כזה (functions.php):

function enqueue_Ouibounce() {
   wp_register_script( 'ouibounce', get_template_directory_uri() . '/js/ouibounce.js' , array( 'jquery' ) );
   wp_enqueue_script( 'ouibounce' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_Ouibounce' );

ניצור אלמנט חבוי

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

נוסיף את ה html של אותו פופאפ לפוטר של האתר שלנו על ידי הוספה של הקוד הבא לקובץ functions.php:

<?php 
/*** BEGIN here ***/
function exit_intent_popup() { ?>
    <div id="ouibounce-modal" style="display: none;">
        <div class="underlay"></div>
        <div class="modal">
            <div class="modal-body">
            
            </div>
        </div>
    </div>
   <?php
}
add_action( 'wp_footer', 'exit_intent_popup' );

שימו לב בשורה 2 הסתרנו את האלמנט על ידי display:none.

נפעיל את ouibounce על אותו אלמנט

עכשיו נטען קובץ JavaScript נוסף שמכיל את הקוד שמפעיל את ouibounce על האלמנט #ouibounce-modal שיצרנו.

נוסיף את השורות הבאות אחרי השורות בהן טענו את ספריית ouibounce. ככה זה אמור להיראות:

/* BEGIN ouiBounce */
 function initOuibounce() {
        /* init ouibounce */
        var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
            aggressive: false,
            timer: 800,
            cookieExpire: 21,
            callback: function() { console.log('ouibounce fired!'); }
        }),
        ouibounceElmnt = $('#ouibounce-modal');
}
/* END ouiBounce */
initOuibounce();

בקוד מעלה הפעלנו את ouibounce עם ההגדרות הבאות:

• aggressive – כברירת מחדל הפופאפ יופעל רק פעם אחת לכל גולש באתר שלכם (מה שאומר שהשורה הזו בקוד מיותרת), וכשהוא מופעל נוצר cookie בדפדפן שלכן בכדי לא ליצור חוויה ״פולשנית״ מדי לגולש.
• timer – הזמן ב -milliseconds עד שהפופאפ יופעל מהרגע והעכבר של המשתמש יצא מחלקו העליון של ה- viewport. ברירת המחדל היא שנייה אחת בכדי למנוע מצבים של false positives, כלומר שהגולש לא באמת התכוון לצאת. סביר להניח שהגולש לא יספיק לבצע את הפעולה בשנייה אחת ולכן נקבע ערך זה.
• cookieExpire – מגדיר את הזמן עד שה cookie יפוג והפופאפ יקפוץ שוב לגולש. במקרה שלנו 21 ימים.

ישנן עוד אפשרויות ל ouibouce, תוכלו למצוא את כולן בקישור הבא.

לצורך בדיקות ובכדי שהפופאפ יקפוץ בכל טעינה של עמוד שנו את האפשרות aggressive ל true

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

/** Hide modal window on body click **/
$('body').on('click', function() {
    ouibounceElmnt.fadeOut(200);
});

/** Prevent propagation while clicking on the popup **/
ouibounceElmnt.find('.modal').on('click', function(e) {
    e.stopPropagation();
});

נעצב מעט את הפופאפ

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

#ouibounce-modal {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    position: fixed;
}
#ouibounce-modal .underlay {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background-color:rgba(255,255,255,0.9);
    cursor:pointer;
    -webkit-animation:fadein .5s;
    animation:fadein .5s
}
.modal {
    width: 600px;
    height: 290px;
    z-index: 1;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    max-width: 96%;
    bottom: 0;
    left: 0;
    line-height:0;
    -webkit-animation: popin .3s;
    animation: popin .3s;
    background: #272822;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-body {
    display: block;
    line-height: initial;
    text-align: center;
    padding: 30px;
    color: white;
}

בשלב הנוכחי אתם אמורים לראות פופאפ בסגנון הבא (בלי השטויות שאני הוספתי):

לחצו!

אצלכם כנראה הוא פשוט מופיע על המסך ללא אנימציה, הוסיפו את ה css הבא בכדי שהטופס יופיע בצורה נחמדה יותר:

@-webkit-keyframes popin {
    0% {
        -webkit-transform:scale(0);
        transform:scale(0);
        opacity:0
    }
    85% {
        -webkit-transform:scale(1.05);
        transform:scale(1.05);
        opacity:1
    }
    100% {
        -webkit-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
}

@-ms-keyframes popin {
    0% {
        -ms-transform:scale(0);
        transform:scale(0);
        opacity:0
    }
    85% {
        -ms-transform:scale(1.05);
        transform:scale(1.05);
        opacity:1
    }
    100% {
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
}

@keyframes popin {
    0% {
        -webkit-transform:scale(0);
        -ms-transform:scale(0);
        transform:scale(0);
        opacity:0
    }
    85% {
        -webkit-transform:scale(1.05);
        -ms-transform:scale(1.05);
        transform:scale(1.05);
        opacity:1
    }
    100% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1
    }
}

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

כמובן שאפשר להוסיף שם בקלות גם שורטקודים. במקרה של סאבי בלוג הוספתי את השורטקוד של התוסף MC4W.

אם אתם מחפשים פופאפ כללי בוורדפרס ללא תוסף, יש לי מדריך נפרד גם על זה.

לסיכום

בניית פופאפ יציאה בוורדפרס לא דורשת תוסף. עם ouibounce.js, כמה שורות PHP להזרקת ה-markup דרך wp_footer, ומעט CSS לעיצוב, אפשר להקים פופאפ עובד תוך פחות משעה. עקבו אחריו עם אנליטיקס, בדקו באינקוגניטו, ושמרו על כבוד – פופאפ אחת ל-21 ימים זה ברירת מחדל סבירה.