A6. Troubleshoot with Adobe Experience Cloud Debugger - adobe-target/clientside GitHub Wiki

Advanced troubleshooting with Adobe Experience Cloud Debugger

Adobe Experience Cloud Debugger(abbr. AECD)

Back in 2010, Adobe introduced Digital Pulse Debugger, a JS snippet that you could add to your Bookmark and act as an image request that shows you via a basic interface all the variable and success events that fire once your page loads amongst other useful information.

Meet the new Experience Cloud Solutions Debugger - a chrome extension that can be used to troubleshoot Adobe Analytics, Adobe Target, Adobe Audience Manager, Adobe Media Optimizer, Launch/DTM and Adobe Marketing Cloud Visitor Service.

A cross Adobe Solutions troubleshooting tool that helps you figure out how your app is configured and find answers to why something works unexpectedly.

Why is it better than Digital Pulse:

  • it can collect data
  • it can read 1st and 3rd party cookies using browser APIs
  • it can reuse EC login session and retrieve additional details from Target

Link to install it(https://chrome.google.com/webstore/detail/adobe-experience-cloud-de/ocdmogmohccmeicdhlhhgepeaijenapj).

Note: It was added to your machine browser by IT team.

Step 1: Start it

Click on the red icon from a right upper corner of your browser, like in the picture:

Notes:

  • You have to open it while you are on the page that you want to troubleshoot for. Why? Because it is a chrome extension and it intercepts requests, reads page context, and cookies of your active tab page.
  • _We recommend you to have in the same chrome window 3 tabs with _
  1. React sample application
  2. Experience Cloud
  3. Adobe Launch
  • Every time you'll want to check the debugger, just do a right-click on chrome icon from the dock and choose "Adobe Experience Cloud Debugger".

All right! Let's start the Debugging Journey!

Step 2: Summary Tab

There are cards for each Adobe Solution, each will be filled with details of your site implementation. You've implemented in your site Adobe Launch and Adobe Target. In Adobe Launch card you'll see details like property name of the library loaded on your site, date when it was last updated, version and environment. In Adobe Target card you'll see details like clientCode associated with your Organization, target library(at.js) version, and global mbox name.

Step 2: Network Tab

On the Network tab, you'll find all Adobe Solutions requests fired from your active page. Why it is better than usual Chrome Developer Tools Network tab:

  • Only Adobe Solutions requests
  • Ability to filter them by Solution
  • Request params are exposed separately

Mouse over request parameters line too see all the parameters that were passed to Target when Global Mbox was fired. You see that accountId parameter was also passed.

  • There is also another place where you can check target requests, on the Target tab.

Step 3: Tools tab

Click on Tools tab from the top menu of Adobe Experience Cloud Debugger.

On Tools tab you'll find cards with debugging features for each Experience Cloud Solution implemented on your site. Each card contains some debugging tricks that may help you while troubleshooting. To reach out to Target Debugging Tools Card, scroll down the Extension page.

There are 3 Major Debugging Features:

  • Mbox Disable
  • Mbox Debug
  • Mbox Traces

Mbox Disable

Target applies offers on your site, sometimes you may want to see the original version of your page, without Target implications. If you want to see a clear page just enable Mbox Disable toggle, that will create a mboxDisable 1st party cookie. When you want to get Target offers applied on your page again, just disable it. Note: This feature works only with at.js 0.9.6+

Mbox Debug

This feature enables at.js logging. While it is enabled at.js will log in your browser console every step that it will do.

  • Open chrome Developer Tools( Command + Alt + I)
  • Go to Console tab
  • Enable Mbox Debug toggle(make sure Mbox Disable is not enabled)

  • Check browser console for logs, you should be able to see actions made by at.js

Mobx Traces

Mbox Traces is a complex debugging feature that retrieves additional information per each mbox, like:

  • All active Activities
  • Matched Activities
  • Mbox Request Parameters
  • Profile Snapshot
  • AAM Segments and Traits

To enable Mbox Traces, you have to have in the same browser window another tab with a logged in session to Experience Cloud.

  • Enable Mbox Traces toggle, there should appear an accordion with your name. If you'll expand it, inside, you'll have all organizations that you have access to. Your lab user has access only to one organization, to 'targetsummitlab'.

  • Click on the organization that you want to debug for, in this case, click on 'targetsummitlab'.
  • If authorization token was retrieved with success you'll have a green check in front of client code.

Note: If you encounter any issue, please reach out to one of TA.

Go to Target tab

  • Click on Mbox Trace tab

In the right corner you'll see a button Copy Traces, if you click on it, it will copy to clipboard traces, in case you want to send them via email to Customer Support.

  • Expand 'target-global-mbox

There are following tabs per each mbox trace:

  • Activities
  • Request
  • Profile
  • Audience Manager

Let's explore each tab.

Activities

  • Under Matched Activities, you'll find a list of activities whose audience rules matched.
  • Under Evaluated Activities, you'll find all active activities for this client.

If you'll expand an activity, inside you'll find Matched Audiences and Unmatched Audiences with human-readable rules. I find it useful when you are wondering why you see an unexpected experience. By looking into matched and unmatched audiences, you are able to troubleshoot why a rule is not matched.

Request Tab

Under Request tab, you'll find mbox information, like:

  • Mbox details
  • Mbox Parameters
  • Mbox Request Headers(headers that were passed when FireGlobalMbox was executed)

Profile Tab

Under Profile Tab we have Visitor ID details and a Profile Snapshot. Profile Snapshot contains details like:

  • profile attributes with values
  • status
  • last modified date.

A pretty informative table that offers you a quick overview of which profile attributes were changed and their values.

Audience Manager Tab

Under Audience Manager tab you'll find Segment Ids and Trait Ids if you have integration with AAM.

Feel Free to explore more Adobe Experience Cloud Debugger