The Cookies / Tracking module contains the sgalinski Cookie OptIn, an easy to integrate module that allows an embedding for cookies and tracking scripts that is compliant with the GDPR and ePrivacy.

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. Essential cookies are always accepted as they are important for the function of a page.

In addition to essential cookies, the user decides how external content and other cookie and script groups (which you assign yourself) are handled.

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.

Installation

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:

  1. Open the Template module in your backend and select the page with the root template within the page tree.
  2. Choose Info/Modify in the selection above the content area.
  3. Click Edit the whole template record.
  4. Choose the Includes tab page.
  5. Choose the template Cookie OptIn (sg_cookie_optin) on the multiple selection box (right) with the name Include static (from extensions).
  6. After a clicking on the selection the template appears in the left box.
  7. Save your changes with the Save button above the content area.

Should your TYPO3 installation be located in a subdirectory e.g. www.example.com/subdirectory, you should adjust the value general.folder in your extension settings in the TYPO3 backend.

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.

Tab Labels & Menu

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.

Add imprint and the privacy policy declaration

In the last step you link the imprint and the privacy policy declaration. Proceed as follows:

  1. Click on the Page button or the order symbol to the right of the field where the links to the two pages should be inserted.
  2. The page tree appears. Click on one of the two pages (imprint or privacy policy declaration).
  3. You have now added a link to this page and are back in the Labels & Menu tab.
  4. Repeat the procedure for the other page.

IMPORTANT: On the page of your privacy policy you should also add a button or link to the cookie settings OR insert the 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.

Tab Template

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.

Tab External Content

Zum Aktivieren des Cookie Consents für Iframes müssen Sie in der Registrierkarte Externe Inhalte ein Häkchen setzen und die Felder Titel und Beschreibung ausfüllen sowie die Texte für die Button-Beschriftungen festlegen. Welche Felder, wo im Frontend erscheinen, können Sie mit den unteren Bildern nachvollziehen.

Similar to essential cookies you can specify all cookies coming from external scripts under the field Description. The information can be seen in the cookie information part of the OptIn field in the frontend.

Edit Colors

The column Colors is located under the column Texts (button labels). Here you can adjust the color of the box and the buttons.

Overwrite design templates

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.

External Content Whitelist

If your site requires certain external content for the functionality of the site or for other reasons, content may be loaded without the prior consent of the user. For this purpose, the extension has a whitelisting function. The list automatically contains reCAPTCHA, a service that allows to distinguish between humans and bots. If you set a checkmark at overwrite template, you can add further exceptions. The external content (iFrame, objects, audio and video HTML tags) are then excluded from external protection.

Content Element as External Content

Each content element can be individually protected as external content. This can be useful, for example, if the external content was added by a complex JavaScript or if the content itself represents only a small part of a large block containing text headers, controls, etc. It may then be more convenient for you to mark the entire block as protected. There are three ways to mark a content element as an external element.

  • In the Appearance tab of each content element you can easily select External Content.
  • In the Plain HTML content element, you can use two additional options to mark a content as external.

Add the attribute data-external-content-protection to the HTML tag.

<div class="test-content-protection" data-external-content-protection="1">

This content would have not been protected

<iframe src=”some/external/page” />

</div>

Or enter the class frame-external-content-protection in the HTML tag.

<div class="test-content-protection frame-external-content-protection">

Content comes here

</div>

Content Element – Always load External Content

It may happen that you do not want to protect individual external content. This may be necessary, for example, if the function of your website depends on the external content, if iFrames of whitelist domains belonging to your company are involved or if the external content does not contain cookies. You should therefore always ensure that your website remains GDPR-compliant.

There are three ways to load a content element that would not automatically appear on the page as an external element without the user's consent.

  • On the Appearance tab of each content element you can easily select Unprotected External Content.
  • In the Plain HTML content element, you can use two additional options to automatically load external content.

Add an attribute data-iframe-allow-always or data-external-content-no-protection to the HTML tag.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/XYZ" data-iframe-allow-always="1">

</iframe>

 

Or enter the class frame-external-content-protection in the HTML tag.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/XYZ" class="frame-external-content-no-protection">

</iframe>

Change the button text for a specific external content element

Just add the data attribute data-consent-button-text to an iframe HTML tag, like in the example below.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/XYZ" data-consent-button-text="Custom text here">

</iframe>

External Content – iFrame Description

You can insert a description to the external content. To do so, you need to add a corresponding attribute to the HTML code of the iFrame: data-consent-description. The iFrame tag in the HTML content element may then 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>

External content in case of non-acceptance

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.

Tab Banner

Texts & Menu

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.

Colors

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.

Banner Design Templates

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.

Tab Group of essential Scripts & Cookies

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.

Tab Other Groups of Scripts & Cookies

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.

Add & Edit scripts

You can implement scripts as HTML code or as Javascript. You add the scripts in your created groups under Scripts. You decide whether you implement the script as HTML or as Javascript in the Cookie OptIn Extension. Depending on this, you simply use the box provided for this purpose. The tab Scripts and the fields for entering the code can be seen here in the screenshot. In a multi-domain environment, you can use a different procedure that allows you to set the ID via TypoScript.

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:

For example, the Google Tag Manager can be integrated as follows:

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

This looks like this in the Scripts tab of a cookie and script group:

Procedure for a multi-domain environment

In a multi-domain system, the method described above can lead to complications that you can avoid with the procedures presented below. Among other things, these alternatives allow you to set the ID (variable) directly in TypoScript.

For the first variant, enter the following code in the HTML field (again, the Google Tag Manager is used as an example):

<!-- Google Tag Manager -->
<script type="text/javascript">
        document.TagManagerLoaded = document.TagManagerLoaded || false;
        if (!document.TagManagerLoaded) {
            document.TagManagerLoaded = true;
            (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', document.googleTagManagerId);
        }
</script>
<!-- End Google Tag Manager -->

The ID/variable is then set via TypoScript in the TS template of the instance and can be overwritten with conditions:

page.headerData.14414 = TEXT
page.headerData.14414.value (
<script type="text/javascript">
document.googleTagManagerId = '<MY_ID>';
</script>
)

Alternatively you can integrate the script completely via TypoScript:

<!-- Google Tag Manager -->
<script type="text/javascript">
    function addTagManager () {
        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','{$settings.gtm.id}');
        }
    }
</script>
<!-- End Google Tag Manager -->

The parameter settings.gtm.id can then be set dynamically via TypoScript Conditions. You then only have to enter the line addTagManager(); in the extension.

With the latter variant the variable/ID can be set via TypoScript and at the same time it is no longer necessary to copy the code to the different domains.

Tab Settings

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.

Our cookie is essential for the function of the OptIn Extension cookie. It must be saved so that the tool knows which cookie groups the user has accepted. The structure of our cookie looks like this:

  • Name:
    cookie_optin
  • Example data:
    essential:1 | analytics:0 | performance:1

This means: The user has accepted the essential and performance groups, but not the analytics one.

All CSS and JavaScript files are compressed. If you don't want this, you have to uncheck the box Minify generated files.

Disable Powered by

You can hide the text Powered by sgalinski Cookie OptIn in the frontend by activating the checkbox under Disable Powered by.

Set cookie for the whole domain

If you are in a subdomain, e.g. subdomain.example.com, but want to save the user settings for the whole domain example.com, you can do so here. Just enter the domain for which the cookie Consent should be valid. This does not work with external domains. You should always make sure that your settings are still DSGVO-compliant.

Google Tag Manager 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. Also note alternative procedures when using multi-domain systems.

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.

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. Go to Trigger in the GTM.
  2. Select the type Page View.
  3. Select the Some page views.
  4. Then click the variable you just created in the first field below.
  5. Since this is an OptIn solution, select Contains in the middle field.
  6. 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.
  7. 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 would like to know more?

All information about the available offers can be found on the pages of our website base. You have the option of having a website created at a fixed price or opt for a Website as a Service package with which no further hosting costs or security and function updates will be due to you.