Integrazione con EcommApp

Integra il tuo account Connectif con EcommApp per poter inviare notifiche push native tramite l'applicazione.

In questo articolo imparerai come integrare il tuo account Connectif con EcommApp per raccogliere l'attività del contatto - sia conosciuti che anonimi - e un esempio di workflow in cui viene inviata una notifica push a EcommApp. 

Perché implementare l'estensione

1. Casi d’uso che potrai creare dopo questa integrazione

Qui ti lasciamo alcune idee che possono esserti utili per implementare diverse strategie nell'applicazione EcommApp dopo aver attivato nel tuo Negozio Connectif l'estensione con EcommApp.

• Realizzare strategie di conversione anche con contatti anonimi.
• Recuperare carrelli abbandonati.
• Realizzare strategie di remarketing tramite le push di EcommApp.
• Inviare un augurio di compleanno o uno sconto per l’anniversario di acquisto ai contatti.

2. Cosa potrai fare con Connectif in EcommApp?

Con questa estensione, da Connectif potrai creare strategie automatizzate per inviare notifiche push tramite EcommApp.

Inoltre, potrai raccogliere l’attività del contatto in EcommApp, sia se sono anonimi che conosciuti.

3. Quali dati di Connectif potrai usare in EcommApp?

In EcommApp potrai sfruttare tutte le informazioni raccolte nella Contact Sheet, così come la sua attività in tempo reale, per personalizzare le notifiche con i dati del contatto di Connectif.

Prima di iniziare: cosa devi considerare

Per poter integrare il tuo account Connectif con EcommApp e automatizzare l’invio di notifiche push native, avrai bisogno di:

• Richiedere a EcommApp l’attivazione dell’API e il relativo valore,  per poterla utilizzare.

Inoltre, dovresti considerare alcune proprietà delle notifiche push mobili inviate tramite EcommApp:

• Non è possibile annullare l’iscrizione di un contatto a queste notifiche, poiché non esiste un meccanismo che notifichi in caso di errore nella consegna.
• Le push mobili non dispongono di statistiche né di analisi su invii, aperture o clic. 
  • Il numero di clic potrebbe essere recuperato tramite opzioni UTM nel link, ma non è un valore raccolto di default.
• Il contatto avrà al massimo un solo dispositivo, poiché è possibile memorizzare solo un token nel campo personalizzato.
• Due o più contatti possono avere lo stesso token di EcommApp, poiché potrebbero, ad esempio, avviare più sessioni sullo stesso dispositivo. 

PASSO 1: Creazione dei campi personalizzati che memorizzeranno i token di EcommApp 

(In questa sezione verranno creati i campi personalizzati che raccoglieranno i Token di EcommApp, ovvero l’identificatore del contatto nell’App, sia per raccogliere anonimi che conosciuti).  

1. Vai a "Contatti > Campi del Contatto" e fai clic su    Aggiungi nuovo campo personalizzato.

2. Assegnagli il tipo Testo e fai clic su Vai all’editor.

3. Assegnagli il Nome "EcommApp Customer Id" e l’ID "ecommapp-customer-id" e fai clic su   Salva. Questo valore verrà raccolto quando il contatto è registrato sul sito.

4. Crea un secondo campo, ripetendo i punti 1 e 2 e, in questo caso, assegnagli il Nome "EcommApp Guest Id" e l’ID "ecommapp-guest-id" e fai clic su   Salva. Questo valore verrà raccolto quando il contatto è anonimo.

PASSO 2: Creazione del workflow per raccogliere i dati (token corrispondente) del contatto  

(In questa sezione verrà creato il workflow che raccoglierà l’attività del contatto durante la navigazione sull’app di EcommApp e aggiornerà, in Connectif, uno dei campi personalizzati che hai creato nel PASSO 1, se è registrato, raccoglierà l’"EcommApp Customer Id", e se non lo è, raccoglierà il campo "EcommApp Guest Id". Questa attività sarà raccolta mediante uno script inserito in EcommApp tramite un inline).

5. Vai a Workflows e fai clic su    Crea nuovo workflow.

6. Seleziona un nuovo workflow vuoto.

7. Nella configurazione del "Nodo Inizio", nell’area "Seleziona una limitazione" scegli Tutta la mia lista e, in "Seleziona una fonte di dati" seleziona Tutti gli esistenti e i nuovi.

8. Aggiungi il nodo trigger "Alla visita della pagina" affinché il workflow si attivi quando un contatto visita il sito.

9. Nella configurazione del nodo, nella scheda Limitazioni, rimuovi tutte le limitazioni.

10. Aggiungi il nodo di tipo condizione "Verifica valore" e accedi all’editor del nodo.

11. Nella configurazione del nodo "Verifica valore" seleziona l’operatore User Agent, ottenuto dal nodo "Alla visita della pagina" e trascinalo nella colonna sinistra del pannello centrale.

12. Seleziona, dalla colonna destra, il valore Letterale e trascinalo nel pannello centrale, nella colonna destra. Quindi, inserisci in quel valore il testo "EcommApp".

13. Fai clic su Applica.

14. Aggiungi il nodo di tipo azione "Invia contenuto web" per inserire lo Script che verificherà l’attività del contatto tramite EcommApp.

15. Non modificare il collegamento di questo nodo con il nodo "Verifica valore", in modo che appaia "Sì".

16. Fai clic su  (Modifica configurazione nodo) del nodo “Invia contenuto web” e  Crea nuovo contenuto per generare un nuovo contenuto.

17. Quando crei un nuovo contenuto, seleziona come tipo Inline, assegnagli un nome, ad esempio "EcomApp Script", e fai clic su   Crea nuovo contenuto. 

18. Aggiungi un componente di tipo HTML.

19. Modificalo, copiando e incollando il seguente codice:

<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. Fai clic su  Salva per conservare le modifiche e su   Torna al selettore per tornare e completare la configurazione del nodo.

21. Una volta selezionato il contenuto Inline appena creato, fai clic su Avanti .

22. In Configurazione aggiungi il selettore appropriato per mostrare il contenuto. In questo caso, il selettore deve essere inserito nella scheda "Altro" e indicare in Connectif il valore [name="ecommapplogged"].

23. Nella scheda Limitazioni, elimina tutte le limitazioni del nodo. Infine, fai clic su Applica per salvare la configurazione del nodo.

24. Salva e attiva il Workflow.

PASSO 3: Creazione dell’evento di invio dati per mostrare le notifiche push in EcommApp

(In questa sezione verrà creato l’evento che invierà le informazioni da Connectif a EcommApp per permettere la visualizzazione delle notifiche push all’interno dell’App).

25. Accedi a Configurazione del negozio nel menu laterale sinistro.

26. Nel selettore delle schede, vai su "Integrazioni > Integrazioni personalizzate (webhooks)" e fai clic su   Crea nuova integrazione.

27. Imposta il campo "Nome dell’integrazione" per identificare l’integrazione e fai clic su  Aggiorna.

28. Nella scheda Invia dati, fai clic su  Crea nuovo evento di invio.

29. All’interno di quella schermata, assegna un nome all’evento.

30. Nel riquadro Webhook URL dove inviare il messaggio, incolla l’URL dell’API di EcommApp per inviare notifiche push. In questo caso, l’URL è "https://panel.ecommapp.com/api/pushnotifications".

31. Fai clic su Aggiungi una nuova intestazione e assegnale il Nome "Authorization" e, nel Valore, inserisci il valore dell’API di EcommApp. La struttura sarà "Bearer" seguito dall’API che ti è stata fornita da EcommApp.

32. Fai clic su Aggiungi una nuova intestazione e assegnale il Nome "Content-Type" e, nel Valore, inserisci "application/json". 

33. Fai clic su   Aggiungi un nuovo campo per creare ciascuno dei campi personalizzati e completare le informazioni. Ricorda che è importante che i campi abbiano lo stesso ID indicato di seguito affinché l’integrazione funzioni correttamente:

• Crea un campo di tipo Testo con il nome "Button Text" e l’ID "buttonText".
• Crea un campo di tipo Testo con il nome "customerId" e l’ID "customerId".
• Crea un campo di tipo Testo con il nome "guestId" e l’ID "guestId".
• Crea un campo di tipo Testo con il nome "link" e l’ID "link".
• Crea un campo di tipo Testo con il nome "text" e l’ID "text".
• Crea un campo di tipo Testo con il nome "title" e l’ID "title".
• Crea un campo di tipo Testo con il nome "imageUrl" e l’ID "imageUrl".

34. Fai clic su  Salva.

PASSO 4: Creazione del workflow per inviare una notifica push in EcommApp

(In questa sezione verrà creata la strategia che invierà una notifica push all’app di EcommApp).

35. Vai su Workflows e fai clic su    Crea nuovo workflow e seleziona un Nuovo workflow vuoto.

36. Nel "Nodo Inizio", seleziona il Segmento Dinamico Plus che hai creato per filtrare i contatti di EcommApp. 

37. Cerca il nodo di tipo azione che hai creato durante l’integrazione con EcommApp (passo 3) e aggiungilo al tuo workflow.

38. Nella configurazione del nodo, trascina il campo "EcommApp Customer Id" dalle informazioni del contatto e abbinalo al valore "customerId" della colonna di destra.

39. Trascina il campo "EcommApp Guest Id" dalle informazioni del contatto e abbinalo al valore "guestId" della colonna di destra.

40. Gli altri valori, abbinali con un campo Letterale per definire l’aspetto e il contenuto della tua notifica push in EcommApp.

41. Fai clic su Applica per salvare la configurazione del nodo e attiva il tuo workflow.