Guide d’utilisation du nouveau code multilingue avec l’option Détecter automatiquement la langue

Nous déployons un nouveau code avec l’option Détecter automatiquement la langue afin de simplifier l’intégration à votre site web. Cette fonctionnalité améliorée de notre Privacy Controls and Cookie Solution détecte automatiquement la langue de l’utilisateur, ce qui réduit la nécessité d’ajouter des extraits de code distincts pour chaque langue. Voici un guide complet pour vous aider à comprendre et à mettre en œuvre cette nouvelle fonctionnalité.

Intégration du nouveau code

Voici la syntaxe de base du nouveau code avec l’option Détecter automatiquement la langue :

<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
  "en": {
    "cookiePolicyId": 12345 // Cookie policy ID for English
  },
  "it": {
    "cookiePolicyId": 23456 // Cookie policy ID for Italian
  },
};
_iub.csConfiguration = {
  "siteId": 09876, // Your site ID
"cookiePolicyId": 12345, // Cookie policy ID of the main language for fallback
"storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Fonctionnement

• Configuration spécifique à la langue : L’objet csLangConfiguration définit les identifiants de la politique relative aux cookies pour chaque langue.
• Mécanisme de repli : Le cookiePolicyId dans le csConfiguration sert de repli au cas où aucune langue n’est détectée.
• Stockage : L’utilisation de useSiteId sous l’objet storage signifie que le consentement de l’utilisateur est valable dans les différentes langues de votre site web.

Utilisation du code sans configuration à distance

Lorsque la configuration à distance est désactivée, le code s’appuie entièrement sur les paramètres fournis dans l’objet _iub.csConfiguration. La syntaxe est similaire à celle de la version avec configuration à distance, mais elle spécifie explicitement toutes les configurations, y compris les paramètres de la bannière, les options linguistiques, le stockage et les comportements en matière de consentement dans le script.

Ajustements et personnalisation

Le nouveau code vous permet de personnaliser la bannière de consentement pour chaque langue à l’aide de l’objet csLangConfiguration. Cela signifie que vous pouvez personnaliser l’apparence et le comportement de la bannière en fonction de la langue de l’utilisateur. Examinons quelques personnalisations courantes.

Exemple 1 : Modifier l’apparence de la bannière en fonction de la langue

Supposons que vous souhaitiez que la bannière de consentement ait une couleur différente pour chaque langue, afin de donner à votre site un aspect personnalisé et spécifique à chaque langue. Dans cet exemple, la bannière devient rouge pour les utilisateurs qui consultent le site en italien :

<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
  "en": {
    "cookiePolicyId": 12345
  },
  "it": {
    "cookiePolicyId": 23456,
    "banner": {
      "backgroundColor": "#FF0000"
    }
  },
};
_iub.csConfiguration = {
  "siteId": 09876,
  "cookiePolicyId": 12345,
  "storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Exemple 2 : Afficher/masquer le consentement en fonction de la langue

Certains pays, comme le Danemark, exigent que des options de consentement spécifiques soient visibles pour les utilisateurs. Vous pouvez configurer ces options pour qu’elles n’apparaissent que lorsque la langue de l’utilisateur correspond à une exigence en particulier :

<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
  "da": {
    "cookiePolicyId": 7896,
    "banner": {
      "showPurposesToggles": true
    }
  },
};
_iub.csConfiguration = {
  "siteId": 09876,
  "cookiePolicyId": 12345,
  "storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Note

Par défaut, le nouveau code utilise le stockage au niveau du site (useSiteId: true), ce qui signifie que le consentement de l’utilisateur sera reconnu dans les différentes langues de votre site web. Ceci est particulièrement utile pour les sites web ayant une présence mondiale, car cela évite aux utilisateurs de devoir donner leur consentement chaque fois qu’ils changent de langue.

Toutefois, vous pouvez également modifier ce comportement dans le Configurateur, sous Paramètres avancés :

Comment recréer le code par langue (méthode traditionnelle)

Si vous le souhaitez, vous pouvez toujours avoir recours à la méthode précédente consistant à utiliser des codes spécifiques pour chaque langue (comme dans l’ancienne configuration). Cette approche peut s’avérer utile si vous souhaitez contrôler entièrement la configuration de chaque langue ou si la structure de votre site web nécessite des codes spécifiques. Voici comment vous pouvez créer des codes spécifiques pour chaque langue :

1. Créez un code distinct pour chaque langue active en utilisant uniquement l’objet _iub.csConfiguration.
2. Ajoutez la langue dans le paramètre "lang" pour chaque code.
3. Incluez cookiePolicyId en fonction de la langue dans chaque objet _iub.csConfiguration.
4. Conservez le script qui renvoie au fichier iubenda_cs.js pour chaque code.

Exemples de code pour différentes langues

Voici comment structurer les codes pour l’anglais (en) et l’italien (it) :

Anglais :

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
  "cookiePolicyId": 12345, // Fallback cookie policy ID
"siteId": 09876, // Site ID
"lang": "en",
  "storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Italien :

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"cookiePolicyId": 23456, // Fallback cookie policy ID
"siteId": 09876, // Site ID
"lang": "it",
  "storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Utilisation du modèle GTM

Dans Google Tag Manager (GTM), nous avons ajouté une nouvelle section pour configurer les paramètres en fonction de la langue. Cette fonctionnalité optionnelle vous permet de gérer différentes configurations directement via GTM. Pour de plus amples informations, reportez-vous au guide intitulé Comment configurer le modèle GTM de iubenda pour les sites multilingues.