Criar um modelo do modo de consentimento

Se você tem uma solução de gestão de consentimento para sites que usam o Gerenciador de tags do Google (GTM), crie um modelo compatível com o modo de consentimento do Google. Assim, os usuários podem implementar e integrar esse modo à solução de consentimento sem usar códigos, economizando bastante tempo e esforço.

Os modelos do modo de consentimento permitem a criação de tags que definem o estado padrão e informam as escolhas de consentimento dos visitantes ao Gerenciador de tags do Google. Isso garante o funcionamento ideal das tags independentes e do Google com o modo de consentimento.

Como criador de modelos, você pode implementar modelos do modo de consentimento para uso interno ou publicá-los na Galeria de modelos da comunidade para disponibilizá-los a todos os usuários. Os provedores da plataforma de gerenciamento de consentimento (CMP) que oferecem modelos desse modo podem aparecer na nossa documentação e mostrar modelos na Galeria.

Nesta página, você confere o estado e os tipos de consentimento e como usá-los com as APIs do modo de consentimento. A última seção apresenta um exemplo de como utilizar as APIs para criar um modelo do Gerenciador de tags. Se você não conhece o modo de consentimento ou os modelos do Gerenciador de tags, os seguintes artigos dão informações gerais:

As tags independentes e do Google ajustam o comportamento de armazenamento com base em um estado de consentimento de granted ou denied. Elas podem ter verificações integradas em qualquer um destes tipos de consentimento:

Tipo de consentimento Descrição
ad_storage Permite o armazenamento (como cookies) relacionado à publicidade.
analytics_storage Permite o armazenamento (como cookies) relacionado a análises (por exemplo, duração da visita).
functionality_storage Permite o armazenamento compatível com as funções do site ou app, por exemplo, as configurações de idioma.
personalization_storage Permite o armazenamento relacionado à personalização, como recomendações de vídeos.
security_storage Permite o armazenamento relacionado à segurança, por exemplo, recurso de autenticação, prevenção contra fraudes e outras proteções de usuários.

Com o modelo, seus usuários podem definir um estado de consentimento padrão para cada tipo usado pelo site. Ou então, eles prefiram definir estados de consentimento padrão para regiões diferentes.

Os usuários do GTM devem disparar tags criadas com seu modelo em todas as páginas usando o acionador de inicialização de consentimento. Isso garante o disparo antes de outras tags. O código do modelo precisa definir os estados de consentimento padrão configurados logo após o disparo. A CMP precisa pedir ao visitante o mais rápido possível para dar ou negar a autorização em todos os tipos de consentimento relevantes. Quando um visitante indica a escolha, a CMP precisa transmitir o estado de consentimento atualizado usando a API de modelo adequada. Esse modo rastreia as opções dos visitantes, e as verificações de consentimento da tag garantem que o comportamento dela seja ajustado corretamente.

As implementações do modo de consentimento em sites que usam o GTM para inclusão de tags precisam utilizar as APIs específicas do GTM para gerenciar os estados setDefaultConsentState e updateConsentState. Elas podem usar a API gtagSet para definir as configurações ads_data_redaction e url_passthrough quando necessário. Essas APIs estão disponíveis apenas no ambiente de sandbox do modelo do GTM.

Quando a página carregar, defina o estado de consentimento padrão o quanto antes usando o evento de inicialização de consentimento para acionar a tag. As atualizações de consentimento precisam ser indicadas ao GTM o mais rápido possível depois que o usuário autorizar ou quando a escolha anterior de consentimento for carregada nos cookies. Há várias abordagens possíveis para acionar updateConsentState. Os exemplos mais adiante neste artigo mostram duas opções.

Para ajustar as configurações de consentimento padrão, use a API setDefaultConsentState. O exemplo a seguir ilustra o uso da chamada setDefaultConsentState. Por padrão, ele nega o ad_storage e dá consentimento para os outros tipos de armazenamento. Ele também usa wait_for_update, dando tempo para receber as escolhas de visitantes da CMP.

const setDefaultConsentState = require('setDefaultConsentState');

setDefaultConsentState({
  'ad_storage': 'denied',
  'analytics_storage': 'granted',
  'functionality_storage': 'granted',
  'personalization_storage': 'granted',
  'security_storage': 'granted',
  'wait_for_update': 500
});

Depois que um visitante do site indica as escolhas de consentimento, geralmente em uma interação com um banner, o código do modelo precisa atualizar os estados de acordo com a API updateConsentState.

O exemplo a seguir mostra a chamada updateConsentState para um visitante que indicou que concorda com todos os tipos de armazenamento. Novamente, esse exemplo usa valores codificados para granted, mas, na prática, eles precisam ser determinados no ambiente da execução usando o consentimento do visitante que é coletado pela CMP.

const updateConsentState = require('updateConsentState');

updateConsentState({
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'functionality_storage': 'granted',
  'personalization_storage': 'granted',
  'security_storage': 'granted'
});

Comportamento específico da região

Para definir estados de consentimento padrão usados com visitantes de áreas específicas, defina uma região (de acordo com ISO 3166-2) no modelo. Com o uso de valores de região, os usuários do modelo podem cumprir os regulamentos regionais sem perder informações de visitantes fora dessas áreas. Quando uma região não é especificada em um comando setDefaultConsentState, o valor é usado em todas as outras áreas.

Por exemplo, o código a seguir define o status padrão de analytics_storage como denied para visitantes da Espanha e do Alasca e define analytics_storage como granted para todas as outras pessoas:

const setDefaultConsentState = require('setDefaultConsentState');

setDefaultConsentState({
  'analytics_storage': 'denied',
  'region': ['ES', 'US-AK']
});
setDefaultConsentState({
  'analytics_storage': 'granted'
});

A versão mais específica tem prioridade

Se dois comandos de consentimento padrão forem incluídos na mesma página com valores distintos para região e sub-região, o comando que tiver a região mais específica vai ter prioridade. Por exemplo, se ad_storage tiver sido definido como 'granted' para a região US e ad_storage estiver definido como 'denied' para a região US-CA, a configuração mais específica US-CA vai prevalecer.

Região ad_storage Comportamento
Estados Unidos 'granted' Aplica-se a usuários nos EUA que não estão na Califórnia.
US-CA 'denied' Utilizado com usuários da região US-CA.
Não especificado 'granted' Usa o valor padrão de 'granted'. Neste exemplo, serve para usuários que não estão nos EUA nem na região US-CA.

Transmissão de informações sobre cliques em anúncios, IDs de clientes e IDs de sessões em URLs

Quando um visitante acessa o site de um anunciante após clicar em um anúncio, as informações sobre esse anúncio podem ser incluídas nos URLs da página de destino como um parâmetro de consulta. Para melhorar a precisão das conversões, as tags do Google geralmente armazenam essas informações em cookies primários no domínio do anunciante.

No entanto, quando ad_storage está definido como denied, as tags do Google não salvam as informações localmente. Nesse caso, para melhorar a qualidade da medição de cliques, os anunciantes podem transmitir informações de cliques no anúncio usando parâmetros de URL nas páginas com a transferência de URL.

Da mesma forma, se analytics_storage for definido como "denied", a transferência poderá ser usada para enviar análises baseadas em eventos e sessões (incluindo conversões) sem cookies em todas as páginas.

Para usar a transferência de URL, as seguintes condições precisam ser atendidas:

  • As tags do Google com necessidade de consentimento estão presentes na página.
  • O anunciante aceitou usar a transferência de URL.
  • O modo de consentimento está implementado na página.
  • O link de saída se refere ao mesmo domínio da página atual.
  • Há um gclid/dclid presente no URL (somente tags do Google Ads e do Floodlight).

Seu modelo precisa permitir que o usuário do modelo defina se quer ou não ativar essa configuração. O código do modelo a seguir é usado para definir "url_passthrough" como "true":

gtagSet('url_passthrough', true);

Editar dados de anúncios

Quando ad_storage for "denied", não serão definidos novos cookies para fins de publicidade. Além disso, os cookies de terceiros definidos anteriormente em google.com e doubleclick.net não serão usados. Os dados enviados ao Google ainda vão conter o URL completo da página, incluindo as informações de cliques no anúncio nos parâmetros de URL.

Para fazer mais edições nos seus dados de anúncios quando ad_storage for "denied", defina ads_data_redaction como "true".

gtagSet('ads_data_redaction', true);

Quando ads_data_redaction for "true" e ad_storage for "denied", os identificadores de cliques no anúncio enviados nas solicitações de rede pelas tags do Google Ads e do Floodlight serão editados.

ID do desenvolvedor

Se você for um fornecedor de CMP com um ID do desenvolvedor emitido pelo Google, use o método a seguir para definir o ID o quanto antes no seu modelo.

gtagSet('developer_id.<your_developer_id>', true);

Exemplo de implementação

Neste exemplo, mostramos como criar um modelo que lê cookies da solução de gerenciamento de consentimento para conferir as escolhas dos visitantes. Assim, essas opções são disponibilizadas ao GTM o mais cedo possível durante o carregamento, quando o visitante fez as seleções em uma página anterior.

Para seguir esse exemplo, crie um campo no modelo para manter o estado de consentimento padrão. O código de implementação vai ler esse campo para definir o estado de consentimento padrão no ambiente de execução. No comando de atualização, seu código vai tentar ler um cookie definido pela solução de consentimento para armazenar as escolhas dos visitantes. Você também vai configurar um callback para updateConsentState tratar o caso quando um visitante ainda não definiu o consentimento ou decide mudar a permissão.

Estas são as principais etapas:

Usar o Editor de modelos para criar o modelo

  1. Faça login na sua conta do Gerenciador de tags do Google.
  2. Na navegação à esquerda, selecione Modelos.
  3. No painel Modelos de tag, clique em Novo.

Adicionar campos

  1. Na guia Campos, clique em Adicionar campo.
  2. Escolha Tabela de parâmetros.
  3. Mude o nome para defaultSettings.
  4. Abra o campo.
  5. Atualize o nome de exibição para Default settings.
  6. Clique em Adicionar coluna, escolha Entrada de texto, mude o nome para region e marque a caixa Os valores das colunas precisam ser únicos.
  7. Abra a coluna e mude o nome de exibição para Region (leave blank to have consent apply to all regions). A instrução entre parênteses é a documentação para os usuários do seu modelo.
  8. Clique em Adicionar coluna e escolha Entrada de texto. Mude o nome para granted.
  9. Abra a coluna e mude o nome de exibição para Granted Consent Types(comma separated).
  10. Clique em Adicionar coluna e escolha Entrada de texto. Mude o nome para denied.
  11. Abra a coluna e mude o nome de exibição para Denied Consent Types (comma separated).
  12. Clique em Adicionar campo, escolha Caixa de seleção e mude o nome do campo para ads_data_redaction.
  13. Atualize o nome de exibição para Redact Ads Data.

Adicionar código

Copie o código abaixo e substitua os parâmetros entre colchetes (o nome do cookie e verifique o estado de consentimento atualizado) pelas opções adequadas para implementação. Depois disso, use o código para substituir o código boilerplate na guia Código do GTM. Salve o modelo depois de colar.

// The first two lines are optional, use if you want to enable logging
const log = require('logToConsole');
log('data =', data);
const setDefaultConsentState = require('setDefaultConsentState');
const updateConsentState = require('updateConsentState');
const getCookieValues = require('getCookieValues');
const callInWindow = require('callInWindow');
const gtagSet = require('gtagSet');
const COOKIE_NAME = '<replace_with_your_cookie_name>';
/**
 * Splits the input string using comma as a delimiter, returning an array of
 * strings
 */
const splitInput = (input) => {
  return input.split(',')
      .map(entry => entry.trim())
      .filter(entry => entry.length !== 0);
};
/**
 * Processes a row of input from the default settings table, returning an object
 * which can be passed as an argument to setDefaultConsentState
 */
const parseCommandData = (settings) => {
  const regions = splitInput(settings['region']);
  const granted = splitInput(settings['granted']);
  const denied = splitInput(settings['denied']);
  const commandData = {};
  if (regions.length > 0) {
    commandData.region = regions;
  }
  granted.forEach(entry => {
    commandData[entry] = 'granted';
  });
  denied.forEach(entry => {
    commandData[entry] = 'denied';
  });
  return commandData;
};
/**
 * Called when consent changes. Assumes that consent object contains keys which
 * directly correspond to Google consent types.
 */
const onUserConsent = (consent) => {
  const consentModeStates = {
    ad_storage: consent['adConsentGranted'] ? 'granted' : 'denied',
    analytics_storage: consent['analyticsConsentGranted'] ? 'granted' :
                                                            'denied',
    functionality_storage: consent['functionalityConsentGranted'] ? 'granted' :
                                                                    'denied',
    personalization_storage:
        consent['personalizationConsentGranted'] ? 'granted' : 'denied',
    security_storage: consent['securityConsentGranted'] ? 'granted' : 'denied',
  };
  updateConsentState(consentModeStates);
};
/**
 * Executes the default command, sets the developer ID, and sets up the consent
 * update callback
 * 
 * Note: Developer IDs are only required when you're building an implementation
 * that will be used across multiple websites by unrelated companies or
 * entities. If the implementation will be used by one site or entity,
 * please do not apply for a developer ID.
 */
const main = (data) => {
  // Set developer ID
  gtagSet('developer_id.<replace_with_your_developer_id>', true);
  // Set default consent state(s)
  data.defaultSettings.forEach(settings => {
    const defaultData = parseCommandData(settings);
    defaultData.wait_for_update = 500;
    setDefaultConsentState(defaultData);
  });
  gtagSet('ads_data_redaction', data.ads_data_redaction);
  // Check if cookie is set and has values that corresopnd to Google consent
  // types. If it does, run onUserConsent().
  const settings = getCookieValues(COOKIE_NAME);
  if (typeof settings !== 'undefined') {
    onUserConsent(settings);
  }
  /**
   * Add event listener to trigger update when consent changes
   *
   * References an external method on the window object which accepts a
   * function as an argument. If you do not have such a method, you will need
   * to create one before continuing. This method should add the function
   * that is passed as an argument as a callback for an event emitted when
   * the user updates their consent. The callback should be called with an
   * object containing fields that correspond to the five built-in Google
   * consent types.
   */
  callInWindow('addConsentListenerExample', onUserConsent);
};
main(data);
data.gtmOnSuccess();

Adicionar permissões

Depois, configure as permissões para acessar o estado de consentimento e os cookies.

Para gerenciar os estados de consentimento:

  1. Selecione a guia Permissões e clique em Status da permissão de acessos.
  2. Escolha Adicionar tipo de permissão.
  3. Clique na caixa e selecione ad_storage no menu suspenso.
  4. Marque a opção Gravação.
  5. Clique em Adicionar

Repita as etapas 2 a 5, substituindo analytics_storage por ad_storage.

Para terminar, clique em Salvar.

Para acessar os cookies:

  1. Selecione a guia Permissões e clique em Lê valores de cookies.
  2. Em Específico, insira o nome de cada um dos cookies que seu código precisa ler para determinar as opções de consentimento do usuário (um nome por linha).
  3. Clique em Salvar.

Testes

Consulte Testes para conferir detalhes sobre como criar testes para o modelo.

O código a seguir mostra um exemplo de como esse modelo pode ser integrado ao código da sua solução de gerenciamento de consentimento com a adição de um listener:

// Array of callbacks to be executed when consent changes
const consentListeners = [];

/**
 * Called from GTM template to set callback to be executed when user consent is provided.
 * @param {function} Callback to execute on user consent
 */
window.addConsentListenerExample = (callback) => {
  consentListeners.push(callback);
};

/**
 * Called when user grants/denies consent.
 * @param {Object} Object containing user consent settings.
 */
const onConsentChange = (consent) => {
  consentListeners.forEach((callback) => {
    callback(consent);
  });
};

Configuração de usuário do modelo

É necessário enviar a documentação para os usuários do modelo. Eles vão usar esse modelo para configurar uma tag que utilize o acionador Inicialização de consentimento: todas as páginas. Na tabela Configurações, os usuários precisam inserir uma lista dos tipos de consentimento e se querem dar ou negar autorização por padrão. Se as configurações padrão variam com base na localização do usuário, ele precisa criar uma linha para cada conjunto de regiões que compartilham o mesmo estado de consentimento padrão.