Pour gérer des sites multilingues avec WordPress, vous pouvez utiliser des plugins comme WPML ou Polylang. Ils vous permettent de créer plusieurs versions linguistiques de votre site. Voici comment :
Vous devez d’abord générer le code iubenda qui fera apparaître le bandeau sur le site en suivant les instructions de ce guide.
Chaque langue a son propre code dédié qui doit être inséré dans le html du site, comme décrit en détail dans ce guide. Vous pouvez activer votre politique relative aux cookies sur la page de modification de la politique, en bas à droite : [Votre site] > Politique relative aux cookies et à la confidentialité > Modifier
Le bon code est généré lorsque vous cliquez sur « Activer la politique relative aux cookies » :
À présent, il vous suffit de vous rendre sur la page Intégrer en cliquant sur le lien « Gérer et intégrer » au-dessus du nom de votre site Web. Cela vous ramènera à la page de flux/aperçu du site de votre tableau de bord. Cliquez sur le bouton <>Intégrer sous Privacy Controls and Cookie Solution pour vous rendre à la section Intégrer. Une fois à cette section, vous trouverez le code d’intégration de votre bandeau.
Si vous avez généré vos politiques dans plusieurs langues, des onglets linguistiques seront visibles pour chaque langue que vous avez activée pour la politique. Chaque onglet contient le code spécifique à chaque langue de cette politique :
Il vous suffit de cliquer sur l’onglet correspondant à la langue souhaitée et de copier le code bandeau cookies / bannière de consentement correspondant.
Le code – qui est similaire à celui de l’exemple ci-dessous – doit être inséré dans la <head> balise en premier :
<script src="https://embeds.iubenda.com/widgets/[site-code].js"></script>
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"lang": "en",
"siteId": XXXXXX, //use your siteId
"cookiePolicyId": YYYYYY, //use your cookiePolicyId
"banner": {
"position": "float-top-center",
"acceptButtonDisplay": true,
"customizeButtonDisplay": true
}
};
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>.
Comme mentionné, chaque langue a son propre code, la principale différence étant l’identifiant sur lequel elle est pointée.
Vous pouvez utiliser notre plugin WordPress qui détecte automatiquement le plugin multilingue que vous utilisez (WPML et Polylang) et proposer des formulaires pour copier-coller les scripts iubenda ci-dessus :
Si vous ne pouvez pas utiliser un des plugins multilingues compatibles avec le nôtre (à savoir WPML et Polylang), vous devrez apporter quelques modifications au bandeau afin que le changement de langue puisse être appliqué. Les modifications que vous verrez ci-dessous ont pour but de faire apparaître le script dans la bonne langue dans le code source de votre page, en se basant sur l’attribut « lang » de la balise de la page en question, qui indique en règle générale la langue de la page.
Voici les étapes à suivre, à commencer par un script test. Dans votre cas, sautez la copie du script Privacy Controls and Cookie Solution ci-dessous, tel que vous pouvez le trouver dans votre domaine privé iubenda (naviguez vers votre domaine personnel → ouvrez votre site → cliquez sur « INTÉGRER » sous « Privacy Controls and Cookie Solution »). Après cette étape, procédez aux modifications suivantes :
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"floatingPreferencesButtonDisplay":"bottom-right","perPurposeConsent":true,"siteId":2930987,"whitelabel":false,"cookiePolicyId":38875072,"lang":"en-GB", "banner":{ "acceptButtonDisplay":true,"closeButtonRejects":true,"customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-top-center","rejectButtonDisplay":true }};
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/2930987.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>.
La première modification à faire est d’insérer, dès le début de notre script, des valeurs qui indiquent le changement de langue. Les valeurs en question sont les suivantes :
<script type="text/javascript">
var lang_id = document.getElementsByTagName('html')[0].getAttribute('lang').split("-")[0];
site_id = 000001; // site_id du code d’intégration iubenda
switch (lang_id) {
case 'en':
var policy_id = 000002; // policy_id du code d’intégration iubenda (EN)
break;
case 'it':
var policy_id = 000003; // policy_id du code d’intégration iubenda (IT)
break;
// case 'autre langue' ...
}
Après avoir ajouté la partie script ci-dessus, notre script bandeau ressemblera à ceci :
<script type="text/javascript">
var lang_id = document.getElementsByTagName('html')[0].getAttribute('lang').split("-")[0];
site_id = 000001; // site_id du code d’intégration iubenda
switch (lang_id) {
case 'en':
var policy_id = 000002; // policy_id du code d’intégration iubenda (EN)
break;
case 'it':
var policy_id = 000003; // policy_id du code d’intégration iubenda (IT)
break;
// case 'autre langue' ...
}
var _iub = _iub || [];
_iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"floatingPreferencesButtonDisplay":"bottom-right","perPurposeConsent":true,"siteId":2930987,"whitelabel":false,"cookiePolicyId":38875072,"lang":"en-GB", "banner":{ "acceptButtonDisplay":true,"closeButtonRejects":true,"customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-top-center","rejectButtonDisplay":true }};
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/2930987.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>.
Les numéros que vous voyez pour « site_id » et « var policy_id » doivent être modifiés. Vous devez insérer :
Vous trouverez ces informations dans votre domaine privé iubenda. Prenons l’exemple que vous avez deux scripts qui gèrent deux langues différentes : L’italien et l’anglais.
Une fois que vous avez identifié les valeurs, vous pouvez procéder à leur modification comme suit :
<script type="text/javascript">
var lang_id = document.getElementsByTagName('html')[0].getAttribute('lang').split("-")[0];
site_id = 2930987; // site_id du code d’intégration iubenda
switch (lang_id) {
case 'en':
var policy_id = 38875072; // policy_id du code d’intégration iubenda (EN)
break;
case 'it':
var policy_id = 51698593; // policy_id du code d’intégration iubenda (IT)
break;
// case 'autre langue' ...
}
var _iub = _iub || [];
_iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"floatingPreferencesButtonDisplay":"bottom-right","perPurposeConsent":true,"siteId":2930987,"whitelabel":false,"cookiePolicyId":38875072,"lang":"en-GB", "banner":{ "acceptButtonDisplay":true,"closeButtonRejects":true,"customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-top-center","rejectButtonDisplay":true }};
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/2930987.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>.
Si une nouvelle langue est activée, il vous suffit d’insérer la partie script suivante au lieu de "// case 'autre langue' ...", en ajoutant le nom de la langue activée dans notre portail et d’utiliser le numéro de la politique correspondant.
case 'de':
var policy_id = 11111084; // policy_id du code d’intégration iubenda (DE)
break;
Le dernier réglage, mais essentiel, à faire est de changer trois autres paramètres présents dans notre script principal (pas dans les modifications qui viennent d’être apportées, mais dans le script repris de notre domaine personnel iubenda) :
* « siteId »
* « cookiePolicyId »
* “« lang »
À la place des valeurs par défaut, vous devez insérer ces références :
* « siteId » : site_id
* « cookiePolicyId » : policy_id
* « lang » : lang_id
Dans le script, cela ressemblera à ceci :
<script type="text/javascript">
var lang_id = document.getElementsByTagName('html')[0].getAttribute('lang').split("-")[0];
site_id = 2930987; // site_id du code d’intégration iubenda
switch (lang_id) {
case 'en':
var policy_id = 38875072; // policy_id du code d’intégration iubenda (EN)
break;
case 'it':
var policy_id = 51698593; // policy_id du code d’intégration iubenda (IT)
break;
// case 'autre langue' ...
}
var _iub = _iub || [];
_iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"floatingPreferencesButtonDisplay":"bottom-right","perPurposeConsent":true,"siteId":site_id,"whitelabel":false,"cookiePolicyId":policy_id,"lang":lang_id, "banner":{ "acceptButtonDisplay":true,"closeButtonRejects":true,"customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-top-center","rejectButtonDisplay":true }};
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/2930987.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>.
Après avoir effectué cette dernière modification, le script peut être inséré dans la <head> balise de votre site, aussi haut que possible ou même comme première valeur, ou à l’intérieur de notre plugin.
Voir ci-dessous un autre exemple de script test avec la bibliothèque jQuery. De plus, nous avons créé un tutoriel vidéo sur la configuration d’un bandeau multilingue, auquel vous pouvez accéder ici.
<!-- remplacez 000001 par le site_id de votre code d’intégration iubenda spécifique -->
<!-- remplacez 000002 par le policy_id de votre code d'intégration EN iubenda -->
<!-- remplacez 000003 par le policy_id de votre code d'intégration IT iubenda -->
<script type="text/javascript">
var lang_id = jQuery('html').attr('lang').split('-')[0],
site_id = 000001; // site_id du code d'intégration iubenda
switch (lang_id) {
case 'en':
var policy_id = 000002; // policy_id du code d'intégration iubenda EN
break;
case 'it':
var policy_id = 000003; // policy_id du code d'intégration iubenda IT
break;
// cas 'autre code de langue' ...
}
var _iub = _iub || [];
_iub.csConfiguration = {
"lang": lang_id,
"siteId": site_id,
"cookiePolicyId": policy_id,
"banner": {
"position": "haut"
}
};
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>.