Quanti-cookie-bar NPM

Dokumentace - Quanti Cookie Bar

Instalace

npm install quanti-cookie-bar

Vložení na web

<script setup>
    import { QuantiCookieBar } from 'quanti-cookie-bar';
    import "quanti-cookie-bar/style.css";
</script>

<template>
    <div>
        <QuantiCookieBar />
    </div>
</template>

Požadavky na Node.js

Node.js 18.x.x

nebo

Node.js 20.x.x

Upozornění

Pro správné fungování cookie lišty je třeba mít ve svém projektu implementováno GTM (Google Tag Manager) a všechny scripty, které chcete spouštět na základě cookies musíte mít vložené přes GTM. Pokud ve vašem projektu GTM nemáte, tak cookie lišta nebude posílat do GTM souhlasy/ nesouhlasy uživatelů.

Obecné fungování cookie lišty

Cookie lišta funguje v kooperácií s Google Tag Managerom (GTM). Je připravena na Consent Mode 2.0. Pozri sekci "Upozornění". Užívateľov výber sa ukladá do localStorage. Keď sa prvotne načíta stránka, tak cookie lišta automaticky pošle zamietnuté súhlasy (consent_default). Následne sa pozrie do localStoragu či už užívateľ v minulosti nejaké súhlasy potvrdzoval, ak áno, tak pošle do GTM aktualizáciu consentov (event: consent_update) a cookie lišta sa nezobrazí. Ak cookie lišta v localStorage nenájde žiadne súhlasy, tak sa užívateľovi zobrazí.

Detailní fungování naleznete v článku na ForDevs. https://fordevs.cz/clanky/jak-na-cookies-a-cookie-listu-pro-web

Nastavení v GTM

V GTM je třeba container přepnout do režimu "Povolit přehled souhlasu". správce -> Nastavení kontejneru -> Povolit přehled souhlasu. Následně u každé značky v GTM můžeme specifikovat při jakých souhlasech se má spustit. Značky -> Konfigurace značky -> Nastavení souhlasu. Můžeme si specifikovat vlastní událost ve spouštěčích -> consent_update. Tento event vystřeluje cookie lišta v momentě, kdy uživatel zvolí souhlas/nesouhlas.

Možnosti nastavení a eventy

CSS

Cookie lištu lze nastavovat pomocí změny v css proměnných. K dispozici jsou tyto proměnné a výchozí hodnoty:

--cookie-bar-padding: 2.5rem 0; /* 40px */

--cookie-bar-color-primary: #df2686;
--cookie-bar-color-primary-hover: #cb1573;
--cookie-bar-color-light: #fff;
--cookie-bar-color-dark: #000;
--cookie-bar-color-gray-light: #d3d3d3;
--cookie-bar-color-icons: #000;

--cookie-bar-button-radius: 0;
--cookie-bar-button-height: 2.5rem; /* 40px */

--cookie-bar-max-width: 71.25rem; /* 1140px */

--cookie-bar-overlay-z-index: 100;
--cookie-bar-z-index: 1000;

Propsy

Povolené propsy a jejich výchozí hodnoty:

title: {
    type: String,
    default: 'Dám si cookies 🍪',
},
description: {
    type: String,
    default: `Chtěli bychom Vám poskytnout ty nejlepší zážitky z našeho webu. K tomu používáme soubory cookies, abyste zde našli vše, s čím jste za námi přišli. Díky nim můžeme analyzovat provoz webu a neustále jej zlepšovat. <a href="/cookies" class="cookie-bar__link">Více o cookies.</a>`,
},
buttonTexts: {
    type: Object,
    default: {
        acceptAll: 'Přijmout vše',
        rejectAll: 'Odmítnout',
        customSelect: 'Vyberu podle sebe',
        acceptSelect: 'Povolit výběr',
    }
},
cookiesLogo: {
    type: String,
    default: null,
},
functionalTexts: {
    type: Object,
    default: {
        title: 'Nezbytné',
        perex: 'pro správnou funkci webu',
        alwaysActive: 'vždy aktivní',
        description: 'Nezbytné cookies pomáhají našemu webu k tomu, abychom vám mohli poskytnout pohodlný zážitek z návštěvy. Tyto cookies jsou potřebné,aby web fungoval správně.',
    }
},
analyticsTexts: {
    type: Object,
    default: {
        title: 'Analytické',
        perex: 'k měření a analýze dat',
        description: 'Analytické cookies nám pomáhají porozumět, jak návštěvníci používají náš web. Díky nim můžeme zlepšovat výkon stránky.',
    }
},
adTexts: {
    type: Object,
    default: {
        title: 'Marketingové',
        perex: 'pro zobrazení relevantní nabídky',
        description: 'Marketingové cookies nám pomáhají zobrazovat relevantní obsah a reklamy, které pro vás mohou být zajímavé a užitečné.',
    }
},
forceCookieOpen: {
    type: Boolean,
    default: false,
},