One of the most classical experience management (XM) cases in e-commerce that we tackled in our team is cart abandonment. Indeed, the number of abandoned carts is one of the key indicators of a web shop well-being. It provides us with various operational data (O-data) to start with: number of carts, products in those carts, applied discount codes, context information about the user, location etc.

Despite of having all these data sets, it is still a tedious task to answer the question: why the customers do not complete their purchases and leave their carts abandoned? In this blog post I would explain how you can set up your systems to gain experience data (X-data) insights in this process and try to turn a leaving customer into a buying customer by acting according to their feedback.

Process Overview

We started to model this scenario with the customer journey. In our case, the company operates in B2B segment, and the key persona is a purchaser logging into the web shop. Note the As-Is and To-Be processes below and how we try to understand and change the customer’s mindset.

As-Is:
Source: own graphic

To-Be:
Source: own graphic

Architecture Overview

To cover our To-Be process we have agreed on the following architecture:Source: own graphic

The major assumption we have is that most parts of the architecture are already in place. The company already uses SAP Commerce Cloud and SAP Sales Cloud. What we do here is introduce Qualtrics XM Platform and integrate it into the landscape as a side-by-side extension. You will see that it will require minimal adaptations in those existing systems.

Technical Setup

Now let’s have a look at the components separately and set them up.

Qualtrics

First I define a Survey in Qualtrics in CustomerXM. The first question is to ask why a customer did not complete a purchase.
(this and all further images are screenshots from our internal systems)

This is our routing question: for different reasons of abandonment we want to have different reactions. E.g. for “Wrong Price” we can offer a discount code. But in our scenario, let us rather concentrate on “Delivery too late”. If it is selected, we propose the customer to try to sort it out together.

Next junction: If the customer does not want it, move straight to the end message and just record the response, without any follow-up. If the customer agrees, we ask for details like desired delivery date.

Note: there is no need to ask which products he wanted to purchase or what was delivery address as we can get it all from existing cart data.

Then I create a second project in Qualtrics – Website Feedback in CustomerXM. There I create a Creative with type Pop Over, and an Intercept, which is activated when:

• • current URL contains “cart” (or shipping date selector, depending on the implementation)

• • user tries to leave the page

In settings we now have the code which I copy and use later to embed it into the web shop. This snippet is a script section containing auto-generated JavaScript code.

SAP Commerce Cloud

With the code snippet from Qualtrics, let’s go to SAP Commerce Cloud – Smart Edit. There select your storefront and edit the Homepage. Select the component which is suitable for embedding the code snippet and place it there. In our setup I put it into the footer as it is part of every single page in the shop.

An important side story here: as you’ve seen above in the Qualtrics part, we have a separate Website Feedback project, where you can define multiple Creatives and Intercepts, and the code snippet I’ve embedded relates to this whole project. The beauty of it is that you embed it into your webpage only once, but can later on change conditions, add further Intercepts or adapt Creatives without the need to touch the spot (Commerce Cloud) where it is embedded.

SAP Sales Cloud

In case a customer goes through our survey flow and wants to get contacted, we want to create a task in SAP Sales Cloud and assign it to internal sales to check the stock levels and contact customer to find a solution together.

To achieve this, we do not need any additional setup in Sales Cloud. The only thing needed is OData APIs to create a task. This is a standard API with the endpoint: /sap/c4c/odata/v1/c4codataapi/TasksCollection

Sample payload:

{
    Subject: "Cart Abandonment - Check Delivery Time",
    Status: "1",
    MainAccountPartyID: accountid,
    MainContactPartyID: contactid,
    ProcessorPartyID: "8000000002",
    MainEmployeeResponsiblePartyID: "8000000002",
    PriorityCode: "1",
    TasksTextCollection: [
        {
            TypeCode: "10002",
            Text: text
        }
    ]
}

Actually, I use 2 API calls to achieve it. First, I call the API with GET method and header x-csrf-token = fetch. This GET call returns the generated CSRF token in header. Second, I use it in the POST call as a header x-csrf-token = <generated token>.

Middleware Component

Now we need to trigger task creation from Qualtrics. Direct API call is not an option, as we need to map some data, and also fetch CSRF token before doing a POST call to OData API in SAP Sales Cloud. That’s why I will put a middleware system in between. In our case, we decided to build an express-based Node.js application deployed to Cloud Foundry hosted in SAP Cloud Platform. There can be other ways to implement it, like e.g. CPI or third-party middleware solution.

To briefly describe the solution, in our Node.js app I define a route /c4c/task for POST method. In its controller I parse the data and call corresponding C4C OData APIs using axios package. Before calling POST method I fetch the CSRF token first and pass it over to the POST method (as I already explained above).

After development is finished, I deploy the app to Cloud Foundry. When this is done, I copy the endpoint URL (which consists of application route from Cloud Foundry + app-defined “/c4c/task”) which I embed into Qualtrics survey flow on the right spot. Here look at the body parameters I transfer: these are embedded data fields or question answers. You define the names of the body parameters on your own and of course need to make sure to use the same when parsing the request in Middleware.

What about embedded data?

In the previous steps we connected the dots. The point which is still open is what data we shall pass to Sales Cloud during task creation.

First, these are the answers to the survey questions. Second, it is context information, which is product data and customer data. There are the following options to obtain this context info:

• • read data from the web page

• • read data from cookies

To set it up, go back to Qualtrics Website Feedback project, open your Intercept and corresponding Action Set and adjust the Embedded Data:

For example for “product_name”:

document.getElementsByClassName(“checkout-order-summary-list-items”)[0].getElementsByClassName(“details”)[0].getElementsByClassName(“name”)[0].innerText;

Do not forget to include the same data fields into the Survey Flow as Embedded Data and later hand them over with WebService call as explained above.

Note: to make use of context data flawlessly you need to cross check with Commerce Cloud to see which information is available on the page and what is the best way to fetch it.

Process Walkthrough

Now when the setup is finished let’s go through the end-to-end process.

First, a purchaser goes to the web shop, places products to the cart, proceeds to checkout and sees that the proposed delivery date is too late. He decides to drop the process and to leave the page. When he navigates away, a pop over comes:

The purchaser decides to give his feedback and answers the questions, gives his consent to be contacted and provides additional info:

After survey completion, a task is created in SAP Sales Cloud and assigned to an internal sales representative (in our case a specific person responsible for handling these requests). She gets a corresponding notification and processes it. When she is ready, she contacts the customer using contact data from the customer record.

Conclusion and Key Takeaways

The scenario I described covers two major steps in experience management:

• • Gathering customer feedback (how we embed feedback functionality as a listening post into the existing application)

• • Acting based on the feedback and closing the loop (follow-up actions like Task in Sales Cloud planned in the background)

Available as a side-by-side extension it allows to easily embed such features into the existing processes, gain quick wins and move towards the goal of providing supreme customer experience.