Integración con EcomApp

Integra tu cuenta de Connectif con EcommApp para poder enviar notificaciones push nativas a través de la aplicación.

En este artículo, aprenderás cómo integrar tu cuenta de Connectif con EcommApp para recoger la actividad del contacto - tanto conocidos como anónimos - y un ejemplo de un workflow en el que se envía una notificación push a EcommApp. 

Por qué implementar la extensión

1. Casos de uso que podrás crear tras esta integración

Aquí te dejamos algunas ideas que pueden servirte para implementar diferentes estrategias en la aplicación de EcommApp tras activar en tu Tienda de Connectif la extensión con EcommApp .

• Realizar estrategias de conversión también con anónimos.
• Recuperar carritos abandonados.
• Realizar estrategias de remarketing a través de las push de EcommApp .
• Enviar una felicitación por cumpleaños o un descuento por aniversario de compra a los contactos.

2. ¿Qué podrás hacer con Connectif en EcommApp?

Con esta extensión, desde Connectif podrás crear estrategias automatizadas para enviar notificaciones push a través de EcommApp.

Además, podrás recoger la actividad del contacto en EcommApp, tanto si son anónimos como conocidos.

3. ¿Qué data de Connectif podrás usar en EcommApp?

En EcommApp podrás aprovechar toda la información recogida en la ficha del contacto, así como su actividad en tiempo real, para personalizar las notificaciones con los datos del contacto de Connectif.

Antes de empezar: qué debes tener en cuenta

Para poder integrar tu cuenta de Connectif con EcommApp y automatizar el envío de notificaciones push nativas, necesitarás:

• Solicitar a EcommApp y la activación de la API y su valor,  para poder utilizarla.

Además, debes tener en cuenta algunas propiedades de las notificaciones push móviles enviadas a través de EcommApp:

• No es posible cancelar la suscripción de un contacto a estas notificaciones, ya que no existe un mecanismo que notifique en caso de error de la entrega.
• Las push móviles no tienen estadísticas ni análisis de envíos, aperturas ni clics. 
  • Podría recuperarse el número de clics mediante opciones de UTM en el enlace, pero no es un valor que se recoja por defecto.
• El contacto tendrá como máximo un dispositivo, ya que solo se puede almacenar un token en el campo personalizado.
• Dos o más contactos pueden tener el mismo token de EcommApp, ya que podrían, por ejemplo, iniciar varias sesiones en el mismo dispositivo. 

PASO 1: Creación de los campos personalizado que almacenarán los tokenn de EcommApp

(En este apartado se van a crear los campos personalizados que recogerán los Tokens de EcommApp, es decir, el identificador del contacto en la App, tanto para recoger anónimos como conocidos).  

1. Dirígete a "Contactos > Campos del Contacto" y haz clic en    Añadir nuevo campo personalizado.

2. Asígnale el tipo Texto y haz clic en Ir al editor.

3. Asígnale el Nombre "EcommApp Customer Id" y el ID "ecommapp-customer-id" y haz clic en   Guardar. Este valor se recogerá cuando el contacto esté registrado en la web.

4. Crea un segundo campo, repitiendo los puntos 1 y 2 y, en este caso asígnale el Nombre "EcommApp Guest Id" y el ID "ecommapp-guest-id" y haz clic en   Guardar. Este valor se recogerá cuando el contacto sea anónimo.

PASO 2: Creación del workflow para recoger los datos (token correspondiente) del contacto  

(En este apartado se va a crear el workflow que recogerá la actividad del contacto durante su navegación por la app de EcommApp y actualizará, en Connectif, uno de los campos personalizados que has creado en el PASO 1, si está registrado, recogerá el "EcommApp Customer Id", y si no lo está, recogerá el campo "EcommApp Guest Id". Esta actividad se recogerá mediante un script que se insertará en EcommApp mediante un inline).

5. Dirígete a Workflows y haz clic en    Crear nuevo workflow.

6. Selecciona un nuevo workflow en blanco.

7. En la configuración del "Nodo Inicio", en el área "Selecciona una limitación" escoge Toda mi lista y, en "Selecciona una fuente de datos" marca Todos los existentes y los nuevos.

8. Añade el nodo disparador"Al visitar página" para que el workflow se active en el momento que un contacto visite la web.

9. En la configuración del nodo, en la pestaña Limitaciones, elimina todas las limitaciones.

10. Añade el nodo de tipo condición "Comprobar valor" y accede al editor del nodo.

11. En la configuración del nodo  "Comprobar valor" selecciona el operador User Agent, obtenido del nodo "Al visitar página" y arrástralo a la columna izquierda del panel central.

12. Selecciona, de la columna derecha, el valor Literal y arrástralo al panel central, a la columna derecha. A continuación, introduce en dicho valor el texto "EcommApp".

13. Haz clic en Aplicar.

14. Añade el nodo de tipo acción "Enviar contenido web" para insertar el Script que comprobará la actividad del contacto por EcommApp.

15. No edites la unión de este nodo con el nodo "Comprobar valor", para que aparezca "Sí".

16. Haz clic en  (Editar configuración de nodo) del nodo “Enviar contenido web” y  Crear nuevo contenido para generar un nuevo contenido.

17. Al crear un nuevo contenido, selecciona como tipo Inline, asígnale un nombre, por ejemplo "EcomApp Script", y haz clic en   Crear nuevo contenido. 

18. Añade un componente de tipo HTML.

19. Edítalo, copiando y pegando el siguiente 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. Haz clic en  Guardar para conservar las modificaciones y en   Volver al selector para volver y finalizar la configuración del nodo.

21. Una vez seleccionado el contenido Inline que acabas de crear haz clic en Siguiente .

22. En Configuración añade el selector adecuado para mostrar el contenido. En este caso, el selector debe emplazarse en la pestaña "Otro" e indicar en Connectif el valor [name="ecommapplogged"].

23. En la pestaña Limitaciones, elimina todas las limitaciones del nodo. Por último, haz clic en Aplicar para conservar la configuración del nodo.

24. Guarda y activa el Workflow.

PASO 3: Creación del evento de envío de datos para mostrar las notificaciones push en EcommApp

(En este apartado se va a crear el evento que enviará la información desde Connectif a EcommApp para permitir que se muestren las notificaciones push dentro de la App).

25. Accede a Configuración de tienda en el menú lateral izquierdo.

26. En el selector de pestaña, ve a "Integraciones > Integraciones personalizadas (webhooks)" y haz clic en   Crear nueva integración.

27. Establece el campo "Nombre de la integración" para identificar la integración y haz clic en  Actualizar.

28. En la pestaña Enviar datos, haz clic en  Crear nuevo evento de envío.

29. Dentro de esa pantalla, asígnale un nombre al evento.

30. En el recuadro Webhook URL donde enviar el mensaje, pega la URL de la API de EcommApp para enviar notificaciones push. En este caso, la url es "https://panel.ecommapp.com/api/pushnotifications".

31. Haz clic en Añadir una nueva cabecera y asígnale el Nombre "Authorization" y, en el Valor, introduce el valor de la API de EcommApp. La estructura será "Bearer" seguido de la API que te hayan proporcionado desde EcommApp.

32. Haz clic en Añadir una nueva cabecera y asígnale el Nombre "Content-Type" y, en el Valor, introduce "application/json". 

33. Haz clic en   Añadir un nuevo campo para crear cada uno de los campos personalizados y completa su información. Recuerda que es importante que los campos tengan el mismo ID que se indica a continuación para que funcione la integración:

• Crea un campo de tipo Texto con el nombre "Button Text" y el ID "buttonText".
• Crea un campo de tipo Texto con el nombre "customerId" y el ID "customerId".
• Crea un campo de tipo Texto con el nombre "guestId" y el ID "guestId".
• Crea un campo de tipo Texto con el nombre "link" y el ID "link".
• Crea un campo de tipo Texto con el nombre "text" y el ID "text".
• Crea un campo de tipo Texto con el nombre "title" y el ID "title".
• Crea un campo de tipo Texto con el nombre "imageUrl" y el ID "imageUrl".

34. Haz clic en  Guardar.

PASO 4: Creación del workflow para enviar una notificación push en EcommApp

(En este apartado se va a crear la estrategia que enviará una notificación push a la app de EcommApp).

35. Dirígete a Workflows y haz clic en    Crear nuevo workflow y selecciona un Nuevo workflow en blanco.

36. En el "Nodo Inicio", selecciona el Segmento Dinámico Plus que has creado para filtrar a los contactos de EcommApp. 

37. Busca el nodo de tipo acción que has creado al hacer tu integración con EcommApp (paso 3) y añádelo a tu workflow.

38. En la configuración del nodo, arrastra el campo "EcommApp Customer Id" de la información del contacto y hazlo coincidir con el valor "customerId" de la columna derecha.

39. Arrastra el campo "EcommApp Guest Id" de la información del contacto y hazlo coincidir con el valor "guestId" de la columna derecha.

40. El resto de valores, asócialos con un campo Literal para darle la forma e información que contendrá tu push en EcommApp.

36. Haz clic en Aplicar para guardar la configuración del nodo y activa tu workflow.