Page Comparison

...

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.

...

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

...

3. Enviar dados do site para o cadastro do contato

...

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

...

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. Exemplo: variável {{PROTOCOL}}

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://domainhub.conecta.szcom.chatvc/webchat/v2/webchat.js'; 
        a.parentNode.insertBefore(t, a);
        s.webchat('cid', '615daaae7a90be00117c5930');
        s.webchat('host', h);
    })(window, document, 'script', 'https://domainhub.conecta.szcom.chatvc');
    
    window.dataLayer = window.dataLayer || [];
    
    window.addEventListener("message", function(event) {
        if(event.origin !== 'https://domainhub.conecta.szcom.chatvc') 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.

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

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

   Code Block
   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:

...

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

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

...

↩ Voltar para Manual de Configuração do Conecta

↩ Voltar para Tela Administrativa

↩ Voltar para Fluxo