README

Installation

The extension supports TYPO3 13.4 and 14. Composer installations use the complete package metadata without falling back to ext_emconf.php, which remains available for classic installations. Scheduler cleanup policies are registered in ext_localconf.php for TYPO3 13 and through TCA for TYPO3 14.

Install this extension with the Extension Manager, or with composer.
Go to the extension configuration and set your license key and output folder. You must set this folder accordingly in case your TYPO3 installation is in a subdirectory relative to the web server document root.
Add the static TypoScript named "Cookie Consent" to your instance with the "Template" backend module.
- Open up the "Template" module in the backend of TYPO3.
- Go to your root site page within the page tree.
- Choose "Info/Modify" at the select on the top.
- Click on the button "Edit the whole template record."
- Select the tab "Includes."
- Choose the template "Cookie Consent (sg_cookie_optin)" on the multi select box with the name "Include static (from extensions)"
- Save
Go into the "Cookie Consent" backend module, configure it and save it once.

Update from version 6 to version 7

If you update from sg_cookie_optin v6, please follow the instructions in UPGRADE.md.

Backend access and configuration import

To view history and statistics, backend users need access to the Cookie Consent module and read access to the selected page within their web mounts. Only backend administrators can import configurations.

If the website runs behind a reverse proxy, configure TYPO3's SYS.reverseProxyIP and SYS.reverseProxyHeaderMultiValue to identify visitor IP addresses correctly for usage-history rate limiting.

How to add scripts / How to rewrite the script HTML?

Unfortunately, we can't support HTML code for the cookie scripts, because of security cases. So you need to rewrite the HTML code to javascript. Here's an example for the Google Tag Manager:

HTML:

<!-- Global site tag (gtag.js) - Google Analytics -->
<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');

How is the structure of our cookie?

In order for us to know which cookie groups the user has accepted, we must also store an essential cookie. The structure 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.

Additional Features

Open a page without showing the cookie consent

Just add the parameter "?disableOptIn=1" to your URL, so the necessary JavaScript and Css, which shows the dialog, isn't loaded anymore. Here is an example:

https://www.sgalinski.de/?disableOptIn=1

Show the cookie consent, after accepting it

Just add the parameter "?showOptIn=1" to your URL, so the dialog shows up again and the accepted cookies can be modified. Here is an example:

https://www.sgalinski.de/?showOptIn=1

External content

Add an additional description for a iframe on the opt in

Just add the data attribute "data-consent-description" to an iframe HTML tag, like in the example below:


<iframe width="560" height="315" src="https://www.youtube-nocookie.com/XYZ"
        data-consent-description="An additional description about this video!"></iframe>

Change the button text for a specific external content element

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>

Whitelist an element for the external content opt in logic

There are three ways to do this, and all of them will result in having this element and all of its children whitelisted for the external content protection:

Just add the data attribute "data-iframe-allow-always" or "data-external-content-no-protection" to an iframe HTML tag, like in the example below:


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

Add the class "frame-external-content-no-protection" to the HTML tag.


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

From the TYPO3 Backend Page module edit the element's appearance and set the Frame Class "Unprotected External Content"

Protect any kind of DOM element with the external content protection (force opt-in)

There are three ways to do this, and all of them will result in replacing this element and all of its contents with the opt-in dialog:

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


<div class="test-content-protection" data-external-content-protection="1">
    Content comes here
</div>

Add the class "frame-external-content-protection" to the HTML tag.


<div class="test-content-protection frame-external-content-protection">
    Content comes here
</div>

From the TYPO3 Backend Page module edit the element's appearance and set the Frame Class "External Content"

Modify the generated JSON file

You can do that by attaching to the hook $GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['sg_cookie_optin']['GenerateFilesAfterTcaSave']['preSaveJsonProc']. It sends an array $params with the following entries:

pObj = An instance of the StaticFileGenerationService. It contains the siteRootId as well as a few public methods that can come in handy.
data = A reference to the data array that will be written in the JSON file.
languageUid = The uid of the current language

Example:

$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['sg_cookie_optin']['GenerateFilesAfterTcaSave']['preSaveJsonProc'][] =
    function ($params) {
        $params['data']['newDataEntry'] = 'newValue';
    };

Content Security Policy (CSP)

The extension integrates its JavaScript with TYPO3's CSP nonce handling. If your site enforces a Content Security Policy, check the browser console for blocked scripts or styles when testing the consent dialog and configured services. Adjust your site's policy to allow the script and stylesheet sources required by your integration, including any configured asset base URL and external services.

Backend advertisements

Advertisement data, the ViewHelper, JavaScript and their tests are synchronized from sgc-scripts. Edit the central sources and run sgc syncBackendAdvertisements sg-cookie-optin to update them. Campaigns for loaded TYPO3 extensions are excluded; no notice is shown when none remain eligible.

The backend notice promotes related sgalinski extensions. Dismissing it hides notices from this extension for three days in the same browser, across tabs and logins, using localStorage. The duration defaults to DEFAULT_DISMISS_FOR_SECONDS in the advertisement script; a positive dismissForSeconds partial argument overrides it.

sgalinski / sg-cookie-optin

Package info

Security

Statistics