Learn how to validate your Platform Web SDK implementation with 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 have never used the debugger before—and this one is different from the older Adobe Experience Cloud Debugger—you might want to watch this five-minute overview video:
In this lesson, you will use the Adobe Experience Cloud Debugger extension to replace the tag property hardcoded on the Luma demo site with your own property.
This technique is called environment switching and will be helpful later, when you work with tags on your own website. You are able to load your production website in your browser, but with your development tags environment. This ability enables you to confidently make and validate tags changes independently from your regular code releases. After all, this separation of marketing tag releases from your regular code releases is one of the main reasons customers use tags in the first place!
At the end of this lesson, you will be able to use the debugger to:
You are familiar with Data Collection tags and the Luma demo site and have completed the following previous lessons in the tutorial:
This tutorial uses a publicly hosted version of the Luma demo website. Open the homepage and bookmark it.
The Experience Platform Debugger has a cool feature that allows you to replace an existing tag library with a different one. This technique is useful for validation and allows us to skip many implementation steps in this tutorial.
Make sure you have the Luma site open and select the Experience Platform Debugger extension icon
The Debugger will open and show some details of the hardcoded implementation, which is unrelated to this tutorial (you may need to reload the Luma site after opening the Debugger)
Confirm that the Debugger is “Connected to Luma” as pictured below and then select the “lock” icon to lock the Debugger to the Luma site.
Select the Sign In button and sign into Adobe Experience Cloud using your Adobe Id.
Now go to Experience Platform Tags in the left navigation
Select the Configuration tab
To the right of where it shows you the Page Embed Codes, open the Actions dropdown, and select Replace
Since you are authenticated, the Debugger is going to pull in your available tag properties and environments. Select your
Web SDK Course property
Select the Apply button
The Luma website will now reload with your tag property.
As you continue the tutorial, you will use this technique of mapping the Luma site to your own tag property to validate your Platform Web SDK implementation. When you start using tags on your production website, you can use this same technique to validate changes.
You can use the Debugger to validate your Platform Web SDK implementation and view the data sent to Platform Edge Network:
Go to Summary in the left navigation, to see the details of your tag property
Now go to Experience Platform Web SDK in the left navigation to see the Network Requests
Open the events row (don’t worry if this screenshot shows more requests than yours, it includes requests from future lessons and you can ignore for now)
Note how we can see the
web.webpagedetails.pageView event type we specified in our Send Event action, and other, out-of-the-box variables adhering to the
AEP Web SDK ExperienceEvent Mixin format
Scroll down to the
web object, select to open it and inspect the
webPageDetails.siteSection. They should match the corresponding digitalData data layer variables on the homepage
You can also validate the Identity Map details:
Log into the Luma site using the credentials
Return to the Luma homepage
Open the Experience Platform Web SDK section in the left navigation
Select the events row to open details in a pop-up
Search for the identityMap within the pop-up. Here you should see
lumaCrmId with three keys of authenticatedState, id, and primary:
These types of request details are also visible in the browser’s web developer tools Network tab (assuming the website is loading your tag library).
Open the browser’s web developer tools Network tab and reload the page. Filter for calls with
/ee to locate the call, select it, and then look in the Headers tab, and Payload tab
Go to the Response tab and note how the ECID value is included in the response. Copy this value as you will use it to validate the profile information in the next exercise
You may not see the same amount of payload requests as in the screenshot above. This disparity is because future lessons for setting up Target were completed at the time of the screenshot being taken. You can ignore this difference for now.
With an XDM object now firing on a page, and with the knowledge of how to validate your data collection, you are ready to set up the individual Adobe applications using Platform Web SDK.
Next: Set up Experience Platform
Thank you for investing your time in learning about Adobe Experience Platform Web SDK. If you have questions, want to share general feedback, or have suggestions on future content, please share them on this Experience League Community discussion post