@antik-web/cookie-consent

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.