Iubenda logo
Crie Agora

Documentação

Tabela de conteúdos

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

Após inserir a Política de Privacidade em seu site da Shopify (que também inclui a política de cookies, caso você a tenha ativado), você pode complementar a configuração incorporando nosso Privacy Controls and Cookie Solution para [1] exibir um banner de cookie totalmente personalizável, [2] obter consentimento de cookies e [3] implementar o bloqueio prévio, conforme exigido pela Lei dos Cookies.

Na verdade, com exceção dos cookies isentos de consentimento, a Lei dos Cookies inclui não apenas a obrigação de criar e exibir ao usuário uma Política de Cookies, mas também de exibir um breve aviso (banner) na primeira visita do usuário e de bloquear scripts que instalem (ou pode instalar) cookies, até que o usuário forneça seu consentimento.

Neste manual, você aprenderá como integrar nosso Privacy Controls and Cookie Solution na sua loja Shopify. Uma vez que o método mostrado abaixo utiliza a Customer Privacy API (API de privacidade do cliente, na tradução livre) da Shopify (que bloqueia automaticamente cookies e rastreadores instalados tanto de forma direta pela Shopify quanto por qualquer plugin compatível), primeiro você deve ativar a opção “Coletados depois da autorização” na sua Online Store > Preferences.

Primeiro, acesse o Dashboard da iubenda e clique em [Seu site] > Política de Privacidade e de Cookies > Editar. Você notará uma caixa de Política de Cookies na coluna da direita.

Ativar Política de Cookies

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

Se você já tiver sua própria Política de Cookies, poderá adicionar o link na Visualização Avançada do configurador do Privacy Controls and Cookie Solution. Selecione Personalizar em Política de Cookies e de Privacidade > URL da Política de Cookies. Mais informações no Manual avançado do Privacy Controls and Cookie Solution.

Clique em Gerar agora na opção Dashboard > [Seu site/aplicativo] > Privacy Controls and Cookie Solution.

Cookie Solution - Gere seu banner de cookie

Você será imediatamente direcionado para o painel de configuração do seu banner de cookie.

Após a customização, Salve e Copie seu snippet do Privacy Controls and Cookie Solution.

Cookie Solution - Incorpore o banner do cookie

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

Antes de colá-lo no tema da Shopify, você deve fazer alguns acréscimos (observe a _iub.csConfiguration.perPurposeConsent,_iub.csConfiguration.callback e as Linhas de rastreamento de 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 do Privacy Controls and Cookie Solution à sua loja da Shopify

Agora você tem duas opções:

💡 Use um plugin

Use um plugin como este para adicionar o snippet do Privacy Controls and Cookie Solution (complemente com as duas partes de “código para Shopify”, consulte 2. Gere seu banner de cookies) ao <head> da sua loja da Shopify.

1. Acesse o painel de administração da sua loja Shopify e vá para Online Store > Themes. Chegando lá, clique em Actions à direita e, em seguida, em Edit Code.

Shopify - Edit code

2. Crie um novo snippet na pasta Snippets e nomeie-o como iub-cookie-banner.liquid

Shopify - Add a new snippet

3. Cole o snippet do Privacy Controls and Cookie Solution (complete com as duas partes de “código para Shopify”) no modelo iub-cookie-banner.liquid e salve-o.

Shopify - Cookie Solution snippet

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

Shopify - theme.liquid

5. Repita a etapa 4 para os layouts gift_card.liquid e password.liquid.

Poucas categorias de cookies são isentas do requisito de consentimento. Portanto, você precisará bloquear a execução de scripts até obter um consentimento válido do usuário.

Como implementar o bloqueio prévio por meio de marcação manual na sua loja da Shopify

Codificação manual é o método de bloqueio prévio que usaremos para o tutorial abaixo. Você pode ver outros métodos aqui.

Para configurar o bloqueio prévio, você precisará fazer algumas pequenas alterações nos scripts do seu site. Mas é simples; basta fazer o seguinte:

  1. Identifique o script/iframe para quaisquer serviços adicionais que estejam sendo executados no seu site (por exemplo, botão do Pinterest)
  2. Adicione um texto simples ao código HTML (mostraremos como fazer abaixo!)
  3. Salvar!

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

💡 Não tem certeza de quais serviços você precisa bloquear? Se você estiver usando uma Política de Cookies gerada pela iubenda, os serviços nela listados são provavelmente os que você precisa modificar agora.

No seu painel de admin Shopify, clique Online store, em seguida Themes. No menu suspenso de temas, clique em Edit Code

Prior blocking checkbox - Flow page

Então, abra sua pasta Snippets para encontrar o script que você precisa modificar (basta pesquisar o serviço que deseja bloquear, neste caso, é o botão “Pin It” do Pinterest) Você pode fazer isso usando a pesquisa barra no canto superior esquerdo da página

Prior blocking checkbox - Flow page
Agora, vamos mudar o script. Para fazer isso, faremos 3 mudanças simples:
  • adicionar a classe: _iub_cs_activate adicionar: _iub_cs_activate às tags de 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 caractere especial separado por vírgula, atributo data-iub-purposes, por exemplo data-iub-purposes="2" or data-iub-purposes="2, 3"

Mais sobre categorias e finalidades

Finalidades são suas razões legais para processar o tipo específico de dados do usuário. Diferentes scripts no seu site se enquadram em diferentes categorias e servem a diferentes propósitos. Por exemplo, o Google Analytics pode ser usado para medição, enquanto o botão do Pinterest pode ser usado para experiência (Objetivo 3 abaixo). Os propósitos são agrupados em 5 categorias, cada uma com um id (1, 2, 3, 4 e 5):

  • necessários (id: 1)
  • funcionalidade (id: 2)
  • experiência (id: 3)
  • medição (id: 4)
  • marketing (id: 5)

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

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

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

A estrutura do código deve ficar assim:

Prior blocking checkbox - Flow page
<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 você fez suas alterações, basta clicar em ‘Save’ e pronto.

Não tem certeza se você configurou corretamente? Confira o exemplo e as perguntas frequentes abaixo

Exemplo

Este é um exemplo que mostra tudo o que descrevemos acima, você pode usar este code pen como guia para ver o que acontece antes e depois de bloquear scripts via marcação manual.

(veja o exemplo)

Para demonstrar o recurso de bloqueio de cookies, incorporamos um vídeo do YouTube e um botão de seguir no Twitter:
Siga @iubenda

Ambos os scripts são bloqueados por meio de marcação manual. Como o widget de vídeo do YouTube e o botão Seguir do Twitter fazem parte da finalidade de experiência (id 3), adicionamos data-iub-purposes="3" aos scripts para que o Privacy Controls and Cookie Solution possa identificá-los adequadamente para liberação.

Clique no botão Accept – ou somente ative o “Experiência” toggle – para liberar esses scripts (atualize a página para retornar ao ponto inicial).

Como posso saber se configurei o bloqueio prévio corretamente?

Como você pode ver no exemplo do code pen, os scripts do Youtube e do Twitter não são carregados se você não consentir. (Você pode testar esta função novamente abrindo este link (https://codepen.io/iubenda/pen/KKKxmVO/?editors=1000) no modo de navegação anônima do seu navegador)

Depois de salvar, abra seu site no modo de navegação anônima e verifique se os scripts que você bloqueou por meio de marcação manual permanecem bloqueados até você consentir.

Consulte este artigo dedicado se quiser saber como bloquear cookies antes de consentir usando outras opções disponíveis. ➔ Dê uma olhada no Google Consent Mode como alternativa ao bloqueio prévio, Google Tag Manager para Simplificar o Bloqueio de Cookies, ou o IAB Transparency & Consent Framework e como habilitar.

Gerencie o consentimento de cookie para sua loja Shopify

Gere um banner de cookie

Veja também