CX Works

A single portal for curated, field-tested and SAP-verified expertise for your SAP C/4HANA suite. Whether it's a new implementation, adding new features, or getting additional value from an existing deployment, get it here, at CX Works.

Host Your Landing Page for SAP Marketing Cloud on SAP Cloud Platform in 10 Minutes


Host Your Landing Page for SAP Marketing Cloud on SAP Cloud Platform in 10 Minutes

SAP Marketing Cloud offers a built-in integration service, which allows you to use forms on your web server without having to implement a custom integration service as described in this article or in the application help for the Custom Form Integration.

You can find more details in the application help for the Standard Form Integration.


Customers who want to leverage the landing page functionality in SAP Marketing Cloud must handle the deployment of the landing page on their own. Typically, this involves setting up an additional web server for hosting.

Customers are responsible for hosting their landing pages. This is because web server setups are very specific to the customer’s requirements. Also, their security mechanism needs to be accurate to ensure no harm is caused to the general SAP Marketing Cloud setup.

In this article, you will learn how to set up landing pages in only a few minutes on the SAP Marketing Cloud and to deploy them on the SAP Cloud Platform. In this situation, no additional web server will be needed, and the SAP Cloud Platform setup will ensure a secure system environment.

Table of Contents

Prerequisites

  • Ensure your SAP Marketing Cloud is ready. We will follow the landing page standard integration process documented here.
  • Ensure your SAP Cloud Platform (Trial Account) is ready. Please follow the guide here .

Product Version

For this article, the following product release versions were used:

SAP Marketing Cloud

Release: 1808

Upgrade Schedule: SAP S/4HANA Cloud Upgrade Schedule

What’s new section/ Release Notes: What's New

SAP Cloud Platform (Trial)

November 2018 version

Since we have short release cycles, the content in this article might look different from what you find on your SAP Marketing Cloud and your SAP Cloud Platform (Trial).

  • SAP Marketing Cloud: quarterly releases
  • SAP Cloud Platform: different release cycles for services 


Steps

Step 1: Create a Landing Page on SAP Marketing Cloud 

Create your own custom specific landing page using the Content Studio app. Please follow the guide here.

In the example below, we created a simple landing page, in which we are displaying a form to obtain some user attributes. 

Keep in mind, that you can use landing pages in SAP Marketing Cloud to leverage the double opt-in process. See the process flow here .


After saving your landing page, download the HTML, CSS and JavaScript files through the Content Studio app. These files are needed to deploy the landing page on SAP Cloud Platform. 


Step 2: Deploy the Landing Page on SAP Cloud Platform

In this step, we will create an HTML5 application through the SAP Cloud Platform Web IDE Full-Stack application on Neo environment.

Connect to your personal Neo Trial Account and open the Web IDE Full-Stack service.

On the SAP Web IDE Full-Stack, create a new SAPUI5 application project from the template and just add an XML view type (see the image below).

See Step 1 of this SAP Cloud Platform guide for some additional help.

If we build and deploy this project to the SAP Cloud Platform now, it would create an empty SAPUI5 page. So, our task is to replace the standard SAPUI5 files with the downloaded landing page files that we need.

In the “webapp” folder, upload the downloaded CSS and JavaScript files from the SAP Marketing Cloud. 

Rename the SAP Web IDE Full-Stack standard “index.html” file to “index_backup.html”.  Then, upload the landing page HTML file from SAP Marketing Cloud as “index.html”. See the image below:




Next, follow the Standard Integration Guide for landing pages and adjust the JavaScript file “sapContentPage.js”. This change only needs to be done once.


The beginning of the “sapContentPage.js” should look like this: 

[...]
(function()
{"use strict";var C={BasePath“https://s4cloudlpia9f27a988.cert.hana.o
[...]


Save all your changes, build and deploy the project to your SAP Cloud Platform Trial account. 



Click on the highlighted link to open your deployed landing page in a new browser window (see image below). 



In the new browser window, test the landing page and locate the contact created in SAP Marketing Cloud through the “Inspect Contact” app after successful submission. 




Step 3: Make the Landing Page Available to the Public (Optional)

After step 2, the landing page is still unavailable to the public as the SAP Cloud Platform Identity Authentication service is checking the authentication. Only users, with a  corresponding SAP Cloud Platform user (in this case the SAP Cloud Platform trial user), have access.

To change this, we need to modify some settings in the “neo-app.json” configuration file of our application. See the following documentation for additional information.

Add the following setting: “authenticationMethod”: “none”. Your neo-app.json should look like the following:

{
  "welcomeFile": "/webapp/index.html",
  "routes": [
    {
      "path": "/resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/resources"
},
      "description": "SAPUI5 Resources"
    },
    {
      "path": "/test-resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/test-resources"
},
      "description": "SAPUI5 Test Resources"
    }
  ],
   "authenticationMethod": "none",
  "sendWelcomeFileRedirect": true
}


Save your changes, build the app and deploy to the SAP Cloud Platform.

There should no longer be a check for an SAP Cloud Platform user anymore. Please be aware, however, of the potential security risk. 

Further Extensions and Use Cases 

As you may notice, our current deployment URL of the HTML5 application is quite technical. For example, https://xxxxxxtrial.dispatcher.hanatrial.ondemand.com/index.html?hc_reset .  

A customer requirement could require using a customer-specific domain. Even for this requirement, there is a suitable service on SAP Cloud Platform available: the custom domain service . See the following documentation.

For additional convenience for your business users, you could implement the landing page's custom code   to automate the deployment on SAP Cloud Platform. See the following  documentation for additional information. 


Conclusion

In this article, you learned how to deploy an SAP Marketing Cloud landing page on SAP Cloud Platform in just 10 minutes. Through this approach, you can easily download and deploy landing pages and use them for your marketing campaigns.

You also learned how to make it more convenient for the business user to deploy their landing page.