O On Site Message permite exibir mensagens diretamente dentro do site enquanto o usuário navega. Este guia cobre a integração completa: preparação do ambiente, ativação, estrutura de eventos, implementação via Google Tag Manager e validação.

1. Preparação do ambiente

É necessário ter um App Web criado na Inngage — ele centraliza toda a integração do site com a plataforma.

  1. Durante a criação do App, selecione o canal Web e defina o nome do ambiente.
  2. Revise as configurações iniciais e libere o acesso para os usuários da operação — normalmente o time técnico da integração, o time de marketing/CRM que usará o canal e os responsáveis pela operação. (Veja o artigo "Colaboradores e permissões".)

2. Ativação do canal

  1. Vá até Plataformas → Web Push.
  2. Clique em Adicionar URL e informe o site que será integrado.
  3. Ative a funcionalidade de On Site Messages.

💡 Dica de implantação: ative os logs do script para identificar problemas durante a implementação — depois eles podem ser desabilitados. Se o site tiver formulários, ative também a flag "Ativar Captura de Forms".

3. Estruturar eventos e dados de eventos

Cadastre os eventos e atributos que serão usados para segmentação, em Configurações do App → Estrutura de Dados → Eventos → Novo Evento:

  • Nome do evento (ex.: add_shipping_info)
  • Atributos (ex.: id do produto, nome, categoria, valor)
  • Tipo de dado de cada atributo (string, date, float, boolean)

Os eventos precisam estar cadastrados previamente para que os dados enviados pelo site sejam reconhecidos e armazenados.

Sem eventos mapeados ainda? Use a estrutura padrão da Inngage: Geral → Importar Configurações de um App → VTEX Sample, importe Eventos e Dados de Eventos e clique em Importar.

4. Implementação técnica via Google Tag Manager

A forma mais comum de implementar é via GTM. O time técnico deve subir o script base da Inngage (que conecta o site à plataforma) e criar as variáveis:

1. Inngage - app_token — token da aplicação:

function() {
  return localStorage.getItem('app_token');
}

2. Inngage - identifier — identificador do usuário (usado para identificar quem clicou no banner):

function() {
  return localStorage.getItem('identifier');
}

3. Inngage - registration — registro do usuário (usado quando o identifier não está disponível):

function() {
  return localStorage.getItem('registration');
}

4. Inngage - URL — URL do serviço de tracking:

https://api.inngage.com.br/v1/pixelTracking/index.php

Depois do script base e das variáveis, insira as tags dos eventos conforme o que já está mapeado no site (consulte a documentação de GTM para exemplos).

5. Validação da integração

  1. Use o modo Preview do GTM para simular a navegação e verificar se as tags disparam corretamente. Observe: o script da Inngage carregando, as tags disparando e a ausência de erros no console.
  2. No navegador: botão direito → Inspecionar → aba Application/Local Storage → busque pelo seu site → copie o valor do campo identifier.
  3. Na Inngage, vá em Todo Público e cole o identificador para localizar o usuário.
  4. Navegue pelo site e confirme que os eventos (ex.: add to cart, begin checkout) aparecem na plataforma.

6. Publicação e Go Live

Com os testes concluídos, publique o container do GTM. O script da Inngage passa a rodar em produção, capturando os usuários — e o canal On Site Message está pronto para uso. 🎉