Search

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

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

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

רועי יוסף
רועי יוסף

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

8 תגובות...
  • גיא 30 מרץ 2018, 1:13

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

  • רן 26 מאי 2018, 20:45

    מעולה תודה!
    אבל יש הרבה תוספים, או אפילו מערכות שלא מצריכות התקנה של תוסף שעושות עבודה מעולה, כמו Poptin וכדומה.

    • רועי יוסף 14 אוקטובר 2018, 1:38

      היי רן,

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

      כל הרעיון בדוגמאות שאני נותן הוא להוסיף לקוד אך ורק מה שדרוש בכדי להשיג פונקציוליות מסויימת ולעשות זאת בצורה עצמאית כך ש:

      1. אינך תלוי בתוסף חיצוני / בתשלום.
      2. באפשרותך לשנות את הפונקציונליות כאוות נפשך אם אתה קצת מתעסק בקוד.
      3. האפשרויות העיצוביות שעומדות בפנייך אינן מוגבלות.
      4. פחות קוד = טעינה מהירה יותר.

  • שלומית 26 מרץ 2019, 11:37

    הי רן,

    אפשר להגדיר בדרך הזו חלון שנפתח עם סוג של מחשבון? או נוסחה להצגת מחיר ללקוח שמתבסס על חישוב לאחר שהוא מציג מחיר. לדוגמה – קניית תוספת תעלה לך 6% מהמוצר.

    חשוב לי שלקוח יראה מחיר לפני שהוא ממשיך בתהליך.

    • רועי יוסף 27 מרץ 2019, 0:32

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

  • ארנון 26 פברואר 2020, 19:00

    זה עובד גם במובייל? אם כן כיצד?

    • רועי יוסף 26 פברואר 2020, 19:02

      Exit Intent לא רלוונטי למובייל אז אני די בטוח שלא.

תגובה חדשה

Up!
לבלוג