Before you start this exercise, ensure you have installed and setup NodeJS and Adobe I/O CLI on your machine. See Exercise 22.1 - Setting up your environment for details.
We need to figure out the webhook we can connect streaming events from the EXP News website to our dashboard app. Actually, you should already have spotted it as output of your
aio app deploy from exercise 22.3.2. You can copy it straight from here; it is the first line in the list of Your deployed action; the one ending with webhook. E.g.
https://133309-rmaurexpnews-development.adobeio-static.net/api/v1/web/poc-platform-realtime-0.0.1/webhook. Copy the URL for webhook and save it somewhere so you can use it later.
We will now set up the server side forwarding for our Project Firefly EXP News Firefly dashboard app using the webhook we discovered in the previous exercise.
Go to https://experience.adobe.com/#/data-collection/. Ensure you are in the correct organization, verify that in the upper right corner:
In the left menu, click Server. You’ll see an overview of the server properties.
Search for your server side property you created as part of Module 21 (e.g. vangeluw - Demo System (24/04/2021) (Edge)) and click to open it.
Click on Data Elements in the left rail, and then click on Add Data Element to add a new data element. In the data element definition screen provide the following information:
Corefrom the list.
Pathfrom the list.
Click on Save to save the data element.
Click on Rules in the left rail. You will see an overview of the rules created for this property, with the All Pages rule from Exercise 21 listed. Click Add Rule.
In the Create Rule screen:
Provide a Name, e.g.
All Pages EXP News. Click on + Add to add a new Condition.
In the Condition Configuration screen and provide the following information:
Core - Value Comparison
brandNamefrom the dialog that shows up by clicking on the three cylinder icon. The field is populated with
Click on Keep Changes to return to the Create Rule screen. You’ll then be back here, click on + Add to add a new action.
In the Action Configuration screen provide the following information on the left panel.
Adobe Cloud Connector
Make Fetch Call
Adobe Cloud Connector - Make Fetch Call
Makes ure the Body looks like this:
Click on Keep Changes. Your screen should look like this. Click Save.
Click on Publishing Flow on the left to deploy the changes in your Adobe Experience Platform Data Collection Server configuration.
Click on … right from v1 in your Development column and click Edit.
In the Edit Library screen, click Add All Changed Resources. You will see an overview of the latest changes. Click on Save & Build for Development.
After a while you will return to the previous screen. Wait until the circle before v1 stops spinning and turns solid green. Your updated server side forwarding rules for EXP News pages are now deployed.
We will now demonstrate how interactions in the EXP News website will be updated in real time in our EXP News dashboard app.
To do this:
Go to https://public.aepdemo.net.
Enter your configuration ID and click Load Configuration.
At the bottom of the page, click Save Configuration
Click on Select LDAP and pick your LDAP name from the list. Click Save.
Click on Select Brand and select
EXP News (Demo brand for mediaent) from the list.
Click on Save.
From the Environment Status screen
Click on the EXP News logo. This will take you to the EXP News website.!
On the EXP News website, click around to read articles and look at videos.
Return to your EXP News Real-time Dashboard Firefly app; it should refresh your interactions with the EXP News site in real time.
Have fun further exploring this. If you are more of a developer and adventurous and do have spare time, explore the source code of the dashboard app and make changes as you see fit.
You have now finished this exercise and this module.
Next Step: Summary and benefits