Sari la conținut

Cookie Banner Quickstart

Urmați acest ghid pas cu pas pentru a crea un banner cookie în consola de platformă, configurați categorii și traduceri și adăugați-l la site-ul dvs.

Acest ghid vă ghidează prin crearea unui banner cookie în consola platformei și adăugarea acestuia pe site-ul dvs. web.

  • A running the platform instance (see Architecture & Migration Reference if you haven’t deployed yet)
  • Acces la HTML-ul site-ului dvs. pentru a adăuga o etichetă de script
  1. Crearea unui banner în consola platformă

    Navigate to Cookie Banners în lateral și click Create Banner. Fill in the required fields:

    Field Description
    Name Un nume intern care să identifice acest banner (de exemplu, „Site-ul principal”)
    Origin Originea completă a site-ului dvs. web (de exemplu https://www.example.com)
    Cookie Policy URL Link către pagina dvs. de politică privind cookie-urile (necesar)
    Privacy Policy URL Link către pagina dvs. de politică de confidențialitate (opțional)
    Consent Expiry Numărul de zile înainte ca consimțământul să expire și banner-ul să reapară (default: 365)
    Default Language Limba fallback pentru banner (default: en). SDK-ul utilizează acest lucru atunci când limba vizitatorului nu este disponibilă.

    Modul de consimțământ și prezentarea sunt not selectate la momentul creării – acestea sunt rezolvate automat din locația vizitatorului. Geolocation and Regulations.

  2. Configure cookie categories

    După crearea banner-ului, mergeți la Settings Cinci categorii implicite sunt create automat: Necesar, Analytics, Publicitate, Funcțional și Uncategorizat.

    Poți să:

    • Reorder categories folosind săgețile în sus/în jos pentru a controla ordinea afișării
    • Add custom categories Cu un nume și o descriere
    • Delete normal categories nu aveți nevoie de ele – orice cookie-uri din ele sunt mutate automat în categoria Uncategories.
  3. Customize translations (optional)

    Mergeţi la Translations Traduceri încorporate pentru 14 limbi (en, de, es, fr, id, it, ja, ko, nl, pl, pt, tr, uk, zh) sunt create automat. Puteți:

    • Edit UI text pentru orice limbă – titlu de banner, descriere, etichete de buton și atribute ARIA
    • Translate category names and descriptions per language
    • Add new languages pentru orice locație care nu este inclusă în mod implicit
    • Set the default language în setările bannerului – SDK se întoarce la acest lucru atunci când limba vizitatorului nu este disponibilă

    Modificările aduse traducerilor creează o nouă versiune de proiect, la fel ca orice altă modificare de configurare.

  4. Add cookies to each category

    Schimbaţi la Cookies Tab pentru a documenta cookie-urile specifice utilizate în fiecare categorie. Pentru fiecare cookie, furnizați:

    • Name — Numele cookie-ului (de ex. _ga)
    • Duration Cât durează cookie-ul (de ex. „2 ani”)
    • Description Ce face cookie-ul

    De asemenea, puteți move cookies between categories Acest lucru este util pentru organizarea cookie-urilor nou detectate care se află în categoria Uncategorized – mutați-le în categoria corespunzătoare (de exemplu, Analytics, Advertising), astfel încât vizitatorii să vadă grupări exacte.

    Aceste informații sunt afișate vizitatorilor în panoul de preferințe, astfel încât aceștia să poată lua decizii în cunoștință de cauză.

  5. Publish the banner

    Click Publish Changes Acest lucru creează o versiune publicată a configurației dvs. pe care SDK-ul o va servi vizitatorilor.

  6. Adăugați snippet-ul la site-ul dvs.

    Mergeţi la JS / CSS snippets Adăugați-l în HTML-ul site-ului dvs., în mod ideal chiar înainte de închiderea </body> tag:

    <script
    src="https://unpkg.com/@probo/cookie-banner/dist/cookie-banner.iife.js"
    data-banner-id="YOUR_BANNER_ID"
    data-base-url="https://your-probo-instance.com/api/cookie-banner/v1/"
    data-position="bottom-left"
    ></script>
    <!-- Required in the header or footer -->
    <probo-settings-link>Cookie settings</probo-settings-link>

    Înlocuiți YOUR_BANNER_ID și adresa URL de bază cu valorile afișate în consolă. Legătura de setări permite vizitatorilor să redeschidă preferințele (sub CCPA afișează „Opțiunile dvs. de confidențialitate” cu pictograma oficială de renunțare și deschide panoul Opțiuni de confidențialitate).

    SDK detectează automat limba vizitatorului din atributul <html lang="..."> al paginii dvs. sau din setarea de limbă a browserului.

    <script
    src="https://unpkg.com/@probo/cookie-banner/dist/cookie-banner.iife.js"
    data-banner-id="YOUR_BANNER_ID"
    data-base-url="https://your-probo-instance.com/api/cookie-banner/v1/"
    data-lang="fr"
    ></script>
  7. Activate the banner

    Back in the console, click Activate doar un banner poate fi activ pe origine la un moment dat.

  8. Tag third-party scripts

    Marcați orice script sau elemente care necesită consimțământ cu atributul data-cookie-consent, de exemplu, pentru a accesa un script analitic:

    <script
    type="text/plain"
    data-cookie-consent="analytics"
    data-src="https://analytics.example.com/tracker.js"
    ></script>

    SDK-ul activează automat aceste elemente atunci când vizitatorul acordă consimțământul pentru categoria corespunzătoare. Blocking Resources Pentru ghidul complet.

Ce se întâmplă în continuare

Secțiune intitulată „What Happens Next”

Odată ce banner-ul este viu:

  • Noii vizitatori văd dialogul adecvat pentru reglementările lor (opt-in, opt-out sau notificare) și pot accepta, respinge, personaliza sau recunoaște în funcție de caz.
  • Consimțământul este stocat într-un cookie probo_consent și înregistrat pe server în scopuri de audit.
  • Resursele terțelor părți etichetate cu data-cookie-consent se încarcă numai atunci când vizitatorul a consimțit la categoria corespunzătoare.
  • <probo-settings-link> în header-ul sau footer-ul dvs. permite vizitatorilor să își schimbe preferințele în orice moment. sub CCPA banner-ul începe închis și link-ul afișează „Opțiunile dvs. de confidențialitate” cu pictograma oficială de renunțare, deschizând panoul Opțiuni de confidențialitate – vezi panoul JavaScript SDK docs for details.
  • Atunci când actualizați categorii sau setările bannerului, se creează o nouă versiune de proiect. Publicați-o pentru a împinge modificările către vizitatori. Consimțământul existent rămâne valabil până când expiră sau vizitatorii își actualizează preferințele.

Ultima actualizare: