Last updated on 6. März 2021
According to the German hoster Mittwald there is only one TYPO3 extensions that provides a real opt-in for cookies.
Since it looks like an opt-in for cookies will be the final demand by 25th of May 2018, I checked the TYPO3 extension „cookies“ and looked how it behaved under different conditions. You can get the extension here: https://extensions.typo3.org/extension/cookies/
First of all you have to upload it into TYPO3, then add the static template and after that make your settings at the constants panel.
Don’t forget to put your starting page ID in the field „JavaScript Fallback page“ of the constants in the root template. Otherwise you get problems with cHash and the submit is not going through, so you get allways a popup, asking wether you want to sent the formular again. If you have cHash-Problems you can also try to put „$GLOBALS[‚TYPO3_CONF_VARS‘][‚FE‘][‚pageNotFoundOnCHashError‘]“ in the Install Tool Settings on „false“.
After opening your domain in the browser for the first time, there is a dialog window opening at the top of your window (cookie hint).
But checking the cookies in the browser revealed, that Google and others had already set their cookies. So, the setting of cookies via a third party JavaScript is not stopped by the extension. Only the TYPO3-cookie is not set yet.
So this is not a real opt-in!
You can, as described in the extension manual, then use a TYPO3 conditions to unload for example your Google Analytics tracking code. But the cookie that was set at the first load of the page will remain. Of course by setting the browser to block third party cookies and making browser settings to stop tracking will help. But this is then not a real opt-in for a single webpage.
My solution for a real cookie opt-in
The extension sets 2 additional cookies
a. tx_cookies_hidden
b. tx_cookies_disabled
a. This is used to track whether you have already made a choice about cookies, so the dialog will not appear again on the next subpage.
b. If you have chosen to deactivate cookies, this cookie is set to carry along your choice, while you surf through the website.
TypoScript at the root of the website
page.5 < tt_content.list.20.cookies_main[globalVar = _COOKIE|tx_cookies_hidden = 1]
page.headerData.1 =TEXT page.headerData.1.value (
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-x"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxxx-x', {'anonymize_ip': true });
</script>
)
[global]
[globalVar = _COOKIE|tx_cookies_disabled = 1] && [globalVar = _COOKIE|tx_cookies_hidden = 1]
page.headerData.1 >
[global]
Explanation
If the cookie „tx_cookies_hidden“ exists (value „1“), then write the Google tracking code in the header. Meaning the user has clicked on „I agree“, so the cookie „tx_cookies_hidden“ was created.
If the cookie „tx_cookies_hidden“ exists and the cookie „tx_cookies_disabled“ exists, meaning the user has opted for „disable cookies“ (this could happen on the first possibility or later on), then erase what is stored in the page.headerData.1 object.
Now we have one more problem
Clicking on the „I agree“ button doesn’t provoke a reload of the page. As a result no Google tracking code is written in the header since the information only comes to action after a reload. The button „activate cookies“ or „deactivate cookies“ results in a page reload, so we only have the problem with the „I agree“ button. But if the user goes for „I agree“ no tracking code is written and no Google cookie is set before the next reload.
This can be solved with jQuery code for all pages:
//cookies
$('#tx_cookies_hide input').click(
function() {
setTimeout(
function() {
location.reload();
},
500);
});
The delay is needed, so the browser has time to write first the cookies from the extension and to set the „globalVar“ before the reload is activated.
Example where you can see it in action: https://www.implantologie-hopf.de
Addition:
To make the jQuery reload work in the iPhone and iPad world you need to put the cursor to „pointer“ for the „I agree“ button. Seems to be some „Apple-mind-bug“:
CSS:
#tx_cookies_hide input {
cursor: pointer;
}
UPDATE:
May 16th 2018 – Version 5.0 of the extension is available and has some changes!
a. name change from cookie „tx_cookies_hide“ to „tx_cookies_accepted“ please mind the „ed“ of „accepted“
b. id name change for the „I agree“ button to #tx_cookies_accept“, please be carefull here wie have no „ed“ but just an „…_accept“!
c. css for iPhone cursor: pointer changes id-selector
d. some action response text is added and can be set on „display: none“, or used
a. TS changes to:
page.5 < tt_content.list.20.cookies_main[globalVar = _COOKIE|tx_cookies_accepted = 1]
page.headerData.1 =TEXT page.headerData.1.value (
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-x"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxxx-x', {'anonymize_ip': true });
</script>
)
[global]
[globalVar = _COOKIE|tx_cookies_disabled = 1]
page.headerData.1 >
[global]
b. jQuery selector for the reload with the „I agree“ button changes to:
//cookies
$('#tx_cookies_accept input').click(
function() {
setTimeout(
function() {
location.reload();
},
500);
});
c. CSS for the iWorld jQuery window reload bug:
#tx_cookies_accept input {
cursor: pointer;
}
d. CSS:
#tx_cookies .typo3-messages {
display: none;
}
Update 20th May 2018 – Extension Cookies Verson 5.0.1 is available
The author of the extension (Sven Burkert) has reacted, sent me an email and made some changes:
If the domain is „www.abc.de“ the cookies from Google are having the domain name „.abc.de“. Before the PHP-script didn’t delete in this case the Google cookies. With version 5.0.1 this cookies will also be deleted.
Sven Burkert also noted, that if you are not loading the JavaScript of the extension, clicking on the „I agree“ button will not trigger a reload of the web-page. In some cases – if you are not looking for an opt-in – it is desirable to avoid a reload.
For all other cases my little JavaScript will do the reload.
Update 7th April 2019
Setting the cookie tx_cookies_accepted
sometimes seems only to work on the second attempt – when you click the second page you will be asked again.
One possiblity is to wait with the jQuery reload of my little JavaScript a bit longer (go from 500 milliseconds to 1000 milliseconds). The second possibility is to skip my JavaScript reload and accept that Google will only be able to count the visit of the second page on the Website.
Or you put the Google JavaScript already in the header and then delete it with:
[global]
[globalVar = _COOKIE|tx_cookies_disabled = 1]
page.headerData.1 >
[global]
in case people opt-out. But that means it is not a opt-in.
Or: Just use Matomo and forget about Google 🙂
Update 6th March 2021
Please note that conditions in TYPO3 10 have changed!
old
[globalVar = _COOKIE|tx_cookies_accepted = 1]
[globalVar = _COOKIE|tx_cookies_disabled = 1]
new
[request.getCookieParams()['tx_cookies_accepted'] == 1]
[request.getCookieParams()['tx_cookies_disabled'] == 1]
Dieser Artikel ist in Englisch, nicht um Ihnen das Leben schwer zu machen, sondern um den Autoren weltweit etwas zurückzugeben, die mir auch tagtäglich mit ihren Artikeln helfen!
Hallo,
ich habe den Code für die zeitliche Anzeige der
#tx_cookies .typo3-messages mal bei mir auf 3 Sekunden eingestellt, damit der Besucher sieht „Aha, die Cookies sind jetzt aktiviert/deaktiviert.
zuerst:
#tx_cookies .typo3-messages {
/*display: none;*/
}
dann:
### jquery für die „Cookies-Akzeptieren“ – Schaltfläche mit zeitlicher Anzeige, ob Keks aktiviert oder nicht aktiviert###
$(document).ready(function(){
$(‚#tx_cookies ul.typo3-messages‘).delay(3000).hide(0);
$(‚#tx_cookies_accept input‘).click(
function() {
setTimeout(
function() {
location.reload();
},
500);
});
});
Die neue cookies-Extension für TYPO3 9.5 ist getestet und auf dem TER, schrieb mir heute Sven Burkert, der Entwickler.
Vielen DANK!
Hallo,
finde das ganze Saugeil.
Leider habe ich noch ein Problem mit dem Fluidtemplate, könnte man hier evt. mal einen Codeschnipsel posten.
Im voraus Danke
Hi Thomas.
Danke für die ausführliche Anleitung.
Klappt alles ansich prima (tx_cookies werden sowohl für accepted als auch für disabled gesetzt, site-reload funzt), allerdings wird trotz „accepted“-Status z,B, das Analytics-Cookie nicht gesetzt.
Hab deinen Code verwendet und nur die Analytics-ID platziert. (Standard Einbindung funktioniert.)
Hättest du hier evtl. noch einen Tipp?
fg
Sebastian