דלג לתוכן
WEblok
חזרה לעורך הפופאפ

מדריך: הסכמת עוגיות שבאמת עובדת

פופאפ העוגיות של WEblok שומר את בחירת המבקר ומודיע עליה - אבל הוא לא יודע אילו סקריפטים יש באתר שלכם. המדריך הזה מראה איך לחבר אליו את Google Analytics (ובעצם כל סקריפט מעקב), כך שהם ירוצו רק אחרי אישור, והעוגיות שלהם יימחקו בדחייה.

מה הפופאפ עושה - ומה לא

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

מה שהוא לא עושה לבד: לחסום סקריפטים שכבר מוטמעים בעמוד. אם תג Google Analytics מודבק באתר כרגיל - הוא ירוץ ויכתוב עוגיות עוד לפני שהמבקר בחר משהו. לכן השלב החשוב הוא להפסיק לטעון סקריפטי מעקב "סתם", ולטעון אותם רק דרך אחד המתכונים בהמשך.

החוזה: מפתח אחסון ואירוע

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

js
// Stored choice (read it on every page load):
localStorage.getItem('wbp-cookie')   // 'accepted' | 'declined' | null (not chosen yet)

// Fired on the document every time the visitor clicks accept / decline:
document.addEventListener('weblok:consent', function (e) {
  console.log(e.detail.choice);      // 'accepted' | 'declined'
});

הבחירה נשמרת תחת המפתח wbp-cookie ב-localStorage, עם הערך accepted או declined.

האירוע weblok:consent נשלח על document בכל לחיצה, עם e.detail.choice. חשוב: הוא לא נשלח בטעינת העמוד למבקר חוזר - לכן כל מתכון קורא גם את הערך השמור בטעינה.

מתכון 1: Google Analytics רק אחרי אישור, ומחיקת העוגיות בדחייה

זה המתכון המומלץ לרוב האתרים. מחקו מהאתר את תג ה-gtag הרגיל, והדביקו במקומו את הקוד הזה אחרי קוד הפופאפ. החליפו את G-XXXXXXXXXX במזהה המדידה שלכם.

  • אישור: הסקריפט של Google נטען רק ברגע הזה (ובכל טעינה הבאה).
  • דחייה: העוגיות _ga, _ga_*, _gid ו-_gat* נמחקות - גם בדומיין הנוכחי, גם בדומיינים שמעליו (למשל ‎.example.com) וגם בנתיבים של העמוד, כי כך Analytics כותב אותן.
  • מבקר שחזר בו מאישור (דרך כפתור העוגייה) - Analytics נעצר מיד בעמוד הנוכחי והעוגיות נמחקות.
consent-analytics.html
<!-- Put this AFTER the WEblok popup code, just before </body>.
     Remove any other Google Analytics tag from the page. -->
<script>
(function () {
  var GA_ID = 'G-XXXXXXXXXX';       // your GA4 measurement ID
  var STORAGE_KEY = 'wbp-cookie';   // where the WEblok popup stores the choice
  var loaded = false;

  // 1. Load Google Analytics - called ONLY after consent
  function loadAnalytics() {
    window['ga-disable-' + GA_ID] = false;
    if (loaded) return;
    loaded = true;
    window.dataLayer = window.dataLayer || [];
    window.gtag = function () { window.dataLayer.push(arguments); };
    window.gtag('js', new Date());
    window.gtag('config', GA_ID);
    var s = document.createElement('script');
    s.async = true;
    s.src = 'https://www.googletagmanager.com/gtag/js?id=' + encodeURIComponent(GA_ID);
    document.head.appendChild(s);
  }

  // 2. Delete analytics cookies (_ga, _ga_*, _gid, _gat*)
  //    on this host, its parent domains and the current path
  function deleteAnalyticsCookies() {
    window['ga-disable-' + GA_ID] = true; // stops an already loaded GA
    var names = document.cookie.split(';')
      .map(function (c) { return c.split('=')[0].trim(); })
      .filter(function (n) { return /^(_ga|_ga_.+|_gid|_gat.*)$/.test(n); });
    var parts = location.hostname.split('.');
    var domains = [''];               // '' = host-only cookie
    for (var i = 0; i < parts.length - 1; i++) {
      domains.push('.' + parts.slice(i).join('.'));
    }
    var paths = ['/'];
    var segs = location.pathname.split('/').filter(Boolean);
    for (var j = 1; j <= segs.length; j++) {
      paths.push('/' + segs.slice(0, j).join('/'));
    }
    names.forEach(function (name) {
      domains.forEach(function (d) {
        paths.forEach(function (p) {
          document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; max-age=0; path=' + p +
            (d ? '; domain=' + d : '');
        });
      });
    });
  }

  function apply(choice) {
    if (choice === 'accepted') loadAnalytics();
    else if (choice === 'declined') deleteAnalyticsCookies();
  }

  // 3. Returning visitor: the popup stays hidden, so read the stored choice
  var stored = null;
  try { stored = localStorage.getItem(STORAGE_KEY); } catch (e) {}
  apply(stored);

  // 4. A new choice (first visit, or the "change my choice" cookie button)
  document.addEventListener('weblok:consent', function (e) {
    apply(e.detail && e.detail.choice);
  });
})();
</script>

מתכון 2: כל סקריפט אחר (פיקסל, צ'אט, מפות חום)

שיטה כללית שעובדת עם כל קוד צד שלישי: משנים את type של תג הסקריפט ל-text/plain, והדפדפן פשוט לא מריץ אותו. אחרי אישור, הקוד הקטן הזה "מפעיל" את כל התגים המסומנים.

consent-scripts.html
<!-- 1. Any third-party script: change type to "text/plain"
        and add data-consent - the browser will NOT run it -->
<script type="text/plain" data-consent="analytics"
        src="https://example.com/tracker.js"></script>
<script type="text/plain" data-consent="analytics">
  window.myPixelLoaded = true; // runs only after consent
</script>

<!-- 2. Enable them after consent (put after the WEblok popup code) -->
<script>
(function () {
  function enableConsentScripts() {
    var list = document.querySelectorAll('script[type="text/plain"][data-consent]');
    Array.prototype.forEach.call(list, function (old) {
      var s = document.createElement('script');
      for (var i = 0; i < old.attributes.length; i++) {
        var a = old.attributes[i];
        if (a.name !== 'type') s.setAttribute(a.name, a.value);
      }
      s.text = old.text;
      old.parentNode.replaceChild(s, old);
    });
  }
  var stored = null;
  try { stored = localStorage.getItem('wbp-cookie'); } catch (e) {}
  if (stored === 'accepted') enableConsentScripts();
  document.addEventListener('weblok:consent', function (e) {
    if (e.detail && e.detail.choice === 'accepted') enableConsentScripts();
  });
})();
</script>

לאפשר למבקרים לשנות את דעתם

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

איך לבדוק שזה באמת עובד

  • פתחו את האתר בחלון גלישה בסתר, ובכלי המפתחים (F12) בלשונית Application → Cookies: לפני בחירה לא אמורה להופיע אף עוגייה שמתחילה ב-_ga.
  • בלשונית Network סננו לפי collect או googletagmanager: לפני אישור - אין בקשות (במתכונים 1 ו-2).
  • לחצו "אישור" - הבקשות והעוגיות מופיעות. רעננו - הפופאפ לא מוצג, והמעקב נטען שוב.
  • כדי לראות את הפופאפ מחדש, הריצו בקונסול:
js
// DevTools console - forget the choice and show the popup again:
localStorage.removeItem('wbp-cookie'); location.reload();

מגבלות שכדאי להכיר

  • עוגיות HttpOnly (שנכתבות ע"י השרת) ועוגיות של דומיינים אחרים (למשל doubleclick.net) אי אפשר למחוק מ-JavaScript באתר שלכם. הן נחסמות מראש רק אם הסקריפט שכותב אותן לא נטען.
  • localStorage הוא לכל דומיין בנפרד: www.example.com ו-shop.example.com יציגו כל אחד את הפופאפ פעם אחת.
  • המדריך הזה טכני ואינו ייעוץ משפטי - את נוסח הפופאפ ומדיניות הפרטיות כדאי לתאם לדין שחל עליכם (GDPR, תיקון 13 לחוק הגנת הפרטיות וכו').
פתיחת עורך הפופאפ