Acompanhe eventos do chat ao vivo no seu site

Use eventos do chat ao vivo para detectar e reagir a ações dos usuários usando JavaScript no seu site.

Por exemplo, você pode rastrear quando um visitante abre o widget de chat ao vivo, envia uma mensagem ou clica em um botão. Em seguida, pode enviar essas informações para ferramentas de analytics, soluções de CRM ou outros sistemas externos.

Vamos ver como rastrear eventos do chat ao vivo e enviá-los para sistemas externos usando JavaScript.

Conteúdo

Lista de eventos

O widget registra eventos do navegador quando um assinante ou o próprio chat ao vivo realiza uma ação, como iniciar um chat, enviar uma mensagem ou clicar em um botão.

Cada evento tem seu próprio nome e um conjunto específico de dados. Todos incluem os campos padrão listados abaixo, e alguns adicionam mais informações sobre ações do assinante ou do chatbot.

Evento	Quando é acionado	Campos
`spLiveChatLoaded`	Um assinante iniciou um chat no navegador.	`timestamp`, `visitorId`, `phone`
`spLiveChatOpened`	Um assinante abriu o widget manualmente. Não é acionado quando o chat abre automaticamente.	`timestamp`, `visitorId`, `phone`, `chatId`, `subscriberId`.
`spLiveChatClosed`	Um assinante fechou o widget.	`timestamp`, `visitorId`, `phone`, `chatId`, `subscriberId`.
`spGreetingButtonClicked`	Um assinante clicou em um botão da saudação ou do menu do chat ao vivo.	Objeto `button`, que inclui: `text`, `type`, `id`, `payload`.
`spChatInitiated`	Um assinante enviou a primeira mensagem.	Campo `message` com o texto da primeira mensagem.
`spMessageSent`	Um assinante enviou uma mensagem.	Para mensagens de texto: `{ message, type: 'text' }`. Para anexos: `{ fileName, fileType, type: 'file' }`.
`spMessageReceived`	O chat ao vivo enviou uma mensagem em um fluxo ou um atendente respondeu.	`message`, `type`, `quick_replies`, `url`.

Cada evento inclui os seguintes campos:

`timestamp`	Horário do evento no formato ISO 8601, como em `2025-11-10T14:32:05WITH`.
`visitorId, phone`	ID do visitante. Esses campos podem não aparecer caso o visitante ainda não tenha interagido com o chat ao vivo ou não tenha fornecido seus dados.
`chatId`	ID do projeto ativo, enviado quando o assinante inicia um chat.
`subscriberId`	ID do assinante atribuído após o registro. Esses campos também podem não aparecer se não houver interação prévia.

Transmissão de eventos

Para confirmar que os eventos do widget estão funcionando, você pode testá-los no navegador. Adicione o seguinte script a qualquer página onde o chat ao vivo esteja instalado:

<script>
  document.addEventListener('spMessageSent', (event) => {
    console.log('[LiveChat] visitor message sent', event.detail);
  });

  document.addEventListener('spMessageReceived', (event) => {
    console.log('[LiveChat] operator message received', event.detail);
  });
</script>

Você pode substituir o bloco console.log pelo código da sua integração ou ferramenta de análise. Depois disso, todos os eventos do chat ao vivo aparecerão no console do navegador.

Rastreamento de eventos no Google Analytics 4 via GTM

O widget envia eventos do chat ao vivo para window.dataLayer. Você pode adicionar eventos personalizados no Google Tag Manager e enviá-los para o Google Analytics 4.

No GTM, crie um gatilho de evento personalizado para o evento de chat ao vivo que deseja rastrear, como spMessageSent ou spLiveChatOpened.

Acesse Gatilhos e clique em Novo. Em seguida, clique em Escolher um tipo de gatilho para iniciar a configuração. Em Outros, selecione Evento personalizado.

No campo Nome do evento, insira spMessageSent e clique em Salvar. Insira o mesmo nome para o gatilho e clique em Salvar novamente.

Os nomes dos eventos personalizados no GTM diferenciam maiúsculas de minúsculas. Use exatamente os nomes dos eventos listados.

Crie uma tag de evento do Google Analytics 4 que seja acionada por esse gatilho.

Acesse Tags e clique em Novo. Clique em Escolher um tipo de tag para iniciar a configuração. Em Destaques, selecione Google Analytics.

Clique em Google Analytics: Evento do GA4. No campo ID de medição, insira o seu ID do Google Analytics 4, como G-ABC12D3E4F. Em Nome do evento, insira chat_message_sent.

Role até Acionamento e clique em Escolher um gatilho para definir quando essa tag será disparada. Selecione o gatilho criado para spMessageSent e clique em Salvar. Insira o nome da tag e clique em Salvar novamente.

Para aplicar o novo gatilho e a nova tag, clique em Enviar. Na janela pop-up, clique em Publicar. Se necessário, insira um nome e uma descrição para o contêiner. Em seguida, clique em Continuar.

Para testar a configuração, abra o seu site, envie uma mensagem no chat ao vivo e execute window.dataLayer no console do navegador. Você deverá ver entradas em que o valor de event seja spMessageSent, além de outros eventos de chat ao vivo configurados.

Para confirmar a configuração, acesse o Google Analytics. Abra os Relatórios em tempo real e verifique se o Google Analytics 4 está recebendo o evento chat_message_sent.