Iubenda logo
Crie Agora

Documentação

Tabela de conteúdos

Como usar o Google Tag Manager para simplificar o bloqueio de cookies

A seguir, explicaremos como integrar o Google Tag Manager com a Cookie Solution da iubenda para a CCPA, o GDPR e o consentimento por categoria.

Importante

O uso do Google Tag Manager é recomendado, pois simplifica significativamente a adoção dos requisitos da Lei dos Cookies. No entanto, só é eficaz para scripts que não são “posicionais”. Os scripts “não posicionais” são todos os scripts que não visualizam um elemento específico em um determinado local da página. Resumindo, você pode usar essa solução para todas as ferramentas de análise, mas não para banners do AdSense, vídeos do Youtube, botões sociais ou qualquer tipo de widgets.

Algumas definições rápidas

Google Tag Manager - Container, tag e trigger

Verifique a documentação oficial do Google para obter mais informações sobre o Google Tag Manager. Dito isso, começaremos o tutorial!

Crie uma conta

Primeiro, você precisa criar uma conta gratuita no Google Tag Manager.

Crie um contêiner

Uma vez criada a conta, é necessário criar um contêiner clicando em Create Container.

Google Tag Manager - New container
Google Tag Manager - New container

Crie a tag

Após a criação do contêiner, podemos avançar para a criação da tag. É importante repetir que a tag corresponde ao script que só será ativado de acordo com determinadas regras que, neste caso, é o consentimento do usuário para o uso de cookies.

A tag que criaremos é relativa ao ao Google Analytics:

Google Tag Manager - Criação de tag

Clique na janela Tag configuration conforme imagem abaixo:

Google Tag Manager - Criação de tag

Selecione o tipo de tag do Google Analytics – Universal Analytics. Em seguida, selecione New Variable nas configurações do Google Analytics, insira seu ID de rastreamento do Google Analytics e salve.

Google Tag Manager - Configuração de tag do Google Analytics

Agora, você pode definir seu tipo de rastreamento. Neste exemplo, queremos rastrear visualizações de página, portanto, deixaremos o tipo de rastreamento como Page view.

Google Tag Manager - Configuração de tag do Google Analytics

Configure as regras para a ativação da tag

Após preencher os parâmetros acima, é preciso definir os acionadores (as regras que permitirão o disparo dos scripts):

  1. iubenda_consent_given ou, se você ativou o recurso de consentimento por categoria em sua Cookie Solution, iubenda_consent_given_purpose_1...5
  2. iubenda_preference_not_needed
  3. iubenda_ccpa_opted_out
Google Tag Manager e modo de consentimento

Se você estiver implementando o Google Consent Mode, pule esta etapa e vá direto para a instalação.

1.1 iubenda_consent_given

Clique na seção “Triggering” abaixo:

Google Tag Manager - Configuração de acionador

e clique no sinal de mais, no canto superior direito, para adicionar um novo acionador. Na janela de configuração do acionador, selecione Custom Event (nota: certifique-se de NÃO selecionar “All Pages” como acionador).

Google Tag Manager - Evento personalizado

Para o nome do evento, insira o seguinte valor: iubenda_consent_given. Isso ativará o acionador em All Custom Events identificados como Consent Given.

Salve o acionador clicando em Save:

Criar acionador

1.2 iubenda_consent_given_purpose_1…5

Se você ativou o recurso de consentimento por categoria em sua Cookie Solution, no lugar do evento iubenda_consent_given, você precisará criar um evento personalizado para cada finalidade exibida em seu banner/política de cookie (com exceção da finalidade “estritamente necessário”).

Se você não souber a qual finalidade/categoria os serviços executados em seu site pertencem, você pode consultar os subtítulos aos quais eles se enquadram na sua política de cookies da iubenda.

Estes são as 5 finalidades (e os valores de eventos personalizados):

  1. estritamente necessário (não há necessidade de criar um evento personalizado)
  2. interações e funcionalidades básicas (iubenda_consent_given_purpose_2)
  3. otimização da experiência (iubenda_consent_given_purpose_3)
  4. estatísticas (iubenda_consent_given_purpose_4)
  5. direcionamento e publicidade (iubenda_consent_given_purpose_5)

Como o Google Analytics faz parte da categoria “Estatísticas” incluída na finalidade “Estatísticas”, você terá que criar um evento personalizado com o seguinte valor: iubenda_consent_given_purpose_4. Isso ativará o acionador em All Custom Events identificados como Consent Given Purpose 4.

Criar acionador

Feito isso, salve o acionador como de costume.

2. iubenda_preference_not_needed

Use o mesmo procedimento para criar outro evento personalizado chamado iubenda_preference_not_needed, invocado sempre que uma preferência não for necessária (por exemplo, quando gdprApplies:false, ou gdprAppliesGlobally:false, countryDetection:true e o usuário estiver localizado fora da UE):

Google Tag Manager - iubenda_preference_not_needed trigger configuration

3. iubenda_ccpa_opted_out

Se a CCPA se aplicar a você e, como neste caso, a tag/serviço for considerada uma venda, ela deve ser desativada quando o usuário optar por sair. Para tanto, você terá que criar uma exceção chamada iubenda_ccpa_opted_out.

Antes de criar este evento, você terá que definir um filtro para ele. Clique em Variables e, depois, em New (ao lado de User-Defined Variables). Nomeie como iubenda_ccpa_opted_out, clique na caixa Variable Configuration e selecione Data Layer Variable, use como iubenda_ccpa_opted_out como o Data Layer Variable Name e selecione Version 2 como Data Layer Version. Depois clique em Save.

Google Tag Manager - iubenda_ccpa_opted_out configuração variável

Agora que você definiu a variável, crie um acionador chamado iubenda_ccpa_opted_out. Em Trigger Configuration:

  • selecione o Custom Event como Trigger Type;
  • insira .* como Event name e selecione Use regex matching;
  • em This trigger fires on selecione Some Custom Events, marque iubenda_ccpa_opted_out, equals e true
Google Tag Manager - iubenda_ccpa_opted_out configuração do acionador

e clique em Save.

Ao final, sua tag do Universal Analytics ficará assim:

Google Tag Manager - Universal Analytics configuração de tag

Clique em Save para salvar a tag.

Não há qualquer problema em adicionar os acionadores iubenda_consent_given e iubenda_consent_given_purpose_4, ainda que você não use o recurso de consentimento por categoria. A definição de ambos evitará que você precise editar todas as suas tags, caso decida ativar esse recurso no futuro.

Ao estabelecer esta regra, o Google Tag Manager ativará a tag do Google Analytics, criada acima, apenas quando as regras forem verdadeiras. Isso significa que ele será disparado sempre que o Google Tag Manager receber um evento com o valor iubenda_consent_given ou iubenda_consent_given_purpose_4 ou iubenda_preference_not_needed.

Observação
  • O exemplo anterior considera que você está disparando a tag em todas as páginas do seu site. Se desejar que uma tag seja disparada em apenas uma página (por exemplo, na página do Carrinho de Compras), consulte a seção avançada aqui.
  • Sobre a adição de vários contêineres na mesma página: para melhor desempenho, o Google recomenda manter o número mínimo de contêineres na página. Caso siga essa recomendação (por exemplo, criando um contêiner para cada finalidade ao usar o consentimento por categoria), certifique-se de usar o mesmo nome do dataLayer em todos os contêineres, conforme explicado aqui.
  • Lembre-se de que, se desejar rastrear mais de um evento na mesma página (por exemplo, rastrear visualizações de página e o envio de um formulário), você precisará criar tags adicionais e especificar o tipo de rastreamento. Veja os detalhes aqui, na seção avançada.

Instale o Google Tag Manager em seu próprio site

Para instalar o Google Tag Manager, acesse a conta de administrador do GTM, copie o código que o Google fornece e insira-o em todas as páginas do seu site, conforme as instruções fornecidas. Se você estiver usando um CMS, que extrai o cabeçalho de uma página de modelo de cabeçalho (por exemplo, header.php), basta colá-lo nesse arquivo.

Google Tag Manager - Instalação
Google Tag Manager - Instalação

Observação: você precisará remover seu próprio código do Google Analytics.

O Google Analytics apenas será ativado automaticamente pelo script do Google Tag Manager após o consentimento do usuário/visitante para o uso de cookies.

Instale o script da iubenda

Acesse o dashboard da iubenda > [seu site] > Cookie Solution, clique no botão Integrar para acessar a seção de incorporação:

Cookie Solution - Incorporar o banner

e extraia o código para o seu banner de cookie (se você ainda não ativou a Cookie Solution, basta clicar em Ativar, configurar e ir para a seção de incorporação para extrair o código conforme descrito).

Seu código ficará mais ou menos assim:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Ele deve ser editado da seguinte forma:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        },
        "callback": {
            onPreferenceExpressedOrNotNeeded: function(preference) {
                dataLayer.push({
                    iubenda_ccpa_opted_out: _iub.cs.api.isCcpaOptedOut()
                });
                if (!preference) {
                    dataLayer.push({
                        event: "iubenda_preference_not_needed"
                    });
                } else {
                    if (preference.consent === true) {
                        dataLayer.push({
                            event: "iubenda_consent_given"
                        });
                    } else if (preference.consent === false) {
                        dataLayer.push({
                            event: "iubenda_consent_rejected"
                        });
                    } else if (preference.purposes) {
                        for (var purposeId in preference.purposes) {
                            if (preference.purposes[purposeId]) {
                                dataLayer.push({
                                    event: "iubenda_consent_given_purpose_" + purposeId
                                });
                            }
                        }
                    }
                }
            }
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Por isso, adicionamos um callback que, no momento em que o consentimento é dado pelo usuário, convoca o código do Google Tag Manager para desbloquear o evento configurado e ativar o do Google Analytics.

Agora que o código está adaptado para a integração com o Google Tag Manager, vamos incluí-lo em nossas páginas antes do fechamento da tag BODY.

Se estiver tudo pronto, siga diretamente para Publicar, caso contrário, continue lendo a Configuração avançada (essas configurações permitem acelerar a ativação das tags, disparar tags apenas em páginas específicas e definir vários tipos de rastreamento na mesma página por meio da inclusão de parâmetros adicionais à sua configuração do GTM).

Configurações Avançadas

Nesta seção, usaremos “Variáveis” e “Exceções de acionadores” para sermos mais específicos. O Google Tag Manager permite que variáveis ​​sejam criadas e exceções sejam definidas nas condições de acionamento da tag.

Você pode pensar nessas exceções como “acionadores de bloqueio”. Por exemplo, se você quiser que sua tag do Google Analytics seja disparada apenas na página do carrinho de compras, pode definir uma exceção à regra de disparo que dispõe que a tag não dispara em nenhuma página que não seja a página do seu carrinho de compras. A definição dessa exceção bloqueia o disparo da tag em outras páginas além da página do carrinho de compras. Da mesma forma, você pode definir um acionador para disparar apenas se as condições relacionadas a uma determinada variável forem atendidas.

Dessa forma, tanto as variáveis ​​quanto as exceções permitirão maior flexibilidade no gerenciamento de tags (veja aqui o que o Google fala sobre exceções e ​​aqui o que ele fala sobre variáveis).

Conforme acima mencionado, se você quiser apenas que sua tag do Google Analytics seja disparada na página do seu carrinho de compras, você pode definir uma exceção à regra de disparo estabelecendo que a tag não será disparada em outra página além da página do seu carrinho de compras. Você deve fazer da seguinte forma:

Crie uma variável URL da página (clique em “Variables” no painel esquerdo e em “New Variable”). Em seguida, clique na caixa de configuração da variável para escolher o tipo de variável e selecione URL.

Selecione a variável de url da página integrada

Agora clique em salvar e nomeie a variável com um nome relacionado à página em que você deseja que a tag seja disparada. No exemplo, nomeamos a variável como “Carrinho de compras”.

Em seguida, crie o novo acionador de bloqueio ou Exceção que gostaria de adicionar (clique em “Triggers” no painel esquerdo e depois em “New”). Tente colocar em sua exceção um nome relevante. Neste exemplo, nomeamos como: “NÃO é um carrinho de compras”

Em seguida, clique na caixa de configuração do acionador para escolher o tipo de acionador, neste exemplo, “Page View”.

  • Selecione a opção “Some Pages”.
  • Indique a variável (neste caso, a variável “Carrinho de compras” que acabamos de criar) como a variável associada e configure: “does not equal”* e digite o URL da sua página como condição de ativação (por exemplo, https://shoppingcart.yourwebsite.com)
    *Outra opção seria selecionar “starts with” (no lugar de “does not equal”) caso você queira que a tag seja disparada em páginas que começam com o URL do carrinho de compras, etc. Aqui você pode definir as configurações da forma que melhor se adapte ao seu site.
Configuração de exceção

Clique em salvar

Por fim, volte para sua tag e, além do ativador “consentimento da iubenda concedido”, você também precisa associar a exceção que acabamos de criar. Isso pode ser feito clicando no lápis na seção “Triggering”,

adicionar acionador de formulário à tag

em seguida, clique no link “Add Exception” que irá aparecer.

Em seguida, selecione a exceção que acabamos de criar, salve e pronto! Agora a tag só será disparada depois que o consentimento para os cookies for obtido (conforme exigido por lei), mas não será disparada em páginas que não sejam sua página “Carrinho de compras”.

não é exceção do carrinho de compras

Se você quiser rastrear mais de um evento na mesma página (por exemplo, rastreamento de visualizações de página e de envio de um formulário de compra), você precisará criar as tags adicionais e especificar o tipo diverso de rastreamento. Embora seja simples configurar vários tipos de rastreamento no Tag Manager, para cumprir a lei, você deve se certificar de que os outros eventos de acionamento ocorrem somente após receber o consentimento. Veja como fazer:

Para este exemplo, suponhamos que, além de rastrear visualizações de página no Google Analytics (conforme definido na tag que criamos na primeira seção), você também queira rastrear as transações.

Para tanto, precisaremos criar outra tag do Google Analytics, definir o tipo de rastreamento como “Transaction” e salvar (você pode dar um nome descritivo como “Universal Analytics Transactions”).

Google Analytics transaction Tag GTM

Em seguida, crie uma variável de cookies próprios (clique em “Variables” no painel esquerdo e adicione uma nova variável personalizada)

  • Defina o nome da variável no seguinte formato: “_iub_cs-XXXXXX” (XXXXXX terá que ser substituído pelo número do seu cookiePolicyId).
  • Selecione a seguinte opção: “URI-Decode cookie”.
Crie a variável

Clique no botão “Save” e nomeie de forma parecida com “Cookieiubenda”

Nomeie a variável

Em seguida, crie o novo acionador que deseja adicionar: por exemplo. “Purchase Made”; digite “Form submission”.

  • Agora selecione a opção que começa com “Some” – portanto, no exemplo do “Form submission” acima, precisaremos selecionar “Some Forms” (conforme a imagem abaixo).
  • Indique o cookie da iubenda (a variável que você acabou de criar) como a variável associada e configure: “contains” e “consent”:true como uma condição de ativação
Consentimento por categoria

If you’ve set perPurposeConsent to true, the “Cookieiubenda” variable will not contain the value “consent”:true, but the values referred to the single accepted purposes (i.e. “1”:true, “2”:true, “3”:true, “4”:true etc). Adaptar as etapas sugeridas desta forma.

Configuração do acionador

Por fim, volte para sua tag “Universal Analytics Transaction” e associe o acionador que acabamos de criar. Você pode fazer isso clicando na seção “Triggering” e selecionando o acionador “Purchase Made” que acabamos de criar.

adicionar acionador à tag

Salve e pronto!

vários acionadores única tag

Nota: se você quiser que o rastreamento da transação ocorra apenas em uma página (por exemplo, na página do carrinho de compras), veja o tutorial sobre como fazer isso no tutorial na primeira aba desta seção.

É possível ativar as tags de forma mais rápida, modificando dois parâmetros adicionais no GTM, como:

Crie uma variável de cookies próprios (clique em “Variables” no painel esquerdo e adicione uma nova variável personalizada)

  • Defina o nome da variável no seguinte formato: “_iub_cs-XXXXXX” (XXXXXX terá que ser substituído pelo seu cookiePolicyId).
  • Selecione a seguinte opção: “URI-Decode cookie”.
criar GTM variável

Em seguida, crie um novo acionador: “Cookie Law not accepted”; tipo “Page View”, este novo acionador permitirá que a presença do cookie da iubenda seja tratada como uma exceção:

  • selecione “Some Page Views”
  • Indique o cookie da iubenda (a variável que você acabou de criar) como a variável associada e configure: “does not contain” e “consent”:true como uma condição de ativação (veja a imagem abaixo):
Exceção de cookie GTM de configuração do acionador

Por fim, volte para sua tag e, além do ativador “consentimento da iubenda concedido”, você também precisa associar a exceção que acabamos de criar. Isso pode ser feito clicando no lápis na seção “Triggering”,

Exceção de cookie GTM de configuração do acionador

em seguida, clique no link “Add Exception” que irá aparecer. Agora selecione o acionador que acabamos de criar e salve.

Tag GTM com a Lei dos Cookies exceção não aceita
Observação

Ao implementar esta configuração avançada, lembre-se de que, se o cookiePolicyId for modificado, a modificação também deve ser aplicada na configuração. Para uma configuração correta, não é necessário nem vantajoso incluir o código da iubenda através do GTM.

Fonte: tagmanageritalia.it/guida-base-gestire-la-cookie-law-di-iubenda-con-google-tag-manager

Publique um contêiner

Se você foi direto para a Seção Avançada logo após criar e configurar sua Tag e seus Acionadores, certifique-se de instalar o Google Tag Manager em seu site e instalar o script iubenda ANTES de continuar na seção de publicação abaixo.

Após configurar as regras, você precisará publicar o contêiner para realizar as modificações EM TEMPO REAL em seu site:

Google Tag Manager - Publicar contêiner

Para isso, clique no botão SUBMIT, no lado superior direito da página de visão geral do contêiner, e, em seguida, confirme.

Esses exemplos podem ser reutilizados para qualquer outro script ou função JavaScript.

Veja também