Iubenda logo
Genera tus documentos

Documentación

Tabla de contenidos

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

Si estás leyendo esto, es posible que hayas creado una tienda Shopify y necesites gestionar las cookies. O a lo mejor estás pensando en crearla, pero tienes dudas sobre cómo mostrar la nota informativa sobre cookies. Te explicamos cómo hacerlo 👉

Cuando 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 incrustando nuestra Privacy Controls and Cookie Solution en:

  • muestra un banner de cookies totalmente personalizable
    • .
  • recoge el consentimiento para las cookies
  • mide las conversiones y las estadísticas de los usuarios que no hayan dado su consentimiento gracias a la compatibilidad total con el Modo de Consentimiento de Google
  • implementa el bloqueo previo, tal y como se exige en la Ley de Cookies

De hecho, excepto para las cookies exentas, la Ley de Cookies incluye no solo la obligación de establecer y mostrar al usuario una política de cookies, sino también de mostrar un breve aviso (banner) en la primera visita del usuario y de bloquear los scripts que instalen (o puedan instalar) cookies hasta que el usuario haya dado su consentimiento.

👉 En esta guía, aprenderás a integrar nuestra Privacy Controls and Cookie Solution en tu tienda Shopify. (¡En cuestión de minutos!)

En resumen

Te mostramos cómo añadir un banner de cookies a tu tienda Shopify

El método que se muestra a continuación utiliza la API de privacidad del cliente de Shopify (que bloquea automáticamente las cookies y los rastreadores instalados, ya sea por Shopify directamente o por cualquier plugin que lo soporte).

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 Privacy Controls and 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 Privacy Controls and Cookie Solution.

Haz clic en Generar ahora en tu Dashboard > [Tu sitio web/app] > Privacy Controls and 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 código de Privacy Controls and Cookie Solution.

Privacy Controls and Cookie Solution - Embed the cookie banner

Obtendrás un código similar a este:

<script type="text/javascript">
  var _iub = _iub || [];
  _iub.csConfiguration = {
    "siteId": XXXXXX, // your siteId,
    "cookiePolicyId": YYYYYY, // your cookiePolicyId,
    "lang": "en"
    };
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/3095420.js"></script>
<script type="text/javascript" src="///cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

<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 onPreferenceExpressedOrNotNeededCallback, _iub.csConfiguration.callback y Tracking API):

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": 11223344, //use your siteId
        "cookiePolicyId": 55667788, //use your cookiePolicyId
    };

<!-- code for Shopify (1 of 2) -->

    var onPreferenceExpressedOrNotNeededCallback = function(prefs) {
        var isPrefEmpty = !prefs || Object.keys(prefs).length === 0;
        var consent = isPrefEmpty ? _iub.cs.api.getPreferences() : prefs;
        var shopifyPurposes = {
          "analytics": [4, 's'],
          "marketing": [5, 'adv'],
          "preferences": [2, 3],
          "sale_of_data": ['s', 'sh'],
        }
        var expressedConsent = {};
        Object.keys(shopifyPurposes).forEach(function(purposeItem) {
          var purposeExpressed = null
          shopifyPurposes[purposeItem].forEach(item => {
            if (consent.purposes && typeof consent.purposes[item] === 'boolean') {
              purposeExpressed = consent.purposes[item];
            }
            if (consent.uspr && typeof consent.uspr[item] === 'boolean' && purposeExpressed !== false) {
              purposeExpressed = consent.uspr[item];
            }
          })
 
          if (typeof purposeExpressed === 'boolean') {
            expressedConsent[purposeItem] = purposeExpressed;
          }
        })
        window.Shopify.customerPrivacy.setTrackingConsent(expressedConsent, function() {});
    }
    if (typeof _iub.csConfiguration.callback === 'object') {
        _iub.csConfiguration.callback.onPreferenceExpressedOrNotNeeded = onPreferenceExpressedOrNotNeededCallback;
    } else {
        _iub.csConfiguration.callback = {
            onPreferenceExpressedOrNotNeeded: onPreferenceExpressedOrNotNeededCallback
        };
    }
</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>

<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 onPreferenceExpressedOrNotNeededCallback = function(prefs) {
        var isPrefEmpty = !prefs || Object.keys(prefs).length === 0;
        var consent = isPrefEmpty ? _iub.cs.api.getPreferences() : prefs;
        var shopifyPurposes = {
          "analytics": [4, 's'],
          "marketing": [5, 'adv'],
          "preferences": [2, 3],
          "sale_of_data": ['s', 'sh'],
        }
        var expressedConsent = {};
        Object.keys(shopifyPurposes).forEach(function(purposeItem) {
          var purposeExpressed = null
          shopifyPurposes[purposeItem].forEach(item => {
            if (consent.purposes && typeof consent.purposes[item] === 'boolean') {
              purposeExpressed = consent.purposes[item];
            }
            if (consent.uspr && typeof consent.uspr[item] === 'boolean' && purposeExpressed !== false) {
              purposeExpressed = consent.uspr[item];
            }
          })
 
          if (typeof purposeExpressed === 'boolean') {
            expressedConsent[purposeItem] = purposeExpressed;
          }
        })
        window.Shopify.customerPrivacy.setTrackingConsent(expressedConsent, function() {});
    }
    if (typeof _iub.csConfiguration.callback === 'object') {
        _iub.csConfiguration.callback.onPreferenceExpressedOrNotNeeded = onPreferenceExpressedOrNotNeededCallback;
    } else {
        _iub.csConfiguration.callback = {
            onPreferenceExpressedOrNotNeeded: onPreferenceExpressedOrNotNeededCallback
        };
    }
</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>