Bonjour à tous,
J’ai installé le script Matomo permettant au visiteur de s’opposer au suivi.
Ce script affiche soit une case cochée avec la mention « vous êtes suivi », soit décochée avec la mention « vous n’êtes pas suivi ».
J’aimerais modifier le script pour que soit affichées simultanément les deux mentions avec leur case à cocher respective en fonction du choix de l’utilisateur.
Idéalement, on devrait même dans ce cas, afficher des boutons radio plutôt que des cases à cocher.
Je ne suis pas développeur et faire cela dépasse largement mes compétences .
Une gentille personne aurait-elle envie de m’aider ? Merci.
Pour rappel, voici le script Matomo :
var settings = {
"showIntro": true,
"divId": "matomo-opt-out",
"useSecureCookies": true,
"cookiePath": null,
"cookieDomain": null,
"cookieSameSite": "Lax",
"OptOutComplete": "",
"OptOutCompleteBis": "",
"YouMayOptOut2": "",
"YouMayOptOut3": "",
"OptOutErrorNoCookies": "La fonctionnalit\u00e9 de d\u00e9sactivation du suivi n\u00e9cessite que les cookies soient autoris\u00e9s.",
"OptOutErrorNotHttps": "La fonctionnalit\u00e9 de d\u00e9sactivation du suivi pourrait ne pas fonctionner car ce site n'a pas \u00e9t\u00e9 charg\u00e9 en HTTPS. Veuillez recharger la page pour v\u00e9rifier que le statut de ce suivi a bien \u00e9t\u00e9 chang\u00e9.",
"YouAreNotOptedOut": " D'accord",
"UncheckToOptOut": "<!--D\u00e9cochez cette case pour ne plus l'\u00eatre.-->",
"YouAreOptedOut": " Pas d'accord",
"CheckToOptIn": "<!--Cochez cette case pour l'\u00eatre. Merci-->"
};
document.addEventListener('DOMContentLoaded', function() {
window.MatomoConsent.init(settings.useSecureCookies, settings.cookiePath, settings.cookieDomain, settings.cookieSameSite);
showContent(window.MatomoConsent.hasConsent());
});
function showContent(consent, errorMessage = null, useTracker = false) {
var errorBlock = '<p style="color: red; font-weight: bold;">';
var div = document.getElementById(settings.divId);
if (!div) {
const warningDiv = document.createElement("div");
var msg = 'Unable to find opt-out content div: "' + settings.divId + '"';
warningDiv.id = settings.divId + '-warning';
warningDiv.innerHTML = errorBlock + msg + '';
document.body.insertBefore(warningDiv, document.body.firstChild);
console.log(msg);
return;
}
if (!navigator || !navigator.cookieEnabled) {
div.innerHTML = errorBlock + settings.OptOutErrorNoCookies + '';
return;
}
if (location.protocol !== 'https:') {
div.innerHTML = errorBlock + settings.OptOutErrorNotHttps + '';
return;
}
if (errorMessage !== null) {
div.innerHTML = errorBlock + errorMessage + '';
return;
}
var content = '';
if (consent) {
if (settings.showIntro) {
content += '' + settings.YouMayOptOut2 + ' ' + settings.YouMayOptOut3 + '';
}
if (useTracker) {
content += '<input onclick="_paq.push([\'optUserOut\']);showContent(false, null, true);" id="trackVisits" type="checkbox" checked="checked" />';
} else {
content += '<input onclick="window.MatomoConsent.consentRevoked();showContent(false);" id="trackVisits" type="checkbox" checked="checked" class="checked" />';
}
content += '<label for="trackVisits"><strong><span>' + settings.YouAreNotOptedOut + ' ' + settings.UncheckToOptOut + '</span></strong></label>';
} else {
if (settings.showIntro) {
content += '' + settings.OptOutComplete + ' ' + settings.OptOutCompleteBis + '';
}
if (useTracker) {
content += '<input onclick="_paq.push([\'forgetUserOptOut\']);showContent(true, null, true);" id="trackVisits" type="checkbox" />';
} else {
content += '<input onclick="window.MatomoConsent.consentGiven();showContent(true);" id="trackVisits" type="checkbox" class="unchecked" />';
}
content += '<label for="trackVisits"><span>' + settings.YouAreOptedOut + ' ' + settings.CheckToOptIn + '</span></label>';
}
div.innerHTML = content;
};
window.MatomoConsent = {
cookiesDisabled: (!navigator || !navigator.cookieEnabled),
CONSENT_COOKIE_NAME: 'mtm_consent',
CONSENT_REMOVED_COOKIE_NAME: 'mtm_consent_removed',
cookieIsSecure: false,
useSecureCookies: true,
cookiePath: '',
cookieDomain: '',
cookieSameSite: 'Lax',
init: function(useSecureCookies, cookiePath, cookieDomain, cookieSameSite) {
this.useSecureCookies = useSecureCookies;
this.cookiePath = cookiePath;
this.cookieDomain = cookieDomain;
this.cookieSameSite = cookieSameSite;
if (useSecureCookies && location.protocol !== 'https:') {
console.log('Error with setting useSecureCookies: You cannot use this option on http.');
} else {
this.cookieIsSecure = useSecureCookies;
}
},
hasConsent: function() {
var consentCookie = this.getCookie(this.CONSENT_COOKIE_NAME);
var removedCookie = this.getCookie(this.CONSENT_REMOVED_COOKIE_NAME);
if (!consentCookie && !removedCookie) {
return true; // No cookies set, so opted in
}
if (removedCookie && consentCookie) {
this.setCookie(this.CONSENT_COOKIE_NAME, '', -129600000);
return false;
}
return (consentCookie || consentCookie !== 0);
},
consentGiven: function() {
this.setCookie(this.CONSENT_REMOVED_COOKIE_NAME, '', -129600000);
this.setCookie(this.CONSENT_COOKIE_NAME, new Date().getTime(), 946080000000);
},
consentRevoked: function() {
this.setCookie(this.CONSENT_COOKIE_NAME, '', -129600000);
this.setCookie(this.CONSENT_REMOVED_COOKIE_NAME, new Date().getTime(), 946080000000);
},
getCookie: function(cookieName) {
var cookiePattern = new RegExp('(^|;)[ ]*' + cookieName + '=([^;]*)'),
cookieMatch = cookiePattern.exec(document.cookie);
return cookieMatch ? window.decodeURIComponent(cookieMatch[2]) : 0;
},
setCookie: function(cookieName, value, msToExpire) {
var expiryDate = new Date();
expiryDate.setTime((new Date().getTime()) + msToExpire);
document.cookie = cookieName + '=' + window.encodeURIComponent(value) +
(msToExpire ? ';expires=' + expiryDate.toGMTString() : '') +
';path=' + (this.cookiePath || '/') +
(this.cookieDomain ? ';domain=' + this.cookieDomain : '') +
(this.cookieIsSecure ? ';secure' : '') +
';SameSite=' + this.cookieSameSite;
if ((!msToExpire || msToExpire >= 0) && this.getCookie(cookieName) !== String(value)) {
console.log('There was an error setting cookie `' + cookieName + '`. Please check domain and path.');
}
}
};