Salesforce

Gestion des cookies côté client

« Go Back
Information
Gestion des cookies côté client
UUID-518074a1-a6da-81c3-be52-bae7685d9c94
Article Content

[en] Cookie blocking is a crucial step for successful Cookie Consent implementation. When the OneTrust banner is integrated with a website, users can opt-in or opt-out of certain categories of cookies. But without necessary blocking mechanism in place, these choices might not be respected.

[en] To maintain compliance and ensure cookies are fired based on visitor preferences, it is necessary to have appropriate cookie blocking methods implemented when the OneTrust Banner is integrated.

Les cookies ne peuvent pas être directement bloqués ; cependant, la plupart d'entre eux qui relèvent de la législation sont définis via des scripts ou des balises intégrés, tels que JavaScript ou des iFrames HTML. Les cookies tiers et les cookies analytiques, tels que les cookies publicitaires, sont concernés.

Cependant, et pour être en conformité avec la loi, de tels scripts doivent être bloqués ou remplacés par des alternatives non-cookies, chaque fois que le consentement a été refusé ou retiré.

Pour ce faire, vous pouvez utiliser l'une des nombreuses méthodes auxiliaires personnalisées de JavaScript via l'utilisation d'une fonction de contrôle wrapper.

Note

Cet article couvre uniquement JavaScript. Pour plus d'informations sur le blocage des iFrames, voir la section Réécriture manuelle des iFrames dans Consentement aux cookies.

Réécriture de type JavaScript

Il s'agit de la méthode la plus efficace pour empêcher l'activation des cookies, contrôlés par les balises <script>, sans avoir obtenu le consentement. Elle implique très peu de modifications sur votre site Web et ne nécessite pas l'utilisation d'un Wrapper (voir ci-dessous).

Important

Il est recommandé de mettre en œuvre cette approche dès que possible.

[en] Below are a couple examples in which this method would be applicable.

[en] In-Line Scripting Example:

<script type=’text/javascript’>
document.cookie = “targeting-cookie”+”=”+”1234”
</script>

[en] JavaScript File Example:

<script type=’text/javascript’ src=’/path/cookie.js’></script>

[en] How to Implement

Les balises de script standard se présentent ainsi :

<script type="text/javascript">
code
</script>

En utilisant la réécriture de type script, il vous faudra apporter les modifications suivantes :

<script type="text/plain" class="optanon-category-C0002">
code
</script>

Le nombre dans l'identifiant de classe correspond à l'identifiant du groupe de cookies chargé par le script. Dans ce cas, ce sont les cookies de performance.

[en] How it Works

Lorsque le code ci-dessus se charge, la partie JavaScript intégrée aux balises ne s'exécutera pas et aucun cookie ne sera activé. Ensuite, lorsque le code de consentement aux cookies se charge, si un consentement a été obtenu pour les cookies du groupe associé, la balise sera directement modifiée comme suit : <script type=text/JavaScript> - le code de la balise sera alors reconnu et exécuté normalement.

<script type=’text/plain’ class=’optanon-category-C0004’>
document.cookie = “targeting-cookie”+”=”+”1234”
</script>

[en] After re-writing this tag, the script would only fire on the site when a user consents to the C0004 category (Targeting Cookies). The class attribute is responsible for updating the type. When consent is withdrawn/withheld for the assigned category, the type will be text/plain; when consent is given, it will be text/javascript.

[en] In this example, when a user does not consent to Targeting cookies (C0004) , the script tag would appear as follows:

client_side_1_pc.png

[en] When a user consents to Targeting cookies (C0004), the type will appear as follows:

client_side_2_PC.png

Note

Vous pouvez bloquer plusieurs catégories de cookies en utilisant cette méthode avec la syntaxe suivante :

<script type="text/plain" class="optanon-category-C0002-C0003-C0004">
code
</script>

Les valeurs de l'expression class = "optanon-category - # - # - #" correspondent aux catégories de cookies définies dans la liste des cookies du site Web. 

Lorsque vous répertoriez plusieurs catégories à l'aide de cette méthode, les catégories sont bloquées simultanément. Aucun des cookies de ces catégories ne sera défini sauf si le visiteur du site Web consent à ce que toutes les catégories soient bloquées.

Contrôle du Wrapper d'Optanon

La fonction Wrapper d'Optanon est fournie dans la balise de script principale et correspond à :

<script type="text/javascript">
function OptanonWrapper() {
}
</script>

Son objectif premier est de définir les méthodes auxiliaires, utilisées pour bloquer ou contrôler tout script ou balise HTML, qui provoquent l'activation des cookies. Le wrapper est exécuté à chaque chargement de page, ou à chaque fois que l'utilisateur apporte des modifications aux paramètres de confidentialité dans le centre de préférences.

Lorsque le statut des groupes de cookies passe d'inactif à actif, les méthodes auxiliaires sont exécutées, et le JavaScript/HTML correspondant est intégré à la page.

Les scripts de méthodes auxiliaires n'ont pas besoin d'être intégrés dans la fonction wrapper. Cependant, s'ils le sont, ils seront uniquement exécutés lors du premier chargement de la page. Si vous souhaitez que l'action opt-in (Inactif à Actif) soit immédiatement effective pour l'utilisateur, vous devez utiliser le wrapper.

La publication des modifications résultant de l'action opt-out (Actif à Inactif) ne sera visible qu'après l'actualisation de la page ou en naviguant sur une nouvelle page.

[en] Below is an example function called through OptanonWrapper():

[en] Example function:

toConsole() {
    console.log(“SUCCESS”)
}
function OptanonWrapper{
  if(OnetrustActiveGroups.includes("C0002")){
    toConsole()
  }
}

[en] OnetrustActiveGroups plays a critical role in the Optanon Wrapper Control method. OnetrustActiveGroups is a data layer variable that gets updated every time a user modifies their choices with the latest category IDs. For more details on this variable, see OnetrustActiveGroups - Utilisation de l'objet de couche de données.

[en] In the above instance, toConsole() is an example function that is writing a message on the console when the if condition is executed. In this example, the if condition is checking for the OnetrustActiveGroups data layer variable and if it includes the C0002 category, meaning when Performance cookies are active. Whenever this condition is satisfied, the toConsole() function is executed. The toConsole() function will be called every time the OptanonWrapper() fires and when a user consents to Performance cookies (C0002).

[en] When the function is executed based on consent for Performance category, it appears as follows:

client_side_3_pc.png

Note

[en] The toConsole() function written above is strictly an example. Make sure to implement this method if there are any existing functions on the website that are required to be controlled based on consent.

[en] SDK-Specific Actions

[en] Third-party tools often have public methods that can be called to indicate to the tool that a user has granted or revoked consent. These will often result in the technology being set to “strict” or “restricted” mode so that a restricted amount of data is processed to respect a user’s choices. If the technology you want to control has these methods, you can implement them through the OptanonWrapper control. See the following example:

function OptanonWrapper(){
        if(OnetrustActiveGroups.includes(“C0002”)){
                myAnalyticsTool.setUnrestrictedMode () //consent given, operate regularly
        }else{
                myAnalyticsTool.setRestrictedMode() //consent not given, operate in restricted mode
        }
}

[en] Events

[en] The OneTrust JavaScript SDK raises several events that can be used to trigger consent-related actions. The two most relevant events are OneTrustGroupsUpdated, which fires when consent becomes available on page load and whenever consent is changed, and OTConsentApplied, which only fires when an explicit consent action has been taken.

window.addEventListener(“OneTrustGroupsUpdated”, event => {
        if(event.details.includes(“C0002”)){
                myAnalyticsTool.setUnrestrictedMode();
}else{
        myAnalyticsTool.setRestrictedMode();
}
})

Note

[en] When using this method, it’s important to ensure that the third-party technology remains uninitialized or is operating in restricted mode until consent becomes available. Otherwise, it’s possible that data collection is occurring for 1-2 seconds before the third party is told to operate in restricted mode.

[en] For more information on OneTrust JavaScript events, see [en] Cookie Consent Java Script Events Guide.

Méthodes auxiliaires

Les méthodes auxiliaires sont utilisées pour bloquer ou contrôler tout script ou balise HTML, qui provoque l'activation des cookies.

Note

Optanon et OneTrust peuvent être utilisés sans distinction. Cependant, il est recommandé d'utiliser OneTrust.

OneTrust.InsertScript

Grâce à cette méthode, les scripts responsables de l'activation des cookies sont placés dans un dossier externe et insérés de façon dynamique à la page, lorsque le groupe de cookies auxquels ils sont associés est défini sur Actif.

Le format est le suivant :

OneTrust.InsertScript(url, selector, callback, options, groupId)

Exemple 1. OneTrust.InsertScript

OneTrust.InsertScript('/gaCookies.js', 'head', null, null, 'C0002');OneTrust.InsertScript('/performance-cookies-script.js', 'head', null, null, '2');

[en] In the example below, gaCookies.js is an external file that is setting Google Analytics cookies. This JavaScript file will be inserted only when Performance cookies are active. Implementing this using the InsertScript method within the OptanonWrapper() function would appear as follows:

function OptanonWrapper() { 
            OneTrust.InsertScript('path/gaCookies.js','head', null, null, 'C0002');
 }

Résultat obtenu :

[en] In this example, the gaCookies.js file will get injected before the closing head tag of the HTML when Performance cookies (C0002) are active. The following script will be inserted in the source and will be executed as a regular JavaScript file:

<script type="text/javascript" src="path/gaCookies.js"></script>
client_side_4_insertscript.png

Si le groupe des cookies de performance ayant l'identifiant 2 est paramétré sur Actif ou Toujours actif, le script suivant est immédiatement inséré à la page avant la balise de fermeture <head> :

Note

[en] Please note that the gaCookies.js used in the scenario above is strictly an example. This method is applicable to any JavaScript file that is required to be injected in the code based on user consent.

Reportez-vous au tableau suivant pour une explication des différents paramètres.

Paramètres

Type de données

Description

Valeur

Requis

url

Chaîne

URL absolue ou relative du fichier JS

Oui

selector

Chaîne

Sélecteur d'élément parent HTML où la balise script sera insérée

head

body

parent id

Oui

callback

Fonction

Fonction JavaScript appelée une fois que la balise de script a été intégrée

function name

null

Oui

options

Objet

Liste des comportements au cours desquels la balise de script est insérée

Voir la définition des options ci-dessous

Oui

groupId

Nombre

Identifiant de groupe pour lequel la balise script sera insérée

Optanon Group Id

Oui

OneTrust.InsertHTML

Cette méthode est à utiliser lorsque le code qui contrôle l'activation des cookies correspond à une balise HTML standard ou personnalisée.

Le format est le suivant :

OneTrust.InsertHtml(element, selector, callback, options, groupId)

Exemple 2. OneTrust.InsertHTML

OneTrust.InsertHtml('<iframe type="text/html" width="640" height="360" frameborder="no" src="https://www.youtube.com/embed/v=GEH-usLSwqE"></iframe>','123', null, null, 'C0003');OneTrust.InsertHtml('<customElement customAttribute="value">some content</customElement>', 'parent_element_id', null, null, '3');

[en] In this example, the iFrame is the standard HTML element to be injected in a section that has ID 123. The first null value specifies that there is not a callback function and the second null value specifies that there is no options parameter added. The group ID (C0003) will allow the element to be inserted when consent is granted for Functional-category cookies.

Résultat obtenu :

client_side_5_inserthtml.png

Note

[en] Please note that this method will automatically add an enclosing div around the element that is getting inserted.

<customElement customAttribute="value">some content</customElement>

Si le groupe de cookies de performance est paramétré sur Inactif, le script n'est pas inséré.

Reportez-vous au tableau suivant pour une explication des différents paramètres.

Paramètres

Type de données

Description

Valeur

Requis

élément

Chaîne

Balise HTML à insérer

Oui

selector

Chaîne

ID de l'élément parent HTML où l'élément sera inséré

parent id

Oui

callback

Fonction

Fonction JavaScript à appeler, une fois l'élément inséré

function name

null

Oui

options

Objet

Liste de comportements au cours desquels l'élément est inséré

Voir la définition des Options ci-dessous

null

Oui

groupId

Nombre

Identifiant de groupe pour lequel l'élément sera inséré

Optanon Group Id

Oui

Note

Certains cookies tiers de paramétrage des composants utilisent à la fois des éléments JavaScript et HTML qui sont interdépendants. Dans la plupart des cas, vous devrez utiliser l'ensemble des méthodes auxiliaires HTML et JavaScript afin d'éviter qu'un élément soit présent sans l'autre.

Les options de paramètre

Avec les deux méthodes ci-dessus, le paramètre Options fournit un moyen de modifier davantage le contenu de la page en fonction du consentement donné à un groupe de cookies. Cela fournit un mécanisme simple qui permet aux propriétaires de site Web d'inciter le choix de Opt-in ou d'offrir une expérience utilisateur différente aux visiteurs qui choisissent Opt-out.

Le paramètre peut contenir tout ou partie des éléments suivants :

{
deleteSelectorContent: <bool>,
makeSelectorVisible: <bool>,
makeElementsVisible: [‘<id>’, ‘<id>’, ‘<id>’, ...],
deleteElements: [‘<id>’, ‘<id>’, ‘<id>’, ...]
}

Le tableau ci-dessous décrit les comportements pour chaque option.

Option

Type de données

Description

Valeur

Requis

deleteSelectorContent

Booléen

Supprime tout le contenu du conteneur parent avant d'insérer l'élément.

true

false

Non

makeSelectorVisible

Booléen

Affiche l'élément du conteneur parent après l'insertion de l'élément.

true

false

Non

makeElementsVisible

Array

Une liste d'identifiants des éléments HTML à afficher après l'insertion de l'élément.

[ID, ID]

Non

deleteElements

Array

Une liste d'identifiants des éléments HTML à supprimer après l'insertion de l'élément.

[ID, ID]

Non

[en] Below are examples for each of these options:

  • [en] deleteSelectorContent

    [en] One of the use-cases for this option is to replace content with script.

    function OptanonWrapper() {
                  let options = { deleteSelectorContent: true
                  }
                 OneTrust.InsertScript('path/gaCookies.js', 'div1', null, options, 'C0003');
                 }

    [en] In the above snippet, OneTrust.InsertScript is utilized to inject gaCookies.js in the parent element with ID div1. Since deleteSelectorContent is set to true, the content of the div1 element will be removed and gaCookies.js will be inserted when a user consents to Functional cookies.

    [en] Results:

    • [en] When functional cookies are inactive:

      delete_selector_content_1.png
    • [en] When functional cookies are active:

      delete_selecor_content_2.png
  • [en] makeSelectorVisible

    [en] This option is applicable when a user has to first consent to a certain category to view the content of an element. To use this option, the prerequisite is for the parent element to be hidden.

    function OptanonWrapper() {
            let options = {
              makeSelectorVisible: true
            }
            OneTrust.InsertScript('path/gaCookies.js', 'div1', null, options, 'C0003');
          }

    [en] In the above example, if the div1 element is hidden initially, then display: block will be added for that element. When Functional cookies are toggled off, the div1 element will not be visible. When a user consents to the Functional category, gaCookies.js will be inserted and the element will become visible since makeSelectorVisible is set to true.

    [en] Results:

    • [en] When functional cookies are inactive:

      make_selector_visible_1.png
    • [en] When functional cookies are active:

      make_selector_visible_2.png
  • [en] makeElementsVisible

    [en] This option is useful when there are multiple elements that are required to be made visible on consent along with script insertion.

    function OptanonWrapper() {
            let options = {
                            makeElementsVisible: ['div2','div3']
                    }
                    OneTrust.InsertScript('path/gaCookies.js', 'div1', null, options, 'C0003');
            }

    [en] In the above example, the OneTrust.InsertScript will insert gaCookies.js in the HTML element with ID div1 when a user consents to Functional cookies. Additionally, because the makeElementsVisible parameter is added, the elements in its array (div2 and div3) will be made visible if they were hidden initially.

    [en] Results:

    • [en] When functional cookies are inactive:

      make_elements_visible_1.png
    • [en] When functional cookies are active:

      make_elements_visible_2.png
  • [en] deleteElements

    [en] This is useful in a scenario when multiple elements are required to be deleted once consent is given. Similar to makeElementsVisible, this option is also taken in array as a value.

    function OptanonWrapper() {
                    let options = {
                    deleteElements: ['div2','div3']
                    }
                    OneTrust.InsertScript('path/gaCookies.js', 'div1', null, options, 'C0003');
            }

    [en] In the above example, when a user consents to Functional cookies, the gaCookies.js will be inserted in div1. Because the deleteElements parameter is added, the div2 and div3 elements will be deleted.

    [en] Results:

    • [en] When functional cookies are inactive:

      delete_elements_1.png
    • [en] When functional cookies are active:

      delete_elements_2.png

Note

  • Les éléments HTML seront toujours insérés avant la balise fermante de l'élément parent.

  • Les paramètres de makeSelectorVisible nécessitent que l'élément parent soit initialement masqué manuellement.

  • Tous les éléments HTML spécifiés dans la liste des identifiants de makeElementsVisible doivent être initialement masqués manuellement.

  • deleteSelectorContent supprimera uniquement le contenu de l'élément du conteneur.

  • deleteElements supprimera complètement tous les éléments spécifiés.

  • L'utilisation du sélecteur afin de spécifier un élément autre que Head ou Body requiert la valeur ID de l'élément parent.

  • [en] The Options parameter can be used with both the Wrapper Control methods – InsertScript and InsertHtml

 
Article Visibility
195,307
Translation
French
Not Checked

Powered by