Antik Cookie Consent

Official cookie consent package for ANTIK websites. This package provides customizable cookie bar combined with Google tag manager functionality, and it is also connected with laman.

Migrate from v2 to v3

See UPGRAGE.md for details.

Build

1. Firstly, download the package from repository.

2. Provide necessary environment variables to make laman fetching work.

Then, you can build this package using commands below:

npm install
npm run fetch:laman
npm run build

Build files will be located in dist folder.

Usage

Use as cdn script

Include antik-cookie-consent.min.js in head tag of a website:

<script src="https://cookie-consent.antik.sk/latest/acs.js?w=url.webu.sk"></script>

Pay attention to w get parameter, as it is mandatory for this script to run.

In the body, insert another script element, which will initialize the package and which you can customize cookie bar and package settings with.

Example with all parameters

<script type="text/javascript" defer>
    AntikConsent.run({
        debug: true,
        lang: 'sk',
        shouldInjectCss: true,
        mainColor: '#8102ad',
        cookieExpiration: 20,
        gtach: ['GTM-XXXXXX'],
        disableMetaCookie: false,
        analyticCookies: [
            {
                provider: 'Test, Inc.',
                information: {
                    sk: '<a class=cc-link target=_blank href=https://www.lipsum.org/>Zásady používania údajov spoločnosti Test</a>',
                    en: '<a class=cc-link target=_blank href=https://www.lipsum.org/>Policy</a>',
                },
            }
        ],
        marketingCookies: [
            {
                provider: 'Test, Inc.',
                information: {
                    sk: '<a class=cc-link target=_blank href=https://www.lipsum.org/>Zásady používania údajov spoločnosti Test</a>',
                    en: '<a class=cc-link target=_blank href=https://www.lipsum.org/>Policy</a>',
                },
            }
        ],
        onAccepted: (cookies) => {
            console.log('Accepted cookies, detail below');
            console.log(cookies);
        }
    });
</script>

Executing the run method of AntikConsent will automatically setup cookie consent bar and google tag manager for you. Google tag manager will start to analyze when user agrees usage of the analytics cookies. Otherwise, it will not load.

Example with minimum parameters

<script type="text/javascript" defer>
    AntikConsent.run();
</script>

Use as a module

npm install @antik-web/cookie-consent

Then use in your code as shown below. You can see examples above. Also, you should get full typescript support, as .d.ts files are provided within the package.

import { AntikConsent } from '@antik-web/cookie-consent';
import '@antik-web/cookie-consent/dist/cookieconsent-v3.css';

AntikConsent.webUrl = import.meta.env.VITE_APP_ANTIK_CONSENT_URL;
AntikConsent.run({
  mainColor: '#009BFF', 
  gtach: import.meta.env.VITE_APP_GTACH.split(','), 
  shouldInjectCss: false,
});

Options

Table below sums up all the available options (must be passed to the .run() method).

| Option | Type | Default | Description | |-----------------------------------|---------------------------------|------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | mainColor | string | #2d4156 | If provided, the main color of cookie bar will be the one you provided. Hovering the element will have the same color with opacity of 65%. Pay attention, main_color argument must be in #xxxxxx HEX format. | | lang | string | Browser's language | If you want to manually select language of cookie consent box, include this parameter with proper language code. | | disableMetaCookie | boolean | false | Pass true value when you do not want to show Meta in analytic and marketing cookie tables. | | analyticCookies | Object || Object[] | - | Names of used cookies provided in the analytics table in cookie box. You can either provide only one Object (see example above), or Array of Objects. In information key, you need to provide information in specific languages. Also, when you use HTML tags, you dont need to wrap attributes in quotation marks. | | marketingCookies | Object || Object[] | - | Names of used cookies provided in the marketing table in cookie box. You can either provide only one Object (see example above), or Array of Objects. In information key, you need to provide information in specific languages. Also, when you use HTML tags, you dont need to wrap attributes in quotation marks. | | gtach | string[] | - | As we spoke of implementation of GTAG in this package, in this parameter, you have to provide google tag manager id(s) to allow the package to use it. You have to provide Array of string(s) containing ID(s). If valid ID is provided, Google tag manager would be automatically inserted to head and initialized. | | cookieExpiration | number (integer) | 182 (specified in env, set during build) | Cookie expiration time in days. | | debug | boolean | false | Enable logs. | | shouldInjectCss | boolean | false | Tells the library if it should download css from cdn or you provide css yourself. | | onAccepted | function | - | This function is called right after user agreed with cookies usage (excluding necessary cookies). As a parameter, you receive object with details about user preferences. |

API

Table below sums up all the available functions of AntikConsent object.

| Option | Returns | Parameters | Description | |-----------------------------------|------------------------------|---------------------|----------------------------------------------------| | run | void | Options object | Runs the application with specified configuration. | | gtag | function || null | - | Function to get gtag function when available. | | cookieConsent | function | - | Function to get raw cookie-consent object. | | webUrl | string | - or string | Get or set web_url, that is used in analytics. | | showSettingsModal | void | - | Open cookie settings modal using Javascript. | | setLanguage | string | - or string | Set language of all cookie-related elements. |