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>
- Na etapa de acionadores, escolha o acionador de tempo criado anteriormente;
- Escolha o nome da Tag e clique em salvar.
Modificar script de ativação para preencher a variável
- Edite a Tag criada com o script de ativação do Webchat;
- Adicione o seguinte código, antes do fechamento do script
</script>
:window.webchat('afterOpen', function() { window.dataLayer.push({ webchatHasOpen: 'true' }); });
- Salve as modificações;
3 - Enviar dados do site para o cadastro do contato
Nessa etapa iremos enviar alguns dados do site para campos adicionais no cadastro do contato
Enviar o caminho da página em que o chat foi iniciado
Será necessário alterar o script de ativação do Webchat.
- Abra a Tag que contem o script;
- Adicione uma nova linha do código, contendo o nome do campo adicional:
Exemplo: para adicionar o valor no campo adicional {{PAGINA_ATUAL}}
é necessário adicionar a seguinte linha:
s.webchat('szf_pagina_atual', {{Page Path}});
Obs: Para que o dado seja recebido corretamente pela plataforma, é preciso cadastrar o campo adicional.
- Salve as modificações
Agora 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.