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.

View as Markdown

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:

    FieldDescription
    NameUn nume intern care să identifice acest banner (de exemplu, „Site-ul principal”)
    OriginOriginea completă a site-ului dvs. web (de ex. https://www.example.com)
    Cookie Policy URLLink către pagina dvs. de politică privind cookie-urile (necesar)
    Privacy Policy URLLink către pagina dvs. de politică de confidențialitate (opțional)
    Consent ExpiryNumărul de zile înainte ca consimțământul să expire și banner-ul să reapară (default: 365)
    Default LanguageLimba fallback pentru banner (default: enSDK-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 — The cookie name (e.g. _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 închidere </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>
    

    Replace YOUR_BANNER_ID Link-ul 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 pagina dvs. <html lang="..."> atribut sau setarea limbii browserului. Pentru a forţa o anumită limbă, adăugaţi data-lang:

    <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ântul data-cookie-consent De exemplu, pentru a porni 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.

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.
  • Consent is stored in a probo_consent Cookie-uri și pagini de server înregistrate în scopuri de audit.
  • Third-party resources tagged with data-cookie-consent încărcați numai atunci când vizitatorul a consimțit la categoria corespunzătoare.
  • <probo-settings-link> sub CCPA bannerul î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 – a se vedea 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: