Privacy Controls and Cookie Solution para Shopify: cómo mostrar un banner de cookies y recoger el consentimiento de cookies

1. Accede al panel de administración de tu tienda Shopify y ve a Tienda en línea > Temas. Una vez allí, haz clic en Acciones a la derecha, luego Editar código.

2. Crea un nuevo fragmento en la carpeta Fragmentos y nómbralo iub-cookie-banner.liquid

3. Desactivar configuración remota: En la configuración de Privacy Controls and Cookie Solution, asegúrate de desmarcar la opción “Activar configuración remota”.

4. Después de desactivar la configuración remota, copia el fragmento actualizado. Se verá similar a esto:

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

5. Antes de pegar el fragmento en tu tema de Shopify, necesitas modificar tu script de Privacy Controls and Cookie Solution para agregar algunos callbacks específicos de Shopify necesarios que aseguran que tus Privacy Controls funcionen correctamente (nota las dos partes de “código para Shopify”, con el onPreferenceExpressedOrNotNeededCallback, _iub.csConfiguration.callback y las líneas de la API de seguimiento):

<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"
        }
    };
<!-- código para Shopify (1 de 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>
<!-- código para Shopify (2 de 2) - API de seguimiento -->
<script type="text/javascript">
window.Shopify.loadFeatures(
  [
    {
      name: 'consent-tracking-api',
      versión: '0.1',
    },
  ],
  function(error) {
    if (error) {
      throw error;
    }
  }
);
</script>

6. Pega el fragmento de Privacy Controls and Cookie Solution (completo con las dos partes “código para Shopify”) en la plantilla iub-cookie-banner.liquid y guárdalo.

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

8. Repite el paso #7 para los diseños gift_card.liquid y password.liquid.