User manuals

All instructions about how to set up Cookie-Script properly

User manuals

GDPR is a regulation created for all websites that operate and collect user data within EU members states. It is not required to collect consents from visitors coming outside of European Union.

In order to meet our client demand, we have created an option to only target visitors coming from EU countries. This can be set when getting code of your item by clicking Use item button:

geo-eu

Click HTTP + GEO targeting button to see the code with included geo-targeting. Visitors from outside EU will not see cookie Popup in this case.

It requires you to update Cookie-Script code on your website if you are not using EU geo-targeting yet.
Geo-targeting does not work with self-hosted code since visitor IP is checked on Cookie-Script servers.
Geo-targeting is available in paid subscriptions.

This is final update of Cookie-Script to meet all GDPR requirements.

Cookie-Script now allows you to collect and record visitor consents. The exact explanation of how it works will be published soon. 

How to enable visitor consent recording?

Consent recording can be enabled for each item individually. Just set "Collect visitor consents" (currently last) option to "Yes": 

collect-consent

You have to enable this option manually for existing items created before 2018-05-24. It is automatically enabled for all new items.

How to download consent log?

You can download it in your account menu choosing Download visitor consent menu item. You then have to select what item you want to download consents for and a period of time:

download-consents

Note: Consents are synchronized every 20 minutes, so it can take up to 20 minutes for particular consent to appear in report

What do I get? 

A ZIP file will be downloaded automatically. Zip file contains a list of CSV files, one for each day for the chosen period. 

Inside a CSV file you will find a list with the following data for each "I agree" click:

1 Unique key that is saved in visitor's cookies. This key can be used to check if user actually gave consent.
2 User action (accept / reject). 
3 Masked IP address of a visitor. Last digits are set to 0, so it is not considered as private data.
4 Date and time when user clicked the button. Date and time currently is taken from user browser, so you have to adjust for possible timezone differences
5 Page where consent was given
6 User browser agent 

As you can see, none of the data above can be considered private data, so you do not need any extra consent from user to use Cookie-Script. 

Pro subscription

Consent record option is a part of new Pro payment plan due to extra server usage for constant consent recording. 

If you already have Premium membership, you only pay the difference between Premium and Pro (20 €). Just buy Pro as normal and discount will be automatically applied.

Get pro membership

According to GDPR, website visitor should be able to change his cookie settings (withdraw consent) as easy as agree to cookie usage. This means visitors should be able to do this on any page and not search for a specific page with Cookie Policy.

If you are not happy about badges on your site, you can add Cookie Settings button/checkbox on your Cookie Policy page only.

We have created this functionality very flexible and adjustable for almost any website design

You can set this up using just 2 options: 

 

1  Show badge option:

Yes After visitor clicks Agree / Disagree button in a popup, a badge (badge design is set in next option) will be shown on every page allowing visitor to change his choice. 

No Nothing else will be shown on the page after user clicks Agree / Disagree button in cookie popup. Visitor can only change his selection on Cookie Policy page (or any other page where you add Cookie Settings button/checkbox).

 

2 Cookie badge text/image option:

Text: Fill this option with a text that you want to see in a badge. Here is example of how badge will look on your website:

cookiebadge

Image: You can instead fill this field with image link (URL), like example.com/image.png and cookie badge will be shown as your custom image. We do not offer file upload since we focus on code hosting. 

Note: your image will be automatically scaled down to become 45px wide. You can change this with your own CSS styles

Default Cookie-Script logo: Leave this option blank and we will show Cookie-Script logo:

 cookiebadge-default

 

Note: cookie badge is automatically placed in the same position (left/right, top/bottom) as your cookie popup. This can also be customized with your own CSS styles
Note: cookie badge with text is colored same way as cookie popup box

 

According to GDPR, strictly necessary cookies could be set in case they are required for website to work properly. Also, not all cookies are considered private data, for example a cookie to store visitor setting on the website, language or cart can be set without user consent.

Cookie-Script now allows you to list those cookies and they will not be deleted when page loads (before user agreed to Cookie Policy). A new option is implemented for that: Functional cookies

Simply list all your functional cookies comma separated, for example: 

_gid,sid,session

 

Regular expression usage

Some systems session cookies do not have a certain name, instead cookie names are generated randomly, like a hash value, ex: 3c70b445f566758848ec319708ce2e05 (32 symbols of alphanumeric characters).

For that we have implemented regular expression match functionality, which means you can use a regular expression for cookie name and Cookie-Script will also not delete any cookies that match regular expression.

Here is an example of same "Functional cookies" option in this case:

cart, /^[a-f0-9]{32}$/i, language

In this example 3 cookies are considered strictly necessary and will not be deleted by Cookie-Script:

  1. cookie named cart
  2. cookie with any name that has 32 symbols of 0-9 and a-f (hash-like value)
  3. cookie named language

You can use this regular expression to keep hash-like cookie names: /^[a-f0-9]{32}$/i

For other types of random generated cookie names you can build your own regular expressions.

Note: Regular expression has to start with a "/" symbol

You can allow visitors to change their mind (withdraw Cookie Policy consent if necessary) on any page. This can be done with a checkbox or link/button. Main difference in their behavior is that: 

checkbox - actually changes user consent when clicked.

button / link - only displays cookie policy popup, user has to click button in popup to change his choice.

 

Adding checkbox

All you need to do is place a checkbox with ID csconsentcheckbox in any place of your website, for example on Privacy Policy page after Cookie Policy section.

Here is an example of code:

<input id="csconsentcheckbox" type="checkbox">I agree with Cookie Policy

Another example with label text being clickable:

<input id="csconsentcheckbox" type="checkbox"><label for="csconsentcheckbox">I agree with Cookie Policy</label>

You are free to change text and style it as you want. Just make sure it's a checkbox and it has a proper ID attribute.

Checking/Unchecking this box is the same as clicking I agree / I disagree button. If user already agreed to Cookie Policy, this checkbox will be automatically checked. In fact, if you click I agree / I disagree buttons on the same page, checkbox will automatically check/uncheck. If visitor didn't make a choice yet, checkbox will be unchecked.

You can test if this works properly by clicking this checkbox while cookie policy popup is visible: it should disappear like when clicking I agree button

Note: This functionality was introduced on 2018-05-05, so to enable it for a Cookie-Script item created before that date you have to click Update all items button in the list of items.

 

Adding button / link

As with checkbox, you have to assign ID attribute csconsentlink to any element, clicking which will open popup. It can be any element: button, link, image, etc. Some examples: 
 
<a href="javascript:void()" id="csconsentlink">Cookie Settings</a>
<button id="csconsentlink">Cookie Settings</button>
<span id="csconsentlink">Cookie Settings</span>
Note: This functionality was introduced on 2018-05-18, so you need to Update all items created before that date.

If you don't know what third-party cookies are, consider reading our explanation first.

Important: Blocking third party cookies is only possible by blocking whole third-party functionality. This means Google Analytics / YouTube videos / Facebook buttons / AdSense or anything else that you block WILL NOT WORK until user agrees with cookie policy (manually or automatically). 
Note: This update was introduced on 13th of June 2015. If you last saved your Cookie-Script item before that date and want to use functionality below, you have to re-save your Cookie-Script item.


Blocking JavaScript third-party cookies

To block third-party cookies, find a JavaScript code that is setting third-party cookies and:

  • change type attribute from text/javascript to text/plain (if type attribute missing, just add it)
  • add data-cookiescript attribute and set it to accepted

All JavaScript with such attribute changes will only execute if user agreed with Cookie Policy.

Note: JavaScript will be executed when user clicks "I agree" button, without page refresh.

Example of standard Google Analytics code

Change code from:

<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');
</script>

Change code to:

<script type="text/plain" data-cookiescript="accepted">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');
</script>

Example of included JavaScript file

Change code from:

<script src="/js/myscript.js"></script>

Change code to:

<script type="text/plain" data-cookiescript="accepted" src="/js/myscript.js"></script>


Blocking iframe third-party cookies

To block third-party cookies set with iframe (like YouTube videos), find an iframe code that is setting third-party cookies and:

  • change src attribute name to data-src
  • add data-cookiescript attribute and set it to accepted

All iframes with such attribute changes will only show up if user agreed with Cookie Policy.

Note: Iframe will be updated when user clicks "I agree" button, without page refresh.

Example of standard YouTube video iframe

Change code from:

<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxxxxx" frameborder="0" allowfullscreen></iframe>

Change code to:

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/xxxxxxxxx" data-cookiescript="accepted" frameborder="0" allowfullscreen></iframe>

You can also add a text explaining user that he must accept cookie policy in order to see the video. Use "alt" attribute for that:

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/xxxxxxxxx" data-cookiescript="accepted" alt="Please accept cookie policy first" frameborder="0" allowfullscreen></iframe>


Blocking embed / object / link third-party cookies

In the same manner you can block embed / object / link elements from setting third-party cookies

Example of embed element

Change code from:

<embed src="somefile.swf">

Change code to:

<embed data-src="somefile.swf" data-cookiescript="accepted" >

Example of object element

Change code from:

<object src="somefile.swf"></object>

Change code to:

<object data-src="somefile.swf" data-cookiescript="accepted" ></object>

Example of link element

Change code from:

<link href="http://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet" type="text/css">

Change code to:

<link data-href="http://fonts.googleapis.com/css?family=Roboto:100" data-cookiescript="accepted" rel="stylesheet" type="text/css">

Example of image element

Change code from:

<img src="http://example.com/image.jpg" />

Change code to:

<img data-src="http://example.com/image.jpg" data-cookiescript="accepted" />

third-partyThird-party cookies are cookies that are set by a website other than the one you are currently on. For example, you can have a "Like" button on your website which will store a cookie on visitor's computer, that cookie can later be accessed by Facebook to identify visitor and see which websites he visited. Such cookie is considered to be a third-party cookie.

Another example would be an advertising service (ex: AdSense) which also creates a third-party cookie to monitor which websites were visited by each user.

Identifying third-party cookies

You can check if website uses third-party cookies in any modern browser. Instructions vary in different browsers, here is how you can do it in Chrome:

  • Press F12 to open Developer Tools (or right click on the page and choose Inspect Element)
  • In Developer Tools choose "Resources tab"
  • On the left double click "Cookies" section to unfold it

You should see current website domain (or subdomain) here. If you can see any other domains in this list, this means website uses third-party cookies:

cookies-developer

Blocking third-party cookies with Cookie Script until visitor accepts cookie policy

Follow the instructions to block any kind of third-party cookies

worldlanguagesThe most common question from our users is how to set up a cookie popup on website with multiple languages. So here is an explanation on how to set up Cookie Script with multi-language website.

First, create a Cookie Script item for each language and fill all fields for each Cookie Script item in proper language. This allows you to show different text in each language.

Next, insert each Cookie Script popup in proper language of your website. Technical part of this part depends on the system your website uses.

Note: Cookie Script will remember if user agreed with cookie policy for all languages unless you have a separate domain name for each language (like example.com/example.de/example.co.uk).

There are 2 main modes of Cookie-Script depending on how strict you want it to be, it's called Consent mode:

consent-mode

Implied : All cookies are set at visitor’s computer as usual and visitor is just informed about cookies. We call it “the soft way”

Explicit : This option is used by default because that's a requirement for GDPR. If this option is used, no cookies will be stored on visitor’s computer until visitor agrees with cookie policy. We call it “the hard way”.

Things to note when using explicit mode:

  • Removing cookies can influence workflow of your website. For example, visitor will not be able to login until he agrees with your cookie policy. If you have a webshop, it is not recommended to use explicit mode since visitors will not be able to make any purchases before they agree with cookie policy.
  • If you are using some analytics software (like Google Analytics), explicit cookie consent mode might mess up your analytics data since each pageview (even from same visitor) will be tracked as new and unique visitor.
  • In case you have a simple website without any analytics software installed, you should not have any problems using explicit cookie consent mode.

Sometimes it is faster and more reliable to store JavaScript files on your own server, usually same place as website itself. This also allows web developers to edit JavaScript files directly and make changes on the fly.

For this purpose we have created an option to download your generated JavaScript files, edit them and host it on your servers.

How to download a JavaScript file?

You can download JS file from your account page by clicking “Download” button next to a proper cookie script item.

download-menu

Editable JS file – should be used if you want to edit file yourself before putting it on your website. It is written in a readable way, so a web developer could add necessary changes.

Minified JS file – should be used if you are not going to add any changes. This file takes slightly less space so it can be read by visitors faster.

Choose a proper file and it will start downloading:

download

How to upload a file to your server?

You can upload file to any folder on your website or to a root of web directory. This can be done using FTP client or any other method you use to upload files.

How to use file on your website?

Once you upload file to your server, you can include it on your website. You can include JS file in header or just before closing </body> tag. Here is an example of how to include JavaScript files to your website:

<script type="text/javascript" src="/903e0d0491c903e0d0491c903e0d0491c.js"></script>

If file is placed in root website directory. Change file name to the one you have uploaded. Or:

<script type="text/javascript" src="/includes/903e0d0491c903e0d0491c903e0d0491c.js"></script>

If file is placed in “includes” directory.

You can change file name to your own if you need.

Note that if you decide to download and host JavaScript file yourself, it can’t be updated automatically by cookie-script anymore. This means that no changes to cookie script item (ex. pop-up title, description or custom colors) will take effect by itself. In order to apply new changes, you have to re-download JavaScript file and re-upload it on your server.

Google-AnalyticsOk, this one is pretty cool. It is now possible to integrate Cookie Script with Google Analytics!

Google Analytics is one of the most powerful tools to analyze visitor behavior on the website. If you are using Google Analytics, you can now easily connect it with Cookie Script pop-up on your website. This can be done in the new option “Enable Cookie Statistics”, set it to “Use Google Analytics”:

enable-statistics

All statistics about visitor interaction with cookie pop-up box is saved as Events in Google Analytics. You can see it in Google Analytics > Behavior > Events. All events are saved under “Cookie Script” category. Here is what actions you can get:

  1. Show – triggered when cookie pop-up is displayed.
  2. Accept – triggered when user clicked “Accept” button in pop-up box. Note that if you set up automatic accept after some time (if set up in Cookie Script settings) will not trigger this event.
  3. Read more – triggered if user clicks “Read more” button.

This is both simple and powerful tool to analyze user behavior and optimize your cookie pop-up settings. Here is just a few of hundreds applications where you can use this data:

  • Show how many visitors are reading/accepting/ignoring you cookie policy.
  • Show how many purchases (or other goals) are done with/without accepting/reading cookie policy.
  • Show if foreign country visitors accept/ignore/read cookie policy.
  • Show how many mobile visitors accept/ignore/read cookie policy.
  • Export all kinds of reports or send them by email.
  • And much-much more.

Google Analytics also takes care of tracking Unique and non-Unique events. If you are not familiar with Google Analytics Events, you can read more about it on Google Help page.

You will also notice there are two more choices for “Enable Cookie Statistics” option:

  1. Enable – Uses Cookie Statistics tool to collect data about user behavior on the website. Not so advanced as Google Analytics, but can be used as alternative.
  2. Disable – Disables any Cookie Statistics. Use this option if you do not care about monitoring user behavior. This will reduce number of requests to our servers.

The best part about new Google Analytics integration: it is available for both free and premium accounts

Some of our Spanish users have requested a new functionality which can be used according to Spanish cookie law. In Spain the law provides that after a certain time since the pop-up is displayed the acceptance of cookies is considered implicit.

We have implemented a new feature where after a certain time the pop-up disappears and all the cookies are accepted without press the button. This means your visitors will not see cookie pop-up warning on other pages, unlike with "Auto hide" option.

Please note that both "Auto accept" and "Auto hide" options stop displaying cookie pop-up warning after a certain time, so if using both - smallest value will be used to hide the pop-up. If "Auto accept" option is smaller than "Auto hide", "Auto accept" overwrites "Auto hide" value.

autoaccept

We are getting a lot of warm and thankful words from our users. Some of them are also very constructive and people ask us to implement new functionality.

Today we are happy to announce that two new options requested by our users have been implemented.

Apply for subdomains.

This option will be useful for websites where same pop-up box is shown on many subdomains. Let’s say you have a website example.com with some subdomains:

shop.example.com
about.example.com
contact.example.com

You can use this new option to remember user agreement for cookie usage and only show pop-up box once. In this case you need to place same Cookie Script code in all subdomain pages. You can find new option in the list of options for each Cookie Script:

new-option-subdomains

If you do not have subdomains on your website or you are not sure about this option, just keep it set to “No”. Misuse of this option will not make any problems with displaying your pop-up box.

Hide pop-up automatically.

This option can be used if you don’t want to annoy your visitors with pop-up box too much. You can now hide cookie pop-up box automatically after a certain number of seconds. It will hide smoothly, so your visitors will have a great experience browsing website.

Auto hide option can be left blank if you do not want to hide pop-up box automatically.

new-option-autohide

 

We are trying our best to keep Cookie Script both user friendly and functional solution. If you have any wishes or functionality requests, please let us know and we will do our best to implement it. You can contact us on contact page or via facebook page.

Some users are not aware of what secure connection is and how it is related to Cookie Script, so we decided to give a little explanation on this. 

In few words, secure connection enables a more secured way of user interaction with website. That's why major websites like google.com and facebook.com use secure connection. You can see it as a green lock in a browser address bar (looks differently in different browsers):

https-green

Secure connection is often used in web-shops during checkout in order to protect customer personal and credit cart information. If you don't have secure connection (green lock) on your website, then you can use regular HTTP connection.

If your website has a page where secure connection is used, all scripts and elements on that page must be attached using a secure connection as well. Otherwise green lock will become grey and users will see a warning:

https-grey

https-warning

Cookie Script can support secure connection, which means all your secured pages will remain fully secured and will show green lock without warnings (unless you have some other unsecured content).

You can choose either to use HTTP or HTTPS connection in your cookie-script item > Use item:

https-option

Tips: 

  • If you don't know which one to choose, just use HTTP
  • If you have both pages with and without HTTPS, use HTTPS. It will automatically switch back to HTTP if needed.
  • Secure connection is available for premium membership users.

New feature has been added in cookie-script edit box: "Agreement Expiration". It is designed to set a number of days for user's cookie agreement.

Previously used default cookie agreement expiration date was set to 30 days, now you can change it yourself for each cookie-script: 

agreement

In order to change this setting, you have to :

  1. Login to your account
  2. Edit cookie-script settings for desired website
  3. Save 

That's it!

We are finally done developing new major functionality - custom colors for cookie pop-up box. This is a new step towards customizing cookie pop-up box. You are now able to style pop-up box your own way to match your website design.

Custom colors can be changed in cookie-script item editing window > Custom colors tab: 

custom-colors

Custom colors are selected using a handy tool similar to the ones used in graphical design programs like Adobe Photoshop: 

custom-colors-picker

Custom colors tool allows you to specify all colors used in cookie pop-up box allowing you to create thousands of design variations. Here are some of them: 

cookie11cookie12cookie13cookie5cookie10

Note: Custom colors are available for "Premium" subscribers only. You can play with them in free version, but they will not be applied when showing pop-up box. You can subscribe to "Premium" plan here.

Finally Cookie Statistics is out of beta version. Now it is stable and presents all necessary data to monitor user behaviour. Cookie Statistics tool is a useful feature which helps to analize how often users accept or ignore cookie warning and if they actually read cookie policy. Change your cookie pop-up and see how it reflects on user behavior.

Improved Cookie Statistics tool features: 

  1. Date range
  2. Graphs control
  3. Improved color design
  4. Responsive design

Cookie Statistics tool comes together with free subscription, so go ahead and try it on your website, it's free. Here is a quick view on our improved Cookie Statistics tool.

analytics

Pop-up display statistics is currently disabled since you can see number of unique visitors in other statistics tools, you can still track number of clicks on Agree and Read more buttons. Disagree button clicks is in the roadmap.