Configurar eventos

Os eventos permitem medir as interações dos usuários no seu site ou app. Por exemplo, você consegue saber quando alguém carrega uma página, clica em um link e faz uma compra. O Google Analytics usa os dados de eventos para criar relatórios com informações sobre sua empresa. Saiba mais.

Neste guia, mostramos como configurar eventos recomendados e personalizados no seu site usando a tag do Google (gtag.js) ou o Gerenciador de tags do Google. Não é necessário configurar eventos coletados automaticamente e de medição otimizada.

Você configurou o Google Analytics e está começando a ter dados nos seus relatórios, mas quer ter acesso a mais informações do que o Analytics coleta automaticamente ou desbloquear recursos e funcionalidades específicos.


Antes de começar

Para seguir este guia, você precisa ter concluído as seguintes etapas:

Você também precisa ter o seguinte:

  • Acesso ao código-fonte do site
  • Papel de editor na conta do Google Analytics

Configurar eventos

Use a API da gtag.js para enviar eventos ao Google Analytics. A API tem uma função chamada gtag() e, sempre que você quiser enviar um evento ao Google Analytics, use a seguinte sintaxe:

gtag('event', '<event_name>', {
 
<event_parameters>
});

Neste exemplo, a função gtag() inclui o seguinte:

  • Um comando event que informa ao Google que você está enviando um evento
  • O nome do evento recomendado ou personalizado
  • (Opcional) Um conjunto de parâmetros que fornecem mais informações sobre o evento

Por exemplo, veja a seguir um evento recomendado chamado screen_view com dois parâmetros:

gtag('event', 'screen_view', {
 
'app_name': 'myAppName',
 
'screen_name': 'Home'
});

Adicionar eventos ao JavaScript

gtag() é uma função JavaScript. Portanto, precisa ser adicionada ao JavaScript na sua página da Web. Por exemplo, é possível adicionar a função nas suas tags <script> ou em um arquivo JavaScript separado que você importa para a página HTML.

É possível adicionar eventos ao JavaScript em qualquer lugar abaixo do snippet de tag do Google. O Google não processa dados de eventos colocados acima desse snippet de tag. Por exemplo, o exemplo de código a seguir inclui um evento chamado screen_view dentro de uma tag <script>:

<!DOCTYPE html>
<html lang="en">
<head>
   
<!-- 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>

   
<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>Title of the page</title>
</head>
<body>
   
<p>Welcome to my website!</p>
   

   
<script>
     
/**
      * The following event is sent when the page loads. You could
      * wrap the event in a JavaScript function so the event is
      * sent when the user performs some action.
      */

      gtag
('event', 'screen_view', {
       
'app_name': 'myAppName',
       
'screen_name': 'Home'
     
});
   
</script>

</body>
</html>

Se você quiser enviar o evento com base em um clique no botão ou em alguma outra ação do usuário, é possível adicionar mais JavaScript ao evento.

Conferir seus eventos no Google Analytics

Acompanhe seus eventos e os parâmetros deles usando os Relatórios de tempo real e do DebugView. O Relatório do DebugView requer mais algumas configurações para ser usado. Esses dois relatórios mostram os eventos que os usuários acionam no seu site.

Próximas etapas