בניית פופאפ יציאה בוורדפרס ללא תוסף (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 על אותו אלמנט

נפעיל את ouibounce על האלמנט #ouibounce-modal ונוסיף בקובץ javascript כלשהו (שאתם צריכים לדאוג שייטען אחרי הקובץ ouibounce.min.js) את הסקריפט הבא:

/* 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 ימים.

הצטרפו לרשימת התפוצה!

הכניסו את האימייל שלכםהצטרפו לרשימת התפוצה

Leave this field empty if you're human:

ישנן עוד אפשרויות ל 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.

לסיכום

ראינו במדריך זה תהליך פשוט לבניית פופאפ יציאה בוורדפרס (exit intent popup) באמצעות הספרייה ouibounce.js. ישנו אף תוסף המשתמש בספרייה זו, אך אני תמיד מעדיף לכתוב בעצמי מה שאני יכול במקום להשתמש בתוספים, קחו את זה לאן שנוח לכם.. בין אם אהבתם או לא, אשמח לשמוע בתגובות !