Skip to Content

Introduction

Welcome to the blog post of the Expert Services Marketing Practice.

We are happy to share our experience with you around Marketing Integration, Analytics, and Business Technology.

You want to see more blogs from Expert Services? Click here

Table of Content

Background

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 blog post, 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.

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 Blog Post following product release version has been used.

SAP Marketing Cloud Release: 1808

Upgrade Schedule:

SAP S/4HANA Cloud – upgrade schedule

SAP Cloud Platform (trial) November 2018 version

What’s new section/ Release Notes:

SAP Cloud Platform What’s new

 

 Note:

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

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

Step 1: Create a landing page on SAP Marketing Cloud

Create your own custom specific landing page via the Content Studio App. Please follow the guide here.

In my example below I created a simple landing page which is providing a form to gain 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 Step1 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.ondemand.com/elastic-access/sap/lpi/",ResultHeadersPath:"ResultHeaders",CORS:true,CSRFTokenHeader:"",AppendScenarioParameter:"_L54AD1F204_",Tenant:"my123456.s4hana.ondemand.com",Version:"1.2.3"};

[…]

 

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.

 


Optional: Make the landing page available to the public

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 documentation for additional information.

References

SAP Cloud Platform

SAP Tutorials Deploy HTML5 App

SAP Help Authentication SAP Cloud Platform

SAP Cloud Platform Custom Domain Service

SAP Marketing Cloud

SAP Help Landing Page Design

SAP Help Double Opt In Process

SAP Help Landing Page Publication

 

Conclusion

In this blog post, 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.

You want to see more blogs from Expert Services? Click here

Your SAP Expert Services – Marketing Practice team.

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Christof Blaickner

     

    Hello Maik Offerle

    thank you very much for this post. If I have time a will give it a try.

    One question on that:
    If I do a change on the landingpage in the SAP Marketing Cloud  – all Hashkeys for the integrated fields are new generated.
    Do I have to adapt the files (css, …) now once again with the new Hashkeys in the Web IDE? Or are those changes “recognised” by the API and the adaption are made automatically?

     

    BR Christof

    (1) 

Leave a Reply