Integração com EcommApp

Integre sua conta do Connectif com o EcommApp para enviar notificações push nativas através do aplicativo.

Neste artigo, você aprenderá como integrar sua conta do Connectif com o EcommApp para coletar a atividade do contato – tanto conhecidos quanto anônimos – e um exemplo de um workflow no qual uma notificação push é enviada ao EcommApp. 

Por que implementar a extensão

1. Casos de uso que você poderá criar após esta integração

Aqui estão algumas ideias que podem ajudá-lo a implementar diferentes estratégias no aplicativo do EcommApp após ativar na sua Loja do Connectif a extensão com o EcommApp.

• Realizar estratégias de conversão também com anônimos.
• Recuperar carrinhos abandonados.
• Realizar estratégias de remarketing através dos push do EcommApp.
• Enviar uma felicitação de aniversário ou um desconto por aniversário de compra aos contatos.

2. O que você poderá fazer com o Connectif no EcommApp?

Com esta extensão, no Connectif você poderá criar estratégias automatizadas para enviar notificações push através do EcommApp.

Além disso, você poderá coletar a atividade do contato no EcommApp, tanto se forem anônimos quanto conhecidos.

3. Quais dados do Connectif você poderá usar no EcommApp?

No EcommApp você poderá aproveitar todas as informações coletadas na Ficha de contato, assim como sua atividade em tempo real, para personalizar as notificações com os dados do contato do Connectif.

Antes de começar: o que você deve considerar

Para poder integrar sua conta do Connectif com o EcommApp e automatizar o envio de notificações push nativas, será necessário:

• Solicitar ao EcommApp a ativação da API e o seu valor,  para poder utilizá-la.

Além disso, você deve levar em conta algumas propriedades das notificações push móveis enviadas através do EcommApp:

• Não é possível cancelar a inscrição de um contato para essas notificações, pois não existe um mecanismo que notifique em caso de erro na entrega.
• As push móveis não possuem estatísticas nem análise de envios, aberturas ou cliques. 
  • Pode-se recuperar o número de cliques através de opções UTM no link, mas esse valor não é coletado por padrão.
• O contato terá no máximo um dispositivo, já que apenas um token pode ser armazenado no campo personalizado.
• Dois ou mais contatos podem ter o mesmo token do EcommApp, pois podem, por exemplo, iniciar várias sessões no mesmo dispositivo. 

PASSO 1: Criação dos campos personalizados que armazenarão os tokens do EcommApp

(Nesta seção serão criados os campos personalizados que coletarão os Tokens do EcommApp, ou seja, o identificador do contato no App, tanto para anônimos quanto para conhecidos).  

1. Acesse "Contatos > Campos do Contato" e clique em    Adicionar novo campo personalizado.

2. Atribua o tipo Texto e clique em Ir para o editor.

3. Atribua o Nome "EcommApp Customer Id" e o ID "ecommapp-customer-id" e clique em   Salvar. Este valor será coletado quando o contato estiver registrado no site.

4. Crie um segundo campo, repetindo os pontos 1 e 2 e, neste caso, atribua o Nome "EcommApp Guest Id" e o ID "ecommapp-guest-id" e clique em   Salvar. Este valor será coletado quando o contato for anônimo.

PASSO 2: Criação do workflow para coletar os dados (token correspondente) do contato  

(Nesta seção será criado o workflow que coletará a atividade do contato durante sua navegação no app do EcommApp e atualizará, no Connectif, um dos campos personalizados que você criou no PASSO 1, se estiver registrado, coletará o "EcommApp Customer Id", e se não estiver, coletará o campo "EcommApp Guest Id". Essa atividade será captada através de um script inserido no EcommApp via inline).

5. Vá até Workflows e clique em    Criar novo workflow.

6. Selecione um novo workflow em branco.

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

8. Adicione o nó de disparo "Ao visitar página" para que o workflow seja ativado no momento em que um contato visitar o site.

9. Na configuração do nó, na aba Limitações, remova todas as limitações.

10. Adicione o nó de tipo condição "Verificar valor" e acesse o editor do nó.

11. Na configuração do nó "Verificar valor" selecione o operador User Agent, obtido do nó "Ao visitar página" e arraste-o para a coluna esquerda do painel central.

12. Selecione, da coluna direita, o valor Literal e arraste-o para o painel central, na coluna da direita. Em seguida, insira nesse valor o texto "EcommApp".

13. Clique em Aplicar.

14. Adicione o nó de tipo ação "Enviar conteúdo web" para inserir o Script que verificará a atividade do contato no EcommApp.

15. Não edite a união deste nó com o nó "Verificar valor", para que apareça "Sim".

16. Clique em  (Editar configuração do nó) do nó “Enviar conteúdo web” e  Criar novo conteúdo para gerar um novo conteúdo.

17. Ao criar um novo conteúdo, selecione o tipo Inline, atribua um nome, por exemplo "EcomApp Script", e clique em   Criar novo conteúdo. 

18. Adicione um componente do tipo HTML.

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

<script>
  (function connectifECommApp(global) {
    if (
      global.connectif &&
      global.connectif.managed &&
      global.connectif.managed.isInitialized()
    ) {
      getAndSendCustomerIdOrGuestId();
    } else {
      global.document.addEventListener(
        "connectif.managed.initialized",
        function onConnectifInitialized() {
          getAndSendCustomerIdOrGuestId();
        }
      );
    }

    function getAndSendCustomerIdOrGuestId() {
      if (
        typeof navigator !== "object" ||
        !(navigator.userAgent || "").startsWith("EcommApp")
      ) {
        return;
      }

      const customerId = getCustomerId();
      const guestId = getGuestId();
      const storedCustomerId = getStoredCustomerId();
      const storedGuestId = getStoredGuestId();

      if (customerId) {
        if (customerId !== storedCustomerId) {
          global.connectif.managed.sendEvents([], {
            entityInfo: { "ecomm-app-customer-id": customerId },
            onResponded: function onResponded() {
              storeCustomerId(customerId);
            },
          });
        }
      } else if (guestId && guestId !== storedGuestId) {
        global.connectif.managed.sendEvents([], {
          entityInfo: { "ecomm-app-guest-id": guestId },
          onResponded: function onResponded() {
            storeGuestId(guestId);
          },
        });
      }
    }

    function getStoredCustomerId() {
      return global.sessionStorage.getItem("cn_ecomm_app_customer_id");
    }

    function getStoredGuestId() {
      return global.sessionStorage.getItem("cn_ecomm_app_guest_id");
    }

    function storeCustomerId(customerId) {
      global.sessionStorage.setItem("cn_ecomm_app_customer_id", customerId);
    }

    function storeGuestId(guestId) {
      global.sessionStorage.setItem("cn_ecomm_app_guest_id", guestId);
    }

    function getCustomerId() {
      return getValueFromFirstElementByName("ecommappcustomer");
    }

    function getGuestId() {
      return getValueFromFirstElementByName("ecommappguest");
    }

    function getValueFromFirstElementByName(name) {
      const elements = document.getElementsByName(name);
      if (elements.length >= 1) {
        const value = elements[0].content;
        return value !== null && value !== '0' ? value : null;
      }
      return null;
    }
  })(window);
</script>
  

20. Clique em  Salvar para manter as modificações e em   Voltar ao seletor para retornar e finalizar a configuração do nó.

21. Uma vez selecionado o conteúdo Inline que você acabou de criar, clique em Próximo .

22. Em Configuração, adicione o seletor adequado para exibir o conteúdo. Neste caso, o seletor deve ser inserido na aba "Outro" e indicar no Connectif o valor [name="ecommapplogged"].

23. Na aba Limitações, remova todas as limitações do nó. Por fim, clique em Aplicar para salvar a configuração do nó.

24. Salve e ative o Workflow.

PASSO 3: Criação do evento de envio de dados para exibir notificações push no EcommApp

(Nesta seção será criado o evento que enviará as informações do Connectif ao EcommApp para permitir que as notificações push sejam exibidas dentro do aplicativo).

25. Acesse Configuração da loja no menu lateral esquerdo.

26. No seletor de abas, vá para "Integrações > Integrações personalizadas (webhooks)" e clique em   Criar nova integração.

27. Defina o campo "Nome da integração" para identificar a integração e clique em  Atualizar.

28. Na aba Enviar dados, clique em  Criar novo evento de envio.

29. Na tela exibida, atribua um nome ao evento.

30. No campo Webhook URL onde enviar a mensagem, cole a URL da API do EcommApp para envio de notificações push. Neste caso, a URL é "https://panel.ecommapp.com/api/pushnotifications".

31. Clique em Adicionar novo cabeçalho e atribua o Nome "Authorization" e, no Valor, insira o valor da API do EcommApp. A estrutura será "Bearer" seguido da chave API fornecida pela equipe do EcommApp.

32. Clique em Adicionar novo cabeçalho e atribua o Nome "Content-Type" e, no Valor, insira "application/json".

33. Clique em  Adicionar novo campo para criar cada um dos campos personalizados e completar suas informações. Lembre-se de que é importante que os campos tenham os mesmos IDs indicados abaixo para que a integração funcione corretamente:

• Crie um campo do tipo Texto com o nome "Button Text" e o ID "buttonText".
• Crie um campo do tipo Texto com o nome "customerId" e o ID "customerId".
• Crie um campo do tipo Texto com o nome "guestId" e o ID "guestId".
• Crie um campo do tipo Texto com o nome "link" e o ID "link".
• Crie um campo do tipo Texto com o nome "text" e o ID "text".
• Crie um campo do tipo Texto com o nome "title" e o ID "title".
• Crie um campo do tipo Texto com o nome "imageUrl" e o ID "imageUrl".

34. Clique em  Salvar.

PASSO 4: Criação do workflow para enviar uma notificação push no EcommApp

(Nesta seção será criada a estratégia que enviará uma notificação push para o app do EcommApp).

35. Vá para Workflows e clique em    Criar novo workflow e selecione um Novo workflow em branco.

36. No "Nó Início", selecione o Segmento Dinâmico Plus que você criou para filtrar os contatos do EcommApp. 

37. Procure o nó do tipo ação que você criou ao fazer sua integração com o EcommApp (passo 3) e adicione-o ao seu workflow.

38. Na configuração do nó, arraste o campo "EcommApp Customer Id" das informações do contato e faça corresponder com o valor "customerId" da coluna da direita.

39. Arraste o campo "EcommApp Guest Id" das informações do contato e faça corresponder com o valor "guestId" da coluna da direita.

40. Para os demais valores, associe um campo Literal para definir o formato e a informação que a notificação push no EcommApp irá conter.

41. Clique em Aplicar para salvar a configuração do nó e ative seu workflow.