Privacy Controls and Cookie Solution para Shopify: como exibir um banner de cookies e coletar consentimento de cookie

1. Acesse o painel de administração da sua loja na Shopify e vá para Loja virtual > Temas. Chegando lá, clique em Ações à direita e depois em Editar Código.

2. Crie um novo snippet na pasta Snippets e dê o nome de iub-cookie-banner.liquid

3. Desativar a configuração remota: Nas configurações de Privacy Controls and Cookie Solution, certifique-se de desmarcar a opção “Enable remote configuration” (Ativar configuração remota).

4. Depois de desativar a configuração remota, copie o snippet atualizado. A aparência será semelhante a esta:

<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 colar o snippet no seu tema da Shopify, você precisa modificar seu script Privacy Controls and Cookie Solution para adicionar alguns callbacks necessários específicos da Shopify que garantam que seus Privacy Controls funcionem corretamente(observe as duas partes de “código para a Shopify”, com as linhas onPreferenceExpressedOrNotNeededCallback, _iub.csConfiguration.callback e 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 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>

6. Cole o snippet Privacy Controls and Cookie Solution(completo com as duas partes “code for Shopify”) no modelo iub-cookie-banner.liquid e salve-o.

7. Abra o layout theme.liquid (dentro da pasta Layout) e adicione {% include 'iub-cookie-banner' %} entre {{ content_for_header }} e </head>.

8. Repita a etapa nº 7 para os layouts gift_card.liquid e password.liquid.