Corriger l’erreur (un peu acide) : « tarteaucitron is not defined »
On ne donne plus de cookies à n’importe qui !
On le sait tous maintenant, plus question d’installer de petits cookies tiers sur les périphériques de nos visiteurs. Découvrons pourquoi tarteaucitron est une bonne option quand on évite une petite erreur piquante.
Alors comme vous êtes responsable, vous souhaitiez vous mettre en conformité avec la CNIL. Enfin, vous souhaitiez surtout éviter une amende pouvant aller jusqu’à 300 000€.
Vous vous êtes interrogé, informé et une cinquantaine de café plus tard, vous avez enfin compris les subtilités sur cette nouvelle loi européenne sur les cookies.
Vous étiez parti sur un bandeau tout simple pour informer l’internaute que vous utilisiez Google Analytics, Adsense ou même encore YouTube. Mais voilà, vous savez que c’est pas si simple..
Après quelques recherches, vous tombez sur l’inévitable : Tarte Au Citron !
Quand tout n’est pas si crémeux..
L’idée est sympatoche puisque vous allez pouvoir être réellement en conformité. Vos visiteurs pourront accepter ou refuser les cookies de tel ou tel service en toute transparence.
Bon, ça, c’est si on ne prends pas en compte le fait que si votre site est déjà en ligne, vous allez devoir modifier les codes sources pour remplacer vos codes d’intégrations par le code de remplacement fourni par tarteaucitron..
On le sens bien le goût amer là non ?
En dehors de ça, sincèrement, pour s’éviter une belle petite prune, je veux bien manger un peu citronné.
Découvrez tarteaucitron sur GitHub.
Le thermostat monte encore d’un cran
On a fait l’impasse sur le travail que ça peut représenter de tout remodeler nos morceaux de codes d’intégrations… Ad-me-ttons !
L’installation de notre script s’est bien passé, ça tourne nickel ! On installe et teste ça en production en acceptant et/ou en refusant quelques services et ça fonctionne, aucun cookie n’est installé sur l’ordinateur ou le mobile en cas de refus du visiteur.
C’est sans compter sur notre ami Michel (le revoilà celui-là), qui nous a fait découvrir que notre bandeau de cookies a un comportement bizarre… il ne s’affiche pas chez lui !
On imagine déjà les conséquences si ce problème se reproduit chez certains de nos visiteurs ! Puis combien ont déjà été touché ?
Quasi tous en réalité !
ReferenceError: tarteaucitron is not defined.
Pas de bandeau cookies, donc pas de services tiers, tarteaucitron ne pourra pas activer Analytics, nos vidéos ou encore notre code de conversion etc.
Et ce comportement vicieux n’est pas facilement reproductible puisque chez nous ça fonctionne évidemment.
Alors on prends l’ordi à Michel et on teste, parfois le bandeau est là, et parfois non. Quand il ne s’affiche pas, dans la console du navigateur, on voit cette erreur : ReferenceError: tarteaucitron is not defined
Jusqu’à ce qu’un éclair de génie (appelons un chat un chat) nous traverse l’esprit.
Si on regarde les entrailles de tarteaucitron et tout particulièrement ce morceau de code javascript :
// define correct path for files inclusion
var scripts = document.getElementsByTagName('script'),
path = scripts[scripts.length - 1].src.split('?')[0],
cdn = path.split('/').slice(0, -1).join('/') + '/',
alreadyLaunch = (alreadyLaunch === undefined) ? 0 : alreadyLaunch,
tarteaucitronForceLanguage = (tarteaucitronForceLanguage === undefined) ? '' : tarteaucitronForceLanguage,
tarteaucitronProLoadServices,
tarteaucitronNoAdBlocker = false;
On voit que le script tarteaucitron, dès qu’il est chargé, récupère la dernière balise <script> du document HTML chargé, pensant qu’il s’agira obligatoirement de son propre script, puis il extrait le chemin vers le dossier où doit normalement se situer notre fichier « tarteaucitron.js ».
Seulement… on a utilisé l’attribut magique : « defer » !
Malheur ! La voilà notre erreur.
Pensez bien qu’avec « async », ce serait la même chose, comme on diffère le chargement du script, notre tarte au citron n’arrive pas à charger ses ingrédients pour terminer la recette !
Conclusion
2 comportements possibles peuvent survenir avec l’attribut defer/async :
- Soit on aura l’erreur « ReferenceError: tarteaucitron is not defined » dans la console du navigateur
- Soit tarteaucitron chargera ses fichiers en utilisant un chemin erroné puisqu’il aura récupérer un fichier JS autre que le sien
Naturellement, l’erreur dans la console peut simplement venir du fait que l’on s’est trompé nous même dans le chemin vers le fichier tarteaucitron.js mais dans ce cas, le message ressortirait tout le temps.
Avec le problème de l’attribut defer, parfois le bandeau cookie peut s’afficher, parfois non.
Alors vérifiez bien et déplacez plutôt vos lignes de codes en fin de document HTML plutôt que d’utiliser defer ou async avec tarteaucitron, vos statistiques et même visiteurs n’en seront que plus contents.