How to debug Web SDK hits with AEP Debugger and Excel

[#1]

If you use Web SDK for tracking purposes, you'll find that it is very difficult to read the event data in the AEP Debugger browser extension. This is because, by default, the Debugger does not parse JSON strings. As a result, all of the Web SDK event data gets lumped up in one loooooooooong single string, making it difficult to validate the individual field values properly.

Even worse, because of this deficiency, the Excel download that the Debugger provides also suffers from very looooooooong JSON strings. And given how Excel formats cell sizes, the resulting spreadsheet can be very unwieldly to use! Contrast this with the Excel download that the Debugger provides for Analytics hits. Now, that download is much easier to open in Excel, and the individual data points, e.g. props, eVars, events, can be inspected more efficiently.

(Side note: I've already added an Idea to parse the JSON output for Excel downloads in the debugger. Please upvote/like it if you want to see this Debugger enhancement too.)

Until the Debugger improves how it displays JSON outputs, I've resorted to the following steps to be able to validate Web SDK hits when using the Excel download from the Debugger. I hope these steps are also useful for those of you who need to validate your Web SDK hits.

1. Open the Debugger.
2. Click the "Experience Platform Web SDK" tab in the left rail.
3. Browse your website as required.
4. As you test, the Web SDK table in the Debugger should fill up with hits.
5. After finishing browsing, click "Download" from Web SDK in the Debugger. You should download an Excel file.
6. Open the Excel file.
7. Look for the row where column A is "events". It should be at or around row 13.
8. Inspect the values in there.

For step 8, I had used a 3rd party website, https://www.convertcsv.com/json-to-csv.htm, to convert the JSON values in the hits to a format that is easier to read in Excel:

1. Copy the "events" row from the Web SDK Excel file.
2. In a new Excel file, paste-and-transpose what had been copied. You should now get a single column of values.
3. Delete the first row, which is just the word "events".
4. Copy the entire column.
5. In a text editor, e.g. Notepad, paste what you had copied.
6. Replace all of the line breaks like so:

]
[

becomes

 ,

  

1. Copy the updated text into the ConvertCSV webpage's "Step 1: Select your input" text box.
2. In the ConvertCSV webpage's "Step 3: Generate output", click the "JSON to Excel" button. You should download an Excel file.
3. Open the Excel file.
4. Copy all of the columns.
5. Back in the Web SDK Excel file, go to the last row and paste-and-transpose what had been copied.
6. With the pasted cells still highlighted, click "Sort" in your Excel toolbar to sort the results from A-Z.

You can now inspect the Web SDK values more clearly.

Yuhui | yuhui.sg | Analytics, A/B Testing, Development since 2006

[#2]

Thanks @yuhuisg for sharing your workaround on debugging web sdk

[#3]

Pretty helpful! @yuhuisg Thanks.