Intégration avec EcommApp

Intégrez votre compte Connectif avec EcommApp pour pouvoir envoyer des notifications push natives via l'application.

Dans cet article, vous apprendrez comment intégrer votre compte Connectif avec EcommApp pour recueillir l'activité du contact – qu'il soit identifié ou anonyme – et un exemple de workflow envoyant une notification push à EcommApp.

Pourquoi mettre en place l'extension

1. Cas d’usage que vous pourrez créer après cette intégration

Voici quelques idées pour vous aider à mettre en œuvre différentes stratégies dans l'application EcommApp après avoir activé l'extension dans votre Boutique Connectif.

• Mettre en place des stratégies de conversion, y compris avec des visiteurs anonymes.
• Récupérer des paniers abandonnés.
• Mettre en place des stratégies de remarketing via les notifications push d'EcommApp.
• Envoyer une salutation d'anniversaire ou une remise pour l'anniversaire d'achat aux contacts.

2. Que pourrez-vous faire avec Connectif dans EcommApp ?

Grâce à cette extension, vous pourrez créer des stratégies automatisées depuis Connectif pour envoyer des notifications push via EcommApp.

Vous pourrez également suivre l'activité des contacts dans EcommApp, qu'ils soient anonymes ou identifiés.

3. Quelles données de Connectif pourrez-vous utiliser dans EcommApp ?

Dans EcommApp , vous pourrez exploiter toutes les informations recueillies dans la Fiche de contact, ainsi que son activité en temps réel, pour personnaliser les notifications avec les données du contact issues de Connectif.

Avant de commencer : ce que vous devez prendre en compte

Pour pouvoir intégrer votre compte Connectif avec EcommApp et automatiser l’envoi de notifications push natives, vous aurez besoin de :

• Demander à EcommApp l'activation de l'API et sa valeur, afin de pouvoir l'utiliser.

De plus, tenez compte de certaines caractéristiques des notifications push mobiles envoyées via EcommApp :

• Il n'est pas possible de désabonner un contact de ces notifications, car aucun mécanisme ne permet de notifier une erreur de livraison.
• Les notifications push mobiles ne disposent pas de statistiques ni d’analyses sur les envois, ouvertures ou clics. 
  • Le nombre de clics peut être récupéré via des options UTM dans le lien, mais ce n'est pas une valeur recueillie par défaut.
• Le contact ne peut avoir qu’un seul appareil, car un seul token peut être stocké dans le champ personnalisé.
• Deux contacts ou plus peuvent partager le même token EcommApp, par exemple s’ils se connectent plusieurs fois depuis le même appareil. 

ÉTAPE 1 : Création des champs personnalisés pour stocker les tokens d’EcommApp

(Dans cette section, vous allez créer les champs personnalisés qui recueilleront les tokens d’EcommApp, c’est-à-dire l’identifiant du contact dans l’App, pour les anonymes comme pour les identifiés).  

1. Rendez-vous dans "Contacts > Champs du Contact" et cliquez sur    Ajouter un nouveau champ personnalisé.

2. Assignez-lui le type Texte et cliquez sur Aller à l’éditeur.

3. Donnez-lui le Nom "EcommApp Customer Id" et l’ID "ecommapp-customer-id", puis cliquez sur   Enregistrer. Cette valeur sera collectée lorsque le contact sera enregistré sur le site.

4. Créez un second champ, en répétant les étapes 1 et 2. Dans ce cas, attribuez-lui le Nom "EcommApp Guest Id" et l’ID "ecommapp-guest-id", puis cliquez sur   Enregistrer. Cette valeur sera recueillie lorsque le contact est anonyme.

ÉTAPE 2 : Création du workflow pour recueillir les données (token correspondant) du contact

(Dans cette section, vous allez créer le workflow qui recueillera l’activité du contact lors de sa navigation sur l'application EcommApp, et qui mettra à jour, dans Connectif, l’un des champs personnalisés que vous avez créés à l’ÉTAPE 1. S’il est enregistré, il remplira le champ "EcommApp Customer Id", sinon, il remplira le champ "EcommApp Guest Id". Cette activité sera collectée à l’aide d’un script inséré dans EcommApp en mode inline).

5. Accédez à Workflows et cliquez sur    Créer un nouveau workflow.

6. Sélectionnez un workflow vierge.

7. Dans la configuration du Nœud "Accueil", dans la section "Sélectionnez une limitation", choisissez Toute ma liste et, dans "Sélectionnez une source de données", cochez Tous les existants et les nouveaux.

8. Ajoutez le nœud déclencheur "Lors de la visite d'une page" afin que le workflow s’active lorsqu’un contact visite le site.

9. Dans la configuration du nœud, sous l’onglet Limitations, supprimez toutes les limitations.

10. Ajoutez le nœud conditionnel "Vérifier la valeur" et accédez à l’éditeur du nœud.

11. Dans la configuration du nœud "Vérifier la valeur", sélectionnez l'opérateur User Agent, obtenu à partir du nœud "Lors de la visite d'une page" et faites-le glisser vers la colonne de gauche du panneau central.

12. Dans la colonne de droite, sélectionnez la valeur Littéral et faites-la glisser vers la colonne de droite du panneau central. Ensuite, entrez la valeur "EcommApp".

13. Cliquez sur Appliquer.

14. Ajoutez le nœud d’action "Envoyer du contenu web" pour insérer le script qui vérifiera l’activité du contact via EcommApp.

15. Ne modifiez pas la connexion entre ce nœud et le nœud "Vérifier la valeur", pour qu’il affiche "Oui".

16. Cliquez sur  (Modifier la configuration du nœud) du nœud “Envoyer du contenu web” puis sur  Créer un nouveau contenu pour générer un nouveau contenu.

17. Lors de la création du contenu, sélectionnez Inline comme type, attribuez-lui un nom, par exemple "EcommApp Script", puis cliquez sur   Créer un nouveau contenu.

18. Ajoutez un composant de type HTML.

19. Modifiez-le en copiant et collant le code suivant :

<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. Cliquez sur  Enregistrer pour conserver les modifications, puis sur   Retour au sélecteur pour finaliser la configuration du nœud.

21. Une fois le contenu Inline créé sélectionné, cliquez sur Suivant .

22. Dans Configuration, ajoutez le sélecteur approprié pour afficher le contenu. Dans ce cas, allez dans l'onglet "Autre" et indiquez la valeur [name="ecommapplogged"] dans Connectif.

23. Dans l'onglet Limitations, supprimez toutes les limitations du nœud. Enfin, cliquez sur Appliquer pour enregistrer la configuration.

24. Enregistrez et activez le workflow.

ÉTAPE 3 : Création de l'événement d'envoi de données pour afficher les notifications push dans EcommApp

(Dans cette section, vous allez créer l'événement qui enverra les informations de Connectif à EcommApp pour permettre l'affichage des notifications push dans l'application).

25. Accédez à Configuration de la boutique dans le menu latéral gauche.

26. Dans le sélecteur d'onglets, allez à "Intégrations > Intégrations personnalisées (webhooks)" et cliquez sur  Créer une nouvelle intégration.

27. Définissez le champ "Nom de l'intégration" pour l’identifier et cliquez sur  Mettre à jour.

28. Dans l'onglet Envoyer des données, cliquez sur  Créer un nouvel événement d’envoi.

29. Dans cet écran, attribuez un nom à l’événement.

30. Dans le champ URL du Webhook où envoyer le message, collez l’URL de l’API d’EcommApp pour envoyer les notifications push. Dans ce cas, l’URL est "https://panel.ecommapp.com/api/pushnotifications".

31. Cliquez sur Ajouter un nouvel en-tête et définissez le nom "Authorization". Dans le champ Valeur, saisissez la clé API d’EcommApp . La structure est "Bearer" suivi de la clé API fournie par EcommApp .

32. Cliquez sur Ajouter un nouvel en-tête et définissez le nom "Content-Type". Dans le champ Valeur, indiquez "application/json".

33. Cliquez sur   Ajouter un nouveau champ pour créer chacun des champs personnalisés et complétez leurs informations. N'oubliez pas qu'il est important que les champs aient le même ID que ceux indiqués ci-dessous pour que l'intégration fonctionne :

• Créez un champ de type Texte avec le nom "Button Text" et l'ID "buttonText".
• Créez un champ de type Texte avec le nom "customerId" et l'ID "customerId".
• Créez un champ de type Texte avec le nom "guestId" et l'ID "guestId".
• Créez un champ de type Texte avec le nom "link" et l'ID "link".
• Créez un champ de type Texte avec le nom "text" et l'ID "text".
• Créez un champ de type Texte avec le nom "title" et l'ID "title".
• Créez un champ de type Texte avec le nom "imageUrl" et l'ID "imageUrl".

34. Cliquez sur  Enregistrer.

ÉTAPE 4 : Création du workflow pour envoyer une notification push dans EcommApp

(Dans cette section, nous allons créer la stratégie qui enverra une notification push à l'application EcommApp).

35. Accédez à Workflows et cliquez sur   Créer un nouveau workflow puis sélectionnez un nouveau workflow vierge.

36. Dans le Nœud "Accueil", sélectionnez le Segment Dynamique Plus que vous avez créé pour filtrer les contacts EcommApp.

37. Recherchez le nœud de type action que vous avez créé lors de l'intégration avec EcommApp (étape 3) et ajoutez-le à votre workflow.

38. Dans la configuration du nœud, faites glisser le champ "EcommApp Customer Id" depuis les informations du contact et faites-le correspondre avec la valeur "customerId" dans la colonne de droite.

39. Faites de même pour le champ "EcommApp Guest Id", en le liant à la valeur "guestId".

40. Pour les autres valeurs, associez-les à un champ Littéral pour définir la forme et les informations de votre notification push dans EcommApp.

41. Cliquez sur Appliquer pour enregistrer la configuration du nœud et activez votre workflow.