Bug 1412257 - track open/close/click events for onboarding telemetry;r=fischer,liuche draft
authorgasolin <gasolin@gmail.com>
Wed, 01 Nov 2017 18:05:55 +0800
changeset 690039 a5603a76cc906a9dfcd8e68df3e0780484710509
parent 689820 ee21e5f7f1c1726e0ed2697eb45df54cdceedd36
child 738461 1f80d55f6271f52eb06374b59acc92bb519788b8
push id87180
push userbmo:gasolin@mozilla.com
push dateWed, 01 Nov 2017 10:21:11 +0000
reviewersfischer, liuche
bugs1412257
milestone58.0a1
Bug 1412257 - track open/close/click events for onboarding telemetry;r=fischer,liuche MozReview-Commit-ID: 2Pf7uiaQS4i
browser/extensions/onboarding/OnboardingTelemetry.jsm
browser/extensions/onboarding/content/onboarding.js
browser/extensions/onboarding/data_events.md
--- a/browser/extensions/onboarding/OnboardingTelemetry.jsm
+++ b/browser/extensions/onboarding/OnboardingTelemetry.jsm
@@ -32,26 +32,34 @@ const EVENT_WHITELIST = {
   // track when click the notification close button
   "notification-close-button-click": {topic: "firefox-onboarding-event", category: "notification-interactions"},
   // track when click the notification Call-To-Action button
   "notification-cta-click": {topic: "firefox-onboarding-event", category: "notification-interactions"},
   // track when notification is shown
   "notification-session-begin": {topic: "internal"},
   // track when the notification closed
   "notification-session-end": {topic: "firefox-onboarding-session", category: "notification-interactions"},
+  // track when user open the overlay via click the logo or the watermark
+  "onboarding-logo-click": {topic: "firefox-onboarding-event", category: "overlay-interactions"},
   // init onboarding session with session_key and page url
   "onboarding-register-session": {topic: "internal"},
   // track when the onboarding script inited
   "onboarding-session-begin": {topic: "internal"},
   // track when the onboarding script destoryed
   "onboarding-session-end": {topic: "firefox-onboarding-session", category: "overlay-interactions"},
+  // track when click the overlay close button
+  "overlay-close-button-click": {topic: "firefox-onboarding-event", category: "overlay-interactions"},
+  // track when close the overlay via click outside of the tour content area
+  "overlay-close-outside-click": {topic: "firefox-onboarding-event", category: "overlay-interactions"},
   // track when click the overlay Call-To-Action button
   "overlay-cta-click": {topic: "firefox-onboarding-event", category: "overlay-interactions"},
   // track when click or auto select the overlay navigate item
   "overlay-nav-click": {topic: "firefox-onboarding-event", category: "overlay-interactions"},
+  // track when any tour is going to display on the overlay
+  "overlay-current-tour": {topic: "firefox-onboarding-event", category: "overlay-interactions"},
   // track when the overlay is shown
   "overlay-session-begin": {topic: "internal"},
   // track when the overlay is closed
   "overlay-session-end": {topic: "firefox-onboarding-session", category: "overlay-interactions"},
   // track when click the overlay "skip tour" button
   "overlay-skip-tour": {topic: "firefox-onboarding-event", category: "overlay-interactions"},
 };
 const ONBOARDING_STATE_DEFAULT = "default";
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -525,39 +525,64 @@ class Onboarding {
    * Find a tour that should be selected. It is either a first tour that was not
    * yet complete or the first one in the tab list.
    */
   get _firstUncompleteTour() {
     return this._tours.find(tour => !this.isTourCompleted(tour.id)) ||
            this._tours[0];
   }
 
+  /*
+   * Return id of the currently showing tour navigation item
+   */
+  get _activeTourId() {
+    return this._tourItems.find(item => item.classList.contains("onboarding-active")).id;
+  }
+
   handleClick(target) {
     let { id, classList } = target;
     // Only containers receive pointer events in onboarding tour tab list,
     // actual semantic tab is their first child.
     if (classList.contains("onboarding-tour-item-container")) {
       ({ id, classList } = target.firstChild);
     }
 
     switch (id) {
       case "onboarding-overlay-button":
         this.showOverlay();
-        this.gotoPage(this._firstUncompleteTour.id);
+        let target_tour_id = this._firstUncompleteTour.id;
+        this.gotoPage(target_tour_id);
+        telemetry({
+          event: "onboarding-logo-click",
+          tour_id: target_tour_id,
+          session_key: this._session_key,
+        });
         break;
       case "onboarding-skip-tour-button":
         this.hideNotification();
         this.hideOverlay();
         this.skipTour();
         break;
       case "onboarding-overlay-close-btn":
+        telemetry({
+          event: "overlay-close-button-click",
+          tour_id: this._activeTourId,
+          session_key: this._session_key,
+        });
+        this.hideOverlay();
+        break;
       // If the clicking target is directly on the outer-most overlay,
       // that means clicking outside the tour content area.
       // Let's toggle the overlay.
       case "onboarding-overlay":
+        telemetry({
+          event: "overlay-close-outside-click",
+          tour_id: this._activeTourId,
+          session_key: this._session_key,
+        });
         this.hideOverlay();
         break;
       case "onboarding-notification-close-btn":
         let tour_id = this._notificationBar.dataset.targetTourId;
         this.hideNotification();
         this._removeTourFromNotificationQueue(tour_id);
         telemetry({
           event: "notification-close-button-click",
@@ -577,22 +602,26 @@ class Onboarding {
         this._removeTourFromNotificationQueue(tourId);
         break;
     }
     if (classList.contains("onboarding-tour-item")) {
       this.gotoPage(id);
       // Keep focus (not visible) on current item for potential keyboard
       // navigation.
       target.focus();
+      telemetry({
+        event: "overlay-nav-click",
+        tour_id: id,
+        session_key: this._session_key,
+      });
     } else if (classList.contains("onboarding-tour-action-button")) {
-      let activeItem = this._tourItems.find(item => item.classList.contains("onboarding-active"));
-      this.setToursCompleted([ activeItem.id ]);
+      this.setToursCompleted([ this._activeTourId ]);
       telemetry({
         event: "overlay-cta-click",
-        tour_id: activeItem.id,
+        tour_id: this._activeTourId,
         session_key: this._session_key,
       });
     }
   }
 
   /**
    * Wrap keyboard focus within the dialog and focus on first element after last
    * when moving forward or last element after first when moving backwards. Do
@@ -788,32 +817,36 @@ class Onboarding {
         delete this._overlayIcon.dataset.keyboardFocus;
         this._overlayIcon.focus();
       } else {
         this._window.document.activeElement.blur();
       }
     }
   }
 
+  /**
+   * Switch to proper tour.
+   * @param {String} tourId specify which tour should be switched.
+   */
   gotoPage(tourId) {
     let targetPageId = `${tourId}-page`;
     for (let page of this._tourPages) {
       if (page.id === targetPageId) {
         page.style.display = "";
         page.dispatchEvent(new this._window.CustomEvent("beforeshow"));
       } else {
         page.style.display = "none";
       }
     }
     for (let tab of this._tourItems) {
       if (tab.id == tourId) {
         tab.classList.add("onboarding-active");
         tab.setAttribute("aria-selected", true);
         telemetry({
-          event: "overlay-nav-click",
+          event: "overlay-current-tour",
           tour_id: tourId,
           session_key: this._session_key,
         });
 
         // some tours should completed instantly upon showing.
         if (tab.getAttribute("data-instant-complete")) {
           this.setToursCompleted([tourId]);
           // also track auto completed tour so we can filter data with the same event
--- a/browser/extensions/onboarding/data_events.md
+++ b/browser/extensions/onboarding/data_events.md
@@ -92,19 +92,23 @@ Here are all allowed `event` strings tha
 | `onboarding-session-begin` | internal event triggered when the onboarding script is inited, will not send out any data. |
 | `onboarding-session-end` | internal event triggered when the onboarding script is destoryed. `onboarding-session` event is sent to the server. |
 | `onboarding-session` | event is sent when the onboarding script is destoryed |
 
 ### Overlay events
 
 | EVENT | DESCRIPTION |
 |-----------|---------------------|
+| `onboarding-logo-click` | triggered when user open the overlay via click the logo or the watermark. |
+| `overlay-close-button-click` | triggered when user close the overlay via click the overlay close button. |
+| `overlay-close-outside-click` | triggered when user close the overlay via click outside of the tour content area. |
 | `overlay-session-begin` | internal event triggered when user open the overlay, will not send out any data. |
 | `overlay-session-end` | internal event is triggered when user close the overlay. `overlay-session` event is sent to the server. |
 | `overlay-session` | event is sent when user close the overlay |
+| `overlay-current-tour` | event is sent when any tour is going to display on the overlay. |
 | `overlay-nav-click` | event is sent when click or auto select the overlay navigate item |
 | `overlay-cta-click` | event is sent when user click the overlay CTA button |
 | `overlay-skip-tour` | event is sent when click the overlay `skip tour` button |
 
 ### Notification events
 
 | EVENT | DESCRIPTION |
 |-----------|---------------------|