Integração de Workflow

Introdução

O Workflow permite a automação de envios de e-mails e outras comunicações com base em eventos e comportamentos do usuário. Para que o Workflow funcione corretamente, é necessário configurar listas, eventos e a integração com scripts no site.

Passo 1 - Criar uma Lista

A lista é essencial para armazenar os dados captados pelo script e garantir que os eventos sejam acionados corretamente.

1. Acesse o painel e navegue até Gerenciar Listas.

2. Clique em Criar Lista e defina um nome identificador.

3. Adicione os campos necessários arrastando para a área designada.

4. Caso precise de um novo campo, clique em Criar novo tipo.

5. Configure os campos com Tipo: Texto e limite de 250 caracteres para melhor compatibilidade.

6. Certifique-se de que os nomes dos campos estão idênticos aos utilizados no formulário do site. Letras maiúsculas, espaços ou caracteres especiais podem impedir a captação dos dados corretamente.

7. Salve a lista para prosseguir.

Para um passo a passo mais detalhado, acesse o artigo Subir lista de e-mail.

Passo 2 - Criar um Evento

Os eventos determinam quando o Workflow será acionado, como no caso de um novo cadastro ou uma compra concluída.

1. No menu do painel, acesse Eventos.

2. Clique em Criar Novo Evento.

3. Selecione a condição de gatilho do evento (ex.: Novo Cadastro, Compra Confirmada, etc.).

4. Configure as regras e a sequência de disparos (e-mail, SMS, push notification).

5. Salve o evento.
   
   Para um passo a passo mais detalhado, acesse o artigo Workflow Transacional.

Passo 3 - Criar e Implementar o Script

A implementação do script é necessária para capturar dados do formulário e enviá-los ao Workflow.

Exemplo de Script:

<script src="//i.btg360.com.br/wf.js" type="text/javascript"></script>
<script type="text/javascript">
    function validateEmail(email) {
        var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(String(email).toLowerCase());
    }

    function dispatchForm() {
        var email = document.querySelector("#form-email").value;
        if (!validateEmail(email)) return false;

        var token = 'SEU_TOKEN_AQUI';
        var lista = 'Lista_Cadastros';
        var evento = 'Novo_Cadastro';

        var now = new Date();
        var date = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate();
        
        try {
            lc.sendData({
                evento: evento,
                nm_email: email,
                lista: {
                    nm_lista: lista,
                    atualizar: "1",
                    dt_cadastro: date,
                    origem: "Newsletter"
                }
            });
        } catch (e) {}
    }

    document.querySelector("#submit-btn").addEventListener('click', dispatchForm);
</script>

⚠️ Importante: Certifique-se de que os nomes dos campos utilizados no script, como lista e evento, correspondem exatamente aos nomes cadastrados na plataforma. Diferenças como letras maiúsculas, espaços ou caracteres especiais podem impedir o envio dos dados.

Particularidade para VTEX - Cadastro Completo

Para clientes que utilizam a plataforma VTEX, o cadastro completo possui uma particularidade. Diferente de outras plataformas onde um formulário é preenchido diretamente, na VTEX é necessário validar um código enviado por e-mail antes do acesso ao formulário.

Adaptação necessária:

• Criar uma tag específica para captura do e-mail do usuário antes da confirmação do cadastro.

• Armazenar o e-mail no localStorage junto com a informação do opt-in.

• No momento de envio do cadastro completo, recuperar os dados armazenados e incluí-los no envio.

Exemplo de código para armazenar e recuperar os dados no localStorage:

🚨 Importante: Essa abordagem é essencial para evitar a perda dos dados do e-mail antes da finalização do cadastro.

Exemplo Geral de Script

<script src="//i.btg360.com.br/wf.js" type="text/javascript"></script>
<script type="text/javascript">
    function validateEmail(email) {
        var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(String(email).toLowerCase());
    }

    function dispatchForm() {
        var email = document.querySelector("#form-email").value;
        if (!validateEmail(email)) return false;

        localStorage.setItem("user_email", email);
        localStorage.setItem("user_optin", "true");

        var token = 'SEU_TOKEN_AQUI';
        var lista = 'Lista_Cadastros';
        var evento = 'Novo_Cadastro';

        try {
            lc.sendData({
                evento: evento,
                nm_email: localStorage.getItem("user_email"),
                optin: localStorage.getItem("user_optin"),
                lista: {
                    nm_lista: lista,
                    atualizar: "1",
                    dt_cadastro: new Date().toISOString().split('T')[0],
                    origem: "Newsletter"
                }
            });
        } catch (e) {}
    }
    
    document.querySelector("#submit-btn").addEventListener('click', dispatchForm);
</script>

Conclusão

Seguindo esses passos, você garantirá que os dados do formulário sejam capturados corretamente e enviados ao Workflow para disparo automatizado de e-mails e outras ações. Para testar a configuração, preencha o formulário e verifique se os eventos estão sendo registrados no painel da plataforma.

Definição das Funções

• validateEmailNews(email): Realiza a validação do e-mail inserido no formulário. Embora não seja obrigatório, seu uso é altamente recomendado para garantir que apenas endereços de e-mail válidos sejam submetidos.

• formVerifiedNews(): Verifica se todos os campos obrigatórios do formulário foram preenchidos antes de acionar o Workflow. Essa verificação impede o disparo de eventos caso alguma informação essencial esteja ausente. É uma boa prática incluir essa validação, principalmente quando o formulário exige preenchimento obrigatório para envio.

• dispatchNews(): Responsável por coletar os dados inseridos no formulário e enviá-los ao Workflow, garantindo que as informações sejam transmitidas corretamente.

• setInterval(function ()...): Define a lógica para acionar o disparo do evento. Aqui, configuramos a detecção do clique no botão de envio do formulário, garantindo que o processo de integração ocorra de maneira automatizada sempre que o usuário submeter as informações.

Exemplos de Captação do Campo

Para identificar e capturar um campo específico do formulário, siga este processo:

1. Clique com o botão direito sobre o campo desejado.
2. Selecione a opção "Inspecionar" no menu que será exibido.
3. O navegador abrirá o DevTools (ferramenta de inspeção), destacando o código correspondente ao campo selecionado.

A partir desse ponto, você pode utilizar métodos mais estáveis para referenciar o campo dentro do script, como getElementById, getElementsByName ou a seleção por class, garantindo maior confiabilidade mesmo em caso de alterações na estrutura do HTML.

Isso abrirá o DevTools do navegador, destacando diretamente o código correspondente ao campo selecionado.

Query Selector: Este é um dos métodos mais práticos e amplamente utilizados para capturar elementos na página.

Como obter o seletor correto:

1. Com o DevTools aberto, clique com o botão direito sobre o campo desejado.
2. Selecione a opção "Copiar" > "Copiar caminho JS".
3. O valor copiado terá um formato semelhante a este:

Esse comando pode ser utilizado para selecionar o elemento no código e interagir com ele diretamente via JavaScript.

Métodos de Seleção de Elementos

Além do Query Selector, existem outros métodos para capturar elementos específicos na página:

• getElementById: Se o campo possuir um id, pode ser acessado diretamente pelo seu identificador.

  javascript

   

  document.getElementById("email")

  Exemplo: Captura um campo de e-mail identificado por id="email".

• getElementsByName: Para elementos que possuem um atributo name, é possível capturá-los por meio dessa função.

  javascript

   

  document.getElementsByName("email")[0]

  Observação: Como getElementsByName retorna uma coleção de elementos, é necessário especificar o índice [0] para selecionar o primeiro elemento encontrado.

• getElementsByClassName: Caso o campo possua uma class, ele pode ser capturado por meio deste método.

  javascript

   

  document.getElementsByClassName("email")[0]

  Nota: Assim como getElementsByName, essa função retorna um conjunto de elementos, por isso o uso do índice [0] pode ser necessário.

🚨 Importante: Para clientes que utilizam a plataforma VTEX, o método querySelector pode não funcionar corretamente. Nesses casos, recomenda-se testar as alternativas mencionadas acima.

Passo 4 - Implementação no Google Tag Manager (GTM)

Para facilitar a implementação do script, é possível publicá-lo via Google Tag Manager.

1. Acesse sua conta do Google Tag Manager através do link https://tagmanager.google.com/#/home

2. Clique no container da sua loja.
   

3. Clique em Nova Tag.
   

4. Defina um nome identificador para a tag.
   

5. Escolha a opção HTML Personalizado.
   

6. Cole o script criado anteriormente no campo de código.
   

7. Em Acionamento, selecione All Pages ou configure para páginas específicas.
   

8. Salve a tag e publique as alterações no GTM.
   

Passo 5 - Configuração de Triggers no GTM

A configuração da trigger dependerá da localização do formulário dentro do site. Para definir corretamente, acesse a seção de acionadores no Google Tag Manager e clique em "Choose a trigger to make this tag fire...".

 

Criar uma trigger:

Clique no ícone de adição (+) no canto superior direito, conforme mostrado na imagem anterior. Isso abrirá uma nova trigger para configuração. Em seguida, selecione “Choose a trigger type to begin setup...”.

A princípio teremos as seguintes opções:

Geralmente, utilizamos a trigger Window Loaded, mas a escolha vai depender da estrutura específica.

Exemplos:

• Newsletter: Usamos a trigger All Pages, que é nativa do próprio GTM.
• Landing Pages personalizadas: Para páginas como a de Black Friday, a URL sempre terá um parâmetro personalizado. Exemplo: https://allin.com.br/black-friday.

Com isso em mente, para criar uma trigger, siga os passos abaixo:
Após acessar a opção Criar uma trigger, selecione o modo Window Loaded. Em seguida, marque a opção Some Window Loaded Events.

Nesta etapa, selecionamos a primeira coluna como Page URL e, na última coluna, inserimos o parâmetro personalizado, que, neste caso, será black-Friday.

Feito isso, basta definir um nome para a trigger, seguindo o padrão já utilizado, e aplicá-la. Isso fará com que a trigger seja associada à nova tag que está sendo criada.

 

Conclusão

Seguindo esses passos, você garantirá que os dados do formulário sejam capturados corretamente e enviados ao Workflow para disparo automatizado de e-mails e outras ações. Para testar a configuração, preencha o formulário e verifique se os eventos estão sendo registrados no painel da plataforma.

Suporte e Dúvidas

Se precisar de ajuda, entre em contato com nosso time de suporte pelo e-mail atendimento-xp@wake.tech ou via WhatsApp: +55 11 97184-2450.

A funcionalidade de WhatsApp na Wake foi projetada para oferecer uma comunicação eficiente e personalizada, sempre seguindo as diretrizes do Meta. Utilize esse canal para fortalecer o relacionamento com seus clientes e potencializar seus resultados! 🚀