Com essa integração é possível abrir, fechar ou esconder o chat, por meio de regras definidas dentro do Google Tag Manager. E com o componente "Evento Webchat" você pode realizar o processo inverso, utilizando o SZ.chat como gatinho para ações dentro do Tag Manager.

Nesse artigo você aprenderá a inserir o script de ativação no site, a abrir o chat automaticamente após 30 segundos de navegação em seu website e como preencher campos adicionais com informações vindas do site. 

Essas são apenas algumas das diversas possibilidades trazidas por esta integração.

1 - Adicionar o script de ativação no site

• Acessar a aba de Tags;

• Clicar em novo;

• Na configuração de Tag, escolha a opção HTML Personalizado; 

• No campo HTML cole o script de ativação gerado pelo SZ.chat;
• No acionamento, escolha a opção que mais lhe atenda (Nesse exemplo usaremos a opção: Initialization - All Pages);

• Atribua um nome para a Tag e clique em Salvar. 

Ao acessar o website, o Webchat será exibido.

2 - Abrir o chat automaticamente após certo tempo do usuário navegando pelo website.

Criar uma variável para controlar a abertura do chat

• Acessar a aba de Variáveis;

• No card Variáveis definidas pelo usuário, clique em Novo;

• Na configuração da variável, escolha a opção Variável da camada de dados;

• No campo ‘Nome da variável da camada de dados’, escolha o nome da variável que será usada pelo Webchat. (Nesse exemplo usaremos o nome webchatHasOpen);

• Defina o nome (Nesse exemplo usaremos o nome Chat Foi Aberto);

• Clique em salvar.

Criar um acionador por tempo

• Acessar a aba Acionadores;

• Clique em novo;

• Na configuração do acionador, escolha a opção Timer;

• No campo intervalo, defina o tempo para que o acionador seja executado. (Valor em milisegundos);

• No campo limite, escolha quantas vezes o acionador será executado;

• Na etapa de condições, escolha a que mais lhe atenda (Nesse exemplo usaremos o filtro de Page Path, ou seja, o acionador será executado em todas a páginas do site);

• Defina um nome e clique em salvar.

Criar uma tag para abrir o chat

• Acessar a aba de Tags;

• Clicar em novo;

• Na configuração de Tag, escolha a opção HTML Personalizado;

• No campo HTML adicione o seguinte código:
  
  

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

  
  

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

4 - Enviar informações do fluxo do SZ.chat para o Tag Manager utilizando o componente evento webchat

Este recurso possibilita o envio de eventos configurados no fluxo e eventos automáticos para o Google Tag Manager.

Adicionar o componente evento webchat no fluxo

Quando o cliente passa pelo componente a informação contida na caixa de texto será enviada para o Tag Manager para ser usada conforme a sua preferência.

1 - Em fluxo

2 - Selecione o componente evento webchat

3 - Adicione a informação da sua preferência da caixa de texto

4 - Posicione o evento no local da sua preferência

Modificar o script de ativação para escutar os eventos enviados pelo componente do fluxo Evento Webchat.

Exemplo:

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

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

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

• linha 2: Verificando a origem da mensagem, no exemplo, se a URL de origem não corresponder a ‘https://domain.sz.chat’, o script não realiza nenhuma ação.
• linha 4: Verificando se a ação corresponde ao componente de evento do fluxo (chat-event).
• linha 5: Envio dos eventos recebidos para o Tag Manager.

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);

Eventos automáticos:

No exemplo abaixo, o script está definido para ouvir quando o chat for aberto.

window.webchat('afterOpen', function(event) {
    window.dataLayer.push({ chat_status: 'aberto' });
});

Após o carregamento do script alguns eventos ficarão disponíveis. Para ouvir os eventos é necessário acessar o método de instância:

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

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

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

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