Integração com Empathy

8. Clique em    Adicionar um novo campo para criar cada um dos campos personalizados e complete as informações:

• Crie um campo com o nome "PriceFrom" e o ID "priceFrom" do tipo Decimal para coletar o delimitador de preço mínimo.
• Crie um campo com o nome "PriceUpTo" e o ID "priceUpTo" do tipo Decimal para coletar o delimitador de preço máximo.

9. Clique em   Salvar.

PASSO 3: Criação do workflow para ativar o evento durante a navegação do contato

(Nesta seção, vamos criar o workflow que capturará a atividade do contato durante sua navegação pela busca do Empathy dentro do eCommerce. Esta atividade será capturada por meio de um script que será inserido no eCommerce usando um inline).

10. Acesse Workflows e crie um novo workflow em branco.

11. Na configuração do nó "Início", na seção Selecione uma limitação, escolha Toda a minha lista e, em Selecione uma fonte de dados marque Todos os existentes e os novos.

12. Adicione o nó disparador "Ao visitar página" para que o workflow seja ativado quando um contato visitar o site.

13. Acesse sua configuração e, na aba Limitações, remova todas as limitações.

14. Adicione o nó "Enviar conteúdo web" para inserir o Script que verificará a atividade do contato no Empathy.

15. Acesse sua configuração e crie um novo conteúdo do tipo Inline.

16. Dentro do editor de conteúdo, adicione um componente do tipo HTML.

17. Edite-o, copiando e colando o seguinte código:

<script>
  (function () {
  var searchEventAlias = "empathy-search";
  var tempQuery = null;
  var tempPriceFrom = null;
  var tempPriceUpTo = null;

  function sendConnectifEventsWhenReady(events) {
    if (
      window.connectif &&
      window.connectif.managed &&
      window.connectif.managed.isInitialized()
    ) {
      window.connectif.managed.sendEvents(events);
    } else {
      document.addEventListener(
        "connectif.managed.initialized",
        function onConnectifInitialized() {
          window.connectif.managed.sendEvents(events);
        },
        { once: true }
      );
    }
  }

  function debounce(func, timeout) {
    var timer;
    return function (data) {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function () {
        func(data);
      }, timeout);
    };
  }

  function isInterfaceXDefined() {
    return !!window.InterfaceX;
  }

  function whenInterfaceXReady() {
    if (isInterfaceXDefined()) {
      return Promise.resolve();
    }
    var numberOfChecks = 50;
    var count = 0;
    return new Promise((resolve, reject) => {
      function check() {
        setTimeout(function () {
          if (isInterfaceXDefined()) {
            resolve();
          } else {
            count++;
            if (count === numberOfChecks) {
              reject(new Error("InterfaceX cannot found after timeout"));
            } else {
              check();
            }
          }
        }, 100);
      }
      check();
    });
  }

  whenInterfaceXReady()
    .then(function onInterfaceXDefined() {
      window.InterfaceX.bus.on("SearchResponseChanged", true).subscribe(
        debounce(function onSearch(payload) {
          var data = payload.eventPayload.request;
          // ignore page navigation
          if (data.page > 1) {
            return;
          }

          var priceFrom =
            (data &&
              data.filters &&
              data.filters.facetPrice &&
              data.filters.facetPrice[0] &&
              data.filters.facetPrice[0].range &&
              data.filters.facetPrice[0].range.min) ||
            null;

          var priceUpTo =
            (data &&
              data.filters &&
              data.filters.facetPrice &&
              data.filters.facetPrice[0] &&
              data.filters.facetPrice[0].range &&
              data.filters.facetPrice[0].range.max) ||
            null;

          var query = data.query;
          var queryHasChanged = query !== tempQuery;
          var priceRangeHasChanged =
            priceFrom !== tempPriceFrom || priceUpTo !== tempPriceUpTo;
          if (!queryHasChanged && !priceRangeHasChanged) {
            return;
          }

          tempQuery = query;
          tempPriceFrom = priceFrom;
          tempPriceUpTo = priceUpTo;

          function trackSearch() {
            var events = [];
            if (queryHasChanged) {
              events.push({
                type: "search",
                searchText: query,
              });
            }
            if (priceRangeHasChanged) {
              events.push({
                type: "custom",
                eventAlias: searchEventAlias,
                payload: {
                  priceFrom: priceFrom || 0,
                  priceUpTo: priceUpTo || 0,
                },
              });
            }
            sendConnectifEventsWhenReady(events);
          }
          trackSearch();
        }, 1000)
      );
    })
    .catch(console.error);
})();
</script>  

18. Salve o conteúdo e continue para finalizar a configuração do nó.

19. Selecione o conteúdo Inline que você acabou de criar e clique em Seguinte .

20. Na tela seguinte, adicione o seletor adequado para mostrar o conteúdo. Este deve ser um elemento que esteja em sua página. No nosso exemplo, colocamos o seletor no rodapé da página, para que o conteúdo, ou seja, o script, seja sempre ativado.

21. Na aba Limitações, remova todas as limitações do nó e salve a configuração do mesmo.

22. Salve e ative o Workflow.

PASSO 4: Armazenamento das informações na ficha de contato do Connectif

4.1. Criação dos campos personalizados no Connectif

(Neste passo, vamos criar os campos personalizados que irão armazenar as informações enviadas pelo Empathy, como a marca e os filtros de preço máximo e mínimo usados pelo contato durante sua navegação).

23. Vá em "Contatos > Campos de Contato" e clique em    Adicionar novo campo personalizado.

24. Atribua o tipo Decimal e clique em Ir para o editor.

27. Atribua o Nome "priceFrom" e o ID "priceFrom" e clique em   Salvar. Este valor irá coletar o preço mínimo indicado pelo contato.

28. Crie um segundo campo, também do tipo Decimal.

29. Atribua o Nome "priceUpTo" e o ID "priceUpTo" e clique em   Salvar. Este valor irá coletar o preço máximo indicado pelo contato.

4.2. Criação do workflow para atualizar os campos

(Neste passo, vamos explicar como armazenar os dados enviados pelo Empathy na ficha de contato do Connectif através de um workflow).

30. Acesse no menu lateral esquerdo a Workflows e crie um novo Workflow Personalizado.

31. Na configuração do nó "Início", na área Selecione uma limitação, escolha Toda minha lista e, em Selecione uma fonte de dados marque Todos os existentes e os novos.

32. Conecte ao nó "Início" o nó do tipo Disparador que você criou para receber a marca e o preço do Empathy.

33. Conecte ao nó do tipo Disparador o nó "Estabelecer campo".

34. Acesse sua configuração e, dentro de sua interface, arraste os campos que você acabou de criar, com origem de dados Contato, da coluna esquerda para o bloco central, de forma que coincidam com os campos homônimos da coluna direita.

35. Salve a configuração do nó. 

36. Salve e ative seu workflow.

Continue aprendendo!

Para aproveitar todo o potencial de sua conta no Connectif, recomendamos que continue com os seguintes artigos:

• Recomendador na página inicial, para aprender como criar um banner recomendador na página inicial, que pode ser personalizado com os dados do Empathy.

• Integração personalizada para receber dados, para aprender como usar informações que não são registradas por padrão na plataforma.

• Integrações com sistemas externos, para integrar sua conta Connectif com o Facebook, formulários e outros webhooks do seu site.

• Integrações via API, para administrar eventos como registros de compras ou cadastros de contatos.