Adobe Launch has a monitoring hooks API that provides more details about the rules that passed or failed. That's a great excuse for writing a Chrome extension. This will benefit you even if you have no need or experience with Adobe Launch.

1. Spicy Javascript
Alban Gérôme
@albangerome
MeasureCamp London
11 July 2020
Your first Chrome Extension for Web Analytics QA

3. Why a Chrome Extension?
• Intercept, block, redirect, report all web requests
• Inject Javascript code anywhere, any time of the page
• Surface all the analytics tracking on the current web
page

4. Why a Chrome Extension?
• Inject code on the page locally without speaking to a
single web developer before the page has even
finished rendering
• Surface deep internal Adobe Launch rules information
• Report the information using little-known Javascript
console tricks

6. The Four Elements
• Manifest file
• Content script
• Popup script
• Background script
mandatory metadata
runs on the current page
runs in the extension popup
invisible broker

8. Manifest
{
"name": "Duckface",
"version": "1.1",
"manifest_version": 2,
"description": "Adobe Launch Debugger",
"browser_action": {
"default_icon": "duckface-icon.png",
"default_popup": "duckface2.html"
},
"permissions": [
"webRequest",
"<all_urls>",
"activeTab"
],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content2.js"],
"run_at": "document_start"
}],
"background": {
"persistent": true,
"scripts": [
"background2.js"
]
}
}

9. Manifest
{
"name": "Duckface",
"version": "1.1",
"manifest_version": 2,
"description": "Adobe Launch Debugger",
"browser_action": {
"default_icon": "duckface-icon.png",
"default_popup": "duckface2.html"
},
"permissions": [
"webRequest",
"<all_urls>",
"activeTab"
],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content2.js"],
"run_at": "document_start"
}],
"background": {
"persistent": true,
"scripts": [
"background2.js"
]
}
}

10. Manifest
{
"name": "Duckface",
"version": "1.1",
"manifest_version": 2,
"description": "Adobe Launch Debugger",
"browser_action": {
"default_icon": "duckface-icon.png",
"default_popup": "duckface2.html"
},
"permissions": [
"webRequest",
"<all_urls>",
"activeTab"
],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content2.js"],
"run_at": "document_start"
}],
"background": {
"persistent": true,
"scripts": [
"background2.js"
]
}
}

11. Manifest
{
"name": "Duckface",
"version": "1.1",
"manifest_version": 2,
"description": "Adobe Launch Debugger",
"browser_action": {
"default_icon": "duckface-icon.png",
"default_popup": "duckface2.html"
},
"permissions": [
"webRequest",
"<all_urls>",
"activeTab"
],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content2.js"],
"run_at": "document_start"
}],
"background": {
"persistent": true,
"scripts": [
"background2.js"
]
}
}

12. Manifest
{
"name": "Duckface",
"version": "1.1",
"manifest_version": 2,
"description": "Adobe Launch Debugger",
"browser_action": {
"default_icon": "duckface-icon.png",
"default_popup": "duckface2.html"
},
"permissions": [
"webRequest",
"<all_urls>",
"activeTab"
],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content2.js"],
"run_at": "document_start"
}],
"background": {
"persistent": true,
"scripts": [
"background2.js"
]
}
}

14. Content
• Executes on the page you see in Chrome
• Observes the page as it builds
• Intercepts the script element loading Adobe Launch
• Injects Adobe Launch monitoring hooks in response
• Receives from the extension popup the rule identifiers
• Generates the output in the console

15. Observe DOM Mutations
new MutationObserver(r => r.map(s => {
const t = s.addedNodes;
if(t && t.length==1){
const u = t[0];
if(u && u.nodeName=="SCRIPT" && /^https://assets.adobedtm.com/launch-/.test(u.src))
u.insertAdjacentElement("beforebegin", e);
};
})).observe(document.documentElement, {
childList: !0,
subtree: !0
});

16. Observe DOM Mutations
new MutationObserver(r => r.map(s => {
const t = s.addedNodes;
if(t && t.length==1){
const u = t[0];
if(u && u.nodeName=="SCRIPT" && /^https://assets.adobedtm.com/launch-/.test(u.src))
u.insertAdjacentElement("beforebegin", e);
};
})).observe(document.documentElement, {
childList: !0,
subtree: !0
});

17. Observe DOM Mutations
new MutationObserver(r => r.map(s => {
const t = s.addedNodes;
if(t && t.length==1){
const u = t[0];
if(u && u.nodeName=="SCRIPT" && /^https://assets.adobedtm.com/launch-/.test(u.src))
u.insertAdjacentElement("beforebegin", e);
};
})).observe(document.documentElement, {
childList: !0,
subtree: !0
});

19. Adobe Launch monitoring hooks
window._satellite = window._satellite || {};
window._satellite._monitors = window._satellite._monitors || [];
window._satellite._monitors.push({
ruleTriggered: q => h(q, 'rule triggered'),
ruleCompleted: q => h(q, 'rule completed'),
ruleActionFailed: q => h(q, 'rule action failed'),
ruleConditionFailed: q => h(q, 'rule condition failed')
});

21. Popup
<!doctype html>
<html>
<head>
<title>Duckface</title>
<link rel="stylesheet" type="text/css" href="duckface2.css" />
</head>
<body>
<form>
<input type="text" id="rule" autofocus />
<input type="button" value="Submit" id="submit" />
<input type="button" value="Reset" id="reset" />
</form>
</body>
<script type="text/javascript" src="duckface2.js"></script>
</html>

22. Popup
<!doctype html>
<html>
<head>
<title>Duckface</title>
<link rel="stylesheet" type="text/css" href="duckface2.css" />
</head>
<body>
<form>
<input type="text" id="rule" autofocus />
<input type="button" value="Submit" id="submit" />
<input type="button" value="Reset" id="reset" />
</form>
</body>
<script type="text/javascript" src="duckface2.js"></script>
</html>

24. Background
chrome.webRequest.onBeforeRequest.addListener(e => {
let f = e.url, g;
try{
if(e.requestBody && e.requestBody.raw && e.requestBody.raw[0]) g =
decodeURIComponent(String.fromCharCode.apply(null, new Uint8Array(e.requestBody.raw[0].bytes)))
if(b==e.tabId){
let D = {url : f};
if(e.method=="POST") D.postPayload = g;
C.push(D);
};
}catch(h){
console.log(h.message);
};
}, {urls : ["<all_urls>"]}, ["requestBody"]);

25. Background
chrome.webRequest.onBeforeRequest.addListener(e => {
let f = e.url, g;
try{
if(e.requestBody && e.requestBody.raw && e.requestBody.raw[0]) g =
decodeURIComponent(String.fromCharCode.apply(null, new Uint8Array(e.requestBody.raw[0].bytes)))
if(b==e.tabId){
let D = {url : f};
if(e.method=="POST") D.postPayload = g;
C.push(D);
};
}catch(h){
console.log(h.message);
};
}, {urls : ["<all_urls>"]}, ["requestBody"]);

26. Background
chrome.webRequest.onBeforeRequest.addListener(e => {
let f = e.url, g;
try{
if(e.requestBody && e.requestBody.raw && e.requestBody.raw[0]) g =
decodeURIComponent(String.fromCharCode.apply(null, new Uint8Array(e.requestBody.raw[0].bytes)))
if(b==e.tabId){
let D = {url : f};
if(e.method=="POST") D.postPayload = g;
C.push(D);
};
}catch(h){
console.log(h.message);
};
}, {urls : ["<all_urls>"]}, ["requestBody"]);

28. Messaging
Can
Respond
Can
Listen
Can
Initiate
Content Yes Yes Yes
Popup Yes No Yes
Background Yes Yes No

29. Messaging from popup to backgd
chrome.runtime.sendMessage({
somethingRandom : "Anything will do"
}, response => {
console.log(response);
});

30. Messaging from popup to content
chrome.tabs.query({active: true, currentWindow: true}, tabs => {
chrome.tabs.sendMessage(tabs[0].id, {
rule : rule
}, response => {
console.log(response);
});
});

31. Messaging from content
Same as for messages from popup to background
Received by popup and background
chrome.runtime.sendMessage({
somethingRandom : "Anything will do"
}, response => {
console.log(response);
});

32. Listening and responding
Only content and background scripts can listen
chrome.runtime.onMessage.addListener((message, sender,
sendResponse) => {
sendResponse({
somethingElse : "message received"
});
});

34. Console tricks
• console.group("this is an expanded group");
console.log(1);
console.log(2);
console.groupEnd();
• console.groupCollapsed("this is a collapsed group");
console.log(3);
console.log(4);
console.groupEnd();

35. Console tricks
• console.log(1);
• var a=2; console.log(`string template ${a}`);
• var b=3, c=4; console.log("%cb%cc", "color:red", "font-weight:bold");
• var d="background-
image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATC
AIAAAD9MqGbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcw
AADsMAAA7DAcdvqGQAAAFNSURBVDhPY/hPLhjkOvfv219VUXH+3HkIF4vOSxcvT
p44MTIs3MPFtbmxsaigMDkhkZeTiwEM+Ll5YqOijx87hqKzvbVNiI+fh4NTREBQSkxc
WlxCVFAIqNrM2OTokaP37t79/v07VCnczon9/YK8fCL8AooyssryChCkKCsnKyl19swZ
iBo0wHDq5ClJUTGgwVysbHyc3ApIOuWlZfS0tKEKMQDUzh8/frx9+/bZ06cSIqIK0jIQ
nUpy8hzMLBAFmAA9hIBeF+YTAOqBaOZkYYVKYAAsYWuoqycnJQ2xk52JGSqKAbD
odHZwlJGQBOoEhpAgDx9UFANg0Tl18mRhPn6gTqB+Z3sHqCgGwKITCAS4eYAWA
mP/xfPnUCEMgF1nalKyML8AO+6ABQLsOoFAW10TqBnKwQZw6vzw4QMw0UI52A
BOnQQBuTr//wcAng5zdjL4M8cAAAAASUVORK5CYII=');background-repeat:no-
repeat"; console.log(`%c ${a} ${b} ${c}`, d);

36. Console tricks
• var e="expanded";
console.group(`%c ${e} group`, "font-weight:bold");
console.log(5);
console.log(6);
console.groupEnd();
• var f="collapsed";
console.groupCollapsed(`%c ${f} group`, "font-weight:italic");
console.log(5);
console.log(6);
console.groupEnd();

37. Console tricks
console.table([
{"d" : 1, "e" : 2, "f" : 3},
{"d" : 4, "e" : 5, "f" : 6},
{"d" : 7, "e" : 8, "f" : 9}
]);
console.table({
"a" : {"d" : 1, "e" : 2, "f" : 3},
"b" : {"d" : 4, "e" : 5, "f" : 6},
"c" : {"d" : 7, "e" : 8, "f" : 9}
});

38. Packing the extension

39. Extension demo

40. Extension demo

41. Extension demo

42. Quack quack!

43. http://www.albangerome.com
@albangerome
Thank you!

44. References
• All the code is available at https://github.com/alban-gerome/adobe-
analytics/blob/master/README.md
• Adobe Launch monitoring hooks info at:
• https://medium.com/adobetech/launch-library-monitoring-hooks-
c674d16deae3
• https://github.com/adobe/reactor-turbine/tree/master/src/rules