EcommApp integration

Integrate your Connectif account with EcommApp to send native push notifications through the app.

In this article, you will learn how to integrate your Connectif account with EcommApp to collect contact activity – both known and anonymous – and an example of a workflow that sends a push notification to EcommApp.

Why implement the extension

1. Use cases you can create after this integration

Here are some ideas to help you implement different strategies in the EcommApp after activating the extension in your Connectif Store.

• Run conversion strategies with anonymous users as well.
• Recover abandoned carts.
• Run remarketing strategies via EcommApp push notifications.
• Send birthday greetings or purchase anniversary discounts to contacts.

2. What can you do with Connectif in EcommApp?

With this extension, you can create automated strategies in Connectif to send push notifications via EcommApp.

You can also track contact activity in EcommApp, whether they are anonymous or known.

3. What Connectif data can you use in EcommApp?

In EcommApp, you can leverage all the information stored in the Contact Sheet, as well as real-time activity, to personalize notifications using Connectif contact data.

Before getting started: what you need to know

To integrate your Connectif account with EcommApp and automate the sending of native push notifications, you will need:

• To request the activation of the API and its value from EcommApp in order to use it.

Additionally, you should keep in mind a few properties of mobile push notifications sent through EcommApp:

• It is not possible to unsubscribe a contact from these notifications, as there is no mechanism to notify in case of delivery failure.
• Mobile push notifications have no analytics for sends, opens, or clicks. 
  • Click numbers could be tracked using UTM options in the link, but this is not captured by default.
• A contact can have only one device associated, since only one token can be stored in the custom field.
• Two or more contacts might share the same EcommApp token if, for example, they log in multiple times on the same device. 

STEP 1: Creating the custom fields to store EcommApp tokens

(In this section, you’ll create the custom fields that will store the EcommApp Tokens, i.e., the contact identifier in the App, for both anonymous and known users).  

1. Go to "Contacts > Contact Fields" and click on    Add new custom field.

2. Set the type to Text and click Go to editor.

3. Assign the Name "EcommApp Customer Id" and the ID "ecommapp-customer-id" and click   Save. This value will be collected when the contact is registered on the website.

4. Create a second field by repeating steps 1 and 2. In this case, assign the Name "EcommApp Guest Id" and the ID "ecommapp-guest-id", and click   Save. This value will be collected when the contact is anonymous.

STEP 2: Creating the workflow to collect the contact’s data (corresponding token)

(In this section, you’ll create the workflow that will collect the contact's activity while browsing in the EcommApp and update in Connectif one of the custom fields created in STEP 1. If the contact is registered, it will collect the "EcommApp Customer Id", and if not, it will collect the "EcommApp Guest Id". This activity will be tracked via a script inserted into EcommApp using inline mode.)

5. Go to Workflows and click    Create new workflow.

6. Select a blank workflow.

7. In the "Start Node" configuration, under "Select a limitation", choose Entire list and under "Select a data source", check All existing and new.

8. Add the trigger node "On page visit" so that the workflow triggers when a contact visits the site.

9. In the node configuration, under the Limitations tab, remove all limitations.

10. Add a condition-type node "Check value" and enter the node editor.

11. In the "Check value" node configuration, select the User Agent operator from the "On page visit" node and drag it to the left column of the central panel.

12. From the right column, select the Literal value and drag it to the right column of the central panel. Then enter the value "EcommApp".

13. Click Apply.

14. Add the action-type node "Send web content" to insert the script that will track the contact's activity via EcommApp.

15. Do not edit the connection of this node with the "Check value" node so that "Yes" appears.

16. Click on  (Edit node settings) for the “Send web content” node and then  Create new content to generate new content.

17. When creating new content, select Inline as the type, assign it a name (e.g., "EcommApp Script"), and click  Create new content. 

18. Add an HTML component.

19. Edit it by copying and pasting the following code:

<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. Click  Save to keep the changes and   Back to selector to return and finish configuring the node.

21. Once the Inline content you just created is selected, click Next .

22. In Configuration, add the appropriate selector to display the content. In this case, the selector should be placed under the "Other" tab and specify the value [name="ecommapplogged"] in Connectif.

23. In the Limitations tab, remove all node limitations. Finally, click Apply to save the node configuration.

24. Save and activate the Workflow.

STEP 3: Creating the data send event to display push notifications in EcommApp

(In this section, you’ll create the event that sends information from Connectif to EcommApp to allow push notifications to be displayed in the app).

25. Go to Store Settings from the left-hand menu.

26. In the tab selector, go to "Integrations > Custom Integrations (webhooks)" and click   Create new integration.

27. Enter a name in the "Integration name" field to identify the integration and click  Update.

28. In the Send data tab, click  Create new send event.

29. On that screen, give the event a name.

30. In the Webhook URL to send the message box, paste the EcommApp API URL for sending push notifications. In this case, the URL is "https://panel.ecommapp.com/api/pushnotifications".

31. Click Add new header and set the Name to "Authorization". In the Value field, enter the EcommApp API token. The structure should be "Bearer" followed by the API token provided by EcommApp.

32. Click Add new header and set the Name to "Content-Type" and the Value to "application/json".

33. Click  Add new field to create each of the custom fields and complete their information. Make sure the fields use the exact IDs listed below for the integration to work:

• Create a Text field named "Button Text" with ID "buttonText".
• Create a Text field named "customerId" with ID "customerId".
• Create a Text field named "guestId" with ID "guestId".
• Create a Text field named "link" with ID "link".
• Create a Text field named "text" with ID "text".
• Create a Text field named "title" with ID "title".
• Create a Text field named "imageUrl" with ID "imageUrl".

34. Click  Save.

STEP 4: Creating the workflow to send a push notification in EcommApp

(In this section, you’ll create the strategy to send a push notification to the EcommApp ).

35. Go to Workflows and click    Create new workflow and select a New blank workflow.

36. In the "Start Node", select the Dynamic Plus Segment you created to filter EcommApp contacts.

37. Find the action-type node you created during your EcommApp integration (step 3) and add it to your workflow.

38. In the node configuration, drag the "EcommApp Customer Id" field from the contact information and match it with the "customerId" value in the right column.

39. Drag the "EcommApp Guest Id" field from the contact information and match it with the "guestId" value in the right column.

40. The rest of the values should be linked to a Literal field to define the structure and content of your push notification in EcommApp.

41. Click Apply to save the node configuration and activate your workflow.