Bloqueio via código ou script
O bloqueio manual das tags envolve a criação de uma lógica para dispararmos as tags assim que aceitas. Iremos desenvolver o bloqueio manual de uma Tags durante o decorrer desse artigo.
A tag de terceiros costuma ser um elemento HTML <script> que é usado para incluir ou referenciar um script executável. Ou seja, assim que esse script é disparado ele executa um código que pode ser responsável por salvar um cookie e/ou um dado no LocalStorage.
O ideia do bloqueio manual de tags portanto é evitar que esse script seja disparado até que haja um aceite por parte do usuário da tag correspondente.
Por questões de exemplificação iremos instalar a tag do Google Analytics e bloquear a mesma de forma manual. Conforme as instruções de instalação do próprio Google, devemos copiar e colar o seguinte código dentro do <head> da aplicação:
<!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXX'); </script>
Tendo isso em mente vamos colar essa tag dentro de um HTML juntamente da tag da AdOpt conforme o código a seguir:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- Tag AdOpt --> <meta name="adopt-website-id" content="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx" /> <script src="//tag.goadopt.io/injector.js?website_code=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx" class="adopt-injector" ></script> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx" ></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "G-xxxxxxxxxx"); </script> </head> <body></body> </html>
Assim, teremos a tag do Google Analytics instalada e sendo disparada independente se o usuário deu seu consentimento. Vamos trabalhar agora no bloqueio dessa tag. Para isso precisamos solicitar que a AdOpt execute um escaneamento do seu site. Isso pode ser feito na aba Tags dentro do dashboard.
Com o escâner realizado teremos a possibilidade de acessar o ID da tag do Google Analytics que poderá ser encontrado na mesma aba. Reserve esse ID pois ele será utilizado na próxima etapa.
Para o próximo passo, devemos remover a tag do nosso HTML permanecendo apenas com o script da AdOpt e em seguida vamos fazer o uso da função firedTags da tag AdOpt. Esse função que é executada sempre que o usuário aceita alguma tag.
A ideia é criar uma lógica para inserirmos a tag do GA apenas quando ela for aceita pelo usuário.
Removendo a tag do GA e adicionando a função teremos o seguinte resultado:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- Tag AdOpt --> <meta name="adopt-website-id" content="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx" /> <script src="//tag.goadopt.io/injector.js?website_code=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx" class="adopt-injector" ></script> <script> window.top.firedTags = function (tags) { console.log("Tags: ", tags); }; </script> </head> <body></body> </html>
Assim, como mencionado anteriormente, executando o projeto e aceitando alguma tag veremos um retorno sendo exibido no console da aplicação.
As tags são retornadas pela função mencionada anteriormente e será utilizada no bloqueio. Podemos observar um exemplo de retorno conforme o array a seguir:
[ { "id": "l9_L4zgA20", "name": "AdOpt", "tag_category_id": 1, "cookies": ..., "accept": true }, { "id": "A-JPAE5eAX", "name": "Google Analytics", "tag_category_id": 4, "cookies": ... , "accept": true } ]
A propriedade accept se refere ao aceite da tag, ambas estão com o valor true significando que foram aceitas pelo usuário. Tendo isso em vista vamos montar a lógica dentro da função para inserir a tag do GA.
<script> window.top.firedTags = function (tags) { const acceptedTags = tags.filter((tag) => tag.accept); acceptedTags.forEach((tag) => { if (tag.id === "TAG_ID") { // Aqui devemos instalar a tag do Google Analytics } }); }; </script>
Substitua o TAG_ID pelo valor obtido na aba tags do dashboard. No meu caso esse valor é o "A-JPAE5eAX" conforma a imagem anteriorImportante
Com essa lógica finalizada precisamos apenas criar uma função que insere o script no HTML via código.
<script> window.top.firedTags = function (tags) { const acceptedTags = tags.filter((tag) => tag.accept); console.log("acceptedTags: ", acceptedTags); acceptedTags.forEach((tag) => { if (tag.id === "A-JPAE5eAX") { addGoogleAnalytics(); } }); }; function addGoogleAnalytics() { const scriptGA1 = document.createElement("script"); scriptGA1.src = "https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx"; scriptGA1.async = true; const scriptGA2 = document.createElement("script"); scriptGA2.type = "text/javascript"; const code = ` console.log('rodou') window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-xxxxxxxxxx');`; scriptGA2.appendChild(document.createTextNode(code)); document.head.appendChild(scriptGA1); document.head.appendChild(scriptGA2); } </script>
Assim garantimos que a tag GA será iniciada apenas se o usuário consentir com a tag correspondente. Note que a função addGoogleAnalytics é responsável por instalar a tag via código.
A ideia de fazer esse bloquei é analisar a tag que você está instalado e utilizar a mesma lógica de bloqueio. Alterando apenas a forma com que ela é inserida, uma vez que cada tag possui um formato diferente.
AdOpt
Recursos
Termos Legais
© GO ADOPT, LLC desde 2020 • Feito por pessoas que amam
🍪