4.4 - Evento WebChat

Com essa integração, você pode ter controle total sobre o chat do seu website através do Google Tag Manager. Você será capaz de abrir, fechar ou esconder o chat, 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 30 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 no ambiente, pois a aba de Tags é liberada.

1. 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, em HTML insira o script fornecido para o Canal WebChat no Conecta e como Acionamento deve ser selecionado o Initialization - All Pages. Depois, clique em Salvar.

2. 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 no site. Para realizar a configuração, acesse primeiramente a aba Variáveis e clique no botão “Nova”, selecione o ícone de lápis superior e escolha 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.

3. 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. 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.

4. 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:

1. Na aba fluxo de atendimento, navegue para a seção de edição.

2. Em seguida, selecione o componente "Evento Webchat" disponível na lista de componentes.

3. Insira as informações relevantes que você deseja que sejam enviadas para o Tag Manager na caixa de texto do componente.

4. 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:

<script type="text/javascript">
    (function(s, z, c, h, a, t) {
        s.webchat = s.webchat || function() {
            (s.webchat.q = s.webchat.q || []).push(arguments);
        };
        t = z.createElement(c),
        a = z.getElementsByTagName(c)[0]; t.async = 1;
        t.src = 'https://domain.sz.chat/webchat/v2/webchat.js'; 
        a.parentNode.insertBefore(t, a);
        s.webchat('cid', '615daaae7a90be00117c5930');
        s.webchat('host', h);
    })(window, document, 'script', 'https://domain.sz.chat');
    
    window.dataLayer = window.dataLayer || [];
    
    window.addEventListener("message", function(event) {
        if(event.origin !== 'https://domain.sz.chat') return;
        
        if(event.data.action === 'chat-event'){
            window.dataLayer.push({
                event: event.data.action,
                message: event.data.message
            });
        }
    }, false);
    
    window.webchat('afterOpen', function(event) {
        window.dataLayer.push({ chat_status: 'aberto' });
    });
</script>

Detalhes do script

1. Obrigatório: declaração da lista de objetos, contendo variáveis e eventos do Tag Manager.

   window.dataLayer = window.dataLayer || [];

2. Capturar os eventos do fluxo e enviá-los para o Google Tag Manager.
   

   window.addEventListener("message", function(event) {
       if(event.origin !== 'https://hub.conecta.com.vc') return;//origem
   
       if(event.data.action === 'chat-event'){//ação do componente
           window.dataLayer.push({//envio dos eventos
               event: event.data.action,
               message: event.data.message
           });
       }
   }, false);

Eventos automáticos

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

window.webchat('afterOpen', function(event) {
    window.dataLayer.push({ chat_status: '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:

window.webchat('nome-do-evento')

Exemplo:

<script>
    window.webchat('onReady', function(event) {
      console.log('O chat está pronto');
    })

    window.webchat('afterClose', function(event) {
      console.log('O chat fechou');
    })
</script>

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

s.webchat('host', h);
s.webchat('szf_custom_var', 'custom value');