Search

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

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

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

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

16 תגובות...
  • נבות רם 25 יוני 2018, 7:01

    אחלה כתבה! אסתטית, פשוטה – וסייעה לי מאוד בפרוייקט קטן (בנושא קוקיז ולאו דווקא פופאפים) בעזרת קוד ברור ונקי.
    תודה 🙂

  • חתול 25 יוני 2018, 14:46

    אם אתה רוצה להיות ממש מינימליסטי אז אפשר לוותר על הספרייה. עבודה עם עוגיות ב־JS טהור היא קצת מעצבנת אבל לא מסובכת. אפשר גם להעתיק מ־w3schools פונקציות פשוטות שמקלות על השימוש.

    • רועי יוסף 25 יוני 2018, 14:49

      בהחלט גם כן אפשרות שתחסוך מספר בייטים… אבל אני לא חושב שאני עד כדי כך מינימליסטי 😉

      • חתול 25 יוני 2018, 14:51

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

  • רוב 13 מאי 2019, 15:22

    יפה, אפשר להשתמש בזה למשל לאישור קבלת תנאים בשביל להיכנס לעמוד באתר ואם לא מסכימים אז מופנים לדף הבית?

  • tomer 27 ספטמבר 2020, 15:02

    אולי פספסתי משהו? אבל אין את הקובץ js.cookie.js תחת ספריית הsrc

  • אילן שליו 6 מאי 2021, 13:36

    כנראה לא הבנתי משהו…

    הפיסקה "נציג את הפופאפ לאחר שהאתר נטען במידה ולא קיים ה Cookie" – באיזה קובץ אני מכניס את הקוד הזה, ואת הקוד של הפסקה הבאה? האם ב-function.php? זה לא ברור לאיפה להוסיף…

    • רועי יוסף 6 מאי 2021, 14:59

      היי אילן,

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

  • אילן שליו 6 מאי 2021, 15:14

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

    • רועי יוסף 6 מאי 2021, 15:35

      * אנא הגב בהמשך לתגובה ואל תפתח תגובה חדשה 🙂

      ההסבר כיצד לעשות זאת מופיע בפוסט ששלחתי. לחילופין, פשוט הוסף את הקוד לאחר הקוד המופיע בקובץ עצמו (בקובץ js.cookie.min.js). האם זה מובן?

      • אילן שליו 6 מאי 2021, 15:38

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

        • רועי יוסף 6 מאי 2021, 15:39

          אז יש לך שגיאת Javascript בעקבות השינוי. צר לי, אך קשה מרחוק להבין מה הבעיה…

תגובה חדשה

ניווט מהיר

Up!
לבלוג