Skip to content

Instantly share code, notes, and snippets.

@rodrigophpweb
Last active April 10, 2024 14:49
Show Gist options
  • Save rodrigophpweb/e5f2c37b1bbfcd44927735ac36777a68 to your computer and use it in GitHub Desktop.
Save rodrigophpweb/e5f2c37b1bbfcd44927735ac36777a68 to your computer and use it in GitHub Desktop.
Code for Mode Consent GTM
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments); // Use arguments object for rest parameters
}
var consentOptionsGranted = { // Use var instead of const
'ad_storage': 'granted',
'analytics_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted'
};
var btnConsetMode = document.querySelector('.cn-set-cookie'); // Use var instead of const
if (btnConsetMode) {
btnConsetMode.addEventListener('click', function() {
gtag('consent', 'default', consentOptionsGranted);
});
}
@rodrigophpweb
Copy link
Author

rodrigophpweb commented Apr 10, 2024

Documentação do Código JavaScript para Gerenciamento de Consentimento de Cookies

Objetivo
Este código JavaScript lida com o gerenciamento de consentimento de cookies em um site. Ele usa a biblioteca Google Tag Manager (GTM) para enviar eventos de consentimento do usuário.

Explicação passo a passo:

  1. Inicialização do dataLayer:
window.dataLayer = window.dataLayer || [];
  • Verifica se a variável global dataLayer existe no objeto window.
  • Se existir, usa o array existente.
  • Se não existir, cria um novo array vazio e o atribui a window.dataLayer.
  • O dataLayer é um local central para armazenar e gerenciar dados acessados por diferentes partes do código.
  1. Função gtag
function gtag() {
     dataLayer.push(arguments); // Usa o objeto `arguments` para capturar os argumentos passados
}
  • Define a função gtag.
  • Captura todos os argumentos passados ao chamar gtag usando o objeto arguments.
  • Adiciona os argumentos como um elemento de array (evento) ao array dataLayer usando o método push.
  • A função gtag serve para enviar eventos (incluindo eventos de consentimento) para o dataLayer, para uso com ferramentas de análise ou gerenciamento de tags.
  1. Opções de Consentimento:
var consentOptionsGranted = {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted'
};
  • Declara a variável consentOptionsGranted e atribui um objeto literal a ela.
  • O objeto define diferentes opções de consentimento (por exemplo, ad_storage, analytics_storage) com seus valores correspondentes ('granted').
  • As opções se relacionam com o consentimento do usuário para práticas de coleta e personalização de dados no site.
  1. Interação com o Botão de Consentimento:

`var btnConsetMode = document.querySelector('.cn-set-cookie');

if (btnConsetMode) {
btnConsetMode.addEventListener('click', function() {
gtag('consent', 'default', consentOptionsGranted);
});
}`

  • Usa document.querySelector para procurar no DOM um elemento com a classe cn-set-cookie.
  • Se encontrado, o elemento é atribuído à variável btnConsetMode.
  • A instrução condicional verifica se a variável btnConsetMode não é nula ou indefinida (ou seja, o botão foi encontrado).
  • Se o botão for encontrado, um listener de evento é anexado a ele usando o método addEventListener.
  • O listener de evento escuta pelo evento click no botão.
  • Quando o botão é clicado, a função gtag é chamada com três argumentos:
    • "consent": Indica o tipo de evento sendo enviado (consentimento).
    • "default": Pode ser uma configuração de consentimento específica ou uma padrão.
    • consentOptionsGranted: O objeto contendo as opções de consentimento específicas é passado como o terceiro argumento.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment