Ativação Canal de On Site Message

Introdução

Nessa documentação vamos aprender como integrar a Inngage em um site para habilitar o canal On Site Message.

Esse canal permite exibir mensagens diretamente dentro do site enquanto o usuário navega.

1. Preparação do ambiente

O primeiro passo para integrar o On Site Message é preparar o ambiente Web dentro da plataforma Inngage.

É necessário que já esteja criado um App Web dentro da Inngage.

Esse App Web será responsável por centralizar toda a integração do site com a plataforma.

Durante a criação do App, selecione o canal Web e defina o nome do ambiente.

Após criar o App Web, é importante revisar as configurações iniciais e liberar acesso para os usuários que participarão da operação.

Veja aqui a documentação para liberação de acessos. 

Normalmente são incluídos:

• o time técnico responsável pela integração

• o time de marketing ou CRM que utilizará o canal
  

• os responsáveis pela operação da plataforma.
  

2. Ativação do On Site Message

Com o ambiente criado, o próximo passo é ativar o canal dentro da plataforma.

Vá até  Plataformas → Web Push

Depois clique em "Adicionar URL" do site que será integrado

Ative as funcionalidades de:

Caso o site tenha formulário, pode ativar a flag de "Ativar Captura de Forms". 

3. Estruturar Eventos e Dados de Eventos

Após a ativação do On Site na plataforma, o próximo passo é realizar o cadastro dos eventos e seus respectivos atributos que serão utilizados para segmentação.

Para adicionar os eventos, siga o caminho abaixo na plataforma:

Configurações do App → Estrutura de Dados → Eventos → Novo Evento

Nesta etapa devem ser cadastrados:

• Nome do evento (add_shipping_info)

• Atributos do evento (ex.: id do produto, nome do produto, categoria, valor, etc.)

• Tipo de dado de cada atributo (string, date, float, boleean) 

Esses eventos precisam estar previamente cadastrados para que os dados enviados pelo site sejam reconhecidos e armazenados corretamente pela plataforma.

Caso o ambiente ainda não possua eventos mapeados, é possível utilizar como base a estrutura padrão disponibilizada pela Inngage.

Para isso, siga o caminho:

Geral → Importar Configurações de um App → Escolha o App de Origem

Escolha VTEX Sample e importe os dados de Eventos e dados de Eventos depois só clicar em Importar

O próximo passo é ir até o GTM.

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

A forma mais comum de implementar o On Site Message é utilizando o Google Tag Manager.

Com acesso ao GTM, o time técnico poderá subir o script da Inngage:

Além do script base é necessário implementar as variáveis abaixo:

1. Inngage - app_token: Variável que armazenará o token da aplicação Inngage.

JavaScript

function() {

  return localStorage.getItem('app_token');

}

2. Inngage - identifier: Variável que contém o identificador do usuário. Este valor será usado para identificar o usuário que clicou no banner.

JavaScript

function() {

  return localStorage.getItem('identifier');

}

3. Inngage - registration: Variável que contém o registro do usuário. Se o identificador não estiver disponível, o valor desta variável será usado para identificação.

JavaScript

function() {

  return localStorage.getItem('registration');

}

4. Inngage - URL: Variável que deve conter a URL do serviço Inngage. Esta variável será usada para construir a URL de requisição.

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

Depois do Script Base e as variáveis implementadas o próximo passo é, inserir as tags dos eventos. 

5. Validação da integração

Depois que o script estiver configurado no GTM, é hora de validar a integração.

A primeira etapa é utilizar o modo Preview do Google Tag Manager.

Esse modo permite simular a navegação no site e verificar se as tags estão sendo disparadas corretamente.

Durante esse teste é importante observar:

• se o script da Inngage está carregando no site
  

• se as tags estão disparando corretamente
  

• se não existem erros no console do navegador.
  

Dentro do seu navegador:

1. Clique com o botão direito
2. Selecione Inspecionar
3. Ao abrir o console selecione "Local storage",  e busque pelo seu site
4. Após isso,  copie o valor no campo "identifier"
5. Depois na plataforma da Inngage vá em "Todo Público"  e cole esse identificador
6. Depois no site, navegue e veja se as tags de eventos - se houver como add to cart, begin checkout,  serão disparadas na plataforma da Inngage

6. Publicação e Go Live

Depois que os testes forem concluídos com sucesso e as tags forem disparadas, o container do Google Tag Manager pode ser publicado.

Com a publicação realizada, o script da Inngage passa a rodar em produção no site e começa a capturar os usuários.

A partir desse momento, o canal On Site Message já estará pronto para uso.