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.

Público-alvo

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