This extension documentation is published under the
CC BY-NC-SA 4.0 (Creative Commons)
license
This extension provides functionality to create a customizable cookie consent for your website. It is developed for flexibility to be customized in accordance to your data security guidelines.
TYPO3
The content of this document is related to TYPO3 CMS,
a GNU/GPL CMS/Framework available from typo3.org .
Community Documentation
This documentation is community documentation for the TYPO3 extension mindshape Cookie Consent
It is maintained as part of this third party extension.
If you find an error or something is missing, please:
Report a Problem
Extension Manual
This documentation is for the TYPO3 extension mindshape_cookie_consent.
Open the root page in the List module to find the Cookie Consent Configuration.
BE View of Cookie Consent Configuration
You can choose the site(s) the cookie consent should cover. In a multi-tree-backend it is possible to have a separate cookie consent configuration for every root.
If you enable statistics, the chosen cookie consent gets collected in the Cookie Statistics backend module.
Configuration of imprint and data policy links in consent modal
You can edit the header and hint text that appear above the individual cookies.
Configuration of Cookie Hint
Cookie Hint in FE
Creating new cookies
When you create new necessary cookies, they will get listed in the cookie consent modal in the frontend. Users cannot uncheck the boxes for necessary cookies, but you can provide the names, purposes and duration of those cookies.
Create new cookies
By creating a new cookie category, you can create the checkboxes for the single cookies and collect them in groups (e.g., the cookies of YouTube, Vimeo, and Google Maps get collected in the group "external media"). Creating a new option generates a new group. Inside this option, you create new cookies.
Users can accept the entire option (e.g., all of "external media") or select a single cookie inside this option (e.g., only "YouTube").
Cookie Options in the FE
Important: Note that the cookie options shown in the cookie consent modal have no effect yet. To properly block and allow cookies, a developer needs to work with the event listeners (s. developer section).
Google Consent Mode
If you want to use Google Consent mode for cookies, you can use the select option in the cookie options.
For now, only Google Ads & Analytics is supported; the selected options will be pushed to your Tag Manager with "denied" or "granted" depending on the user's choice.
When you place the frontend plugin on a page, a button will appear in the frontend to open the cookie consent modal. The user can change the cookie consent settings and save them anew.
Example for Cookie Consent FE Plugin
The Cookie Consent Statistics Backend Module
To see statistics here, you need to have statistics enabled in the cookie consent configuration.
Example statistics shown in the statistics backend module.
At the moment, the data collected shows the percentage of users that clicked accept all versus those who only accepted single cookies.
The Cookie Consent Configuration plugin is set automatically on every root page.
Backend View of Cookie Consent Configuration
If you want the same configuration for every site you can choose "All Sites" in the configuration details. Otherwise you can configure the cookie consent for every root page separately.
Important information: Beware, that the Cookie options configured in the Cookie Consent Configuration Plugin in the backend do not have any functional effect yet. While cookie names and descriptions are displayed in the frontend modal, but to properly block and allow cookies, you need to use the event listener (s. section below).
As the developers of this extension, we have already implemented it for several of our customers. If you need any assistance with the configuration of the cookies on your website, feel free to contact us - we gladly provide assistance on an hourly basis.
Site configuration for statistics backend module
If you want to collect statistics about which cookies get accepted, you need to enable statistics in the configuration.
enable statistics in the Cookie Consent Configuration
You also need to configure the route enhancer for cookie.json. Otherwise the ajax request sent by the cookie consent form will not work.
Changing the cookie consent options fires an event, that you can work with.
window.addEventListener('cookieConsent', function (event) {
// check options and do something
});
Copied!
The options in the event detail are identical to the identifiers chosen in the cookie consent configuration. Pay attention to the exact spelling of the identifier.
The following example works with the google analytics cookie option:
window.analyticsLoaded = false;
window.addEventListener('cookieConsent', function (event) {
if (event.detail.hasOption('google_analytics')) {
if (false === window.analyticsLoaded) {
// load analyticswindow.analyticsLoaded = true;
}
} else {
// do not load analytics
}
});
Copied!
There is also an event when the consent buttons are replaced with the real content:
window.addEventListener('cookieConsentButtonsReplaced', function (event) {
// you can also get the original click eventlet originalEvent = event.detail.originalEvent
// do something here
});
Copied!
How to use the viewhelper to block videos
To block youtube and vimeo videos, you just need to add the mindshapecookieconsent viewhelper to your typoscript.
Once activated a button will appear instead of the video iframes. After consenting to the external media cookies the iframes will appear.
Beware that this viewhelper only works with fluid styled content. If you develop your own extension and don't insert youtube videos via fluid styled content, you need to work with the event listener (see next section).
It is also important that the identifier chosen for the youtube and vimeo options are spelled "youtube" and "vimeo". Do not change the spelling in the cookie consent configuration.
How to block content using the consent viewhelper
Similar to the viewhelper for blocking videos, you can use the consent viewhelper to block other content (e.g. Google Maps).
In the frontend you get a button instead of the content. Once the user clicks the button, they accept the cookie(s) necessary to show this content and the content will get loaded.
If you need an event, that you can listen to, you can implement the viewhelper as follows:
<m:consentidentifier="google_maps"scripts="{
googleMaps: '{
src: \'//maps.googleapis.com/maps/api/js?key={apikey}\',
async: 1,
defer: 1
}'
}"><divid="maps"></div></m:consent><scriptdata-ignore="1">window.addEventListener('googleMaps', function () {
// initialize google Maps
});
</script>
Copied!
You choose the name for the event listener at the beginning of the inline script tag. In this case, the chosen name is "googleMaps". You can listen to this event in the javascript part and, in this case, initialize the google maps script.
If you only need a script to get loaded after the cookie(s) get accepted, you implement the viewhelper like this:
<m:consentidentifier="google_maps"scripts="{0: '//maps.googleapis.com/maps/api/js?key={apikey}'}">
// content to hide with a consent button
</m:consent>
Copied!
TypoScript Settings
This is a list of all TypoScript settings for this extension
Constants
Description
Default
cookieName
The name for the cookie
cookie_consent
expiryDays
Number of days until the cookie expires
365
containerId
HTML container ID for the consent modal
cookie-consent
hideIfJavaScriptDisabled
Keep the modal hidden if JavaScript is disabled
1
pushConsentToTagManager
Push an event to Google Tag Manager when the user submits consent
0
lazyloading
Open the consent modal on first user interaction (e.g., move, click, scroll).
This may help improve the page speed score.
0
lazyloadingTimeout
Timeout (in seconds) until the lazy-loaded consent modal opens automatically
120
hideCategoriesInOverview
Hide category titles in the consent modal
0
addNecessaryCookieCategoryInList
Include necessary cookie category in the list plugin
0
ajaxPageType
TYPO3 page type used for XHR requests
8641
addMarkupToFooter
Insert the consent modal HTML into the footer
1
addConfiguration
Include configuration settings as JSON in the header
1
addJavaScript
Include the default JavaScript
1
addStylesheet
Include the default stylesheet
1
disableConsent
Disable the consent modal
0
addLanguageToCookie
Add the current language to the consent cookie
0
Changelog
4.1.3
Use proper fallback ID for consent container selector
Use proper zero coalescing operator for default settings values
Remove deprecated static rendering in ViewHelpers
Replace Georg Ringer's "NumberedPagination" with core "SlidingWindowPagination"
Add PHP 8.5 support
4.1.2
Add missing defaults for array keys to prevent warnings on missing TypoScript configuration
Remove usage of TypoScriptFrontendController
Remove excluded parameters from current url parameter due to cache flooding issues
Remove root page id for consent form submit target page
4.1.1
Add missing PHP 8.4 compatibility
Add optimizations for the documentation
4.1.0
Add missing TCA label/value adjustment for UserFunc items
Migrate documentation from sphinx to PHP based rendering
Adjust Cookie Consent to a11y standards
4.0.0
Add compatibility for TYPO3 v13
Drop support for TYPO3 v11
Statistic record date refactoring
3.2.2
Clone object storage to prevent mixing of cookie options
3.2.1
Add optional page reload if consent is denied on re-editing
Insert replacement element at the proper position in DOM
Properly determine configuration parameter & language in statistic module
Add version dependent language label handling for statistic module
3.2.0
Add Google Consent Mode for cookie options
Remove max items validation for categories and cookie options
Use event delegation for consent button replacements
Add workaround for a Core bug creating errors in the backend
3.1.2
Increase maximum allowed PHP version
3.1.1
Use AssetCollector for consent JavaScript & StyleSheets
3.1.0
Remove unnecessary parameter due to a breaking change
Add option to add necessary cookie category to list plugin
3.0.2
Use proper assignment for variable to view
Allow caching of modal rendering
Prevent exception caused by broken consent cookies
Update and declare numbered_pagination dependency in emconf
3.0.1
Add consent replacement parent element due to unavailability after removing the original event target
Allow PHP versions for 8.2.x properly in version constraint
3.0.0
Add compatibility for TYPO3 v12
Drop support for TYPO3 v10
Add original click event to "cookieConsentButtonsReplaced"-event
Add numbered pagination for backend optimization
Only load scripts for accepted consent replacements
2.2.5
Use proper total for deny buttons percentage calculation
Add default value to prevent SQL error with "strict trans tables" activated
2.2.4
Add template arguments option to consent view helper
2.2.3
Only replace direct children in consent button replacement
2.2.2
Optimize consent replacement function to prevent pseudo div wrap
2.2.1
Add custom replacement button label for cookie option
2.2.0
Fix install event check query for initial default configuration
Add disable option for the consent
Add option to add the language into the consent cookie
Add missing deny label field for configuration
2.1.4
Don't open modal on imprint & datapolicy page on active lazyloading
Add custom event for replaced consent buttons
2.1.3
Solve translation and compatibility issues
2.1.2
Add redirect url host check to prevent an "open redirect"
2.1.1
Use object manager in TYPO3 v10 to instantiate dataMapper
2.1.0
Add deny button due to ePrivacy changes
2.0.1
Add missing changes to emconf
2.0.0
Add TYPO3 v11 compatibility
Drop support for TYPO3 v9
1.2.2
Fixed not replaced multiple replacement buttons
1.2.1
Use proper replace method for consent replacements
1.2.0
Add lazyloading option for consent modal
Close details when modal is closed
Check existing cookie if other consent buttons are clicked
Respect current configuration in "all time" statistics
Use existing field as tca label to prevent errors in database comparison
1.1.1
Add cookie option object to iframe replacement media template
Add flexform option to change the settings plugin button label
1.1.0
Add new plugin to list all cookies options & -categories
Optimize the hide condition for "select all" button
1.0.7
Add check if TypoScript is available
Hide "select all" button if no optional cookies are available
Remove trailing slash from assets path to properly resolve TYPO3 in a subfolder
1.0.6
Use uid instead of identifier for necessary cookies
1.0.5
Add option to push consent options to TagManager
1.0.4
Move global css styles into consent container
1.0.3
Add total period for statistic date select
Add statistic for single cookie selection
1.0.2
Alternative language label determination for "All sites" configuraiton