Cookie Optin / Consent for TYPO3

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.

Compatibility

TYPO3 Versions 6.2.X | 7.6.X | 8.7.X | 9.5.X
PHP Versions 5.5.X | 7.0.X | 7.1.X | 7.2.X | 7.3.X
Tested Browsers Internet Explorer 11 and Evergreen Browsers

Highlights

TYPO3 extension for ePrivacy & DSGVO

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.

Group Cookies & Manage Cookie Groups

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.

Immediately ready for use

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.

Compatible with your design

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.

Configurable for multiple languages

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.

Google Tag Manager and other tracking services

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.

Prices

sgalinski Cookie OptIn for TYPO3

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.

  • Easy to install
  • Quickly configured
  • Clearly arranged
  • Banner
  • Individual design possible
  • Compatible with multilingual instances
  • Simple integration of Google Tag Manager and other tracking services
  • Free updates for the entire duration of your license

Prices:

  • Annual License1: 59,99 € per instance
  • Lifetime License1: 199,99 € per instance
  • Volume license: 25 % volume discount is granted for orders from 20 licenses and 50% discount is granted from 50 licenses upwards

The extension can be tested without a license for 24h in demo mode.

sgalinski Website-Base including OptIn Extension

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.

Installation & Configuration

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):

  • Essential
  • External Content
  • Other cookie groups that you have defined yourself.

The user can save the individual selection, accept only essential cookies with just one click or all cookies. If a page visitor closes the window without having made a selection, only essential cookies are loaded automatically.

You also have the option of integrating the Cookie Consent into a page after the configuration by inserting the corresponding content element from the group of special elements.

Installation of the sgalinski Cookie OptIn/Consent Extension

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:

  • open the Template module in your backend and select the page with the root template within the page tree
  • choose Info/Modify in the selection above the content area
  • click Edit the whole template record
  • choose the Includes tab page
  • choose the template Cookie Optin (sg_cookie_optin) on the multiple selection box (right) with the name Include static (from extensions)
  • after a clicking on the selection the template appears in the left box
  • save your changes with the Save button above the content area

Configuration

Identify Cookies

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.

Create entry

  • go to the Tracking / Cookies module (second last in the Web module group)
  • (if necessary) select the page with the root template within the page tree or directly select the displayed page in the content area
  • if there is no data protection/cookies entry yet
    • click on the button below the introductory text
    • fill in all necessary fields, with which you have created the entry
    • continue with the next step
  • if an entry already exists
    • simply click on the name of the entry or on the pencil icon to the right of the entry name to edit the entry

Edit entry

Tab 1:  General

The figure shows which fields will be displayed where in the frontend. Fill out the fields Title of the Opt-In Window up to Link to Display Information of Cookies of a Group.

In the last step you link the imprint and the data protection declaration.

  • click on the order symbol to the right of the field where the links to the two pages are to be inserted.
  • the page tree appears, where you have to select the corresponding pages
  • click on one of the two pages
  • you have now added a link to this page and are now in the General tab again
  • repeat the procedure for the other side

IMPORTANT You should also include a button or link to the cookie settings or insert the cookie Consent content element in the data protection declaration. So that the settings for the cookies open again when you click on the button. To do this, create an external link with the URL of your privacy statement and 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 to load and later accesses a page with the parameters mentioned above, the checkboxes previously selected will be displayed again.

 

Tab 2: External Content

To activate the Cookie Consent for Iframes, simply check the box in the External Content tab and complete the remaining fields, such as Title or Description. You can see which fields appear in the frontend with the pictures below.

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 the backend of the Cookie OptIn Extension you adjust the text of the two buttons in the box in the column Text. They correspond to the fields: Button 'Load external content' and link 'Open settings'.

Directly below you can adjust the color of the box and the buttons in the Colors column.

In addition, it is possible to always display selected iframes. As long as the external content does not contain any cookies, this is in accordance with the RGPD. 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>

Tab 3: Group of essential Scripts & Cookies

In this tab, the information that can be seen in the frontend is entered when a user (in our example) clicks on Further Information and then chooses Cookie Information in Essential.

The Group Title and Description of your Essential Cookies are already visible when a user clicks on Futher Information. The individual cookies that are to be listed below must be generated under Cookies with Create new.

The necessary information about the cookies can be found in the list from the tool in the first step. The Name of the cookies can be found in the Cookies column. Under Description you will find the Purpose and usually also the Provider of the cookies. The Lifetime corresponds to the Duration column. Finally, the last column tells you how to group your cookies. 

If a cookie is categorized as Necessary, it is essential for the functionality of the website and you have to add it here.

Tab 4: Other Groups of Scripts & Cookies

You can add all non-essential cookie and script groups in the Other Groups of Scripts & Cookies tab. To do this, first create a cookie group and then proceed in the same way as with the essential cookies. However, you will most likely need to create more cookies at this point than before.

When grouping cookies, you can refer to the table in step 1 of the configuration.

Add and edit scripts

You can implement scripts as HTML code or as Javascript. You add the scripts to your created groups under Scripts. You decide whether you integrate the script as HTML or as Javascript in the Cookie OptIn Extension. 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!

Here is an example for the Google Tag Manager:

HTML

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

JavaScript

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:

Tab 5: Color

Finally, adapt the sgalinski Cookie OptIn/Consent to your corporate identity colors. Enter the hex color code directly into the corresponding fields or use the color selection field. The color selection will appear automatically as soon as you click in the field.

Don't forget to save your changes with the Save button above the content area!
 

Tab Settings

Tab 6: Settings

In order for us to know which cookie groups the user has accepted, we must also store an essential cookie. The structure of our cookies is as follows:

  • Name:
    cookie_optin
  • Example data:
    essential:1|analytics:0|performance:1
  • Explanation: The user has accepted the essential and performance groups, but not the analytics one.

In Settings 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.

Translate Cookie OptIn/Consent

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.


Google Tag Manager (GTM) – Integration

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

Creating a variable

  1. Go to Variables in the GTM. 
  2. Then choose User-defined Variables.
  3. Click on the New button.
  4. Name the new variable 'Cookie Consent' or similar.
    (You can see the name of the variable in the top left corner of the screenshot).
  5. Click on Variable Configuration.
  6. Then select First-Party Cookie.
  7. Enter cookie name 'cookie_optin' as shown in the screenshot.

Create trigger for Consent Groups

  1. Tragen Sie im dritten Feld Sie den Key einer Cookie- und Skriptgruppe aus der Cookie OptIn Extension mit dem Wert, bei dem Cookies zum Einsatz kommen dürfen, in diesem Fall ist es die 1. In das Feld tragen Sie dann entsprechend unserem Beispiel marketing:1 ein.
  2. Legen Sie für jede Cookie- und Skriptgruppe einen Trigger an.
  3. Go to Trigger in the GTM.
  4. Select the type Page View.
  5. Select the Some page views.
  6. Then click the variable you just created in the first field below.
  7. Since this is an OptIn solution, select Contains in the middle field.
  8. In the third field, enter the key of a cookie and script group from the Cookie OptIn Extension with the value for which cookies may be used, in this case it is 1.
    Then enter marketing:1 in the field according to our example.
  9. Create a trigger for each cookie and script group.

Using triggers in tags

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:

  1. Go to Tags in the GTM.
  2. Click on the name of the tag
  3. Then click the pencil icon to customize the tag.
  4. Add the new trigger under Triggering.
  5. Remove the old trigger by clicking Remove next to the trigger. 

Convert more complex triggers using trigger groups

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:

  1. Go to Trigger in the GTM.
  2. Click on Trigger Configuration and select Trigger Group.
  3. Click Add and select at least two triggers for the group. 
  4. Your selected triggers appear under Triggers.

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!

FAQ

Where can I report bugs and suggestions for improvement?

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.

Continue to Tracker

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