באנר הסכמת עוגיות GDPR לאתרים

תארו לעצמכם פתיחת אתר שבו Facebook Pixel מופעל לפני שלחצתם על 'אשר'. זו הפרה ישירה של סעיף 7 ב-GDPR—נדרשת הסכמה פעילה. התוצאה: קנסות של עד 4% מהמחזור או 20 מיליון יורו. אנחנו פותרים זאת עם מנגנון הסכמה הכולל חסימה אוטומטית, כך שסקריפטי מעקב לא נטענים ללא הסכמה מפורשת. במשך 5 שנים, יישמנו 50+ פתרונות—מבאנרים פשוטים ועד אינטגרציות עם OneTrust ומערכות מותאמות אישית. פרויקט אחד: אתר מסחר אלקטרוני עם 100 אלף מבקרים חודשיים היה עם סקריפט Hotjar נסתר שרץ ללא הסכמה—לאחר יישום באנר מותאם עם חסימה אוטומטית, הסיכונים המשפטיים ירדו ב-90%. מנגנון הסכמה תקין עוזר להימנע מקנסות. קבלו ייעוץ בנושא יישום.

למה חשוב לסווג עוגיות

תחת GDPR, עוגיות מחולקות לקטגוריות, ומשתמשים חייבים להיות מסוגלים לבחור לפי קטגוריה, לא רק 'אשר הכל'. פסק הדין של בית המשפט האירופי לצדק C-252/21 אישר שתיבת סימון אחת של 'אשר הכל' אינה מספיקה. משתמשים חייבים להיות מסוגלים להסכים רק לעוגיות הכרחיות, למשל אנליטיקה, תוך דחיית שיווק. אנו מיישמים ממשק עם תיבות סימון לכל קטגוריה, שומרים את הבחירות ב-localStorage ובשרת. ביטול ההסכמה צריך להיות קל כמו ההסכמה—כפתור 'רק הכרחי' במסך הראשון של הבאנר.

איך פועל מצב חסימה אוטומטית

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

דוגמה לטעינת Google Analytics רק לאחר הסכמה:

export function useAnalytics() {
  const { consent } = useContext(CookieConsentContext);
  useEffect(() => {
    if (consent.analytics && !window.gtag) {
      const script = document.createElement('script');
      script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`;
      document.head.appendChild(script);
      window.dataLayer = window.dataLayer || [];
      window.gtag = function() {
        window.dataLayer.push(arguments);
      };
      window.gtag('js', new Date());
      window.gtag('config', GA_ID, { anonymize_ip: true });
    }
  }, [consent.analytics]);
}

איך לוודא שהבאנר שלכם עומד ב-GDPR

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

יישום טכני: מהקשר לרכיב

הנה דוגמה מלאה עם קונטקסט ורכיב באנר. ניתן להתאים את הקוד ל-Next.js, Vue, או JavaScript וניל.

// CookieConsentContext.tsx
interface ConsentState {
  analytics: boolean;
  marketing: boolean;
  functional: boolean;
}

const CookieConsentContext = createContext<{
  consent: ConsentState;
  updateConsent: (updates: Partial<ConsentState>) => void;
  hasResponded: boolean;
}>({} as any);

export function CookieConsentProvider({ children }: { children: ReactNode }) {
  const [consent, setConsent] = useState<ConsentState>({
    analytics: false,
    marketing: false,
    functional: false,
  });
  const [hasResponded, setHasResponded] = useState(false);

  useEffect(() => {
    const stored = localStorage.getItem('cookie_consent');
    if (stored) {
      const data = JSON.parse(stored);
      setConsent(data.preferences);
      setHasResponded(true);
    }
  }, []);

  const updateConsent = (updates: Partial<ConsentState>) => {
    const newConsent = { ...consent, ...updates };
    const record = {
      preferences: newConsent,
      timestamp: new Date().toISOString(),
      version: '1.0',
    };
    localStorage.setItem('cookie_consent', JSON.stringify(record));
    setConsent(newConsent);
    setHasResponded(true);
    // Отправить запись на сервер
    fetch('/api/consent', {
      method: 'POST',
      body: JSON.stringify(record),
    });
  };

  return (
    <CookieConsentContext.Provider value={{ consent, updateConsent, hasResponded }}>
      {children}
    </CookieConsentContext.Provider>
  );
}

// CookieBanner.tsx
export function CookieBanner() {
  const { hasResponded, updateConsent } = useContext(CookieConsentContext);
  const [showDetails, setShowDetails] = useState(false);
  const [selections, setSelections] = useState({
    analytics: false,
    marketing: false,
    functional: true,
  });

  if (hasResponded) return null;

  return (
    <div className="cookie-banner" role="dialog" aria-label="Cookie consent">
      <p>Мы используем cookies для улучшения работы сайта.</p>
      {showDetails && (
        <div className="cookie-categories">
          <label>
            <input type="checkbox" checked disabled /> Необходимые (всегда активны)
          </label>
          <label>
            <input
              type="checkbox"
              checked={selections.analytics}
              onChange={e => setSelections(s => ({...s, analytics: e.target.checked}))}
            />
            Аналитика
          </label>
          <label>
            <input
              type="checkbox"
              checked={selections.marketing}
              onChange={e => setSelections(s => ({...s, marketing: e.target.checked}))}
            />
            Маркетинг
          </label>
        </div>
      )}
      <div className="cookie-actions">
        <button onClick={() => updateConsent({ analytics: false, marketing: false })}>
          Только необходимые
        </button>
        <button onClick={() => setShowDetails(!showDetails)}> Настроить </button>
        <button className="primary" onClick={() => updateConsent({ analytics: true, marketing: true, functional: true })}>
          Принять все
        </button>
        {showDetails && (
          <button onClick={() => updateConsent(selections)}> Сохранить выбор </button>
        )}
      </div>
    </div>
  );
}

שמירת רישומי הסכמה לעמידה בדרישות

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

// migrations/create_consent_records_table.php
Schema::create('consent_records', function (Blueprint $table) {
    $table->id();
    $table->string('user_identifier'); // IP + fingerprint или user_id
    $table->json('preferences');
    $table->string('version');
    $table->ipAddress('ip_address');
    $table->timestamp('consented_at');
    $table->timestamp('withdrawn_at')->nullable();
});

היקף העבודה: שלבים ותוצרים

1. ביקורת סקריפטים ועוגיות קיימים באתר.
2. עיצוב ארכיטקטורת מנגנון הסכמה (שרת + לקוח).
3. פיתוח באנר מותאם אישית או הגדרת אחד מוכן.
4. יישום חסימה אוטומטית לסקריפטי מעקב.
5. אינטגרציה עם אנליטיקה ו-CRM.
6. תיעוד והדרכת צוות.
7. תמיכה לאחר השקה למשך חודש.

תוצרים:

• תיעוד ארכיטקטורה והגדרות
• קוד מקור של הרכיב והאינטגרציות
• הוראות לעדכון מדיניות העוגיות
• הדרכת צוות (סמינר מקוון של שעה)
• תמיכה לאחר השקה למשך חודש

השוואה: פתרון מותאם אישית לעומת מוכן

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

הערכת המצב הנוכחי שלכם

בצעו ביקורת עוגיות באמצעות תוסף 'Cookie Scanner' או קונסולת הדפדפן. אם אתם מוצאים סקריפטים שנטענים ללא הסכמה—הגיע הזמן לשנות גישה. קבלו ייעוץ על אינטגרציה—המהנדסים שלנו ינתחו את האתר שלכם. סמכו על הניסיון של 5+ שנים שלנו ועל עמידה מובטחת בדרישות.