Setting Up GDPR Cookie Consent Plugin – User Guide

The GDPR Cookie Law requires that the websites that serve the users in the European Union be transparent about all the personal data of the users that it collects. The non-necessary cookies on a website that are used for purposes like analytics, targeted advertising, recording user preferences etc, collect users data. With the new law in effect since May 25th, 2018, it is required that the websites should take informed and explicit consent from the users for any cookies to be installed on the users’ browser.

The GDPR Cookie Consent plugin helps you to implement these regulations and comply with the Cookie Law easily. This article explains how you can set up the plugin to display a cookie message and use the cookies on the website only when the users have given their explicit consent.

Overview

The GDPR Cookie Consent plugin when installed and activated on a WordPress website, adds a message bar on the website to inform the users that the website uses cookies and allows them to accept or reject the use of cookies. It is only based on this consent that the cookies are installed on the user’s browser by the website.

The plugin gives the users granular control over the categories of cookies that they want to enable or disable on their browser. When the user has accepted the cookies, and only when accepted, the scripts of the cookies are rendered on the user’s browser. If they have rejected the use of the cookies on the website, the scripts will be blocked from loading on the browser and the cookies will not be functional.

Using the plugin you can also choose to show the cookie message bar to the users of the EU only. This way you can assume implicit consent for the users of the non-EU countries.

To block or render any cookies on the website, the cookies and their scripts have to be added into the plugin. To add the cookies, the plugin can automatically scan the website and add the cookies being used. It also gives the provision to import the cookies into the plugin and manually add each of the cookies to the plugin.

GDPR Cookie Consent plugin also allows you to automatically block the scripts of the cookies installed by Google Analytics, Facebook Pixel, and Google Tag Manager. This makes it possible to block the scripts of these services that may be installed from any source including the GDPR Cookie Consent plugin.

The default style of the cookie message bar may not be everyone’s cup of tea. So using the GDPR Cookie Consent plugin you can customize the cookie bar and any of its components to look any way you want or to match with the theme of your website. You can also display the cookie notification as a popup on the screen that the users can not ignore. Using this plugin you can customize the color, text, or size of any of the components on the message bar very easily.

The GDPR law also requires that the users be informed of all the cookies being used on the website, the purpose of the cookies, and the data they collect. Using this plugin you can easily display all the cookies that have been added to the plugin anywhere on the website using a simple shortcode.

Now let’s see in detail how to get started with the GDPR Cookie Consent plugin.

Installation

After purchasing the GDPR Cookie Consent by WebToffee, the plugin will be available as a zip file in the API Downloads section of your MY ACCOUNT page.

1. Download the zip file from API Downloads by logging into your WebToffee MY ACCOUNTS page.
2. Log in as the WordPress Admin of your website.
3. Navigate to Plugins > Add New to upload the downloaded plugin.
4. Choose the plugin file to upload.
5. Finally, activate the plugin.

Note: Please uninstall the basic version (in case you have it installed) prior to installing the premium version to avoid any conflicts.

License Activation

After you have installed and activated the GDPR Cookie Consent plugin on your website, you need to activate the license of the plugin so that you will be notified of the plugin updates. To do so, from the WordPress admin dashboard, go to GDPR Cookie Consent > Cookie Law Settings > License.

The page looks as in the screenshot below:

Enter the license key and the license email that you will get from the My Account page in WebToffee and click activate.

Once the license has been activated, you can begin setting up the plugin

Getting Started With GDPR Cookie Consent

After you have activated and installed the GDPR Cookie Consent plugin on your WordPress website, on your dashboard, you will see a menu for the GDPR Cookie Consent plugin.

And on the user end of the website, you will be able to see a cookie message bar at the bottom end of the screen.

 

The setting up of the plugin can be described in two parts.

1. The customization of the cookie bar.
2. Identifying the cookies used on the website and the scripts of the non-necessary cookies and add them to the plugin.

Customizing the Cookie Message Bar – The Cookie Law Settings page

The cookie message bar can be completely customized to look any way you want or to match with the theme of your website. The below screenshot shows an example of a customized cookie bar:

The Cookie Law Settings page looks as in the below screenshot.

The different tabs of the Cookie Law Settings page allow you to customize the different parts of the cookie notification bar. The plugin gives you a live preview of the cookie bar just as you make changes in the cookie bar.

Let’s go through each of these tabs of the settings page.

General Tab

The following is a screenshot for the General settings tab.

This tab is further divided into three sections.

Cookie Bar

In this section, you can make the general settings related to the cookie bar.  The screenshot for this section looks as below.

Let’s see in detail what each of these fields do.

1. 1. The cookie bar is currently: This fields allows you to enable or disable the cookie bar on your website. This fields is on by default. The cookie bar will not be shown on the front-end of the website if this option is turned off, and the cookies will be installed without any consent from the user.
   2. Show only for EU Countries ( GeoIP ): This field enables you to show the cookie notice only to the visitors from the EU countries.
   3. Cookie bar will be shown in: This field allows you to set the cookie bar either in the top or bottom section of the screen.
   4. Fix Cookie Bar to Header: This option will only be available if you choose to show the cookie bar on the header. If checked yes, it will make the cookie bar stick to the top of the website when the user scrolls.
   5. Cookie Bar as Popup: This field enables you to add the cookie notification as a popup instead of a notification bar. 
   6. Add overlay?: This field adds an overlay to the cookie notification popup making the users unable to scroll through the website unless they dismiss the cookie notification with the required action. This field only appears if the Cookie bar is shown as a popup. The screenshot shows the cookie bar set as a popup with an overlay.The cookie bar as a popup
   7. On load: This option allows you to either animate or make the cookie notification sticky on loading the website.
   8. On hide: This option allows you to either animate or disappear the cookie notification when the cookie bar hides.
   9. Auto-hide cookie bar after delay: When this option is set to yes, the cookie bar will hide, accepting the cookies, after the time duration specified in milliseconds in the Milliseconds until hidden field, which appears when you choose yes to autohide the notification.
   10. Auto-hide cookie bar if the user scrolls ( Accept on Scroll )?: If this field is set to yes, the user’s consent will be taken if the user scrolls on the website.

Show Again Tab

Below is the screenshot of the Show Again Tab section and its fields explained.

1. Use Show Again Tab?: When switched on, a tab appears at the bottom end of the screen when the message bar hide. Clicking on the tab, the user can revisit the message bar and if they wish, they can change their consent.
2. Tab Position: Specify which end, left or right, of the screen you want the show again tab to appear
3. From left margin: Here you need to add either “px” or “%” to say how far from the respective margin on the screen you want the show again tab. It is important to add the suffix ‘px’. Adding any other value like ‘pixels’ or no value at all will not produce the desired result.
4. Show More Text: From this field, you can change the text shown in the show again tab to say “Cookie Notice” or whatever you like.

Other

The screenshot of the section is as shown below.

The fields in this section are explained below.

1. 1. Enable Consent Logging: If this field is set to yes, the consent of each visitors will be recorded in the database and displayed on the Consent Report page.
   2. Reload after “scroll accept” event: Choose yes to reload the page automatically when the cookies are accepted on page scroll.
   3. Reload after Accept button click: Choose yes to reload the webpage automatically when the user clicks on the accept button.
   4. Reload after Reject button click: Choose yes to reload the webpage automatically when the user clicks on the Reject button.

Customize Cookie Bar Tab

The Customize Cookie Bar tab looks as in the screenshot below:

Following are the fields in this tab:

1. Message: You can add the text to the cookie bar here. Some HTML is allowed, including a, u, b, br, div, em, i, img, p, span, strong. Note that potentially ‘dangerous’ attributes and all JavaScript will be filtered out. This is for security reasons. Line breaks will be replaced by the HTML tag <br />.

Accept button, Reject button, or Read more links are placed in the cookie bar using shortcodes. More about the shortcodes in the Shortcodes section later in the article.

1. Cookie Bar Color: Lets you change the color of the cookie bar that works best wth the theme of your website.
2. Text Color: Allows you to change the color of the text.
3. Font: Change the font of the text in the message bar. By default, it will take the default theme font.

The Customize Buttons Tab

The following is the screenshot for the Customize buttons tab.

The tab has four different section for customizing each of the buttons that can be added to the cookie bar.

The Accept Button and Reject Button Section

The settings for customizing the Accept button (shortcode [cookie_button]) and the Reject button (shortcode [cookie_reject]) are as follows:

1. Text: Lets you add the text of the button.
2. Text Color: Lets you choose the color of the text.
3. Show as: Lets you choose whether you want the shortcode to appear as buttons or as links
4. Background Color: When you select button in the Show as field, this field allows you to choose the background color for the button.
5. Action: There are two actions that can be performed when the button is clicked. The first is close header – This will close the cookie when the button is clicked. The second option is open URL, which will redirect to a URL.
6. URL: When the Action is set to open URL, clicking on the button will open the URL specified in this field.
7. Open URL in new window: If the but is set to open a URL, this option will allow you to open the URL on a new tab.
8. Size: Choose the size of the button from Extra large, large, medium, or small.

The Customize Button Section

The following is the screenshot of the section where you can customize the settings button. [cookie_settings]

The following are the customization options:

1. Text: Lets you add the text of the button.
2. Text Color: Lets you choose the color of the text.
3. Show as: Lets you choose whether you want the shortcode to appear as buttons or as links
4. Background Color: When you select button in the Show as field, this field allows you to choose the background color for the button.
5. Size: Choose the size of the button from Extra large, large, medium, or small.

The Read More Section

1. 1. Text: Lets you add the text of the button.
   2. Text Color: Lets you choose the color of the text.
   3. Show as: Lets you choose whether you want the shortcode to appear as buttons or as links
   4. Background Color: When you select button in the Show as field, this field allows you to choose the background color for the button.
   5. URL or Page?: Select the option to which the Read More link will be redirected to.
   6. URL: If you select the URL option, this option will appear where you can specify the URL.
   7. Page: If the select the Page option, you can specify which of the page on your website you want the Read More link to redirect to.
   8. Size: Choose the size of the button from Extra large, large, medium, or small.

The Advanced Tab

If the theme of your website clash with the settings of the plugin.  you can try adjusting these settings. The Delete settings and reset button allows you to delete all the settings of the plugin and reset it to its default settings. The advanced settings section looks as shown below:

The Help Guide Tab

The tab consists of two sections – Shortcodes and Help Links as shown below:

Shortcodes

The shortcode section lists all the shortcodes that are used in the plugin. These shortcodes can be used anywhere on the website, pages, and posts, not just the cookie bar. To add the shortcodes inside a template file, you can use the ‘do_shortcode’ function.

The section looks like in the screenshot below:

To know more about the shortcodes used in the plugin, read this article.

Help Link

This section gives you links to resources related to the GDPR Cookie Consent plugin. The screen looks as below:

Adding Cookies and Cookie Scripts to the Plugin

In the setting up of the plugin, you need to add the cookies being used by the website into the plugin. For this, you will need to identify the cookies being used by the website and recognize from them which of these cookies are necessary cookies, the ones that are essential for the website to function in the proper way, and the which of these cookies are non-necessary, the ones that are used for analytical and advertisement purposes.

So before adding the cookies into the plugin, you need to identify the cookies being used on the website. You can refer to this article on how to Identify the cookies your website installs on a browser.

For necessary cookies, the users’ consent need not be taken but the users should be informed of such cookies being used on the website. The non-necessary cookies are the ones to look out for. You need to add the scripts that install the non-necessary cookies to the plugin for the plugin to block them until the user’s consent.

Using the GDPR plugin, the cookies need to be added to the plugin. To do that, navigate to GDPR Cookie Consent > Cookie List. This will take you to the Cookie List page as shown below:

The GDPR Cookie Consent plugin comes with multiple ways with which you can add the cookies to the plugin. They are listed below.

1 – Scan and Import

The plugin lets you automatically scan the cookies and add them to the plugin. From GDPR Cookie Consent > Cookie scanner, Click on the Scan Now button.

Clicking on the Scan Now button, the plugin will start scanning all the URLs of the website.

After the scan is complete, you have the option to view the scan result, add the scanned cookies to the cookie list, download the cookies into a CSV file, and perform the scan again.

You can view all the cookies that have been scanned and the URLs that they have been scanned from the Scan result by clicking on the View scan result button. The result will look as shown below:

When you choose to add the scanned cookies to the cookie list, you are presented with three options as shown in the screenshot below:

In the first option, you can replace all the existing cookies in the list and add the newly scanned cookies. With the second option, the plugin performs a check whether the scanned cookies are already present in the list and skip those cookies that exist. This is the recommended method to add the cookies. In the third method, you can append the newly scanned cookies with the existing cookies in the list. This is not recommended since it could result in duplicate entries in the cookie list.

After you select an option, click on the Start Import button.

All the scanned cookies and its related data will be added to the cookie list. The data added to the cookie list are the cookie ID, cookie type, cookie category, and the duration of the cookies.

By default, the values in the cookie type field thus added will be persistent, all the cookies will be assigned to the non-necessary category or necessary category which are the two predefined categories of the plugin, and the value in the cookie-sensitivity field will non-necessary.

All these, of course, can be edited from the Edit Cookie Type page by clicking on the cookie name.

2 – Import Using a CSV

You can import the cookies into the plugin using a CSV file. You find the option to import cookies under GDPR Cookie Consent > Cookie List. Prepare a CSV in the required format, click on the Import from CSV button.

This will take you to the Import from a  file page.

From this page, upload the CSV to the plugin and import. All the cookies and their details can be seen on the Cookie List page after the import.

Click here to download the sample CSV.

The plugin also has an export feature that helps to export the cookies and its related details to a CSV file. To do that, click on the Download as CSV button from the Cookie List page.

This becomes very useful if there are websites using GDPR plugin that uses similar cookies or if you want to migrate the cookies you set up in the plugin from the development site to the production site. All you need to do is export the cookies of one website into a CSV file and then import them to the other.

3 – Add Cookies Manually

To add the cookies manually, click on the Add New button under GDPR Cookie Consent > Cookie List. Add the cookies and the cookie details from the Add New Cookie Type page. The following is a screenshot of the Add New Cookie Type page.

The following are the fields in the Add New Cookie Type page.

• Cookie Title – Add the title of the cookie. This field is for audit purposes, so this field allows you to add the name of the cookie in a user-friendly manner.
• Cookie description – This allows you to add the description of the plugin so that you can explain what the purpose of the cookie is, what it does, what data it collects, etc.
• Cookie Category – Add the category that the cookies that the cookies belong to.
• Cookie Type – This is to indicate the type of the cookie. The types include persistent, session, or third-party. Persistent cookies are those that generally persists even after the browser is closed. Session cookies are those cookies that will expire when the session is over. Third-party cookies are the cookies are the cookies that are installed by third-party services being used on the website.
• Cookie Duration – This is the time duration the cookies will be active on the browser. The easiest way to find out the duration of a cookie is from the developer console of the browser.
• Cookie Sensitivity – Cookies are either necessary or non-necessary. The necessary cookies are those cookies that, as the name indicates, are absolutely necessary for the website to function in its intended way. The users do not have the control to disable this category of the cookies. The non-necessary cookies are those cookies whose scripts need to be added in the plugin and that the users can enable/disable.
• Head Scripts/Body Scripts – This is where the scripts related to the cookies are to be added. If the scripts are added in the Head Scripts field, the scripts, on user consent, will be rendered in the head of the website and the scripts will be rendered in the body if added in the Body scripts area.

The screenshot below shows an example of adding Google Analytics cookies to the Cookie list from the Add New Cookie Type page:

After all the details have been added as above, click on the update button and the cookie wil be added to the Cookie List.

Adding the Cookie Category

The GDPR Cookie Consent gives the users granular control over the cookies that they want to allow. They can turn the cookies on/off in their browser depending on their category.

For this, the plugin gives you two predefined categories named Necessary and Non-necessary. You can add the necessary cookies of your website to the Necessary category. The users will not be able to disable the cookies that are categorized as Necessary. So the cookies that are essential for the functioning of the website should be added to this category.

For the rest of the non-necessary cookies used by the website, you can either add them to the Non-necessary category or you can create categories of your own. This allows you to create cookie categories like Analytics, Statistics, Advertisement, etc. based on the nature of the cookies.

To create a new category for the cookies, go to GDPR Cookie Consent > Cookie Category. This will take you to the Cookie Category page where you can add the name of the category, slug, description of the category, and give the priority to determine the order in which the categories will appear on the front end.

The following screenshot shows three different categories added to the categories.

The categories thus added will be visible on the user-end on a pop-up when the user clicks on the Settings button on the cookie bar. When clicked on each category, the users will be shown the description of the category as added by the admin. The user can then choose to enable or disable the cookies of each category from the popup.

Note: The categories, either predefined or user-defined, are only visible on the popup when there are cookies added into that category.

Blocking Cookies Automatically – The Script Blocker

Using the GDPR Cookie Consent plugin you can automatically block the scripts of the cookies being rendered on the website. The scripts that are currently blocked by the plugin are the ones added by Google Analytics, Facebook Pixel, and Google Tag Manager.

To manage automatic blocking of these scripts using the plugin, from the WordPress dashboard, go to GDPR Cookie Consent > Script Blocker. From this page, you can enable or disable the scripts for Google Analytics, Facebook Pixel, and Google Tag Manager.

To block the scripts automatically from rendering on the website, enable the toggle button for the selected scripts. This will block the scripts from any sources rendering on the website unless the user consents. If the toggle buttons are in the disabled state, the scripts from other sources other the GDPR plugin will not be automatically blocked.

For more information on automatic script blocking read: How to Automatically Block Cookies Using the GDPR Cookie Consent Plugin.

Logging the Users Consent

You can keep a record of the users who have given their consent using the GDPR Cookie Consent plugin. To log the consent given by the users, make sure that you have enabled the Enable Consent Logging field under GDPR Cookie Consent > Cookie Law Settings > General > Other. When the consent is being logged, the IP addresses of the users that have given their consent and the cookie categories that they have given consent to will be recorded in the Consent Report page, along with the date and time of the visit and the user ID if the user has logged in.

It is completely up to the admin to decide whether he wants to keep a record of the consent. However, when the consent logging is enabled, the users should be notified that their IP address will be collected for the consent logging purposes.

All this data in the consent report can be exported to a CSV file by clicking on the Export Report button on the Consent Report page.

Show the Cookie Bar Only for the EU Countries

You can make the cookie message bar to be visible only for the visitors from the European Union. Using this feature, the consent for using the cookies on the website will only be taken from the visitors of the European Union.

To set the cookie notification only for the EU visitors, go to the Cookie Law Settings page under GDPR Cookie Consent. Click on ‘yes’ for Show only for EU Countries ( GeoIP ) field and update the settings.

The GeoIP feature can be extended to more countries using the code snippet in this article.

To know more about the GDPR Cookie Consent plugin, visit the plugin product page.