@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.

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({
        main_color: '#ff0000',
        gtach: ['G-XXXXXXXXXX', 'G-XXXXXXXXXX'],
        lang: 'sk',
        meta_cookie: false,
        analytics_cookies: [
            {
                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>',
                },
            }
        ],
        marketing_cookies: [
            {
                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>',
                },
            }
        ],
        cookie_expiration: 182,
        force_consent: false,
        force_reload_cookie: true,
        debug: true
    });
</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

Since version 2.0.0, you can use this package as a JS module. Install it from npm package store.

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';

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

Options

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

Option	Type	Default	Description
main_color	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.
meta_cookie	boolean	true	Pass false value when you do not want to show Meta in analytic and marketing cookie tables.
analytics_cookies	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.
marketing_cookies	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 || 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 can either provide a only string with ID, or Array of strings containing multiple IDs. If valid ID is provided, Google is automatically inserted in analytics table and marketing table as well.
force_consent	boolean	false	Enable if you want to block page navigation until user action.
cookie_expiration	number (integer)	182 (specified in env, set during build)	Cookie expiration time in days.
force_reload_cookie	boolean	false	Remove cookies before running app. This makes cookie box show everytime user opens a page.
debug	boolean	false	Enable logs.

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.
cookieConsent	function	-	Function to get raw cookie-consent object.
gtag	function || null	-	Function to get gtag function when available.