A Quick(er) Look at Your AEP Web SDK Payloads

[#1]

Have you ever attempted to use the Adobe Experience Platform Debugger to do some very simple troubleshooting tasks, like examining only your Web SDK payloads?  I have, and occasionally, my experience doing so hasn't been all that great, as exemplified by the following internal dialog:

• "Alright, I need to find a specific XDM object within a server call's payload".
• "I think I know which server call contains the correct payload and I think I know where to look within the payload itself"
• "Okay, so I'll click here, then click there, then click here."
• "Is that it? Nope, darn. Okay, go back."
• "Click there, click here".
• "Wait, what is this?"
• "Click here, click there, click, click, click."
• "Hmmm, why can't I just see everything all at once?"

If you couldn't tell, it's all the clicking and guesswork that drives me crazy.  So, if you've had the same type of internal dialog as I have, please know you can set up a completely different method to look at your AEP Web SDK payloads – with a lot less clicking and guesswork required!

Step 1: Add code to onBeforeEventSend

You can use the onBeforeEventSend property for the AEP Web SDK to push (i.e., copy) the contents of each outgoing payload into a global JavaScript variable for later examination.   I use the name xdmp for that variable and will instantiate it as a JavaScript array object.

To set up this xdmp variable via the AEP Web SDK extension in Adobe Data Collection Tags, click on the "Edit on before event send callback code" link under the extension's Data Collection section (as shown here):

If you don't use the extension, you can still set up onBeforeEventSend "manually" when you configure the Web SDK's alloy object.  In either case, add the following code to the end of the onBeforeEventSend property…

window.xdmp = window.xdmp || [];
window.xdmp.push(content)

…and then save/publish/deploy the changes.  No more set up work required!

Step 2: Use your browser's console to grab the xdmp variable contents

Once you deploy the onBeforeEventSend code change…

• Go to any of your web pages that use the AEP Web SDK
• Open up your browser's developer tools, and go to the Console tab. 
• Type xdmp into the console command line and hit enter
• Right click on the result generated by the console and then left-click on "Copy object" (or its equivalent, depending on the browser you are using) to copy the contents of the xdmp variable to the clipboard

Step 3: Paste the xdmp variable's contents into a text editor

Paste the clipboard's contents into a text editor for further examination.  My preferred text editor (for Windows) is Notepad++, but I know that VS Code is also popular across multiple platforms.

Pasting the clipboard's contents into the text editor will dump the entire series of completely "parsed-out" payloads that were contained in xdmp!    And since the payloads (and XDM in general) are based off JSON, the structure for the payloads will be identical to the structure for any other JSON objects.

In the gifs above, you'll notice the xdmp array contained three objects, each containing payloads that were sent out via three separate sendEvent calls.  The following screenshot contains the complete contents of the first payload and the beginning of the contents of the second payload.

With a completely parsed-out list of Web SDK payloads, finding the exact field that you want to analyze is now as simple as using your text editor's "Find" functionality (via ctrl-F, command-F, etc.) – no clicking or guesswork required! 

Now, if your site uses any Single-page Application-based technology or contains any pages where the DOM doesn't need to reload between your tracked actions, the xdmp array could continually increase in size and become increasingly difficult to parse through.   In such cases - and at other times - you would probably need to examine the contents of only the most-recent payload.  To do so, type xdmp[xdmp.length – 1] into the console rather than just xdmp.  The console will then provide just the contents of the most recent payload instead of the whole entire list of payloads.    You can then right-click on the result to begin the same examination process as described earlier (i.e., "Copy object" then paste into your text editor).

I hope you find this alternate method of examining your AEP Web SDK payloads to be useful.  If you have any other tips, tricks, questions, or comments, feel free to reach out to me directly.  Thanks!

[#2]

@kenmckell  awesome post..helped lot while debugging and validating.

[#3]

Nice one, @Ken !

I also like the "Expand recursively" thing to see the full data tree in the console. 

[#4]

@kenmckell Your technical blog was exceptional—clear, well-structured, and packed with valuable insights. It’s evident how much expertise and effort went into crafting it. Great work!