E-commerce do GA4 (Gerenciador de tags): enviar eventos do GA4

Neste guia, descrevemos como atualizar uma implementação de e-commerce do Universal Analytics (Gerenciador de tags) para usar eventos de e-commerce do Google Analytics 4.

Acesse a Central de migração do desenvolvedor para ver mais recursos e guias de migração.

Resultado

Ao seguir este guia, sua implementação do Universal Analytics será atualizada para usar eventos e parâmetros de comércio eletrônico do GA4. Ela também será usada para enviar dados de e-commerce a uma nova propriedade do GA4. Os relatórios de comércio eletrônico do UA continuarão sendo preenchidos com dados, e você começará a receber dados na nova propriedade do Google Analytics 4.

Atenção: embora os eventos de comércio eletrônico do Google Analytics 4 sejam convertidos automaticamente para serem compatíveis com o Universal Analytics, nem todos têm um evento equivalente no Universal Analytics. Os dados desses relatórios não serão exibidos nos relatórios de comércio eletrônico do Universal Analytics. Consulte Vantagens e desvantagens e considerações abaixo.

Antes de começar

1. Use a ferramenta de ajuda de migração de comércio eletrônico para confirmar se o seguinte se aplica à sua implementação atual:

   • Você usa uma propriedade do Universal Analytics.
   • O site utiliza o Gerenciador de tags e a camada de dados para enviar eventos de e-commerce.

2. Consulte as opções de migração para implementações de e-commerce e saiba mais sobre as vantagens e desvantagens de cada opção. Confirme se você realmente quer seguir este guia para usar os eventos de e-commerce do Google Analytics 4 na sua implementação do Universal Analytics.

3. Acesse a referência de compatibilidade de eventos para saber como os eventos do UA são convertidos quando enviados a uma propriedade do GA4.

Vantagens e desvantagens e considerações

Leia as informações abaixo para entender completamente as implicações de usar os eventos de comércio eletrônico do Google Analytics 4 com sua implementação do comércio eletrônico do Universal Analytics (Gerenciador de tags).

Vantagens	Desvantagens
Permite que você confira os dados de e-commerce nos seus relatórios do GA4 e do Universal Analytics. Usar eventos e parâmetros do GA4 garante relatórios de comércio eletrônico do GA4 completos.	Exige que você mude os eventos de e-commerce. Nem todos os eventos e parâmetros do GA4 têm equivalentes no Universal Analytics. Os parâmetros shipping_tier, discount, currency, location_id, promotion_name e promotion_id não têm equivalentes do Universal Analytics e não serão exibidos nos seus relatórios correspondentes.

Implementação

Um objetivo importante da implementação é deixar de usar a camada de dados para utilizar a API da gtag.js. Para garantir que não haja interrupções de medição durante essa transição, as instruções abaixo recomendam que todas as atualizações na configuração de tags sejam concluídas primeiro, seguidas por mudanças na camada de dados.

1. Criar e configurar uma nova propriedade do GA4

Realize as etapas a seguir para criar e configurar sua nova propriedade do Google Analytics 4:

1. Crie uma nova propriedade do Google Analytics 4.
   • Use o Assistente de configuração do GA4 para criar automaticamente uma nova propriedade do GA4 e copie as seguintes configurações da sua propriedade do Universal Analytics: nome da propriedade, URL do site e configurações de fuso horário e moeda. No entanto, desmarque a opção Ativar a coleta de dados usando suas tags existentes para desabilitar o recurso da tag do site conectada. Como alternativa, se você não quiser copiar as configurações da sua propriedade do Universal Analytics, crie uma propriedade do Google Analytics 4 sem o Assistente de configuração do GA4.
2. Adicione a tag do Google.
   1. Abra o contêiner do Gerenciador de tags do Google para sua implementação do Universal Analytics.
   2. Clique em Tags > Nova.
   3. Clique em Configuração da tag e selecione Tag do Google.
   4. Insira o ID da tag da sua propriedade do Google Analytics 4.
   5. Selecione a opção para acionar a tag em "Todas as páginas" ou no subconjunto de páginas que você quer medir.
   6. Salve e publique a configuração da tag.

2. Adicionar uma configuração de tag de evento do GA4 para medir eventos de comércio eletrônico

Realize as etapas a seguir para adicionar uma tag de evento do GA4 a fim de enviar eventos e parâmetros de comércio eletrônico à sua propriedade do GA4:

1. Crie uma nova configuração de tag e selecione Evento do GA4.
2. Para Nome do evento, use a variável incorporada . Ela usará o nome do evento de e-commerce do GA4 que foi enviado pela API da gtag.js.
3. Em Mais configurações > E-commerce, marque Enviar dados de e-commerce.
4. Em Fonte de dados, selecione Camada de dados.
5. Clique em Salvar. Os gatilhos serão adicionados nas etapas posteriores para que seja possível ignorar com segurança os avisos sobre gatilhos ausentes.

Importante: não é necessário criar várias tags de evento do GA4. Em vez disso, uma única tag de evento do GA4 com a variável Event incorporada pode ser usada para todos os eventos de e-commerce. Os acionadores definem os eventos específicos de comércio eletrônico do GA4 que disparam a tag.

3. Atualizar as configurações da tag de e-commerce do UA para usar eventos do GA4

Para cada configuração de tag de e-commerce do Universal Analytics, inclua um acionador para disparar no evento de e-commerce do GA4 equivalente e ative a opção para ler dados desse evento.

Em cada evento de e-commerce do Universal Analytics, atualize para um evento do GA4 correspondente seguindo as etapas gerais abaixo:

1. Para o evento de e-commerce do UA que você pretende atualizar, use as informações disponíveis nas tabelas Compatibilidade entre eventos do UA e do GA4 e Parâmetros comparáveis do UA e do GA4 e/ou a ajuda de migração de e-commerce para identificar o nome do evento do GA4 correspondente. Por exemplo, se você atualizar um evento para medir os cliques do produto, o nome do evento do GA4 será select_item.
2. Atualize a configuração da tag do Universal Analytics para o evento:
   1. Em Mais configurações > E-commerce, marque Usar esquema do GA4 para garantir que suas tags atuais leiam corretamente o evento de e-commerce do GA4 atualizado. É possível fazer essa mudança antes de migrar da camada de dados para a API da gtag.js.
   2. Na seção Acionamento, adicione um novo acionador de evento personalizado, em que nome do evento é o evento de e-commerce do GA4 identificado acima. Depois de concluir essa etapa, você terá pelo menos dois acionadores: o original que disparou a tag e o recém-adicionado que será disparado após a transição para os eventos do GA4. O acionador adicional visa garantir que não haja interrupção dos dados durante a transição da camada de dados para a API da gtag.js, conforme descrito posteriormente neste documento.
   3. Salve as alterações.
3. Adicione o novo acionador à tag de evento do GA4:
   1. Abra a tag de evento do GA4 que você configurou anteriormente para enviar eventos e parâmetros de comércio eletrônico para a propriedade do GA4.
   2. Na seção Acionamento, adicione o acionador do evento personalizado criado acima (por exemplo, select_item) para garantir que a tag de evento do GA4 seja disparada para a atividade de e-commerce associada depois da transição para os eventos do GA4.
   3. Salve as alterações.
4. Repita as etapas acima para cada atividade de e-commerce do Universal Analytics. Publique suas alterações no Gerenciador de tags quando terminar.

Atenção: ative a opção Usar esquema do GA4 na sua configuração da tag do Universal Analytics. Se essa opção não estiver habilitada, os relatórios de comércio eletrônico do UA não serão preenchidos corretamente.

4. Ativar a API da gtag.js

Se você quiser atualizar sua implementação de e-commerce do UA para o GA4, recomendamos migrar da camada de dados para a API da gtag.js, que funciona com o Gerenciador de tags.

Para ativar a API da gtag.js, adicione o seguinte snippet de código à parte superior da página, acima do snippet de contêiner do Gerenciador de tags:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

Atenção: se você já tiver seguido as etapas em Como adicionar variáveis da camada de dados a uma página e já tiver declarado uma variável correspondente na página, o snippet acima precisará ser colocado depois da declaração da camada de dados.

5. Mudar da camada de dados para a gtag.js

Depois de concluir todas as atualizações na configuração de tags e ativar a API da gtag.js, comece a transição para usar a API da gtag.js em vez da camada de dados.

Se precisar de ajuda, use estes recursos:

• O Guia do desenvolvedor de e-commerce (GA4) mostra como enviar eventos de e-commerce do GA4 usando a API da gtag.js e configurar a tag e acionadores do evento do GA4 no Gerenciador de tags.
• A tabela Compatibilidade entre os eventos do UA e do GA4 ajuda a encontrar o nome apropriado do evento do GA4 para uma atividade de e-commerce do Universal Analytics. Por exemplo, se você estiver atualizando um evento para medir impressões de produto, o nome do evento do GA4 será view_item_list.
• A tabela Parâmetros comparáveis do UA e do GA4 ajuda a mapear nomes de parâmetros de e-commerce do UA para nomes de parâmetros de e-commerce do GA4 equivalentes.
• Use a ajuda de migração de comércio eletrônico para confirmar se você atualizou seus eventos de e-commerce corretamente.

Para cada evento de comércio eletrônico do Universal Analytics, as etapas gerais para deixar de usar a API da dataLayer.push() com eventos de e-commerce do UA para utilizar a API da gtag.js com o evento de e-commerce do GA4 correspondente são os seguintes:

1. Atualize os nomes dos eventos personalizados com o nome do evento do GA4 correspondente. Por exemplo, se você atualizar um evento para medir um clique no produto que usa um nome de evento personalizado productClick, o nome do evento atualizado para GA4 será select_item. O nome do evento do GA4 precisa corresponder ao nome do evento de um acionador configurado anteriormente.

   Por exemplo, o evento de clique no produto a seguir que usa a camada de dados

   dataLayer.push({'event': 'productClick', 'ecommerce': {<ecommerce_parameters>}});
   

   muda para a seguinte forma quando passa a utilizar a API da gtag.js:

   gtag('event', 'select_item', {<ecommerce_parameters>});
   

2. Atualize os parâmetros de e-commerce para corresponder à estrutura esperada para o evento do GA4. Use o artigo Parâmetros comparáveis do UA e do GA4, já que houve mudanças nos nomes dos parâmetros. Preencha o valor de parâmetro do GA4 com o valor de parâmetro do UA correspondente.

Observação: quando a migração da API dataLayer.push() para a API da gtag.js for concluída, será possível remover qualquer acionador de evento personalizado que seja disparado com base nos antigos eventos da camada de dados do UA.

Exemplo: atualizar um evento do UA para o GA4

O exemplo a seguir mostra como criar um evento do GA4 equivalente para uma atividade de e-commerce de clique no produto implementada no Gerenciador de tags para o Universal Analytics.

Antes: enviar eventos do UA usando a camada de dados

O código abaixo contabiliza um clique no produto para o Universal Analytics, implementado usando a camada de dados. O nome do evento personalizado é productClick.

<script>
/**
 * Call this function when a user clicks on a product link. This function uses the event
 * callback datalayer variable to handle navigation after the ecommerce data has been sent
 * to Google Analytics.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                      // Name or ID is required.
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
     'eventCallback': function() {
       document.location = productObj.url
     }
  });
}
</script>

No Gerenciador de tags, a configuração de tag do Universal Analytics é a seguinte:

Tipo de tag: Universal Analytics
Tipo de acompanhamento: evento
Categoria do evento: Ecommerce
Ação do evento: Product Click
Ativar recursos de e-commerce avançados: true
Usar camada de dados: true
Acionador: event é igual a productClick

A configuração do acionador é definida para disparar a tag quando o evento productClick é enviado à camada de dados:

Depois: enviar eventos do GA4 usando a gtag.js

Atualizações de configuração de tags para o UA

No Gerenciador de tags, a configuração de tag do Universal Analytics é atualizada para que o evento de clique no produto seja acionado com o nome do evento do GA4 e a opção Usar esquema do GA4 seja ativada. A configuração da tag agora é a seguinte:

Tipo de tag: Universal Analytics
Tipo de acompanhamento: evento
Categoria do evento: Ecommerce
Ação do evento: Product Click
Ativar recursos de e-commerce avançado: true
Usar a camada de dados: true
Usar o esquema do GA4: true
Acionador 1: event é igual a productClick
Acionador 2: event é igual a select_item

A configuração do novo acionador de evento personalizado está definida para disparar a tag no nome do evento select_item:

Atualizações da configuração de tags para o GA4

Um evento do GA4 é configurado para medir as atividades de e-commerce implementadas usando eventos e parâmetros do GA4. A tag usa a variável de evento incorporada para transmitir o nome de evento para o GA4. O mesmo acionador criado para a tag do UA (ou seja, select_item) é usado para disparar a tag do GA4.

Mudar da camada de dados para a gtag.js

Veja a seguir como a implementação do UA deixa de usar o evento personalizado de productClick com a API dataLayer.push() para utilizar o evento select_item do GA4 com a API do gtag.js. Os valores de parâmetro para select_item são definidos adequadamente.

<script>
/**
 * Call this function when a user clicks on a product link.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  gtag('event', 'select_item', {
    'items': [{
      'item_id': productObj.id,
      'item_name': productObj.name,
      'index': productObj.position,
      'item_list_name': 'Search Results',
      'item_brand': productObj.brand,
      'item_category': productObj.cat,
      'item_variant': productObj.variant,
      'price': productObj.price
    }]
  });
}
</script>