הצגת פופאפ באתרי וורדפרס באמצעות JavaScript Cookie

במדריך זה נראה דרך להצגת פופאפ באתרי וורדפרס. נציג את אותה הודעה קופצת עבור הגולשים שלכם ללא שימוש בתוסף ונעזר ב Cookies. נשתמש במקרה זה בספרייה Javascript Cookie על מנת למנוע מאותו פופאפ לקפוץ שוב ברגע שהגולש לחץ על כפתור מסויים.

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

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

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

למידע נוסף על עוגיות, תנו מבט בפוסט מה זה עוגיות (Cookies) באינטרנט וכיצד לעבוד איתן ב JavaScript.

מה למדריך זה ולתקנות ה GDPR?

אם אינכם מכירים אז קיים חוק בשם חוק ה Cookies המגיע כחלק מתקנות ה GDPR שנכנסו לתוקף לאחרונה. במידה ואף אחוז קטן מקהל הגולשים באתר שלכם מגיע מהאיחוד האירופי (EU), לבטח אתם צריכים להתחשב בחוק זה ואי ידיעת החוק אינה פותרת.

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

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

אבל אנו לא כאן בכדי לדבר מעבר לכך על חוק ה Cookies ותקנות ה GDPR, זהו לא מטרת הפוסט. ניגש ישר למשימה ונראה כיצד להוסיף פופאפ לגולש כל עוד אינו לחץ על כפתור שנגדיר, ואת זה נעשה (בצורה אירונית) באמצעות Cookies. בואו נתחיל, אלו השלבים להצגת פופאפ באתרי וורדפרס באמצעות Javascript Cookie.

טעינת הספרייה Javascript Cookie בוורדפרס

הורידו את הספרייה מהקישור הבא (בקישור קיים הקובץ הרלוונטי בלבד) והעתיקו אותו לתיקייה בתבנית הבת שלכם. במקרה שלנו נעתיק אותו לתיקייה בשם js בתבנית הבת אותה אתם יכולים ליצור אם אינה קיימת.

הספרייה Javascript Cookie אגב תומכת בכל הדפדפנים ואין לה תלות כלשהי בשום ספרייה אחרת.

כעת, וכפי שראינו בהרבה מאמרים בבלוג זה – הדרך הנכונה להוסיף נכסים (קבצי Javascript ו CSS) באתר וורדפרס מתבצעת בצורה הבאה באמצעות הפונקציה wp_enqueue_scripts:

<?php
/***** BEGIN HERE *****/
function add_scripts_to_wordpress() {
	wp_register_script( 'js_cookie', get_template_directory_uri() . '/js/js.cookie.min.js', '1.0.0', true );
	wp_enqueue_script( 'js_cookie' );
}
add_action( 'wp_enqueue_scripts', 'add_scripts_to_wordpress' );

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

יצירת ה Markup עבור הפופאפ

נוסיף את ה Markup, כלומר את ה HTML הנחוץ שמציג את ההודעה בפוטר של אתר הוורדפרס שלנו בצורה הבאה:

<?php
/***** BEGIN HERE *****/
function cookie_notice_popup() { ?>
    <div class="cookie-notice">
    <div class="cookie-notice-inner">
        <div class="content-cookie">היי! אנו משתמשים ב Cookies על מנת לוודא כי חווית הגלישה שלכם תהיה מיטבית. המשך גלישה באתר משמעה שאתם מקבלים את השימוש ב Cookies. קראו עוד <a href="<?php echo get_page_link('xxx'); ?>">בתקנון הפרטיות.</a></div>
            <button class="button-cookie">אוקיי!</button>
        </div>
    </div>
    <?php
}
add_action('wp_footer','cookie_notice_popup');

נציין כי בנוסף לכפתור האישור אנו מציגים גם קישור לעמוד תקנון הפרטיות באתר שלכם וזאת באמצעות הפונקציה get_page_link. אתם מוזמנים להוריד קישור זה אך אם בחרתם להשתמש בו שימו לב כי אתם משנים בשורה מספר 6 את xxx למזהה (ID) של עמוד תקנון הפרטיות שלכם או כל עמוד שתבחרו.

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

עיצוב הפופאפ באמצעות CSS

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

.cookie-notice {
    position: fixed;
    bottom: 0;
    background: rgba(24, 24, 24, 0.9);
    width: 100%;
    z-index: 9999;
    padding: 20px 10px;
    display: none;
    text-align: right;
    color: #fefefe;
    font-size: 14px;
}

.cookie-notice-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.content-cookie-inner > a {
    color: #fefefe !important;
}

button.button-cookie {
    background: none;
    border: 2px solid #fefefe;
    border-radius: 28px;
    color: white;
    font-size: 14px;
    padding: 5px 26px;
    margin-top: 14px;
}

@media (min-width: 768px) {

    button.button-cookie {
        margin-top: 0;
    }

    .cookie-notice-inner {
        flex-direction: row;
    }

}

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

שימו לב כי האלמנט שיצרנו אינו מוצג בשלב הנוכחי (display:none) – נציג אותו אך ורק בשלב הבא באמצעות Javascript בהנחה וה Cookie (שתכף ניצור) אינו קיים אצל הגולש.

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

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

function cookieInit() {
    var ourCookie = Cookies.get('ourCookie');
    if (ourCookie) {
        return false;
    } else {
        openCookiePopup();
    }
}


function openCookiePopup() {
    setTimeout(function () {
        $('.cookie-notice').fadeIn(300);
    }, 4000);
}

cookieInit();

הפונקציה הראשונה בקוד זה (cookieInit) בודקת האם Cookie בשם OurCookie קיים אצל הגולש, אם קיים הפונקציה יוצאת (מחזירה false) ואם אינו קיים היא קוראת לפונקציה בשם opeCookiePopup. זאת קובעת כי לאחר 4 שניות יוצג אלמנט הפופאפ שיצרנו.

שימו לב כי את קוד זה יש לטעון אך ורק לאחר שהספרייה Javascript Cookie נטענה.

נוסיף את החלק שקובע כי בלחיצה על כפתור האישור תעלם ההודעה וייוצר Cookie

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

$('.button-cookie').on('click', function () {
    $('.cookie-notice').fadeOut(300);
    Cookies.set('ourCookie', 'yes', { path: '/' });
});

בקוד שהצגנו תחת חלקו זה של המאמר השתמשנו בשתי פונקציות Javascript – אחת בשם Cookies.get והשנייה Cookies.set. כשמם כן הן, האחת קוראת Cookie מסויים והשנייה יוצרת Cookie.

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

אולי זה המקום לציין כי כאשר אתם משתמשים ומפתחים קוד הקשור ל Cookies, בהרבה מצבים תרצו למחוק Cookie כזה או אחר לצורך הבדיקות. ישנה הרחבה לכרום המאפשרת לכם לעשות זאת בצורה פשוטה ושמו EditThisCookie, בטוח כי תמצאו לה שימוש בהנחה ואתם עובדים עם Cookies.

מספר מילים נוספות על הספרייה Javascript Cookie

הספרייה Javascript Cookie היא ספרייה מעולה שעברה בדיקות מסיביות, תומכת בכל הדפדפנים ואין לה תלות באף ספרייה אחרת. היא קלת משקל (~900 bytes gzipped!)  וזה עניין חשוב עבור אופטימיזציה ומהירות אתר הוורדפרס שלכם. נסביר מעט על העבודה עם Cookies באמצעותה:

על מנת ליצור Cookie עבור כל העמודים באתר:

Cookies.set('name', 'value');

על מנת ליצור Cookie שתקף לשבוע עבור כל העמודים באתר:

Cookies.set('name', 'value', { expires: 7 });

על מנת ליצור Cookie התקף לשבוע וולידי רק עבור העמוד הנוכחי:

Cookies.set('name', 'value', { expires: 7, path: '' });

בכדי לקרוא Cookie:

Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined

בכדי לקרוא את כל ה Cookies:

Cookies.get(); // => { name: 'value' }

בכדי להסיר Cookie:

Cookies.remove('name');

בכדי להסיר Cookie אשר וולידי לעמוד הנוכחי:

Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!

עוד מידע על האפשרויות של הספרייה Javascript Cookie ניתן לראות בעמוד ה GitHub של הספרייה.

לסיכום

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

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