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

Se está aqui, provavelmente configurou a sua loja no Shopify e precisa de gerir cookies. Ou pensa abrir a sua loja no Shopify, mas está a perguntar-se como deve exibir o seu aviso de cookies? Vamos ver como se faz 👉

Depois de integrar a Política de Privacidade no seu website da Shopify (que inclui igualmente a política de cookies, caso a tenha ativado), poderá concluir a configuração incorporando a nossa Privacy Controls and Cookie Solution para:

• exibir um banner de cookies totalmente personalizável
• recolher consentimento de cookies
• medir conversões e análises de dados estatísticos de utilizadores que não tenha prestado o seu consentimento, graças ao suporte total para Google Consent Mode
• implementar o bloqueio prévio, tal como exigido pela lei dos cookies da UE

👉 Neste guia, aprenderá a integrar a nossa Privacy Controls and Cookie Solution na sua loja Shopify. (Em minutos!)

Veja como adicionar um banner de cookies à sua loja Shopify

O método identificado abaixo utiliza a API de Privacidade do Cliente da Shopify (que bloqueia automaticamente cookies e rastreadores instalados diretamente pelo Shopify ou por qualquer plugin que o suporte).

1. Crie a sua Política de Cookies (caso ainda não o tenha feito)

1. Primeiro, aceda ao Painel de controlo da iubenda e clique em [O seu website] > Políticas de Privacidade e de Cookies > Editar. Verá uma caixa de seleção de Política de Cookies na coluna da direita.

2. Clique em Ativar política de cookies e Guardar alterações: a sua Política de Cookies será gerada automaticamente com base na configuração da sua Política de Privacidade.

2. Crie o seu banner de cookies

1. Clique em Gerar agora no Painel de Controlo > [O seu website/aplicação] > Privacy Controls and Cookie Solution.

2. Será encaminhado diretamente para o painel de configuração do seu banner de cookies.

3. Depois de o personalizar, Guarde e Copie o snippet da sua Privacy Controls and Cookie Solution.

4. Obterá um código semelhante 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>

5. Antes de o colar no tema do seu Shopify, deve acrescentar umas alterações (observe as duas partes “code for Shopify”, com as linhas onPreferenceFirstExpressedCallback, _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 onPreferenceFirstExpressedCallback = function(consent) {
        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.onPreferenceFirstExpressed = onPreferenceFirstExpressedCallback;
    } else {
        _iub.csConfiguration.callback = {
            onPreferenceFirstExpressed: onPreferenceFirstExpressedCallback
        };
    }
</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>

3. Adicione o snippet da Privacy Controls and Cookie Solution à sua loja Shopify

Agora tem duas alternativas:

• utilizar um plugin para adicionar código personalizado às suas páginas ou
• editar o tema do seu Shopify manualmente.

Editar o seu tema manualmente

1. Aceda ao painel de administrador da sua loja Shopify e aceda a Loja Online > Temas. Clique em Ações, à direita, e depois em Editar código.

2. Crie um novo snippet com o nome iub-cookie-banner.liquid na pasta Snippets

3. Cole o snippet da Privacy Controls and Cookie Solution (complete com as duas partes “code for Shopify”) no modelo iub-cookie-banner.liquid e guarde o mesmo.

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

5. Repita o passo 4 para os layouts gift_card.liquid e password.liquid.

4. Configurar o bloqueio prévio de scripts de cookies

Poucas categorias de cookies estão isentas do requisito de consentimento. Como tal, terá de bloquear a execução de scripts até obter o consentimento válido do utilizador.

Como implementar o bloqueio prévio através de tagging manual na sua loja Shopify

O tagging manual é o método de bloqueio prévio utilizado no tutorial abaixo. Pode ver outros métodos aqui.

Neste tutorial, vamos bloquear um botão “Pin It” do Pinterest.

💡 Não tem a certeza dos serviços que precisa de bloquear? Se estiver a utilizar uma Política de Cookies gerada pela iubenda, os serviços indicados na sua Política de Cookies são provavelmente os que precisa de modificar agora.

Passo 1: Identificar o script

No painel de administrador do seu Shopify, clique em Loja onlinee de seguida em Temas. No menu extensível do tema, clique em Editar código

Em seguida, abra a sua pasta de Snippets para encontrar o script que tem de modificar (basta procurar o serviço que pretende bloquear que, neste caso, é o botão “Pin It” do Pinterest) Pode efetuar a pesquisa utilizando a barra de pesquisa no canto superior esquerdo da página

Passo 2: Modifique o seu script

Agora vamos modificar o script. Para tal, faremos 3 simples alterações:

• adicionar a classe _iub_cs_activate às tags do script e alterar o atributo “type” de text/javascript → text/plain
• substituir o src por data-suppressedsrc ou suppressedsrc
• especificar as categorias dos scripts/iframes com um atributo data-iub-purposes separado por uma vírgula especial, como por exemplo, data-iub-purposes="2" ou data-iub-purposes="2, 3"

Mais sobre categorias e finalidades

As finalidades são as razões legais pelas quais trata o respetivo tipo de dados do utilizador. Diferentes scripts no seu site terão diferentes categorias e finalidades. Por exemplo, o Google Analytics pode ser utilizado para Medição, enquanto o botão do Pinterest pode ser utilizado para Experiência (Finalidade 3 abaixo). As finalidades são agrupadas em 5 categorias, cada uma com o seu id (1, 2, 3, 4 e 5):

• Necessários (id: 1)
• Funcionalidade (id: 2)
• Experiência (id: 3)
• Medição (id: 4)
• Publicidade (id: 5)

Para informações ainda mais detalhadas sobre categorias e finalidades, consulte o nosso guia aqui.

Vamos utilizar o botão “Pin It” do Pinterest como exemplo:

Precisamos de 1. Adicionar a classe e alterar o atributo “type”, 2. substituir o src e 3. especificar as categorias.

A estrutura do código deveria ser a seguinte:

<p>Pinterest "Pin It" Button:</p>

a  <a href="//pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}&amp;media=http:{{ product | img_url: '1024x1024' | split: '?' | first }}&amp;description={{ product.title | strip_html | truncate: 200, '' | url_param_escape }}{% for tag in product.tags limit: 3 %}{{ tag | replace: ' ', '-' | prepend: ' #' | url_param_escape }}{% endfor %}" data-pin-do="buttonPin" data-pin-config="none">
  <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
  </a>
  <script async type="text/plain" class="_iub_cs_activate" data-suppressedsrc="//assets.pinterest.com/js/pinit.js" data-iub-purposes="3" charset="utf-8"></script>

Veja ainda

• Como integrar a Política de Privacidade da iubenda no Shopify
• Como personalizar a aparência e o comportamento do banner de cookies da iubenda (guia de iniciação)
• Introdução ao bloqueio prévio de cookies