The European Court of Justice (ECJ) has ruled that cookie banners, which do not expressly require the consent of the website visitor, are not lawful under the DSGVO. To make it easier for TYPO3 developers to implement this new requirement, we have developed sgalinski Cookie OptIn, an easy-to-integrate module that enables embedding for cookies and tracking scripts that is compliant with DSGVO (GDPR) and ePrivacy. You can find further information in the german blog article from Dr. Schwenke.
| TYPO3 Versions | 6.2.X | 7.6.X | 8.7.X | 9.5.X | 10.4.X |
| PHP Versions | 5.5.X | 7.0.X | 7.1.X | 7.2.X | 7.3.X | 7.4.X |
| Tested Browsers | Internet Explorer 11 and Evergreen Browsers |
Cookies may be loaded due to the DSGVO (GDPR) and the ePrivacy regulation only if the respective side visitor agrees this expressly (cookie consent). This also eliminates the need for opt-out solutions in which the user must actively object in order to no longer receive cookies. For this reason, sgalinski Cookie OptIn only embeds cookies that you define as essential.
Non-essential cookies are sorted into any number of groups in the supplied backend module. These cookies are listed transparently and clearly to the visitors of your site with information such as origin, description and duration. The user can then decide which cookie groups he wants to accept.
You install the extension via Composer or the TER and include it with a few lines of TypoScript in your instance. Thanks to the clearly arranged backend module and an intelligent pre-configuration, your cookie opt-in banner is ready for use with just a few clicks. Any tracking scripts can also be added in no time at all, but will only be loaded once the user has agreed to it.
In the backend module of the extension, the color design of the cookie pop-up can be configured so that the banner integrates seamlessly into the frontend of your website. This gives you full control over the appearance of the cookie hint.
The cookie banner of the extension can be translated completely into any number of different languages and is played out accordingly on each language of your website.
In addition, different cookie groups can be configured for different language versions of your website. This ensures transparent, flexible data protection for all your users.
You can insert any scripts in the settings of sgalinski Cookie OptIn, which will be loaded as soon as the respective user has agreed. We have taken special care to ensure that no tracking information is lost through the OptIn banner.
Sgalinski Cookie OptIn for TYPO3 is the simplest solution to play out tracking scripts and tags as well as cookies in compliance with data protection laws.
With the clear opt-in banner you create trust and transparency with your users.
The backend module helps you to quickly divide all your cookies, tags and scripts into groups that users can freely accept.
Thanks to our licensing model, you will receive all updates for sgalinski Cookie OptIn as soon as they are available.
Our TYPO3-based website base is a comprehensive package for creating and managing websites of all kinds. The sgalinski Cookie Consent is contained in the Website-Base. Basically there is the option to create a Website at a fixed Price or to choose a Website as a Service package, which does not incur any additional costs for hosting or security and function updates. All information about the available editions of the Website-Base can be found on the pages linked below.
After the successful installation and configuration of the sgalinski Cookie Consent Extension, each new visitor to your website will be shown a window with the cookie Consent. The user decides which cookies he chooses to allow and which not. The following cookie groups are visible (essential cookies are always accepted as they are important for the function of a page):
The user can save the individual selection or accept only essential cookies or all cookies with just one click. If a site visitor closes the window without making a selection, only essential cookies are automatically loaded.
You also have the possibility to integrate the Cookie Consent into a page after configuration by inserting the corresponding content element.
The extension can be easily obtained from the TER or installed via Composer.
To install the extension with Composer, you need to execute composer require sgalinski/sg-cookie-optin.
In both cases, the extension must then be added using the Template module and configured via the Tracking / Cookies module. Both steps are described below.
Add Cookie OptIn to instance
After the installation you have to add the static TypoScript named Cookie OptIn to your instance. To do this, proceed as follows:
Before you set up your Cookie OptIn Extension in the backend, you should check your website for cookies. To do this, use the following tool, which is best opened in a new tab or window.
As shown below, enter your homepage address and confirm your entry with Scan Now.
In addition to the tool, you also have the possibility to manually check your page for cookies. To do this, follow these instructions.
The result is a clearly arranged table, as shown below. This table contains most of the information required for configuring the extension. The section on the group of essential scripts & cookies describes which data you have to enter where.
Note that this list may not be complete.
Furthermore, it is not enough to check only the homepage for cookies. It is important that the other main and sub pages of the website are also scanned.
Only if all cookies and tracking scripts are loaded exclusively via the Cookie OptIn/Consent Extension is it possible to create a GDPR-compliant website. If this is the case, the tool will not be able to deliver any results after the complete configuration when re-examined. In this case you will receive the message: No Cookies Found. You must insert cookies and scripts into our Cookie Consent until the tool cannot find cookies on any of your pages.
You can see in the figures below which fields will be visible at which positions in the frontend. Fill in the fields Title of Opt-In Window to Link to Display Information of a Cookie Group.
Fill in the cookie information text fields. All cookies used are broken down according to these four pieces of information. Here you only specify the label.
In the last step you link the imprint and the privacy policy declaration. Proceed as follows:
IMPORTANT: On the page of your privacy policy you should also add a button or link to the cookie settings OR insert the cookie Cookie Consent content element in the data protection declaration.
If you decide to use the button/link variant, the user must access the cookie settings with a click on the button. To do this, you create an external link with the URL of your privacy policy additionally with the parameter ?showOptIn=1. The link on our site looks like this: sgalinski.de/datenschutz/?showOptIn=1. If a user has already decided which cookies he wants to load and at a later point in time reaches a page with the parameter ?showOptIn=1, the checkboxes he selected will be displayed again.
To activate the Cookie Consent for Iframes, simply check the box in the External Content tab and fill in the Title or Description fields and specify the text for the button labels. Which fields appear where in the frontend, you can see in the pictures below.
The column Colors is located under the column Texts (button labels). Here you can adjust the color of the box and the buttons.
It is also possible to adjust or change the design templates directly in the backend.
To do so, set a checkmark at Override Template of the Settings Window to rework the code for the design for the settings of external content and checkmark at Override iFrame Replacement Template to change the template that is displayed instead of the iFrame.
Overwritten code will not automatically apply future updates. If the option is deactivated again, the template is reset.
When a user does not accept external content, Iframes are not loaded and are displayed as a box. The visitor now has the option to load only one iframe. When clicking on the Open settings button, a small Cookie Consent window appears (see screenshot below), where all external content or only one iframe can be accepted.
In addition, it is possible to always display selected iframes. As long as the external content does not contain any cookies. You can also insert a description of the external content. To do this, you must insert the appropriate attributes into the HTML code of the iframe.
Description: data-consent-description
Always open: data-iframe-allow-always
For example, you can create the iframe in an HTML content element. The iframe tag could look like this:
<iframe
width="560" height="315"
src="https://www.youtube-nocookie.com/XYZ" allowfullscreen
data-consent-description="Some additional description"
data-iframe-allow-always="1">
</iframe>In the first part of the Template tab, you first choose between two basic design templates. In our example, this is the comprehensive variant. You also can choose the compact design.
Alternatively, you can check the box Overwrite Template and adapt the template to your requirements.
The template can be displayed in the frontend at any time by clicking on the Template Preview button (below the template code). In a new tab you will then see your page with the current design of the Cookie Content.
When the template is selected, the colors of the individual components are adjusted. First you define the colors of the upper area and the heading as well as the text.
This is followed by the colors of the window where most of the content is shown.
The group checkboxes are located in our basic template to the left of the cookie group name. Essential cookies and scripts can get a different color than all other groups.
For each button in the Cookie-Opt-In you have the possibility to change the background, the button-hover (mouseover effect to show an available interaction) and the text color.
Finally, you can adjust the colors of the group details list and the cookie description tables.
If you check the box for the less noticeable banner in this column, only a small banner will be displayed instead of the detailed variant. Even if the user does not click on Accept, the website remains fully functional. You can set the position of the banner at the bottom or top. In our example the banner is at the bottom. Even in this form of cookie content, a text is intended to inform the site visitor about cookies. You insert the explanatory text in the field provided.
Banner colors can be set individually for the various components: Banner with background and text, button for Settings and Accept button. The settings button should be activated with the check mark if your site uses cookies.
As in the External Content or Template tabs, changes to the design can be made directly in the backend. To do this, set a check mark for Overwrite Template.
By activating this option, future updates will no longer be applied automatically. As soon as the setting is deactivated, the template is reset to the original template design.
When a site visitor opens the Cookie Consent in the frontend, information about the cookies used can be seen there. In this tab you have to add all essential scripts & cookies.
The individual scripts & cookies, you can create afterwards. Click on the button Add new and fill in all fields.
You will find the necessary information about the cookies in the listing of the tool from the first step. The names of the cookies are in the Cookies column. Under Description you will find the purpose and usually also the provider/provider of the cookies. The lifetime corresponds to the Duration column.
And finally, the last column tells you how to group your cookies: If a cookie is categorized as Necessary, it belongs to the essential cookies, so it is essential for the functionality of the website.
All non-essential cookie and script groups can be added in the tab Other Script & Cookie Groups. When dividing cookies into groups, you can use the table from the first step of the configuration.
Create a group and enter the associated cookies and scripts. Three sub-tabs are available for editing each group. In the General tab simply enter the group title, the group key for GTM and the description. Title and description are already visible in the frontend in the unfolded state of the Cookie Consent.
In the Cookies tab you add all other cookies in the same way as the essential cookies.
You can implement scripts as HTML code or as Javascript. Depending on the type of script, simply use the box provided for the code.
All cookie-related scripts must be added to the configuration and must not be loaded anywhere else!
Below is an example for the Google Tag Manager:
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('async', true);
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID');
document.body.appendChild(script);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');This looks like this in the Cookie OptIn Extension in the backend:
In Settings tab of the Cookie OptIn Extension you can adjust the runtime of our cookie. After this time has elapsed, users will be prompted again to enter the Cookie Consent. The default setting is 12 months; however, you can adjust this period.
All CSS and JavaScript files are compressed. If you don't want this, you have to uncheck the box Minify generated files.
In order for us to know which cookie groups the user has accepted, we must store an essential cookie. The structure of our cookies is as follows:
This means: The user has accepted the essential and performance groups, but not the analytics one.
If you want to translate the content, simply select the language for which you want to create a translation above the content area. Easily adapt all content to the corresponding language and save the changes with the Save button above the content area.
If you use the Google Tag Manager (GTM) you have to make adjustments in the GTM after integration & configuration of the Cookie Consent Extension.
The first requirement is to create the tracking groups in the Cookie OptIn Extension and add the GTM script in all relevant groups. This avoids double loading.
The following explanations are based on the exemplary script and cookie groups Analytics and Marketing. The corresponding group keys, which you enter in the tab General of a group, are marketing and analytics in our example.
The script for the Google Tag Manager and the tab Scripts is shown in the figures below.
After the configuration of the Cookies Consent on your website, you must now carry out several actions in the GTM for a complete and successful integration.
document.TagManagerLoaded = document.TagManagerLoaded || 0;
if (!document.TagManagerLoaded) {
document.TagManagerLoaded = 1;
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','YOUR GTM-CODE');
}
Now you have to set the new triggers in your Google Analytics tags. Depending on which cookie group you have assigned a tag to, you adjust the corresponding trigger in the tag. To change the trigger, proceed as follows:
More complex triggers are not executed on every page. In the GTM these must be converted as a trigger group. To create a trigger group, proceed as follows:
You add trigger groups to a tag in the same way as other triggers. In our example you can see that the created trigger group Trigger Group Event can be found in the tag UA - Event. This tag is only activated if both triggers of the group are fulfilled.
You are now ready with the installation & configuration of the sgalinski Cookie Consent!
Only the standard layout is currently available. However, it is possible to overwrite the CSS of the cookie window.
In the long term, it is planned to offer different layouts for selection.
We assume that it is possible to create a DSGVO-compliant website with the sgalinski Cookie OptIn Extension. For this it is, however, necessary to load all cookies and tracking scripts exclusively via the extension. As this is the responsibility of the individual website administrator, we cannot assume any responsibility for the legal security of the software.
In addition, the DSGVO conformity of a website includes other aspects that are not covered by sgalinski Cookie OptIn.
You are very welcome to report any suggestions for improvement and feedback about bugs in our tracker to our internal Gitlab. You can also send this directly to our support team via our email address support@sgalinski.de.
This is made possible by the new content element, which has been integrated since version 2.0. This can be found in the backend with the name "Cookie-Opt-In" within the tab "Plugins". Once you have created this, the modular OptIn is no longer displayed on this page.
[1] There is no guarantee for permanent availability or support of the software. Licensees may use the software during the license period as long as it is officially supported and available.