Bug 1726395 - CTA Telemetry r=thecount

Differential Revision: https://phabricator.services.mozilla.com/D127149

toolkit/components/reader/AboutReader.jsm

@@ -134,6 +134,13 @@ var AboutReader = function(actor, articlePromise) {
   });
   this._intersectionObs.observe(doc.querySelector(".top-anchor"));
 
+  this._ctaIntersectionObserver = new win.IntersectionObserver(
+    this._pocketCTAObserved.bind(this),
+    {
+      threshold: 0.5,
+    }
+  );
+
   Services.obs.addObserver(this, "inner-window-destroyed");
 
   this._setupButton(
@@ -456,8 +463,15 @@ AboutReader.prototype = {
 
         this._actor.readerModeHidden();
         this.clearActor();
+
+        // Disconnect and delete IntersectionObservers to prevent memory leaks:
+
         this._intersectionObs.unobserve(this._doc.querySelector(".top-anchor"));
+        this._ctaIntersectionObserver.disconnect();
+
         delete this._intersectionObs;
+        delete this._ctaIntersectionObserver;
+
         break;
     }
   },
@@ -1281,6 +1295,14 @@ AboutReader.prototype = {
 
     elDismissCta?.addEventListener(`click`, e => {
       this._doc.querySelector("#pocket-cta-container").hidden = true;
+
+      Services.telemetry.recordEvent(
+        "readermode",
+        "pocket_cta",
+        "close_cta",
+        null,
+        {}
+      );
     });
   },
 
@@ -1296,6 +1318,14 @@ AboutReader.prototype = {
       if (isClosed) {
         elPocketRecs.classList.add(`closed`);
         elCollapseRecs.classList.add(`closed`);
+
+        Services.telemetry.recordEvent(
+          "readermode",
+          "pocket_cta",
+          "minimize_recs_click",
+          null,
+          {}
+        );
       } else {
         elPocketRecs.classList.remove(`closed`);
         elCollapseRecs.classList.remove(`closed`);
@@ -1329,6 +1359,18 @@ AboutReader.prototype = {
 
     elTop.setAttribute(`href`, url);
 
+    elTop.addEventListener(`click`, e => {
+      Services.telemetry.recordEvent(
+        "readermode",
+        "pocket_cta",
+        "rec_click",
+        null,
+        {
+          url,
+        }
+      );
+    });
+
     elThumb.classList.add(`pocket-rec-thumb`);
     elThumb.setAttribute(`loading`, `lazy`);
     elThumb.setAttribute(
@@ -1390,6 +1432,20 @@ AboutReader.prototype = {
     });
   },
 
+  _pocketCTAObserved(entries) {
+    if (entries && entries[0]?.isIntersecting) {
+      this._ctaIntersectionObserver.disconnect();
+
+      Services.telemetry.recordEvent(
+        "readermode",
+        "pocket_cta",
+        "cta_seen",
+        null,
+        {}
+      );
+    }
+  },
+
   async _setupPocketCTA() {
     let ctaVersion = NimbusFeatures.readerMode.getAllVariables()
       ?.pocketCTAVersion;
@@ -1412,6 +1468,24 @@ AboutReader.prototype = {
 
       elPocketCTAWrapper.hidden = false;
       elPocketCTAWrapper.classList.add(`pocket-cta-container-${ctaVersion}`);
+
+      // Set up tracking for sign up buttons
+      this._doc.querySelectorAll(`.pocket-sign-up`).forEach(el => {
+        el.addEventListener(`click`, e => {
+          Services.telemetry.recordEvent(
+            "readermode",
+            "pocket_cta",
+            "sign_up_click",
+            null,
+            {}
+          );
+        });
+      });
+
+      // Set up tracking for user seeing CTA
+      this._ctaIntersectionObserver.observe(
+        this._doc.querySelector(`#pocket-cta-container`)
+      );
     }
   },
 };

toolkit/components/reader/content/aboutReader.html

@@ -77,7 +77,7 @@
       <div class="pocket-cta">
         <header class="pocket-cta-header">Save anything from across the web in Pocket, your personal library.</header>
         <p class="pocket-cta-subhead">As part of the Firefox family, Pocket provides a quiet, calm space that’s perfect for reading. It strips away all the distractions of the internet so you can really focus.</p>
-        <a href="https://getpocket.com/signup" class="pocket-btn pocket-sign-up"><strong>Sign up</strong> - it’s free</a>
+        <a href="https://getpocket.com/signup?utm_source=firefox_reader&utm_medium=variant_cta_only" class="pocket-btn pocket-sign-up"><strong>Sign up</strong> - it’s free</a>
       </div>
       <button class="pocket-dismiss-cta"></button>
     </div>
@@ -96,7 +96,7 @@
       <div class="pocket-recs"></div>
 
       <div class="pocket-sign-up">
-        <a href="https://getpocket.com/signup" class="pocket-btn pocket-sign-up"><strong>Sign up</strong> - it’s free</a>
+        <a href="https://getpocket.com/signup?utm_source=firefox_reader&utm_medium=variant_cta_plus_recs" class="pocket-btn pocket-sign-up"><strong>Sign up</strong> - it’s free</a>
       </div>
     </div>
   </div>

toolkit/components/telemetry/Events.yaml

@@ -164,6 +164,21 @@ readermode:
       label: The type of button clicked.
     products:
       - "firefox"
+  pocket_cta:
+    objects: ["close_cta", "sign_up_click", "rec_click", "minimize_recs_click", "cta_seen"]
+    release_channel_collection: opt-out
+    record_in_processes: ["content"]
+    description: >
+      Reader Mode Pocket CTA events
+    bug_numbers: [1726395]
+    notification_emails:
+      - "kirill@getpocket.com"
+      - "sdowne@getpocket.com"
+    expiry_version: never
+    extra_keys:
+      url: URL associated with click.
+    products:
+      - "firefox"
 
 addonsManager:
   install: