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 líneas _iub.csConfiguration.perPurposeConsent, _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"
        }
    };

    _iub.csConfiguration.perPurposeConsent = false;
    _iub.csConfiguration.callback = {
        onPreferenceFirstExpressed: function(consent) {
            window.Shopify.customerPrivacy.setTrackingConsent(consent.consent, function() {});
        }
    };
</script>

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

<!-- 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 la Cookie Solution (completo con las líneas _iub.csConfiguration.perPurposeConsent, _iub.csConfiguration.callback y Tracking API, consulta 2. Genera tu banner de cookies) a la sección <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, todos los scripts que has agregado a tus páginas y que instalan cookies se deben bloquear de manera preventiva antes de obtener el consentimiento.

Para configurar el bloqueo previo de cookies no instaladas directamente por Shopify (o instaladas por plugins que no usan su Customer Privacy API), consulta nuestra guía sobre el bloqueo mediante el etiquetado manual o descubre otros métodos descritos en nuestra introducción general al bloqueo previo.

Gestiona el consentimiento de cookies para tu sitio web de Shopify

Genera un banner de cookies

Más información