4.4 - Google Tag Manager

Com essa integração, você pode ter controle total sobre o chat do seu website através do Google Tag Manager, um gerenciador de códigos. Você será capaz de abrir, fechar ou esconder o ChatBOT, tudo isso por meio de regras bem definidas. Além disso, com o componente "Evento Webchat", você poderá utilizar o Conecta Leucotron como um gatilho para ações dentro do Tag Manager.

Neste artigo, você aprenderá como inserir o script de ativação no seu site, bem como configurar o chat para abrir automaticamente após 10 segundos de navegação. Além disso, será mostrado como preencher campos adicionais com informações relevantes vindas do seu site.

Essas são apenas algumas das inúmeras possibilidades oferecidas por essa integração.

Google Tag Manager

Acesse Tag Manager e faça login com uma Conta Google. Para os próximos passos, é necessário já possuir uma conta para que as abas de configuração sejam liberadas.

Adicionar o script de ativação no site

Para adicionar o script do canal WebChat no site, clique na aba Tags e depois no botão Nova. Escolha o tipo de Tag para HTML personalizado, insira o script em HTML fornecido para o Canal WebChat no Conecta e como Acionamento selecione o Initialization - All Pages. Depois, clique em Salvar.

Imagem 1 - Criar Tag de Ativação

Imagem 2 - Preenchendo o HTML

Abrir chat após navegação do usuário

Esse recurso permite a abertura do ChatBOT no site após determinado tempo de navegação do usuário. Para realizar a configuração, acesse primeiramente a aba Variáveis e clique no botão Nova, depois escolha a opção Variável de camada de dados.

Após definição da variável, é necessário também criar um acionador por tempo. Selecione a aba referente, clique em “Novo” e na configuração do acionador escolha Timer. No campo intervalo, defina o tempo em milissegundos para a execução do componente. Em limite, determine quantas vezes o acionador deverá ser executado durante a navegação de um usuário e na etapa de condições, escolha conforme sua preferência.

Adicione uma nova tag e no campo HTML insira o código abaixo. Depois, na etapa de Acionadores, selecione o Timer criado.

<script>
  if ({{Chat Foi Aberto}} !== 'true') {
    window.webchat.chatOpen(); 
  }
</script>

Por fim, escolha a tag criada anteriormente com o script para ativação do WebChat e adicione o seguinte código, antes do fechamento do </script> e salve a modificação.

window.webchat('afterOpen', function() {
    window.dataLayer.push({ webchatHasOpen: 'true' });
});

Se assim configurado para seu site, após 10s de navegação na página o usuário receberá o Chatbot para interação.

Enviar dados do site para o cadastro do contato

Aprenda a como configurar o uso e envio de dados para os campos adicionais do contato no Conecta Leucotron por meio do chat iniciado no canal WebChat.

Inicialmente, é necessário alterar o script de ativação do WebChat na aba de Tags e inserir uma nova linha no código contendo o nome do campo adicional - campo deve ser criado antes na plataforma. Exemplo:

s.webchat('szf_pagina_atual', {{Page Path}});

Dessa forma ao enviar ou visualizar as modificações e o chat for iniciado, a informação da página será exibida no campo adicional do contato.

Encaminhar dados do fluxo para o Tag Manager por meio do Evento WebChat

Este recurso oferece a funcionalidade de enviar eventos configurados no fluxo, bem como eventos automáticos, diretamente para o Google Tag Manager.

Para adicionar o componente "Evento WebChat" ao seu fluxo, siga os seguintes passos:

Na aba fluxo de atendimento, navegue para a seção de edição.
Em seguida, selecione o componente "Evento WebChat" disponível na lista de componentes.
Insira as informações relevantes que você deseja que sejam enviadas para o Tag Manager na caixa de texto do componente. Exemplo: variável {{PROTOCOL}}
Posicione o evento no local desejado dentro do fluxo para que ele seja acionado conforme sua preferência.

Após essa configuração inicial, no Google Tag Manager modifique o script de ativação para capturar os eventos enviados pelo componente Evento WebChat:

Detalhes do script

Obrigatório: declaração da lista de objetos, contendo variáveis e eventos do Tag Manager.
Capturar os eventos do fluxo e enviá-los para o Google Tag Manager.

Eventos automáticos

No exemplo abaixo, o script está definido para capturar quando o chat for aberto:

Eventos

Após o carregamento do script, alguns eventos ficarão disponíveis e para capturar os eventos é necessário acessar o método de instância:

Exemplo:

Nome do evento	Acionador
onReady	Quando o chat é carregado
beforeOpen	Antes de abrir o chat
onOpen	Ao abrir o chat
afterOpen	Após abrir o chat
beforeClose	Antes de fechar o chat
onClose	Ao fechar o chat
afterClose	Após fechar o chat

Parâmetros disponíveis antes do carregamento do chat via script

Option	Type	Default	Description
debug	Boolean	false	Exibe informações de debug no console.
locale	String	pt-BR	Linguagem de exibição.
cid	String	null	ID do canal. Obrigatório por script ou por URL.
button_label	String	null	Texto que vai aparecer no balão do lado do botão do chat e que tem prioridade em relação a configuração do texto no canal (Disponível apenas no modo janela).
fid	String	null	ID do fluxo que o chat será iniciado, se vazio inicia no fluxo padrão.
z-index	Integer	2147483640	Altera a ordem de exibição do elemento na página.
szf_name	String	null	Definir nome do usuário do chat.
szf_email	String	null	Definir e-mail do usuário do chat.
szf_{CAMPO}	String	null	É possível definir qualquer campo adicional usando o prefixo `szf_` + nome do campo em minúsculo, ex.: `szf_telefone` (Só é permitido utilizar letras e underlines, um campo adicional deve ser criado no Conecta com as mesmas características, removendo apenas o ‘szf_’).

Voltar para Manual de Configuração do Conecta

Voltar para Tela Administrativa

Voltar para Fluxo