CX Works

CX Works brings the most relevant leading practices to you.
It is a single portal of curated, field-tested and SAP-verified expertise for SAP Customer Experience solutions

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

8 min read


Host Your Landing Page for SAP Marketing Cloud on SAP Business Technology 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 Business Technology Platform (SAP BTP). In this situation, no additional web server will be needed, and the SAP BTP 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 BTP (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 BTP (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 BTP (Trial).

  • SAP Marketing Cloud: quarterly releases
  • SAP BTP: 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 Forms in SAP Marketing Cloud to leverage the double opt-in process. For more information click 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 BTP. 


Step 2: Deploy the Landing Page on SAP Business Technology Platform

In this step, we will create an HTML5 application through the SAP BTP 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).

If we build and deploy this project to the SAP BTP 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 BTP 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 Identity Authentication service is checking the authentication. Only users, with a  corresponding SAP BTP (in this case the SAP BTP 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 BTP.

There should no longer be a check for an SAP BTP 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 BTP 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 BTP. See the following  documentation for additional information. 


Conclusion

In this article, you learned how to deploy an SAP Marketing Cloud landing page on SAP Business Technology 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.

Overlay