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.

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

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.

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.

2. Gere seu banner de cookie

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

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.

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) {
        if (true == _iub.csConfiguration.perPurposeConsent) {
            consent.consent = Object.keys(consent.purposes).every(function(k) {
                return consent.purposes[k]
            });
        }
        window.Shopify.customerPrivacy.setTrackingConsent(consent.consent, 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 para adicionar código customizado às suas páginas ou
• edite manualmente o tema da Shopify.

Edite manualmente seu tema

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.

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

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.

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

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

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

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.

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.

Passo 1: Identificar o script

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

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

Passo 2: Modificar o seu script

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/javascript → text/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:

<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 também

• Como inserir a Política de Privacidade da iubenda na Shopify
• Como customizar a aparência e o comportamento do banner de cookie da iubenda (Guia do iniciante)
• Introdução ao bloqueio prévio de cookies