Iubenda logo
Genera tus documentos

Documentación

Tabla de contenidos

Cookie Solution para Shopify: Cómo mostrar un banner de cookies y recopilar el consentimiento de las cookies

Una vez que hayas integrado la Política de Privacidad en tu sitio web de Shopify (que también incluye la política de cookies, si la has activado), puedes completar la configuración incorporando nuestra Cookie Solution para [1] mostrar un banner de cookies totalmente personalizable, [2] recopilar el consentimiento de las cookies e [3] implementar el bloqueo previo, como lo requiere la Ley de Cookies..

De hecho, a excepción de las cookies exentas, la Ley de Cookies no solo te obliga a configurar y mostrar al usuario una política de cookies, sino que también te exige mostrar un breve aviso (banner de cookies) en la primera visita del usuario, así como bloquear los scripts que instalan (o podrían instalar) cookies antes de obtener el consentimiento del usuario.

En esta guía, te mostraremos cómo integrar nuestra Cookie Solution en tu tienda de Shopify. Dado que el método que se muestra a continuación utiliza la API de privacidad del cliente de Shopify (Customer Privacy API) (que bloquea automáticamente las cookies y los rastreadores instalados directamente por Shopify o por cualquier plugin que lo admita), primero tienes que habilitar la opción Limitar el seguimiento de los clientes en Europa dentro de Online Store > Preferences.

Shopify - Limit tracking to customers in Europe

Primero, dirígete a tu dashboard de iubenda y haz clic en [Tu sitio web] > Política de Privacidad y Cookies > Editar. Verás un cuadro de Política de Cookies en la columna de la derecha.

Haz clic en Activar política de cookies y Guardar cambios: tu política de cookies se generará automáticamente en función de la configuración de tu política de privacidad.

Si ya tienes tu propia Política de Cookies, puedes añadir el enlace en Opciones avanzadas del configurador de la Cookie Solution. Selecciona Personalizar en Política de privacidad y cookies > URL de la política de cookies. Más información en la guía avanzada de la Cookie Solution.

Haz clic en Generar ahora en tu Dashboard > [Tu sitio web/app] > Cookie Solution.

De ahí irás directamente al panel de configuración de tu banner de cookies.

Una vez lo hayas personalizado a tu gusto, dale a Guardar y luego copia el fragmento de tu Cookie Solution.

Cookie Solution - Embed the cookie banner

Obtendrás un código similar a este:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "countryDetection": true,
        "consentOnContinuedBrowsing": false,
        "perPurposeConsent": true,
        "lang": "en",
        "siteId": 11223344, //use your siteId
        "cookiePolicyId": 55667788, //use your cookiePolicyId
        "floatingPreferencesButtonDisplay": "bottom-right",
        "banner": {
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true,
            "rejectButtonDisplay": true,
            "position": "float-top-center"
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Antes de pegarlo en tu tema de Shopify, tienes que añadir algunas cosas (ten en cuenta las dos partes del “code for Shopify”, con las líneas onPreferenceFirstExpressedCallback, _iub.csConfiguration.callback y Tracking API):

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "countryDetection": true,
        "consentOnContinuedBrowsing": false,
        "perPurposeConsent": true,
        "lang": "en",
        "siteId": 11223344, //use your siteId
        "cookiePolicyId": 55667788, //use your cookiePolicyId
        "floatingPreferencesButtonDisplay": "bottom-right",
        "banner": {
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true,
            "rejectButtonDisplay": true,
            "position": "float-top-center"
        }
    };

    <!-- code for Shopify (1 of 2) -->
    var onPreferenceFirstExpressedCallback = function(consent) {
        if (true == _iub.csConfiguration.perPurposeConsent) {
            consent.consent = Object.keys(consent.purposes).every(function(k) {
                return consent.purposes[k]
            });
        }
        window.Shopify.customerPrivacy.setTrackingConsent(consent.consent, function() {});
    }

    if (typeof _iub.csConfiguration.callback === 'object') {
        _iub.csConfiguration.callback.onPreferenceFirstExpressed = onPreferenceFirstExpressedCallback;
    } else {
        _iub.csConfiguration.callback = {
            onPreferenceFirstExpressed: onPreferenceFirstExpressedCallback
        };
    }
</script>

<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

<!-- code for Shopify (2 of 2) - Tracking API -->
<script type="text/javascript">
    window.Shopify.loadFeatures([{
            name: 'consent-tracking-api',
            version: '0.1',
        }, ],
        function(error) {
            if (error) {
                throw error;
            }
        });
</script>

3. Agrega el fragmento de la Cookie Solution a tu tienda de Shopify

Ahora tienes dos alternativas:

💡 Usa un plugin

Usa un plugin como este para agregar el fragmento de código de tu Cookie Solution (completo con las dos partes de “código para Shopify”, ver 2. Genera tu banner de cookies) al <head> de tu tienda de Shopify.

1. Accede al panel de administración de tu tienda de Shopify y dirígete a Online Store > Themes. Una vez allí, haz clic en Actions a la derecha y luego en Edit Code.

Shopify - Edit code

2. Crea un nuevo fragmento en la carpeta Snippets y asígnale el nombre iub-cookie-banner.liquid

Shopify - Add a new snippet

3. Pega el código de la Cookie Solution (completo con las líneas _iub.csConfiguration.perPurposeConsent, _iub.csConfiguration.callback y Tracking API) en la plantilla iub-cookie-banner.liquid y guárdalo.

Shopify - Cookie Solution snippet

4. Abre el diseño theme.liquid (dentro de la carpeta Layout) y añade {% include 'iub-cookie-banner' %} entre {{ content_for_header }} y </head>.

Shopify - theme.liquid

5. Repite el punto #4 para los diseños gift_card.liquid y password.liquid.

Pocas categorías de cookies están exentas del requisito de consentimiento. Por lo tanto, tendrás que bloquear la ejecución de scripts hasta que obtengas el consentimiento válido del usuario.

Cómo implementar el bloqueo previo mediante el etiquetado manual en tu tienda de Shopify

El etiquetado manual es el método de bloqueo previo que utilizaremos en el siguiente tutorial. Puedes ver otros métodos aquí.

Para configurar el bloqueo previo, tendrás que hacer algunos pequeños cambios en los scripts de tu web. Pero es sencillo, solo tienes que hacer lo siguiente:

  1. Identifica el script/iframe de cualquier servicio adicional que esté funcionando en tu sitio web (por ejemplo, el botón de Pinterest)
  2. Añade un texto sencillo al código HTML (¡te mostraremos cómo hacerlo a continuación!)
  3. ¡Guárdalo!

En este tutorial, vamos a bloquear el botón “Pin It” de Pinterest.

💡 ¿No estás seguro de qué servicios tienes que bloquear? Si utilizas una política de cookies generada por iubenda, lo más probable es que los servicios listados en tu política de cookies sean los que necesitas modificar ahora.

En tu panel de control de Shopify, haz clic en Tienda online y luego en Temas. En el menú desplegable de temas, haz clic en Editar código.

Prior blocking checkbox - Flow page

A continuación, abre tu carpeta de Snippets para encontrar el script que necesitas modificar (simplemente busca el servicio que quieres bloquear, en este caso, es el botón “Pin It” de Pinterest). Puedes hacerlo usando la barra de búsqueda en la esquina superior izquierda de la página.

Prior blocking checkbox - Flow page
Ahora, vamos a modificar el script. Para ello, vamos a hacer 3 sencillos cambios:
  • añade esta clase: _iub_cs_activate a las etiquetas del script y cambia el atributo “type” de text/javascripttext/plain
  • sustituye el src por data-suppressedsrc o suppressedsrc
  • especifica las categorías de los scripts/iframes con un atributo especial data-iub-purposes separado por comas, por ejemplo data-iub-purposes="2" o data-iub-purposes="2, 3"

Más información sobre categorías y finalidades

Las finalidades son las razones legales para el tratamiento de un tipo concreto de datos del usuario. Las diferentes secuencias de comandos de tu sitio web entrarán en diferentes categorías y servirán para diferentes finalidades. Por ejemplo, Google Analytics puede utilizarse para realizar mediciones, mientras que el botón de Pinterest puede utilizarse para mejorar la experiencia (finalidad 3). Las finalidades se agrupan en 5 categorías, cada una de ellas con un identificador (1, 2, 3, 4 y 5):

  • estrictamente necesario (id: 1)
  • interacciones y funcionalidades básicas (id: 2)
  • mejora de la experiencia (id: 3)
  • medición (id: 4)
  • segmentación y publicidad (id: 5)

Para obtener información más detallada sobre las categorías y las finalidades, consulta nuestra guía aquí.

Tomemos como ejemplo el botón “Pin It” de Pinterest:

Tenemos que 1. Añadir la clase y cambiar el atributo “type”, 2. sustituir el src y 3. especificar las categorías.

Y la estructura del código debe ser así:

Prior blocking checkbox - Flow page
<p>Pinterest "Pin It" Button:</p>

a  <a href="//pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}&amp;media=http:{{ product | img_url: '1024x1024' | split: '?' | first }}&amp;description={{ product.title | strip_html | truncate: 200, '' | url_param_escape }}{% for tag in product.tags limit: 3 %}{{ tag | replace: ' ', '-' | prepend: ' #' | url_param_escape }}{% endfor %}" data-pin-do="buttonPin" data-pin-config="none">
  <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
  </a>
  <script async type="text/plain" class="_iub_cs_activate" data-suppressedsrc="//assets.pinterest.com/js/pinit.js" data-iub-purposes="3" charset="utf-8"></script>
Una vez que has realizado los cambios, solo tienes que pulsar guardar y ya está.

¿No estás seguro de que la configuración sea correcta? Consulta el ejemplo y las preguntas frecuentes que aparecen a continuación.

Ejemplo

Este es un ejemplo que muestra todo lo que hemos descrito anteriormente, puedes utilizar este code pen como guía para ver lo que sucede antes y después de bloquear los scripts mediante el etiquetado manual.

(Observa el ejemplo)

Para demostrar la función de bloqueo de cookies, hemos integrado un vídeo de YouTube y un botón de seguir de Twitter:
Follow @iubenda

Ambos scripts están bloqueados mediante el etiquetado manual. Dado que tanto el widget de vídeo de YouTube como el botón de seguir de Twitter forman parte de la finalidad de mejora de la experiencia (id 3), hemos añadido data-iub-purposes="3" a sus scripts para que la Cookie Solution pueda identificarlos correctamente para su liberación.

Haz clic en el botón Aceptar o activa el conmutador “Mejora de la experiencia” para liberar estos scripts (actualiza la página para volver al punto de partida).

¿Cómo puedo saber si he configurado correctamente el bloqueo previo?

Como puedes ver en el ejemplo del code pen, los scripts de Youtube y Twitter no se cargan si no prestas tu consentimiento. (Puedes volver a probar esta función abriendo este enlace (https://codepen.io/iubenda/pen/KKKxmVO/?editors=1000) en modo incógnito en tu navegador).

Después de haberlo guardado, abre tu web en modo incógnito y comprueba si los scripts que has bloqueado mediante el etiquetado manual permanecen bloqueados hasta que prestes tu consentimiento.

Consulta este artículo si quieres saber cómo bloquear las cookies antes del consentimiento utilizando otras opciones disponibles. ➔ Echa un vistazo al Google Consent Mode como alternativa al bloqueo previo, Google Tag Manager para simplificar el bloqueo de cookies o al Marco de Transparencia y Consentimiento de IAB y cómo habilitarlo.

Gestiona el consentimiento de cookies para tu sitio web de Shopify

Genera un banner de cookies

Más información