Merge pull request #158 from duckduckgo/shane/alt-flow-telemetry

send telemetry when 'skip' is clicked in alternative flow
duckduckgo · Jun 18, 2024 · 924a80e · 924a80e
2 parents ff482d6 + 2964e54
commit 924a80e
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 15 deletions.
diff --git a/build/app/public/js/base.js b/build/app/public/js/base.js
@@ -4577,7 +4577,7 @@
   });
 
   // schema/__generated__/schema.parsers.mjs
-  var protectionsDisabledReasonSchema, ownedByFirstPartyReasonSchema, ruleExceptionReasonSchema, adClickAttributionReasonSchema, otherThirdPartyRequestReasonSchema, screenKindSchema, wvVersionTitleSchema, requestsTitleSchema, featuresTitleSchema, appVersionTitleSchema, atbTitleSchema, errorDescriptionsTitleSchema, extensionVersionTitleSchema, httpErrorCodesTitleSchema, lastSentDayTitleSchema, deviceTitleSchema, osTitleSchema, listVersionsTitleSchema, reportFlowTitleSchema, siteUrlTitleSchema, didOpenReportInfoTitleSchema, toggleReportCounterTitleSchema, openerContextTitleSchema, userRefreshCountTitleSchema, jsPerformanceTitleSchema, stateBlockedSchema, stateAllowedSchema, extensionMessageGetPrivacyDashboardDataSchema, emailProtectionUserDataSchema, protectionsStatusSchema, localeSettingsSchema, parentEntitySchema, fireButtonSchema, searchSchema, breakageReportRequestSchema, setListOptionsSchema, windowsIncomingVisibilitySchema, cookiePromptManagementStatusSchema, refreshAliasResponseSchema, extensionMessageSetListOptionsSchema, fireOptionSchema, primaryScreenSchema, eventOriginSchema, siteUrlAdditionalDataSchema, closeMessageParamsSchema, categoryTypeSelectedSchema, categorySelectedSchema, dataItemIdSchema, detectedRequestSchema, tabSchema, breakageReportSchema, fireButtonDataSchema, remoteFeatureSettingsSchema, setProtectionParamsSchema, toggleReportScreenDataItemSchema, telemetrySpanSchema, requestDataSchema, getPrivacyDashboardDataSchema, windowsViewModelSchema, toggleReportScreenSchema, windowsIncomingViewModelSchema, windowsIncomingMessageSchema, apiSchema;
+  var protectionsDisabledReasonSchema, ownedByFirstPartyReasonSchema, ruleExceptionReasonSchema, adClickAttributionReasonSchema, otherThirdPartyRequestReasonSchema, screenKindSchema, wvVersionTitleSchema, requestsTitleSchema, featuresTitleSchema, appVersionTitleSchema, atbTitleSchema, errorDescriptionsTitleSchema, extensionVersionTitleSchema, httpErrorCodesTitleSchema, lastSentDayTitleSchema, deviceTitleSchema, osTitleSchema, listVersionsTitleSchema, reportFlowTitleSchema, siteUrlTitleSchema, didOpenReportInfoTitleSchema, toggleReportCounterTitleSchema, openerContextTitleSchema, userRefreshCountTitleSchema, jsPerformanceTitleSchema, stateBlockedSchema, stateAllowedSchema, extensionMessageGetPrivacyDashboardDataSchema, emailProtectionUserDataSchema, protectionsStatusSchema, localeSettingsSchema, parentEntitySchema, fireButtonSchema, searchSchema, breakageReportRequestSchema, setListOptionsSchema, windowsIncomingVisibilitySchema, cookiePromptManagementStatusSchema, refreshAliasResponseSchema, extensionMessageSetListOptionsSchema, fireOptionSchema, primaryScreenSchema, eventOriginSchema, siteUrlAdditionalDataSchema, closeMessageParamsSchema, categoryTypeSelectedSchema, categorySelectedSchema, toggleSkippedSchema, dataItemIdSchema, detectedRequestSchema, tabSchema, breakageReportSchema, fireButtonDataSchema, remoteFeatureSettingsSchema, setProtectionParamsSchema, toggleReportScreenDataItemSchema, telemetrySpanSchema, requestDataSchema, getPrivacyDashboardDataSchema, windowsViewModelSchema, toggleReportScreenSchema, windowsIncomingViewModelSchema, windowsIncomingMessageSchema, apiSchema;
   var init_schema_parsers = __esm({
     "schema/__generated__/schema.parsers.mjs"() {
       "use strict";
@@ -4712,6 +4712,9 @@
         name: z3.literal("categorySelected"),
         value: z3.union([z3.literal("blocked"), z3.literal("layout"), z3.literal("empty-spaces"), z3.literal("paywall"), z3.literal("videos"), z3.literal("comments"), z3.literal("login"), z3.literal("shopping"), z3.literal("other")])
       });
+      toggleSkippedSchema = z3.object({
+        name: z3.literal("toggleSkipped")
+      });
       dataItemIdSchema = z3.union([wvVersionTitleSchema, requestsTitleSchema, featuresTitleSchema, appVersionTitleSchema, atbTitleSchema, errorDescriptionsTitleSchema, extensionVersionTitleSchema, httpErrorCodesTitleSchema, lastSentDayTitleSchema, deviceTitleSchema, osTitleSchema, listVersionsTitleSchema, reportFlowTitleSchema, siteUrlTitleSchema, didOpenReportInfoTitleSchema, toggleReportCounterTitleSchema, openerContextTitleSchema, userRefreshCountTitleSchema, jsPerformanceTitleSchema]);
       detectedRequestSchema = z3.object({
         url: z3.string(),
@@ -4751,7 +4754,7 @@
         additional: siteUrlAdditionalDataSchema.optional()
       });
       telemetrySpanSchema = z3.object({
-        attributes: z3.union([categoryTypeSelectedSchema, categorySelectedSchema]),
+        attributes: z3.union([categoryTypeSelectedSchema, categorySelectedSchema, toggleSkippedSchema]),
         eventOrigin: eventOriginSchema
       });
       requestDataSchema = z3.object({
@@ -17130,7 +17133,17 @@
     const data = useData();
     const text = data.tab.domain;
     const onToggle = useToggle();
-    return /* @__PURE__ */ y("div", { className: "site-info page-inner card", "data-page": "choice-category" }, /* @__PURE__ */ y(NavWrapper, null), /* @__PURE__ */ y("div", { className: "padding-x-double" }, /* @__PURE__ */ y(KeyInsightsMain, { title: text, icon: "switch-shield" }, description)), /* @__PURE__ */ y("div", { className: "padding-x" }, /* @__PURE__ */ y("div", { class: "card-list--bordered" }, /* @__PURE__ */ y("div", { className: "protection-toggle" }, /* @__PURE__ */ y("div", { className: "protection-toggle__row" }, /* @__PURE__ */ y(ProtectionToggle, { model: data, toggle: onToggle })))), /* @__PURE__ */ y("div", { class: "text--center" }, /* @__PURE__ */ y(TextLink, { onClick: () => push("choiceBreakageForm") }, ns.report("skipThisStep.title")))));
+    const send = useTelemetry();
+    return /* @__PURE__ */ y("div", { className: "site-info page-inner card", "data-page": "choice-category" }, /* @__PURE__ */ y(NavWrapper, null), /* @__PURE__ */ y("div", { className: "padding-x-double" }, /* @__PURE__ */ y(KeyInsightsMain, { title: text, icon: "switch-shield" }, description)), /* @__PURE__ */ y("div", { className: "padding-x" }, /* @__PURE__ */ y("div", { class: "card-list--bordered" }, /* @__PURE__ */ y("div", { className: "protection-toggle" }, /* @__PURE__ */ y("div", { className: "protection-toggle__row" }, /* @__PURE__ */ y(ProtectionToggle, { model: data, toggle: onToggle })))), /* @__PURE__ */ y("div", { class: "text--center" }, /* @__PURE__ */ y(
+      TextLink,
+      {
+        onClick: () => {
+          push("choiceBreakageForm");
+          send({ name: "toggleSkipped" });
+        }
+      },
+      ns.report("skipThisStep.title")
+    ))));
   }
   var validCategories = () => {
     return {

diff --git a/integration-tests/AltBreakageFlows.js b/integration-tests/AltBreakageFlows.js
@@ -49,6 +49,12 @@ export class AltBreakageFlows {
         await page.getByLabel('Site layout broken').click()
         await this.dash.screenshot('category-inline-toggle.png')
         await page.getByRole('link', { name: 'Skip this step' }).click()
+        await this.dash.mocks.didSendTelemetry({
+            screen: 'choiceToggle',
+            attributes: {
+                name: 'toggleSkipped',
+            },
+        })
         await page.getByRole('button', { name: 'Send Report' }).click()
         await this.dash.mocks.calledForSubmitBreakageForm({ category: 'layout' })
     }

diff --git a/integration-tests/Mocks.js b/integration-tests/Mocks.js
@@ -113,16 +113,15 @@ export class Mocks {
         const calls = await this.outgoing({
             names: ['privacyDashboardTelemetrySpan'],
         })
-        expect(calls).toMatchObject([
-            [
-                'privacyDashboardTelemetrySpan',
-                {
-                    eventOrigin: {
-                        screen,
-                    },
-                    attributes,
+        const filtered = calls.find(([_name, payload]) => payload.attributes?.name === attributes.name)
+        expect(filtered).toMatchObject([
+            'privacyDashboardTelemetrySpan',
+            {
+                eventOrigin: {
+                    screen,
                 },
-            ],
+                attributes,
+            },
         ])
     }
 

diff --git a/schema/__generated__/schema.parsers.mjs b/schema/__generated__/schema.parsers.mjs
diff --git a/schema/__generated__/schema.types.ts b/schema/__generated__/schema.types.ts
diff --git a/schema/telemetry-span.json b/schema/telemetry-span.json
@@ -33,6 +33,16 @@
                             "enum": ["blocked", "layout", "empty-spaces", "paywall", "videos", "comments", "login", "shopping", "other"]
                         }
                     }
+                },
+                {
+                    "type": "object",
+                    "title": "ToggleSkipped",
+                    "required": ["name"],
+                    "properties": {
+                        "name": {
+                            "const": "toggleSkipped"
+                        }
+                    }
                 }
             ]
         },

diff --git a/v2/screens/choice-problem.jsx b/v2/screens/choice-problem.jsx
@@ -108,6 +108,7 @@ export function ChoiceToggleScreen() {
     const data = useData()
     const text = data.tab.domain
     const onToggle = useToggle()
+    const send = useTelemetry()
     return (
         <div className="site-info page-inner card" data-page="choice-category">
             <NavWrapper />
@@ -126,7 +127,14 @@ export function ChoiceToggleScreen() {
                     </div>
                 </div>
                 <div class="text--center">
-                    <TextLink onClick={() => push('choiceBreakageForm')}>{ns.report('skipThisStep.title')}</TextLink>
+                    <TextLink
+                        onClick={() => {
+                            push('choiceBreakageForm')
+                            send({ name: 'toggleSkipped' })
+                        }}
+                    >
+                        {ns.report('skipThisStep.title')}
+                    </TextLink>
                 </div>
             </div>
         </div>