1.4 Client-side Web Data Collection

1.4.1 Validate the data in the request

Install the Adobe Experience Platform Debugger

The Experience Platform Debugger is an extension available for Chrome and Firefox browsers which helps you see the Adobe technology implemented in your web pages. Download the version for your preferred browser:

If you’ve never used the Debugger before - and this one is different from the previous Adobe Experience Cloud Debugger - you might want to watch this five minute overview video:

Given that you’ll be loading the demo website in incognito mode, you need to make sure the Experience Platform Debugger is also available in incognito mode. To do so, go to chrome://extensions in your browser and open the Experience Platform Debugger extension.

Verify that these 2 settings are enabled:

  • Developer Mode
  • Allow in incognito

EXP News Homepage

Open the EXP News website

For this exercise, you’ll be using the EXP News website.

In a new incognito/private browser tab, open https://public.aepdemo.net/.

EXP News Homepage

Enter the Configuration ID you created in Module 0 and click Load Configuration.

Scroll down and click Save Configuration.

EXP News Homepage

Go to Select LDAP, select your LDAP and click Save.

EXP News Homepage

Next, go to Select Brand , select EXP News and click Save.

EXP News Homepage

On the Admin homepage, click the logo to open the website.

EXP News Homepage

You’ll now see the EXP News homepage.

EXP News Homepage

Use the Experience Platform Debugger to see the calls going to the Experience Edge

Make sure you have the EXP News site open and click the Experience Platform Debugger extension icon.

EXP News Homepage

The Debugger will open and show the details of the implementation created in your Adobe Experience Platform Data Collection Property. Remember that you’re debugging the Extension and rules that you have just been editing.

Click the Sign In button on the top right to authenticate. If you already have a browser tab open with the Adobe Experience Platform Data Collection interface, the authentication step will be automatic and you won’t have to enter your username and password again.

AEP Debugger

Confirm the Debugger is Connected to Home as pictured above and then click the lock icon to lock the Debugger to the demo website. If you don’t do this, the Debugger will keep switching to expose the implementation details of whatever browser tab is in focus, which can be confusing.

AEP Debugger

Next, click any random article on the EXP News homepage.

AEP Debugger AEP Web SDK extension

Now click AEP Web SDK in the left navigation, to see the Network Requests.

Each request contains an events row.

AEP Debugger AEP Web SDK extension

Click to open the events row. Note how you can see the web.webpagedetails.pageViews event, as well as other, out-of-the-box variables adhering to the AEP Web SDK ExperienceEvent Mixin format.

Events value

These types of request details are also visible in the Network tab. Filter for requests with interact to locate the requests sent by Web SDK. You can find all the details of the XDM payload in the Request Payload Headers:

Network tab

Next step: 1.5 Implement Adobe Analytics and Adobe Audience Manager

Go Back to Module 1

Go Back to All Modules

On this page