- SAP Managed Tags:
Introduction
Website/App Feedback projects are a creative way to gain feedback on your website or mobile app. They use intercepts & creatives to achieve this. These graphics can be displayed in your website or app as overlays, feedback buttons, pop-ups etc. In this blog post we will focus on how to integrate this intercept into our S/4 system, be it on-premise or cloud.
Solution
Prerequisites:
- A Qualtrics account with authorization to create Website/App feedback
- A survey & website/App feedback
- WebIDE to create Fiori Plugin
- S/4 System (for On-premise integration)
- SCP Portal Service Access (To demonstrate Cloud Integration)
For the first two prerequisites, we already have support documents provided by Qualtrics. I will drop the links below:
Survey Creation - https://www.qualtrics.com/support/survey-platform/survey-module/survey-module-overview/
Website/App Feedback - https://www.qualtrics.com/support/website-app-feedback/creating-website-app-feedback-project/
Now that the survey & the Website Feedback is ready, I will start with the next steps.
Login to your SCP Cockpit, select your sub-account & Start WebIDE.
Now create a new project from template, and select 'SAP Fiori Launchpad Plugin'.
Fiori Plugin Project
In case you are not able to see this template, go to tools->preferences. Select Extensions from the left hand side pane, and turn on Fiori Launchpad Extensibility.
Extensions
Next, create the project. Provide the Project name, Plugin ID & title. And click on finish. Your Fiori Launchpad Plugin is created.
Next we need to call the Qualtrics Feedback created, in this plugin application.
Now go to the component.js file in the plugin application. Call the below line of code inside init function.
this.embedWebsiteFeedbackStarter();Now copy the below piece of code for the above method created to trigger the intercept.
embedWebsiteFeedbackStarter: function () {
/* eslint-disable */
//BEGIN QUALTRICS WEBSITE FEEDBACK SNIPPET
var g = function (e, h, f, g) {
this.get = function (a) {
for (var a = a + "=", c = document.cookie.split(";"), b = 0, e = c.length; b < e; b++) {
for (var d = c[b];
" " == d.charAt(0);) d = d.substring(1, d.length);
if (0 == d.indexOf(a)) return d.substring(a.length, d.length)
}
return null
};
this.set = function (a, c) {
var b = "",
b = new Date;
b.setTime(b.getTime() + 6048E5);
b = "; expires=" + b.toGMTString();
document.cookie = a + "=" + c + b + "; path=/; "
};
this.check = function () {
var a = this.get(f);
if (a) a = a.split(":");
else if (100 != e) "v" == h && (e = Math.random() >= e / 100 ? 0 : 100), a = [h, e, 0], this.set(f, a.join(":"));
else return !0;
var c = a[1];
if (100 == c) return !0;
switch (a[0]) {
case "v":
return !1;
case "r":
return c = a[2] % Math.floor(100 / c), a[2]++, this.set(f, a.join(":")), !c
}
return !0
};
this.go = function () {
if (this.check()) {
var a = document.createElement("script");
a.type = "text/javascript";
a.src = g;
document.body && document.body.appendChild(a)
}
};
this.start = function () {
var t = this;
"complete" !== document.readyState ? window.addEventListener ? window.addEventListener("load", function () {
t.go()
}, !1) : window.attachEvent && window.attachEvent("onload", function () {
t.go()
}) : t.go()
};
};
try {
(new g(100, "r", "QSI_S_ZN_6sO4Br3Spbt61a5",
"https://zn6so4br3spbt61a5-sapdemo.siteintercept.qualtrics.com/SIE/?Q_ZID=ZN_6sO4Br3Spbt61a5")).start()
} catch (i) {}
//END WEBSITE FEEDBACK SNIPPET
/* eslint-enable */
},You can also get this code from your website app created in Qualtrics. If you copy the above code, you need to change the intercept URL & ID.
try {
(new g(100, "r", "QSI_S_ZN_6sO4Br3Spbt61a5",
"https://zn6so4br3spbt61a5-sapdemo.siteintercept.qualtrics.com/SIE/?Q_ZID=ZN_6sO4Br3Spbt61a5")).start()
} catch (i) {}To get it from Qualtrics, go to settings & click on deployment, in your feedback created.
Website Feedback
Code Snippet from Qualtrics
Now your Fiori Plugin is ready. Save it & run. You will be able to see the feedback button at the corner of the screen. Click & it expands with your survey questions.
Feedback Button
Next, deploy this application to SAPUI5 ABAP Repository. Select the system, and then deploy.
Once Deployed, it will be available in the gateway system.
Go to customizing page of your Fiori Launchpad in the S/4 system or use tcode /UI2/FLPD_CUST.
Create a custom catalog. Next, click on target mapping, and select create target mapping.
Target Mapping for Catalog
Fill in the details as given in the below screenshot.
Configure Target Mapping
You can get your URL from tcode SICF & your ID will be available in manifest.json file in your Fiori Plugin app in WebIDE. Rest of the details remain the same.
Now save the mapping. Go to your gateway system backend & create a role. Assign the catalog to the role and set the role to the user. Now you are all set.
Login to your Fiori Launchpad using the user you assigned the role to. Voila, there you have your intercept. Now respond to the survey & submit. Go to Qualtrics & check if your response is updated. That completes our Qualtrics Integration with S/4 On-Prem system.
Next, to integrate into SCP Fiori Launchpad, we will make use of the portal service in your SCP Cockpit. But first, deploy your Fiori Plugin App in WebIDE into SAP Cloud Platform.
Once done, select services on the left hand pane of your SCP Sub-account, choose Portal service & click on go to service.
Portal Service
Create a new site. Choose the Fiori Launchpad Template.
Portal Template
Once the site is created, go to Apps on the left hand pane under content management. Click on '+' button to add a new app.
App type
Your Website Feedback is now ready in SCP Launchpad. Next click on the publish site icon(looks like globe) & click on publish and open. Your SCP Launchpad will open with the feedback button for survey in it.
Tip: We can also integrate this App feedback into websites. All you need to do is copy the code from deployment in Qualtrics & put it in your website's html page within the body tag (Eg; index.html).
Conclusion
In this blog post, I have shown steps to integrate a Simple Qualtrics Intercept with feedback button onto S/4 On-Prem & Cloud Fiori Launchpad. There are multiple options such as banners, overlays, sliders, pop-up etc. Feel free to try them.
Thank you. 🙂
9 Comments
