amauric / tarteaucitron.js Goto Github PK
View Code? Open in Web Editor NEWRGPD friendly cookie manager
Home Page: https://tarteaucitron.io/
License: MIT License
RGPD friendly cookie manager
Home Page: https://tarteaucitron.io/
License: MIT License
As it's heavily used nowadays, why not register your js to Bower ? I love just having to bower install
the packages I use, plus it makes it easier for devs to integrate your project.
Related to #7 , it would be wise to make the url hash string an option so the url (let's say for a food website) wouldn't be confusing and sound better for "serious" websites.
I see in a previous commit you have abandonned the uri value of the services for the "Read more" link. The previous links now are used nowhere else. Why this choice ? Why not have two links, one to the "official" page of the service, the other to your site ?
Pouvez vous ajouter une fonction permettant d'accepter les cookies sur une action de l'utilisateur ?
Bonjour,
Les 3 attributs tarteaucitron.added, tarteaucitron.state et tarteaucitron.launch sont déclarés au départ comme des Array. Or vous les complétez ensuite comme s'il s'agissait d'Objects (en spécifiant une clé, alors qu'en javascript on ne peut pas toucher, si je ne m'abuse, aux clés).
Ne vaudrait-il pas mieux les initialiser en tant qu'objets ?
var launch = {};
Ou inclure les services sous forme d'objet ?
var launch = [];
launch.push({
googletagmanager: true
});
Bonjour
Sauf erreur ce très bon js créé son propre cookie mais celui ci n'est pas remonté dans la liste que l'internaute peut accepter/refuser, cela me semble étrange, non ?
Merci en tout cas pour ce joli travail.
Bonjour,
Lorsque l'utilisateur désactive les cookies depuis son navigateur, "tarteaucitron" fonctionne toujours.
Le message d'alerte "En poursuivant votre navigation, vous acceptez l'utilisation de services tiers pouvant installer des cookies..." réapparaît à chaque page.
Y a-t-il un moyen de prendre en compte l'utilisateur qui désactive les cookies depuis son navigateur en lui proposant soit un autre message (comme pour les Adblockers), soit en désactivant "tarteaucitron" automatiquement ?
Merci pour votre travail.
Hi,
I wrote a hack to change language dynamically :
var languageCode = NEW_LANGUAGE_CODE; /* supported: fr, en, de, es, it, pt, pl, ru */
tarteaucitronForceLanguage = languageCode;
var divId = 'tarteaucitronRoot';
var existingElement = document.getElementById(divId);
if(existingElement) existingElement.parentNode.removeChild(existingElement);
tarteaucitron.added = {};
tarteaucitron.load();
It seems to work but I was wondering if this hack might have side-effects that I did not think of.. This code can potentially be executed several times, without the user reloading the page.
Side note : I am using tarteaucitron in an angular application and I use angular-translate for translations, so the whole angular configuration is :
//configures tarteaucitron
myApp.run(function($rootScope, $translate){
function initializeCookieManagment(){
var languageCode = $translate.use(); /* supported: fr, en, de, es, it, pt, pl, ru */
tarteaucitronForceLanguage = languageCode;
var divId = 'tarteaucitronRoot';
var existingElement = document.getElementById(divId);
if(existingElement) existingElement.parentNode.removeChild(existingElement);
tarteaucitron.added = {};
tarteaucitron.load();
}
$rootScope.$on('$translateChangeSuccess',initializeCookieManagment);
});
Best regards
Benjamin Layet
Bonjour,
J'ai essayé de voir comment prendre en compte le tracker d'audience Facebook Pixel mais je m'y perds un peu.
Pour info, il y a un premier code dans le head :
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s) {
if(f.fbq) return;
n=f.fbq=function(){
n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments);
};
if(!f._fbq) f._fbq=n;
n.push=n;
n.loaded=!0;
n.version='2.0';
n.queue=[];
t=b.createElement(e);
t.async=!0;
t.src=v;
s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s);
} (window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '##############');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=##############&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
Puis des marqueurs de ci delà genre :
<script> fbq('track', 'Search'); </script>
ou
<script> fbq('track', 'ViewContent'); </script>
...
Merci pour ce fabuleux travail !
Philippe
Bonjour,
Je fais face à cette erreur lorsque j'installe tarteaucitron sur un site magento.
prototype.js:864 Uncaught TypeError: this.each is not a function
at HTMLCollection.collect (prototype.js:864)
at Object.order (tarteaucitron.js:725)
at Object.addService (tarteaucitron.js:438)
at tarteaucitron.js:332
at Object.addScript (tarteaucitron.js:1089)
at tarteaucitron.js:323
at HTMLScriptElement.script.onreadystatechange.script.onload [as onreadystatechange] (tarteaucitron.js:1107)
Voici les morceaux de code ajoutés
<head>
<script type="text/javascript" src="/tarteaucitron/tarteaucitron.js"></script>
<script type="text/javascript">
tarteaucitron.init({
"hashtag": "#tarteaucitron", /* Ouverture automatique du panel avec le hashtag */
"highPrivacy": false, /* désactiver le consentement implicite (en naviguant) ? */
"orientation": "top", /* le bandeau doit être en haut (top) ou en bas (bottom) ? */
"adblocker": false, /* Afficher un message si un adblocker est détecté */
"showAlertSmall": true, /* afficher le petit bandeau en bas à droite ? */
"cookieslist": true, /* Afficher la liste des cookies installés ? */
"removeCredit": false /* supprimer le lien vers la source ? */
});
</script>
Footer :
<script type="text/javascript">
tarteaucitron.user.analyticsUa = 'UA-38017647-1';
tarteaucitron.user.analyticsMore = function () { /* add here your optionnal ga.push() */ };
(tarteaucitron.job = tarteaucitron.job || []).push('analytics');
</script>
Si vous voulez voir le site : http://bit.ly/2qM3U0K
Vous allez pouvoir voir la bande affichée mais elle est rajoutée en dur par mes soins pour débug, (regardez la console pour l'erreur).
Merci
Voici le code HTML affiché sur la page du site Joomla lorsque le plugin "e-mailit sharing buttons" est activé :
En vous remerciant,
Hi again, I feel something is not clear in the Google Analytics explanations : how would you use tarteaucitron.user.analyticsMore to add displayFeatures for instance ?
Like this ?
tarteaucitron.user.analyticsMore = function () {
ga('require', 'displayfeatures');
}
Ce serait encore plus simple pour l'installation non ?
Bonjour,
Tout d'abord félicitations à Amauri pour ce superbe développement que je découvre un peu tardivement avec l'arrivée de la RGPD...
Je voulais savoir s' il était possible d'ajouter dans les services la gestion des cookies déposés par le plugin Facebook Messenger Customer Chat.
Merci d'avance pour votre collaboration.
Hello everyone
Thank you for this very interesting development
I have on a site of my customers in the page of contact a map Google maps with a pointer to locate the company but I can not manage to display it.
Is there a solution?
Thank you in advance for your answer and sorry for my english which is not very good
Add a function to delete all cookies when a service is disabled :
['_atuvc']
['_ga', '_gat', '__utma', '__utmb', '__utmc', '__utmz']
['__unam']
Bonjour,
J'ai cette erreur une fois le JS installé:
Uncaught TypeError: Cannot set property 'push' of undefined qui me renvoi a cette ligne :
https://github.com/AmauriC/tarteaucitron.js/blob/master/tarteaucitron.js#L337
J'ai été jusqu'à l'étape 3 incluse.
Merci d'avance pour l'aide.
Bonjour excellent travail déjà !
Pour etre a jour au niveau du RGPD il faudrait dans la config suivante (Analytics + Facebook + Youtube) :
Peut etre que je n'ai pas assez fouillé mais voila je suis pret a aider
Bonjour,
Pour des raisons d'accessibilité, notamment pour la navigation au clavier, il faudrait que les <div>
qui sont utilisées comme des boutons (croix pour fermer, boutons autoriser / interdire, etc.) soient des vrais boutons (balise <button>
) afin qu'ils puissent recevoir le focus.
Merci beaucoup !
With Twitter's share buttons it's possible to put some data in data attributes (data-text or data-url). Those are lost with the current fallback. Why not trying to keep them in the GET if they exist ?
tarteaucitron.fallback(
['tacTwitter'],
function(elem) {
var text = document.title,
url = document.location,
next = elem;
if(elem !== undefined) {
// get next (should be the "real" server generated button or this won't work)
do next = next.nextSibling; while(next && next.nodeType !== 1);
if(next !== undefined) {
text = next.getAttribute("data-text") !== null ? next.getAttribute("data-text") : text;
url = next.getAttribute("data-url") !== null ? next.getAttribute("data-url") : url;
}
}
return '<a href="https://twitter.com/intent/tweet?text=' + encodeURIComponent(text) + '%20' + encodeURIComponent(url) + '" target="_blank" class="tac_share tac_share_twitter">Twitter</a>';
}
);
Bonjour,
Concernant les marqueurs spécifiques de Analytics, je ne vois pas comment adapter le mien avec le votre, pouvez vous m'aider ?
Mon marqueur : (il contient un regroupement de contenu)
Merci
ga('create', 'UA-XXX', 'auto');
ga('set', 'contentGroup1', 'NAMEGROUP');
ga('send', 'pageview');
Hello,
The AdBlock list "Liste FR+EasyList" and probably others, prevent the file 'advertising.js' from being loaded and consequently prevent tarteaucitron from working.
Maybe it would be good to rename it...
Merci,
Adam
can you please add piwik support?
an exemple on code used:
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//piwik.xxx.com/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="//piwik.xxx.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
```Thank you
Bonjour,
j'ai un soucis lorsque j'installe le service :
Uncaught TypeError: Cannot set property 'push' of undefined at tarteaucitron.js:337 at Object.addScript (tarteaucitron.js:1089) at tarteaucitron.js:323 at HTMLScriptElement.script.onreadystatechange.script.onload [as onreadystatechange] (tarteaucitron.js:1107)
Le script est bien intégré, et accessible lorsque je vais dans le code source
Merci
Bonjour,
Certains liens sortants vers opt-out.ferank ... et vers les sites officiels ne sont pas en "nofollow" :
<a href="https://opt-out.ferank.eu/service/xiti/" target="_blank"> En savoir plus </a>
Cordialement,
Eric
I think you should consider adding an option for the footer credits and make it more discrete (grayer and maybe aligned to the right). As much as I like variables with funny names, this one doesn't do really "pro", as our clients are. I really can't include this. At least I advice you should to change it to ferank which does sound more pro.
I recently made a custom version of your script (finished it today just to realize you committed a new version !) and changed it so the top alert doesn't hide until the user has checked all the services.Because the small alert should be a real option, the user can make its choices once and for all and never hear about the alerts until at least a year.
You should also consider adding an option for top banner to change position to bottom. I find this less intrusive as many of our clients have a logo/top navigation and don't like having this horrible thing coming over it. I know it's in the css but an init option would be way more useful.
Hello,
Je suis dev au sein de Mediapart et aimerions utiliser ce projet pour la mise en place du cookie consent.
Pourquoi nous aimerions l'utiliser :
Ce que nous avons compris du projet :
Ce qui nous préoccupe :
Comment nous pouvons contribuer :
Bien sûr, ces modifications peuvent être importantes et je préfère qu'on en parle ensemble,
Objectifs :
Nous nous attacherons à rendre le projet utilisable facilement et sans gestionnaire de paquet pour les développeurs / ou non développeur qui n'ont pas la possibilité d'en utiliser en proposant un fichier minifié issu de la compilation.
Cette architecture permettrai d'augmenter les participations de développeurs plus habitués au gestionnaires de paquets
A bientôt,
JacJac pour l'équipe de Mediapart.
Hello !
First of all, thanks for your plugin, it works great!
I've just noticed however that the _gid
cookie is not linked to Google Analytics (it's a new Universal Analytics cookie since April 2017 I think). This brings two issues:
_gid
cookie owner is my domain name instead of Google Analytics Universal ;_gid
cookie doesn't get deleted when you disable GA Universal service.Everything seems to be solved by adding the cookie name _gid
into the array line 799 of the tarteaucitron.services.js
file.
Would this work and be CNIL-compliant in a new grayJs function added to gajs service ?
_gaq.push(['_gat._anonymizeIp']);
It'd be good if you'd add Hubspot.com tracking script as an option as it is a very popular system
The tracking script provided is:
<script id="hs-script-loader" async defer src="https://js.hs-scripts.com/1234567.js"></script>
1234567 above is a unique 7 digit user ID.
bonjour,
Serait il il possible d'ajouter le service Segment.com , très populaire et d'ailleurs ayant l'avantage qu'il permet de controller (activer/désactiver) en un seul service l'ensemble des "destinations" (google analytics, solutions de test a/b...):
Les scripts: https://segment.com/docs/sources/website/analytics.js/
Cdt,
M.
Bonjour !
Pour des raisons d'organisation, j'aimerais savoir si il est possible de récupérer une variable du fichier lang et de la (re)définir dans le bloc "tarteaucitron.init" ?
Concrètement, j'aimerais définir le texte contenu dans "alertBig" depuis le code à insérer dans chaque page, pour ne pas modifier directement le fichier tarteaucitron.fr.js du dossier "lang".
Merci ;)
Que se passe-t'il si un utilisateur désactive le Javascript ou si son navigateur ne permet pas le Javascript ? ça peut arriver dans des environnements contraints par certaines DSI, j'ai déjà vu ça.
Il faudrait donc pouvoir proposer une alternative sans Js.
Voilà ce que j'ai fait.
Sur WordPress, plutôt que d'afficher le showAlertSmall (qui est plutôt gênant quand il est affiché de façon permanente), j'ai préféré utiliser un lien de menu "Gestion des cookies" en pied de page à la place.
Or, pas possible avec WordPress d'appeler une fonction JS.
J'ai créé un lien de menu vers une page du genre "Gestion des données privées" qui contient la marche à suivre pour gérer les cookies dans son navigateur. À la fin de l'URL j'ai ajouté #gestioncookies, ce qui donne https://www.monsite.fr/mapage#gestioncookies.
Dans mon fichier functions.php, j'ai ajouté la fonction suivante :
`add_filter('walker_nav_menu_start_el', 'gestioncookies_replace_hash', 999);
/**
Si Js n'est pas activé, l'utilisateur ira vers la page du lien cité plus haut.
Sinon, la fenêtre modale s'affiche.
Bonne idée ou catastrophe ?
Fred
Bonjour
Il n'y a pas lieu à mon sens de proposer de bloquer GTM puisqu'il ne dépose aucun cookie, mais les tags qu'il contient peuvent être amené à le faire.
Il faudrait gérer l'activation des tags individuellement, voire proposer une façon de communiquer à GTM quelles familles de tag activer ou non d'après l'expression de l'utilisateur
We went through an issue on some of our websites whose CMS text editors don't allow to add a link with javascript inside. This prevents us to add a link like "Manage my cookies" that opens the panel.
I came to the solution of using a css class and bind a click event to make it work. So I suggest adding this option to open the panel and add the class name as an init option.
For now, here is how I did it (without jQuery and keeping old browers compatibility which explains why it's so big) :
// Add getElementByClassName fallback
if (!document.getElementsByClassName) {
document.getElementsByClassName = function getElementsByClassName(node, className) {
var results = [];
var elems = node.getElementsByTagName("*");
for (var i=0, len=elems.length; i<len; i++) {
if (elems[i].className.indexOf(className) != -1) {
results.push(elem[i]);
}
}
return results;
};
}
// Ready function to be called after DOM loaded
var ready = function() {
// Bind click event on <a> element to open panel
var links = document.getElementsByClassName("eu-cookies"),
i, link,
openPanel = function(e) {
e.preventDefault();
return tarteaucitron.userInterface.openPanel();
};
for (i=0; i<links.length; i++) {
link = links[i];
link.style.cursor = "pointer";
link.addEventListener("click", openPanel);
}
};
if (window.addEventListener) {
window.addEventListener("load", ready, false);
} else {
window.attachEvent("onload", ready);
}
Hello,
Really great plugin, just one thing so far : http://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.0 is the url for french, I need to call http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0 on the english version of my site, http://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.0 on the german version, etc...
There should be a way to pass the language folder/code information with
tarteaucitron.job.push('facebook');
When using only "max-width" for the main fixed div, IE (11) can't center it. The only way I found was to add a width (in % for better rendering).
I suggest you add an option (or force) to make the css more "Bootstrap compliant" as many of websites use the framework as a base for theming (many of ours do). I mean only for the media queries which are completly differents from yours.
My suggestion :
@media screen and (max-width:479px) {
#tarteaucitron #tarteaucitronInfo {
font-size: 16px !important;
background-image: none;
padding-right: 0;
text-align: center;
}
#tarteaucitron .tarteaucitronLine .tarteaucitronName {
width: 90% !important;
}
#tarteaucitron .tarteaucitronLine .tarteaucitronAsk {
float: left !important;
margin: 10px 15px 5px;
}
}
@media screen and (max-width:767px) {
#tarteaucitron {
border: 0 !important;
bottom: 0 !important;
height: 100% !important;
max-height: 100% !important;
max-width: 100% !important;
top: 0 !important;
width: 100% !important;
}
#tarteaucitron #tarteaucitronClosePanel {
display: block !important;
}
}
@media screen and (min-width:768px) and (max-width:991px) {
#tarteaucitron {
max-height: 100% !important;
max-width: 100% !important;
width: 90% !important;
margin: 0 5%;
}
}
Bonsoir,
Tous les services pris en charge par tarteaucitron.js sont listés/cachés (.tarteaucitronHidden
, display:none`) même s'ils ne sont pas utilisés.
Exemple : pas de push pour les services vidéos mais une partie du code HTML est cependant générée et cachée (display:none) :
<div id="tarteaucitronServicesTitle_video" class="tarteaucitronHidden">
<div class="tarteaucitronTitle">
<a href="#" onclick="tarteaucitron.userInterface.toggle('tarteaucitronDetailsvideo', 'tarteaucitronInfoBox');return false">✛</a> Vidéos
</div>
<div id="tarteaucitronDetailsvideo" class="tarteaucitronDetails tarteaucitronInfoBox"> Les services de partage de vidéo permettent d'enrichir le site de contenu multimédia et augmentent sa visibilité.
</div>
</div>
Le contenu des div cachés est indexé par les moteurs (au moins Google - Search Console - Mots clés de contenu ).
Cordialement,
Eric
Hallo thank you for your job, i really like it, i have seen one missing feature, what about web site that have google maps in Iframe??
I see that you find a good solution for vimeo and youtube, is it possible to have for google maps as well??
Thank you..
Not really an issue, but just to let you know I wrote a Gulp builder for a customized and minified TarteAuCitron : https://github.com/guix77/gulp-tarteaucitron
It fetches the latest TarteAuCitron with :
bower install tarteaucitron
Then you can customize the text, modify the CSS, delete the services you don't need, and finally get a minified build.
Bonjour à tous.
J'essaie d'installer Tarteaucitron sur un site Wordpress mais je rencontre des erreurs (voir console ci-après). J'ai testé sur une page simple PHP statique sans problème.
Le dossier Tarteaucitron est le même.
Des idées ?
Merci
tarteaucitron.js:337 Uncaught TypeError: Cannot set property 'push' of undefined
at tarteaucitron.js:337
at HTMLScriptElement.script.onreadystatechange.script.onload [as onreadystatechange] (tarteaucitron.js:1107)
(anonymous) @ tarteaucitron.js:337
script.onreadystatechange.script.onload @ tarteaucitron.js:1107
load (async)
addScript @ tarteaucitron.js:1103
(anonymous) @ tarteaucitron.js:323
script.onreadystatechange.script.onload @ tarteaucitron.js:1107
load (async)
addScript @ tarteaucitron.js:1103
(anonymous) @ tarteaucitron.js:206
script.onreadystatechange.script.onload @ tarteaucitron.js:1107
load (async)
addScript @ tarteaucitron.js:1103
load @ tarteaucitron.js:205
(anonymous) @ tarteaucitron.js:34
load (async)
init @ tarteaucitron.js:33
(anonymous) @ (index):56
tarteaucitron.js:1032 Uncaught TypeError: Cannot read property 'length' of undefined
at Object.number (tarteaucitron.js:1032)
at proPing (tarteaucitron.js:1261)
On https://opt-out.ferank.eu/install.php when you click on "I use this" nothing happens on Chrome 40.0.2214.91 (64-bit) (OS X 10.10.1). It works in other browsers on the same machine.
Thanks for this project BTW :)
[Error] TypeError: undefined is not an object (evaluating 'tarteaucitron.job')
(fonction anonyme) (tarteaucitron.js:337)
addScript (tarteaucitron.js:1089)
(fonction anonyme) (tarteaucitron.js:323)
onload (tarteaucitron.js:1107)
Bonjour,
dans la nouvelle loi RGPD il est stipulé que le visiteur doit pouvoir modifier son consentement ultérieurement.
Est-ce que tarteaucitron gère cette problématique ?
Merci !
Hi @AmauriC
I'm Product Owner at AT Internet (Xiti) on the data collection part, and I would like to propose you to work together on a better integration of our solution in your tool.
Don't hesitate to contact me at [email protected]
Best,
Benjamin
bonjour il y'a une erreur si
tarteaucitron.user.gtagUa is undefined
tarteaucitron.services.js:826:90
As your current documentation says, we should include the init() in our body. As I prefer not to split my scripts, I'm suggesting adding the option (or maybe force) to wait for the DOM to be ready to init the object. It's needed as the HTML is added to the body.
What I did in my version was to add a (cross-browser) DOM Ready function (suggested from MDN : https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js) and rename the init() function to "load" while the init() becomes : contentLoaded(window, tarteaucitron.loaded).
The script is then ready to be used in older browser (I still have to add support for IE8) and not splited in the templates.
Hi,
First of all, thanks for the great tool!
I was wondering about the scroll implicit acceptation of services, and the value of 2x screen height. Is this an arbitrary value or does it come from a spec I didn't find?
This lead to short pages not being able to implicitly accept. That's not an issue, but more a thing to know I guess.
If there is no spec about it, don't you think it could be interesting to have this value in the init settings? This could also be set with a page scroll percentage.
I can PR something if this can be something interesting to you.
Thanks!
Benjamin
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.