Iubenda logo
Comece a gerar

Documentação

Índice

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

De facto, com exceção dos cookies isentos, a lei dos cookies da UE prevê a obrigação de se configurar e mostrar ao utilizador uma Política de Cookies, mas ainda de exibir um breve aviso (banner) na primeira visita do utilizador e de bloquear scripts que instalam (ou possam instalar) cookies até o utilizador prestar o seu consentimento.

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

Ative a Política de Cookies

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.

💡 Caso já possua a sua própria Política de Cookies, pode adicionar o link na Visualização Avançada do configurador da Privacy Controls and Cookie Solution. Selecione Personalizado em Políticas de Cookies e de Privacidade > URL de Política de Cookies. Informações adicionais sobre o guia avançado da Privacy Controls and Cookie Solution.

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

Privacy Controls and Cookie Solution - Crie o seu banner de cookies

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.

Privacy Controls and Cookie Solution - Incorporação do banner de cookies

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

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 = {
        "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>

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

Agora tem duas alternativas:

💡 Utilizar um plugin

Utilize um plugin como este para adicionar o snippet da Privacy Controls and Cookie Solution (complete com as duas partes “code for Shopify”, consulte 2. Crie o seu banner de cookies) à <head> da sua loja Shopify.

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.

Shopify – Editar código

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

Shopify – Adicionar novo snippet

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.

Shopify - snippet da Privacy Controls and Cookie Solution

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

Shopify - theme.liquid

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

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.

Para configurar o bloqueio prévio, terá de efetuar pequenas alterações nos scripts do seu site. Mas é simples. Basta fazer o seguinte:

  1. Identifique o script/iframe para qualquer serviço adicional em execução no seu website (por exemplo, botão do Pinterest)
  2. Adicione algum texto simples ao código HTML (mostraremos como o fazer abaixo!)
  3. Guardar!

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.

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

Caixa de seleção de bloqueio prévio - Página de gestão

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

Caixa de seleção de bloqueio prévio - Página de gestão
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/javascripttext/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:

Caixa de seleção de bloqueio prévio - Página de gestão
<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>
Agora que fez as suas alterações, basta clicar em guardar e já está.

Não sabe se a configuração está correta? Veja o exemplo em direto e as Perguntas frequentes abaixo

Exemplo em direto

Este exemplo mostra tudo o que foi descrito acima. Pode utilizar este code pen como guia para ver o que acontece antes e depois do bloqueio de scripts através de tagging manual.

(veja o exemplo)

Para mostrar a funcionalidade de bloqueio de cookies, incorporámos um vídeo do YouTube e um botão de seguir do Twitter:
Seguir @iubenda

Ambos os scripts são bloqueados através de tagging manual. Uma vez que tanto o widget de vídeo do YouTube como o botão de seguir do Twitter fazem parte da finalidade Experiência (id 3), adicionámos data-iub-purposes="3" aos seus scripts para a Privacy Controls and Cookie Solution os poder identificar devidamente e enviar.

Clique no botão Aceitar – ou simplesmente ative o botão “Experiência” – para enviar estes scripts (atualize a página para regressar ao início).

Como saber se o bloqueio prévio foi configurado corretamente?

Como pode ver no exemplo do code pen, os scripts do Youtube e do Twitter não carregam se não der o seu consentimento. (Pode testar esta função novamente abrindo este link (https://codepen.io/iubenda/pen/KKKxmVO/?editors=1000) no modo de navegação anónima no seu navegador)

Depois de gravar, abra o seu site no modo de navegação anónima e verifique se os scripts que bloqueou com tagging manual permanecem bloqueados até consentir.

Consulte este artigo dedicado se quiser saber como bloquear cookies antes do consentimento utilizando outras opções disponíveis. ➔ Veja o Google Consent Mode como alternativa ao bloqueio prévio, o Google Tag Manager para simplificar o bloqueio de cookies ou o Quadro de Transparência e Consentimento do IAB e como ativá-lo.

Faça a gestão do consentimento de cookies para a sua loja Shopify

Gere um banner de cookies

Veja ainda