Adobe Target Debugger

Purpose

The debugger was developed to enhance visibility for both the business and engineers, revealing the manipulations to the site initiated by the experimentation tool.

Background

Given the increasing volume of tests, experiences, and recommendations deployed on the site, it became crucial to offer visibility to cross-functional teams. This application not only assists business users in locating and validating features but also aids engineers in debugging their work.

Overview

Information

The debugger framework was deployed through the experimentation tool. Therfore, when the tool was active, the debugger was accessible. Users could activate the application through the console. Once enabled, the debugger would appear in the top-right corner of the browser. The application maintains its state through the utilization of cookies and local storage.

Each "activity" includes a type (AB Test, Experience, Recommendation, Template, or Extension), a name, a brief description, a link to the corresponding JIRA ticket, and the parent DOM element.

Identification

When chosen, the element will be highlighted with the corresponding type color, outlining the entire area undergoing manipulation.

Definitions

While addressing Adobe Target-related tasks, I seized the opportunity to incorporate Tealium-related scripts. When integrated with a Tealium profile, the debugger enables users to modify the environment and verify the version ID.

• A/B - Experiment
• XT - Experience
• REC - Recommendation
• TMP - Template
• EXT - Extension

Technical Details

//Adobe Activity
{
  "name":"A/B - Promo Test - 9/1-9/14",
  "info":{
      "desc":"All Tops On Sale - Show vs Hide",
      "jira":"JIRA-1234"
  },
  "elements":[
      ".elem2"
  ]
}
    

//Tealium Activity
{
  "name": "extension - eCommerce",
  "info": {
    "desc": "Capturing order properties"
  }
}