Integrar a tag do Google ao seu CMS ou ao criador de sites

A tag do Google (gtag.js) é um snippet de código que pode ser adicionado a um site para medir a atividade do usuário em vários produtos do Google, incluindo o Google Analytics 4, o Google Ads e o Google Marketing Platform. Saiba mais sobre a tag do Google.

Neste guia, descrevemos como integrar a tag do Google ao seu sistema de gerenciamento de conteúdo (CMS) ou criador de sites para que os usuários finais tenham acesso aos produtos de medição do Google.

Público-alvo

Este guia é destinado a proprietários de CMS ou criadores de sites que querem oferecer integração aos produtos de medição do Google. Este guia não é voltado a usuários dessas ferramentas.

Antes de começar

Confirme se você tem um ID de desenvolvedor da tag do Google. Se não tiver, preencha o formulário para conseguir um. Ele não é diferente dos outros, como o ID de métricas ou de conversão, que os usuários finais adicionam ao código de medição do site.

Visão geral

Para integrar sua plataforma aos produtos do Google, siga estas etapas:

  1. Criar uma integração com a tag do Google
  2. Atualizar a estrutura da entrada do usuário
  3. Implementar a API de consentimento
  4. Configurar dados de eventos
  5. Verificar a integração atualizada
  6. Atualizar as instruções de implantação do usuário

Criar uma integração com a tag do Google

Ao criar uma integração com a tag do Google, os clientes podem implantar os produtos de medição do Google (usando a gtag.js) em todas as páginas do site. Remova todas as integrações de tags legadas (por exemplo, analytics.js) antes de criar uma integração com a gtag.js.

Para criar uma integração desse tipo, substitua o snippet de código atual pelo abaixo. Verifique se os usuários podem substituir TAG_ID pelo ID da tag.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID

  gtag('config', 'GOOGLE_TAG_ID');
</script>

Observe o seguinte:

  • Os anunciantes podem desativar recursos de personalização de anúncios, como o remarketing, usando o parâmetro allow_ad_personalization_signals. Consulte o artigo Desativar a coleta de dados de publicidade personalizada.
  • O ideal é que o snippet de tag do Google apareça somente uma vez por página. Ele acomoda vários IDs de tag. Se houver uma instância da gtag.js, adicione novos IDs à tag. Saiba mais.

Atualizar a estrutura da entrada do usuário

Seus clientes precisam adicionar várias formas do ID da tag do Google usando uma interface, seja qual for o produto de medição que estiverem implantando.

O exemplo a seguir mostra uma entrada simples da tag do Google. A integração precisa ser colocada como uma implantação da tag do Google e pode ser definida como um método para implantar o Google Ads e o Analytics.

Imagem de uma caixa de entrada para o ID da tag do Google

O diagrama a seguir mostra como uma plataforma pode ter fluxos de usuários separados para o Analytics e o Google Ads, mas cada fluxo leva a uma interface em que os usuários enviam a tag do Google.

Imagem do Analytics e do Google Ads levando a um fluxo de entrada

A entrada do ID da tag precisa aceitar diversas variantes de ID usando o padrão de expressão regular [A-Z]{1,3}\w{5,}[\w]*

A tag do Google tem uma API integrada para gerenciar o consentimento do usuário. Ela diferencia a finalidade da autorização dos cookies, seja para anúncios ou análises.

Os clientes devem receber pelo menos a chamada gtag('consent', 'update' {...}) integrada sem precisar fazer nada. Assim, as tags do Google (Google Ads, Floodlight, Analytics, Vinculador de conversões) conseguem ler o estado mais recente de consentimento do usuário e incluir esse estado nas solicitações de rede ao Google (usando o parâmetro &gcs).

As demais etapas são: implantar ou ajudar os anunciantes na implantação (por exemplo, usando uma IU) do estado gtag('consent', default' {...}) e desbloquear as tags do Google (ou seja, sem disparo condicional de acordo com a autorização) para que o modo de consentimento seja disparado com base na permissão concedida.

Para consultar detalhes da implementação, acesse Gerenciar configurações de consentimento (Web).

Configurar dados de eventos

Você precisa enviar dados avançados de eventos do site do cliente para a Conta do Google, sem que o cliente faça nada. Por exemplo, é possível adicionar os eventos ao funil de compra (por exemplo, add_to_cart, begin_checkout, add_payment_info, add_shipping_info e purchase), à geração de leads e às inscrições.

Confira as práticas recomendadas para adicionar eventos:

  • Registrar tudo o que for possível
  • Configurar pelo menos oito eventos principais
  • Priorizar eventos de e-commerce

Registrar tudo o que for possível

Sempre que possível, configure eventos por padrão, como nestes casos:

  • Eventos de conversão, como purchase ou sign_up
  • Interações antes dos eventos de conversão, como add_to_cart
  • Engajamentos baseados em comportamento, como interações com a mídia, que ajudam os clientes a entender a comunicação com os usuários finais

Você só precisa adicionar snippets de evento às páginas de conversão (por exemplo, confirmação de compra ou de envio do formulário). Ainda é preciso incluir a tag do Google em todas as páginas do site.

Os eventos são enviados usando o comando event, inclusive o mesmo ID de desenvolvedor da tag do Google que você adicionou à tag global do site descrita acima:

gtag('event', 'my_event', {
  'developer_id.<developer ID>': true,
  // Additional event parameters
});

Por exemplo, é possível usar o comando event para enviar um evento login com um valor method de "Google".

gtag('event', 'login', {
  'developer_id.<developer ID>': true,
  'method': 'Google'
});
<!-- Event snippet for sales conversion page -->
<script>
  gtag('event', 'conversion', {
      'developer_id.<developer ID>': true,
      'value': <value>,
      'currency': '<currency>',
      'transaction_id': '<transaction_id>'
  });
</script>

Observe o seguinte:

  • O ID de desenvolvedor <developer ID> é exclusivo e específico para sua plataforma. Inclua o ID em cada evento.
  • Os parâmetros a seguir são opcionais e podem ser omitidos:
    • 'value' é o valor numérico da conversão (por exemplo, o preço de uma compra).
    • 'currency' é um código de moeda com três letras, útil para anunciantes que aceitam várias moedas.
    • 'transaction_id' é um ID exclusivo para a transação (por exemplo, um código de pedido) usado para eliminar duplicações.
  • Alguns parâmetros são opcionais, mas recomendamos incluir todas as informações disponíveis sobre os eventos.
    • Os parâmetros dão contexto sobre como os usuários interagem com seu site ou app. Por exemplo, quando alguém vê um produto que você vende, é possível incluir parâmetros que descrevem esse item, como nome, categoria e preço.
    • Alguns parâmetros preenchem automaticamente as dimensões e métricas predefinidas no Google Analytics e permitem que os usuários entendam melhor os clientes.

Se você quiser medir um evento de conversão com base em um clique (por exemplo, em um botão ou em uma resposta dinâmica para um site usando AJAX), utilize o seguinte snippet:

<!-- Event snippet for sales conversion page
    In your HTML page, add the snippet and call gtag_report_conversion
    when someone clicks on the chosen link or button. -->
<script>
  function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
    'developer_id.<developer ID>': true,
    'value': <value>,
    'currency': '<currency>',
    'transaction_id': '<transaction_id>',
    'event_callback': callback
  });
  return false;
}
</script>

Configurar pelo menos oito eventos principais

Configure um conjunto principal de eventos que têm o valor máximo para os proprietários de sites. Recomendamos que você defina, no mínimo, os seguintes eventos:

  • view_item_list: quando um usuário consulta uma lista de itens (por exemplo, os produtos vendidos). Saiba mais.

    gtag('event', 'view_item_list', {
      item_list_id: "related_products",
      item_list_name: "Related products",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Item",
        currency: "USD",
        discount: 2.22,
        price: 99.9,
        quantity: 1
      }]
    });
    
  • add_to_cart: quando um usuário adiciona um ou mais produtos a um carrinho de compras. Saiba mais.

    gtag('event', 'add_to_cart', {
      value: 99.0,
      currency: "USD",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Product",
        price: 99.0,
        currency: ‘USD’,
        quantity: 1,
        item_category: "All Products"
      }]
    });
    
  • begin_checkout: quando um usuário inicia o processo de pagamento de um ou mais itens. Saiba mais.

    gtag('event', 'begin_checkout') {
      value: 99.0,
      currency: "USD",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Product",
        price: 99.0,
        currency: ‘USD’,
        quantity: 1,
        item_category: "All Products"
      }]
    });
    
  • purchase: quando um usuário compra um ou mais produtos ou serviços. Saiba mais.

    gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});
    
  • sign_up: quando um usuário se inscreve para que o usuário final possa consultar os métodos de inscrição mais conhecidos (por exemplo, Conta do Google, endereço de e-mail). Saiba mais.

    gtag('event', 'sign_up', {method: 'web'});
    
  • generate_lead: quando um usuário envia um formulário. Saiba mais.

    gtag('event', 'generate_lead', {value: XX, currency: 'USD'});
    
  • subscribe: quando um usuário assina um serviço ou uma newsletter.

    gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});
    
  • book_appointment: quando um usuário agenda um horário.

    gtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});
    

Outras recomendações

O Google aceita muito mais eventos e parâmetros, especialmente para e-commerce. Em geral, recomendamos que você colete o seguinte:

  • Qualquer evento de sucesso diretamente associado ao valor
  • Eventos de sucesso que contribuem para as principais conversões (add_to_cart, sign_up etc.)
  • Engajamentos e interações do usuário que ajudam os anunciantes a entender a comunicação com os usuários finais

Consulte a seguir outros recursos que explicam melhor a coleta de eventos:

Queremos conversar sobre possíveis extensões desse esquema, então entre em contato se tiver sugestões.

Verificar a integração atualizada

Antes de enviar as mudanças para produção, verifique a compatibilidade com o seguinte:

  • Sua tag do Google com um destino do Google Analytics 4
  • Sua tag do Google para remarketing e medição de conversões

Além disso, use uma destas ferramentas para verificar se a tag é disparada corretamente em todas as páginas, incluindo as de conversão:

  • Assistente de tags do Google: consulte quais tags do Google foram disparadas e em que ordem. O modo de depuração dessa ferramenta mostra quais informações estão sendo transmitidas para a camada de dados e quais eventos acionaram essas trocas.
  • Ferramentas para desenvolvedores do Chrome: use a guia Rede para filtrar solicitações que contêm "google" e verificar como os dados são enviados.
  • Relatório de tempo real do Google Analytics (no lado do servidor): crie uma conta gratuita do Analytics e use o Relatório de tempo real para verificar se os hits de tag estão sendo recebidos pelos servidores do Google.

Para informar um bug ou enviar feedback sobre informações que estão faltando, preencha o formulário de suporte do CMS.

Quando possível, compartilhe o acesso ao teste com o Google para fins de verificação.

Atualizar as instruções de implantação do usuário

Atualize a documentação para mostrar como implementar os produtos de medição do Google. Compartilhe um rascunho dessas instruções ao preencher o formulário para revisar os documentos sobre a configuração da integração do CMS. Assim, podemos enviar feedback.