A quick introduction in how to use this extension.
Introduction to the general extension information.
A example configuration for a quick start
JavaScript API Documentation
This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml
This Plugin includes a solution for the EU Cookie law (e, TTDSG). It extends some function to load Scripts, iframe and content after the user accepted the consent.
Though don't care about the latest EU laws and handle your Cookies with this Plugins.
The popup is shown on every page load until the user saves the consent.
This Plugin extends the Config from CS_SEO so that the Google analytics script, tag manager and piwiki will fire after the Cookie is accepted.
This manual was originally written in 2021 by Dirk Persky. A number of other people have made changes and improved this extension and its documentation. You can see the list of contributors on GitHub.
The content of this document is related to TYPO3, a GNU/GPL CMS/Framework available from www.typo3.org.
I would appreciate any kind of feedback or ideas for further developments to keep improving the extension for your needs.
You like this extension? Get something for me (surprise!) from my wishlist on Amazon or Donate the next pizza. Thanks a lot!
Consent Box
Overlay Box
Data Privacy cookie listing
Consent Box extend mode
Consent Config extend mode
Backend cookie list
Backend cookie detail
Backend cookie detail - Script Tab
Backend content element
Cookie listing element
Install this extension:
composer require dirkpersky/typo3-dp_cookieconsentConfiguration:
Create initial cookie:
The default constants configruation for the plugin
Customizing the consent Window
Customizing the Overlay Window
A example configuration
Customizing the consent Window
Customizing the Overlay Window
Add Google Tag Manger and events for consent check.
Google Tag Manager will be loaded after each plugin. consents, and push a specific datalayer event.
After that u can load Analytics with a custom trigger.
This example configuration is based on the base TypoScript-Constants configuration (see Installation).
plugin.tx_cookieconsent.settings {
# PID to Data Protection
url =
# PID of Cookie Storage
storagePid =
# Layout
theme = edgeless
# Position
position = bottom-right
# Type (info, opt-out, opt-in)
type = opt-in
# pre check statistics in checkboxes layout
statistics = false
# pre check statistics in checkboxes layout
marketing = false
# show Iframe overlay
overlay {
# Enable Iframe overlay
notice = true
box {
# Overlay: Background
background = rgba(0,0,0,.8)
# Overlay: Text
text = #fff
}
button {
# Overlay Button: Background
background = #b81839
# Overlay Button: Text
text = #fff
}
}
# Cookiehint Style
palette {
popup {
# Bar: Background color
background = rgba(0,0,0,.8)
# Bar: text color
text = #fff
}
button {
# Button: Background color
background = #b81839
# Button: text color
text = #fff
}
}
}You can change the default language packs by adding new translations via TypoScript
Note
If you are from a country other than Germany, let me know your legal text and I will mark it for the next version!
plugin.tx_dpcookieconsent._LOCAL_LANG {
de {
message = XXX
dismiss = XXX
allow = XXX
link = XXX
deny = XXX
allowall = XXX
# Checkbox labels
dpRequire = XXX
dpStatistik = XXX
dpMarketing = XXX
# Iframe Overlay text
media.notice = XXX
media.desc = XXX
media.btn = XXX
}
}Since version 1.3.0, you can define scripts such as Google Analytics in the TYPO3 backend that are loaded after the content has been accepted. To do this, define the cookie and select the consent type.
Note
make sure u defined the storagePid config-arguments
list of defined cookies
basic cookie information
script that loads after consent
If you want to define the script directly in your code, look in the developer area.
If you want to load a Youtube Video or any other HTMl Code after the consent is accepted take a loot to the new Content element.
Just add your Youtube embed Code into this element, and the Plugin will handle it four you.
If you want to list all your defined cookies in the data privacy, use the Cookie Listing content element.
Define the Startingpoint where u placed alle cookie information.
As result u get a Bootstrap Table which shows u all defined cookies.
Is available with version 12.1.0
plugin.tx_cookieconsent.settings {
# PID of Cookie Storage
storagePid = 10
# Type (extend, opt-in)
type = extend
}As a result, you will receive a more informative cookie consent.
Consent Box extend mode
Consent Config extend mode
document.addEventListener('dp--cookie-fire', function (e) {
console.log('dp--cookie-fire', e.detail.$el);
});
document.addEventListener('dp--cookie-accept', function (e) {
console.log('dp--cookie-accept', e);
});
document.addEventListener('dp--cookie-deny', function (e) {
console.log('dp--cookie-deny', e);
});
document.addEventListener('dp--cookie-revoke', function (e) {
console.log('dp--cookie-deny', e);
});load script sources If you want to load JavaScript resources after the Cookie is accepted you can use this snippet
<script data-ignore="1" data-cookieconsent="statistics" type="text/plain" data-src="{YOUR_LINK_TO_JS}"></script>load inline script If you want to load Inline JavaScript after the Cookie is accepted use this snippet.
<script data-ignore="1" data-cookieconsent="statistics" type="text/plain">
{YOUT_DYN_JS_CODE}
</script>The data-ignore="1" attribute is to cover the Scriptmerger engine to not combine these parts.
Your customer can choose what types of scripts/cookies he wants to allow. These 2 types are possible and handled by the consent:
<script data-cookieconsent="statistics" type="text/plain" data-ignore="1"><script data-cookieconsent="marketing" type="text/plain" data-ignore="1">You can also handle this part from an Content element if you want.
If you want to load iframes (YouTube, GMap, ..) after the Cookie is accepted you can use this snippet
<iframe width="560" height="315"
data-cookieconsent="statistics"
data-src="https://www.youtube-nocookie.com/embed/XXXXXX?autoplay=1"
class="dp--iframe"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreenn >
</iframe>With the class="dp--iframe" the iframe is hidden by default and would be shown after accepting of the cookie.
if you want to add an overlay to accept Cookies outside of the cookie hint
You also can modify the text in this hint individually per iframe
<iframe
data-cookieconsent="statistics"
data-src="https://www.youtube-nocookie.com/embed/XXXXXX?autoplay=1"
class="dp--iframe"
data-cookieconsent-notice="Cookie Notice"
data-cookieconsent-description="Loading this...."
data-cookieconsent-btn="allow cookies and load this ...."
>if you want to add contents that will only be visible if the consent hint is accepted You can also handle this part from an Content element if you want.
Your HTML markup for this is
<dp-content
data-cookieconsent="statistics"
class="dp--iframe"
data-cookieconsent-notice="Cookie Notice"
data-cookieconsent-description="Loading this...."
data-cookieconsent-btn="allow cookies and load this ...."
>
YOUR CONTENT
</dp-content>With this feature you can add or modify the checkbox types by configuration. All you have to do is setting your new checkbox in TS and add it to the partial template:
Resources/Private/Partials/CookieSelection.html:
<label for="dp--cookie-thirdparty">
<f:form.checkbox id="dp--cookie-thirdparty" class="dp--check-box" checked="{settings.checkboxes.thirdparty}" value="" />
<f:translate key="dpThirdparty" extensionName="dp_cookieconsent" />
</label>or accept/deny cookies outside of the cookie hint, you can use the followed examples
<button
onclick="window.DPCookieConsent.forceAccept(this)"
data-cookieconsent="statistics"
>allow cookies and play video</button>allow cookies
window.DPCookieConsent.forceAccept(this)deny cookies
window.DPCookieConsent.forceDeny(this)