מדריך מלא להגדרת קוקיז באתרי וורדפרס

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

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

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

אז אם אתם בענייין, קחו לכם חצי שעה – שעה פנויה, עברו על המדריך בנחת – המדריך בנוי מ-6 שלבים חובה (לדעתי) ועוד 2 אופציונאליים. ייתכן והמדריך יראה מעט טכני – אבל זהו נושא לא הכי מעניין מלכתחילה אז מחילה מראש.

שלב 1: התקנת התוסף קוקיז

1. נכנסים ללוח הבקרה של וורדפרס בתור האתר שלכם
2. לוחצים על תוספים > תוסף חדש או Add Plugin
3. מחפשים בספריית התוספים את התוסף: Beautiful Cookie Consent Banner
4. מתקינים ולוחצים על הפעלה

שלב 2: ניכנס להגדרות של התוסף

לאחר ההתקנה וההפעלה של התוסף, יופיע בלוח הבקרה לשונית חדשה לניהול הבאנר, תחת לשונית הגדרות

עכשיו נעבור לשונית לשונית ונגדיר בהתאם לאתר שלנו – בדוגמאות אני מראה איך הגדרתי אצלי באתר ואתם מוזמנים להתאים לאתר שלכם.

שלב 3: לשונית General

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

Enable Cookie Banner

וללחוץ על כפתור "שמור שינויים"

וזהו ✔️
הסימון מפעיל את הבאנר באתר ויאפשר לנו להמשיך להגדרות הבאות בלשוניות אחרות.

שלב 4: לשונית Appearance – החלק העיצובי

בלשונית Appearance רוב העבודה שלנו, אלו השינויים שעשיתי:

1. Position – שיניתי ל-Float bottom left כך שהבאנר יוצג בפינה התחתונה השמאלית של המסך ולא יסתיר תוכן חשוב.
2. Show x to close banner – סימנתי ✓ כדי לאפשר לגולשים לסגור את הבאנר גם עם איקס.
   • Text for close 'x' – השארתי "x", אבל יש אפשרות לשנות למה שבא לנו – לדוגמה ל"סגור" בעברית.
3. Position in HTML of page (querySelector) – כתבתי "footer", כדי שהבאנר ייטען בסוף העמוד ולא יכביד על טעינת האתר.
4. Custom font name – הוספתי את שם הפונט המדויק שלי שלקחתי מה-Inspect, במקרה שלי זהו פונט "Open Sans", כדי לשמור על אחידות עם הקו העיצובי של האתר.
5. Banner Background Color – שיניתי את הצבע של הרקע של הבאנר ל-#504f4f.
6. Banner Text Color – השארתי את צבע הטקסט לבן (#ffffff), אבל אפשר לשנות לאיזה צבע טקסט שרוצים.
7. Button Background Color – לשנות את הצבע של הרקע של הכפתורים "אני מאשר" "אני לא מאשר".
8. Button Text Color – לשנות את הצבע של הטקסט שמופיע בכפתור, במקרה שלי עשיתי את רקע הכפתור לבן ואת הטקסט ורוד #ff0565

לא לשכוח בסיום לגלול חזרה עד למעלה וללחוץ על "שמור שינויים"

שלב 5: לשונית Text – לשנות את הטקסטים לעברית

1. Button 'Dismiss' Text – רשמתי: "אני בפנים!"
2. Button 'Deny Cookies' Text – רשמתי "לא מסכים/ה"
3. Button 'Accept all Cookies' Text – "מאשר/ת"
4. Button 'Save Settings' Text – "שמור הגדרות"
5. 'Learn More' Linktext – רשמתי "מדיניות הפרטיות"
6. 'Learn More' Link – פה הדבקתי את הקישור את הURL של עמוד "מדיניות הפרטיות" שאצלי באתר – שכמובן מעודכן לפי העדכון של חוק הפרטיות מחודש יולי האחרון.
7. Target of 'Learn more' Link – כאן רשמתי "_self" שאם מישהו יקליק על עמוד מדיניות הפרטיות זה יפתח לו בלשונית חדשה.
8. גללתי למטה ישירות ל"Text for Banner" – והוספתי את הטקסט החמוד "🍪 כן, גם האתר שלנו משתמש בעוגיות – כדי שיפעל חלק, ישמור על אבטחה וייתן לך חוויה טובה יותר. אפשר לקרוא עוד בעמוד"

גם פה – לא לשכוח בסיום לגלול חזרה עד למעלה וללחוץ על "שמור שינויים"

שלב 6 – לשונית Compliance & Behaviour

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

• Compliance Type – קובע אילו כפתורים יוצגו ומה ההשפעה שלהם. אני בחרתי "Ask user to Opt in" – כי אני רוצה שתהיה האפשרות של "מאשר" ו"לא מאשר"
• Make the buttons look equal – סימנתי וי

וסיימנו את הלשונית, נלחץ "שמור שינויים" ונעבור ללשונית הבאה

שלב 7: לשונית Cookie Settings Tab

פעולה אחת ויחידה – נסיר את הוי שנמצא דיפולטיבית תחת "Show 'Cookie Settings' tab", נשמור שינויים וסיימנו

שלב 8 (אופציונאלי): לשונית Google Tag Manager

📌 מתי כדאי להשתמש בשלב הזה:
אם אתם מנהלים מעקב עם GTM ורוצים להיות בטוחים שכל הסקריפטים (Google Analytics, פיקסלים וכו’) יפעלו רק אחרי הסכמה, זה המקום להגדיר.
אם האתר לא עובד עם GTM או אם אין לכם מושג מה כתבתי כאן – אפשר לדלג על השלב הזה.

ההגדרות העיקריות בלשונית הן:

• GTM ID - מזהה הקונטיינר שלך (למשל GTM-XXXXXXX). אם ריק – GTM לא ייטען. (טעינה אחרי הסכמה מלאה – עובד רק בגרסת הפרימיום של התוסף).
• DataLayer name – ברירת מחדל: dataLayer. לשנות רק אם עובדים עם שם מותאם.
• Push consent event to dataLayer – אם מסומן ✓, נשלחים אירועי initialized ו־updated ל-dataLayer לשימוש בטריגרים.
• Domain / URL – להשאיר כברירת מחדל, אלא אם עובדים עם GTM צד שרת.

שלב 9 (אופציונאלי): הוספת רווח בין הכפתורים עם קוד CSS

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

כדי לפתור זאת, ניתן להוסיף סניפט CSS קצר:

.cc-btn {
  margin: 0 8px !important;
}

איך מוסיפים:

1. נכנסים בלוח הבקרה של וורדפרס ל-תוספים ← Code Snippets (או לחלופין: עיצוב ← התאמה אישית ← CSS נוסף).
2. יוצרים סניפט חדש מסוג CSS ומדביקים את הקוד.
3. שומרים ומרעננים את האתר.

לאחר ההוספה, הכפתורים יקבלו רווח ברור של 8 פיקסלים ביניהם.

עידן הפרטיות חברים – אנא שימרו על אתרכם

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

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