Salesforce

Gestión de cookies del lado cliente

« Go Back
Information
Gestión de cookies del lado cliente
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.

Las cookies no pueden bloquearse directamente. No obstante, la mayoría de las cookies contempladas por la legislación se establecen mediante etiquetas o scripts insertados, como JavaScript o iFrames HTML. Esto incluye la mayoría de las analíticas y cookies de terceros, como las cookies publicitarias.

Por lo tanto, para respetar la ley, dichos scripts deben bloquearse o reemplazarse por alternativas que no sean cookies siempre que se suspenda o se retire el consentimiento.

Para lograrlo, puede utilizar uno de los diferentes métodos auxiliares de JavaScript personalizados junto con una función de control de contenedores.

Nota

Este artículo solo cubre JavaScript. Para saber más sobre el bloqueo de iframes, consulta Reescritura manual de iframes en Consentimiento de cookies.

Reescritura de tipos de JavaScript

Este es uno de los métodos más eficaces para la prevención de cookies controladas mediante etiquetas script establecidas sin consentimiento. Este método requiere el menor número de cambios en el sitio y no precisa el uso del contenedor (a continuación).

Importante

Es recomendable que utilice este método siempre que sea posible.

[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

Las etiquetas script normales tienen este aspecto:

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

Al utilizar la reescritura de tipos de scripts, debe cambiar los scripts a:

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

El número del identificador de clase corresponde al ID del grupo de cookies para las cookies cargadas por el script. En este caso, se trata de Performance Cookies (Cookies de rendimiento).

[en] How it Works

Al cargar el código anterior, no se ejecutará el JavaScript que se encuentra en las etiquetas y las cookies no se establecerán. A continuación, cuando se carga el código de Consentimiento de cookies, si se ha otorgado el consentimiento para las cookies asociadas, se cambiará la etiqueta de forma dinámica a: script type=text/JavaScript. Se reconocerá el código que se encuentra dentro de las etiquetas y se ejecutará con normalidad.

<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

Nota

Puede bloquear varias categorías de cookies mediante este método con la siguiente sintaxis:

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

Los valores de la frase class="optanon-category-#-#-#" corresponden a las categorías de cookies configuradas en la lista de cookies del sitio. 

Al incluir varias categorías utilizando este método, las categorías se bloquean simultáneamente. Ninguna de las cookies de estas categorías se establece a menos que el visitante del sitio otorgue su consentimiento para todas las categorías que se estén bloqueando.

El control del contenedor de Optanon

El contenedor de Optanon se proporciona en la etiqueta de script principal y tiene este aspecto:

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

Funciona como un soporte para los métodos auxiliares que se utilizan para bloquear o controlar cualquier etiqueta script o html que provoque el establecimiento de cookies. El contenedor se ejecutará cada vez que se cargue la página o cuando el usuario guarde cambios en la configuración de privacidad en el centro de preferencias.

Al cambiar el estado de grupos de cookies de Inactive (Inactiva) a Active (Activa), se ejecutan los métodos auxiliares pertinentes y el JavaScript/HTML se insertará en la página.

No es necesario colocar los scripts del método auxiliar dentro del control del contenedor. No obstante, si no lo están, solo se ejecutan al cargar la página por primera vez. Si desea que cualquier acción de inclusión (de Inactive [Inactiva] a Active [Activa]) se refleje de inmediato en la experiencia del usuario, debe usar el contenedor.

Los cambios en la experiencia del usuario como resultado de una acción de exclusión (Active [Activa] a Inactive [Inactiva]) solo se reflejarán al actualizar la página o al ir a una página nueva.

[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: uso del objeto de capa de datos.

[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

Nota

[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();
}
})

Nota

[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étodos auxiliares

Los métodos auxiliares se utilizan para bloquear o controlar cualquier etiqueta script o html que provoque el establecimiento de cookies.

Nota

Optanon y OneTrust se pueden utilizar indistintamente; sin embargo, recomendamos usar OneTrust.

OneTrust.InsertScript

Con este método, los scripts encargados del establecimiento de cookies se colocan en un archivo externo y se insertan de forma dinámica en la página cuando el estado del grupo de cookies con el que están asociados es Active (Activa).

El formato es:

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

Ejemplo 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');
 }

Resultado:

[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 el grupo Performance Cookies (Cookies de rendimiento) con el ID 2 se establece en Active (Activa) o Always Active (Siempre activa), se inserta el siguiente script en la página justo delante de la etiqueta head de cierre:

Nota

[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.

Consulte la siguiente tabla para ver una explicación de los diferentes parámetros.

Parámetro

Tipo de datos

Descripción

Valor

Obligatorio

url

Cadena

Dirección URL absoluta o relativa del archivo JS

selector

Cadena

Selector de elemento principal HTML donde se insertará la etiqueta script

head

body

parent id

callback

Función

Una función de JavaScript a la que se llama tras la inserción de la etiqueta script

function name

null

options

Objeto

Una lista de comportamientos para el momento en que se inserta la etiqueta script

Consulte la definición de las opciones a continuación

groupId

Número

ID del grupo para el que se insertará la etiqueta script

Optanon Group ID

OneTrust.InsertHTML

Este método debe utilizarse si el código que controla la configuración de las cookies es una etiqueta HTML estándar o personalizada.

El formato es:

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

Ejemplo 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.

Resultado:

client_side_5_inserthtml.png

Nota

[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 el estado del grupo Functionality Cookies (Cookies de funcionalidad) es Inactive (Inactivo), no se inserta el script.

Consulte la siguiente tabla para ver una explicación de los diferentes parámetros.

Parámetro

Tipo de datos

Descripción

Valor

Obligatorio

element

Cadena

Etiqueta HTML que se insertará

selector

Cadena

ID de elemento principal HTML donde se insertará el elemento

parent ID

callback

Función

Una función de JavaScript a la que se llama tras la inserción del elemento

function name

null

options

Objeto

Una lista de comportamientos para el momento en que se inserta el elemento

Consulte la definición de las opciones a continuación

null

groupId

Número

ID del grupo para el que se insertará el elemento

Optanon Group ID

Nota

Algunos componentes de terceros que establecen cookies utilizan elementos HTML y JavaScript que son interdependientes. En la mayoría de los casos, deberá utilizar los métodos auxiliares HTML y JavaScript juntos para evitar cualquier problema debido a que un elemento esté presente sin el otro.

Parámetro de opciones

Con los métodos anteriores, el parámetro de opciones ofrece una forma de manipular el contenido de la página en función de si se ha otorgado el consentimiento para un grupo de cookies. Esto ofrece un mecanismo sencillo que permite a los propietarios de los sitios web incentivar la inclusión u ofrecer una experiencia de usuario diferente a los visitantes que opten por excluirse.

El parámetro puede contener algunas de las siguientes opciones o todas:

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

En la siguiente tabla se describe el comportamiento de cada opción.

Opción

Tipo de datos

Descripción

Valor

Obligatorio

deleteSelectorContent

Booleano

Elimina todo el contenido del contenedor principal antes de insertar el elemento.

true

false

No

makeSelectorVisible

Booleano

Muestra el elemento del contenedor principal después de insertar el elemento.

true

false

No

makeElementsVisible

Matriz

Una lista de ID de elementos HTML que se muestran después de insertar el elemento.

[ID, ID]

No

deleteElements

Matriz

Una lista de ID de elementos HTML que se eliminan después de insertar el elemento.

[ID, ID]

No

[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

Nota

  • Los elementos HTML siempre se insertarán antes de cerrar la etiqueta de elemento principal.

  • La opción makeSelectorVisible requiere que el elemento principal se oculte inicialmente de forma manual.

  • Todos los elementos HTML especificados en la lista de ID de makeElementsVisible deben ocultarse inicialmente de forma manual.

  • deleteSelectorContent únicamente eliminará el contenido del elemento contenedor.

  • deleteElements eliminará por completo cada elemento especificado.

  • El uso del selector para especificar algún elemento distinto del encabezado o el cuerpo requiere el valor de ID del elemento principal.

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

 
Article Visibility
195,163
Translation
Spanish
Not Checked

Powered by