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:
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!)
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.
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.
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 = {
"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>
Agora tem duas alternativas:
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.
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.
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.
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:
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
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
_iub_cs_activate
às tags do script e alterar o atributo “type” de text/javascript
→ text/plain
data-suppressedsrc
ou suppressedsrc
data-iub-purposes
separado por uma vírgula especial, como por exemplo, data-iub-purposes="2"
ou data-iub-purposes="2, 3"
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):
1
)2
)3
)4
)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 }}&media=http:{{ product | img_url: '1024x1024' | split: '?' | first }}&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>
Não sabe se a configuração está correta? Veja o exemplo em direto e as Perguntas frequentes abaixo
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.
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 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.