Bug 1412257 - track open/close/click events for onboarding telemetry;r=fischer,liuche
MozReview-Commit-ID: 2Pf7uiaQS4i
--- 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 |
|-----------|---------------------|