Documentation

Table of Contents

  1. Introduction
  2. Requirements
  3. Installation
  4. Usage
  5. Whats new in 2.5.15 and 2.6.18?
  6. Change Log
  7. Sources and Credits

Introduction

Slavlee Cookie Control is a extension that shows an alert to ask the user to accept or decline your cookie policy.

This extension helps your TYPO3 website to comply the General Data Protection Regulation (GDPR or DSGVO). You can access the decision of the user via TypoScript or PHP – wise in your own extension.
So, you can react on it like loading tracking tools, only when the user accepted your cookie policy.

Slavlee Cookie Control supports two different modes. The simple mode display only a simple notice message that your website using cookies and links to your privacy page.
The advanced mode shows categories to accept. You can also enable a modal box, where detailled information about the used services can be listed.
The user can accept the whole category and all of its service or single services as well.

The cookie text is changeable via TypoScript.

Requirements

Installation

You can install this extension with the Typo3 own extension manager. Simply go to

After you have installed it, you need to include the Static TS into your main typoscript template. To do so, go to the page that holds your root template. In most cases this is the root page, which has the globe icon.

You access the template with the Template module.

  1. Web
  2. Template
  3. Click on the page that holds the root template
  4. Select "Info/Modify" on the selectbox at the top
  5. Click on the "Edit the whole template record"
  6. Go to the "Includes" tab
  7. Select "Slavlee Cookie Control" in the list of available items

If you already using jQuery or Bootsrap 3/4, then you have to exclude those files. You can do that with the Constant Editor:

Slavlee Cookie Control expects to set the page id of the privacy page. See D) Usage for more information.

That's it!

Usage

The Slavlee Cookie Control has a few settings.

Enable

This enables the whole extension.

Privacy Page

The GDPR force you to inform your users about all features and tools that are handling personal data. That's why Slavlee Cookie Control expects a page id of your privacy page. You can and must set the id in this option.

Tracking Tool

If you are using any kind of tracking tool, then enable this option. This will include one more paragraph in the Cookie alert box for the advanced mode.

Mode

There are currently two different modes:

The simple mode shows a alert box at the top of the page with a generic paragraph to inform your users, that your site is using cookies. This paragraph also include a hyperlink to your privacy page.

The advanced mode shows a form, where the user must decide if they want to enable or disable cookies. If he chooses to disable cookies, then all cookies set for this page will be deleted.
Inside the modal box, the user gets detailled information about all your set categories and services. Here the user can accept and deny single services as well.

To avoid embedding any kind of features that are setting cookies, like tracking tools. You can get the decision of the user, when he enabled cookies in TypoScript.

You can do this like so:

# If Cookie accepted, then include Google Services
[Slavlee\CookieControl\TypoScript\CookiesAcceptCondition]
page.includeCSSLibs.googlewebfont = fonts.googleapis.com/css Sans Pro:300,400,700
page.jsFooterInline.10.10.value = (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', '', 'auto');
popup.includeCSSLibs.googlewebfont = fonts.googleapis.com/css Sans Pro:300,400,700
popup.jsFooterInline.10.10.value = (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', '', 'auto');
[global]
    

In this example the Google Analytics and the Google Font embeddings will be added, when the user accepted the cookies.

 

If you are using TYPO3 V9, then you can use the Expression Language Function: cookiesAccpeted

# If Cookie accepted, then include Google Services
[cookiesAccepted()]
page.includeCSSLibs.googlewebfont = fonts.googleapis.com/css Sans Pro:300,400,700
page.jsFooterInline.10.10.value = (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', '', 'auto');
popup.includeCSSLibs.googlewebfont = fonts.googleapis.com/css Sans Pro:300,400,700
popup.jsFooterInline.10.10.value = (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', '', 'auto');
[END]

# And you can check if a certain category was selected and cookies accepted
# 30 ist the number for Tracking inside the plugin.tx_cookie_control.settings.categories.
[cookiesAccepted(30)]
page.jsFooterInline.10.10.value = (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', '', 'auto');
popup.jsFooterInline.10.10.value = (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', '', 'auto');
[END]
    

In this example the Google Analytics and the Google Font embeddings will be added, when the user accepted the cookies.

To use this extension properly, I recommend to exclude all scripts and fonts and anything that is from Google, Facebook and any other provider for scripts that setting cookies on your page (you can do this mostly with TypoScript). Then use the CookieAcceptCondition to include all these scripts and services like in the example above.

Changing Text

If you want to change the text in the alert box, then you can do this with TypoScript with the known: _LOCAL_LANG feature. Here is an example:

page.5._LOCAL_LANG {
	default {
		cookie_control.alert.title = Alert title
		cookie_control.alert.text.I.0 = This is a alternative text for the Cookie Control extensions. <a href="%s" target="_blank" class="alert-link">Cookie Policy</a>.
		cookie_control.alert.text.I.1 = Second paragraph
		cookie_control.form.agree = Agree Button Label
		cookie_control.form.deny = Deny Button Label
		cookie_control.alert.settings = Toggle Cookie Control
		cookie_control.alert.gotit = OK!
	}

	de {
		cookie_control.alert.title = German alert title
		cookie_control.alert.text.I.0 = This is a alternative text for the Cookie Control extensions. <a href="%s" target="_blank" class="alert-link">Cookie Policy</a>.
		cookie_control.alert.text.I.1 = Second paragraph
		cookie_control.form.agree = Agree Button Label
		cookie_control.form.deny = Deny Button Label
		cookie_control.alert.settings = Toggle Cookie Control
		cookie_control.alert.gotit = OK!
 	}
}    
    
Modal Box in Advanced Mode

If you want to change the text in the modal box for the advanced mode, then you can do this with TypoScript with the known: _LOCAL_LANG feature. Here is an example:

page.5 {
  _LOCAL_LANG {
    de {
      slavlee_cookie_control.moreinfo.modalbox.title = Cookie-Zustimmung
      slavlee_cookie_control.moreinfo.modalbox.close = Schließen
      category.necessary.label = Essentielle
      category.functional.label = Funktionale
      category.statistics.label = Statistiken
      category.marketing.label = Marketing
      moreinfo.services = Dienste
      moreinfo.cookies = Cookies
      moreinfo.urls = URLs
      cookies.phpsessid = PHPSESSID
      cookies.be_lastLoginProvider = Last Login Provider for Backend
    }
  }
}        
    

You can find a complete list of all placeholders in the Resources/Private/Language/locallang.xlf file.

Insert Slavlee Cookie Control on your TYPO3 page

The extension will be set with TypoScript at the position page.5 by default. If this position is already occupied in your TYPO3 page, then you have to set the extension on your own. You can do this like so:

page.5 = USER
page.5 {
	userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
	extensionName = CookieControl
	pluginName = CookieControl
	vendorName = Slavlee
	controller = CookieControl
	action = show
	view < plugin.tx_cookie_control.view
	persistence < plugin.tx_cookie_control.persistence
	settings < plugin.tx_cookie_control.settings
}    
    

Simply choose a different number than 5 that don't disturb your TYPO3 page.

Whats new in 2.5.15 and 2.6.18?

2.5.15

TYPO3 V10 support

The extension is now fully compatible with TYPO3 V8.7.x - 10.4.x. There are no changes inbetween the supported TYPO3 versions needed.

Compared to the version below V2.0.0 the TypoScript has completely changed related to cookies and urls. The newly introduced level: service is now containing cookies and urls for each service. See example below and read carefully the setup.ts file before updating the extension into your production enviroment.

TypoScript changes example

Before

...
categories {
	10 {
		label = LLL:EXT:slavlee_cookie_control/Resources/Private/Language/locallang.xlf:category.necessary.label
		cookies = PHPSESSID
		urls =  
	}
	...
	cookies {
		be_lastLoginProvider {
			description = LLL:EXT:slavlee_cookie_control/Resources/Private/Language/locallang.xlf:cookies.be_lastLoginProvider
		}
	}
	...
}	
...
	

After

...
categories {
	10 {
		enable = 1
		mandatory = 1
 		label = LLL:EXT:slavlee_cookie_control/Resources/Private/Language/locallang.xlf:category.necessary.label
 		services = php
	}
	...
	cookies {
		be_lastLoginProvider {
			description = LLL:EXT:slavlee_cookie_control/Resources/Private/Language/locallang.xlf:cookies.be_lastLoginProvider
			type = session
			expiration {
				type = endofbrowser
			}
		}
	}
	...
	services {
		typo3_belogin {
			enable = 1
			name = TYPO3 Backend
			description = LLL:EXT:slavlee_cookie_control/Resources/Private/Language/locallang.xlf:services.typo3_belogin
			urls = 
			cookies = be_typo_user
		}
		...
	}
	...
}	
...	
	
Renaming Extension

The extension name is changed from cookie_control to slavlee_cookie_control. This means that you need to uninstall the old version. Although it is possible to run both version parallel. So you could install and set it up on a hidden page and after testing you can make the switch.

You find example code in Usage.

2.6.18

Hot- and Bugfixes

This patch includes a lot of hot- and bugfixes related to the modal box. Now the changes gets actually saved and the category gets toggeled correctly, when enabling/disabling services.

Enable fields for services

I have added an enable option for each service in TypoScript:

...
	services {
		php {
			enable = 1
			name = PHP
			description = LLL:EXT:slavlee_cookie_control/Resources/Private/Language/locallang.xlf:services.php
			urls = 
			cookies = PHPSESSID
		}
...		
	

This way you can toggle single services, instead of removing it from the TypoScript path services.

Accepting and Denying services individually

Now, the frontend user can accept and deny service individually. This is only available in the advanced mode.

Individually selection of services

This makes Slavlee Cookie Control fully GDPR conform.

Change Log

Version 2.6.18:

Version 2.5.15:

Version 1.5.12:

Version 1.3.10:

Version 1.3.9:

Version 1.3.8:

Version 1.3.7:

Version 1.3.6:

Version 1.2.4:

Version 1.2.3:

Version 1.1.2:

Version 1.1.1:

Version 1.0:

Sources and Credits

I've used the following scripts and codes as listed.