Privacy Controls and Cookie Solution pour Shopify : comment afficher un bandeau cookies et recueillir le consentement aux cookies

1. Accédez au panneau d’administration de votre boutique Shopify et allez à Boutique en ligne > Thèmes. Une fois là-bas, cliquez sur Actions à droite, puis Modifier le code.

2. Créez un nouveau snippet dans le dossier Snippets et nommez-le iub-cookie-banner.liquid

3. Désactiver la configuration à distance : Dans vos paramètres Privacy Controls et Cookie Solution, veillez à décocher l’option “Activer la configuration à distance”.

4. Après avoir désactivé la configuration à distance, copiez le snippet mis à jour. Cela ressemblera à ceci :

<script type="text/javascript">
  var _iub = _iub || [];
  _iub.csConfiguration = {
    "countryDetection":true,
    "consentOnContinuedBrowsing":false,
    "perPurposeConsent":true,
    "lang": "en",
    "siteId": 11223344, //utilisez votre siteId
    "cookiePolicyId": 55667788, //utilisez votre 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. Avant de coller le snippet dans votre thème Shopify, vous devez modifier votre script Privacy Controls et Cookie Solution pour ajouter quelques rappels spécifiques à Shopify nécessaires qui garantissent que votre Privacy Controls fonctionnent correctement (notez les deux parties “code pour Shopify”, avec les onPreferenceExpressedOrNotNeededCallback, _iub.csConfiguration.callback et les lignes de l’API de suivi) :

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "countryDetection":true,
        "consentOnContinuedBrowsing":false,
        "perPurposeConsent":true,
        "lang": "en",
        "siteId": 11223344, //utilisez votre siteId
        "cookiePolicyId": 55667788, //utilisez votre cookiePolicyId
        "floatingPreferencesButtonDisplay" : "bottom-right",
        "banner": {
            "acceptButtonDisplay": true,
            "customizeButtonDisplay":true,
            "rejectButtonDisplay":true }}
            "position": "float-top-center",
        }
    };
<!-- code pour Shopify (1 sur 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 pour Shopify (2 sur 2) - API de suivi -->
<script type="text/javascript">
window.Shopify.loadFeatures(
  [
    {
      name: 'consent-tracking-api',
      version : '0.1',
    },
  ],
  function(erreur) {
    si (erreur) {
      lancer erreur ;
    }
  }
);
</script>

6. Collez le snippet Privacy Controls and Cookie Solution (complétez avec les deux “code pour Shopify” parties) dans le modèle iub-cookie-banner.liquid et enregistrez-le.

7. Ouvrez la mise en page theme.liquid (dans le dossier Layout) et ajoutez {% include 'iub-cookie-banner' %} entre {{ content_for_header }} et </head>.

8. Répétez l’étape #7 pour les mises en page gift_card.liquid et password.liquid.