Merge pull request #1360 from mozilla/fix-add-update-ga-pings

Fix / add / update ga pings

public/css/header.css

@@ -93,6 +93,7 @@ nav {
 
 .active-link-underline {
   position: relative;
+  pointer-events: none; /* Make sure span attributes aren't used for GA ping */
 }
 
 .active-link-underline::after {

public/js/all-breaches/all-breaches.js

@@ -1,5 +1,7 @@
 "use strict";
 
+/* global sendPing */
+
 function replaceLogo(e) {
   e.target.src = "/img/logos/missing-logo-icon.png";
   e.target.removeEventListener("error", replaceLogo);
@@ -63,9 +65,11 @@ function makeBreaches(breaches, LocalizedBreachCardStrings, breachCardWrapper, b
   for (const breach of breaches) {
     const card = document.createElement("a");
 
-    card["classList"] = "breach-card three-up ab drop-shadow";
+    card["classList"] = "breach-card three-up ab drop-shadow send-ga-ping";
     card["href"] = `/breach-details/${breach.Name}`;
-    card["data-breach-title"] = breach.Title;
+    card.dataset.eventCategory = "All Breaches: More about this breach";
+    card.dataset.eventAction = "Click";
+    card.dataset.eventLabel = breach.Title;
     fragment.appendChild(card);
 
     const logoWrapper = makeDiv("breach-logo-wrapper", card);
@@ -132,6 +136,7 @@ function initBreaches() {
     const [fuzzyShowAll, showHiddenBreaches] = document.querySelectorAll(".show-all-breaches");
 
     showHiddenBreaches.addEventListener("click", (e) => {
+      sendPing(e.target, "Click", "All Breaches Page");
       doBreaches(breaches);
       showHiddenBreaches.classList.add("hide");
     });
@@ -180,7 +185,12 @@ function initBreaches() {
       doBreaches(filteredBreachArray);
       return false;
     };
-
+    fuzzyFinder.addEventListener("keydown", () => {
+      const finderInput = fuzzyFinder.querySelector("input[type=text]");
+      if (finderInput.value === "") {
+        sendPing(fuzzyFinder, "Engage", "All Breaches Page");
+      }
+    });
     fuzzyFinder.addEventListener("keyup", searchBreaches);
     fuzzyFinder.addEventListener("submit", searchBreaches);
   }

public/js/fxa-analytics.js

@@ -8,7 +8,7 @@
 const hasParent = (el, selector) => {
   while (el.parentNode) {
     el = el.parentNode;
-    if (el.id === selector)
+    if (el.dataset && el.dataset.analyticsId === selector)
       return el;
   }
   return null;
@@ -18,10 +18,6 @@ const setMetricsIds = (el) => {
   if (hasParent(el, "scan-another-email")) {
     el.dataset.eventCategory = "Scan Another Email Form";
   }
-  if (el.dataset.entrypoint && hasParent(el, "sign-up-banner")) {
-    el.dataset.eventCategory = `${el.dataset.eventCategory} - Banner`;
-    el.dataset.entrypoint = `${el.dataset.entrypoint}-banner`;
-  }
   return;
 };
 
@@ -133,7 +129,6 @@ function getUTMNames() {
         ga("send", "event", eventCategory, eventAction, eventLabel);
       });
     });
-
   } else {
     removeUtmsFromUrl();
   }
@@ -179,7 +174,6 @@ function getUTMNames() {
     const eventTriggers = [
       "#scan-user-email",
       "#add-another-email-form",
-      ".scan-res .show-remaining-breaches",
       ".open-oauth",
     ];
 
@@ -204,7 +198,7 @@ function getUTMNames() {
     document.querySelectorAll("[data-ga-link]").forEach((el) => {
       el.addEventListener("click", async(e) => {
         const linkId = `Link ID: ${e.target.dataset.eventLabel}`;
-        await sendPing(el, "Click", `${linkId} // ${pageLocation}`);
+        await sendPing(el, "Click", `${linkId}`);
       });
     });
   }

template-helpers/footer.js

@@ -39,6 +39,7 @@ function getAboutPageStrings(args) {
       subhead: "how-fxm-1-blurb",
       localizedCta: LocaleUtils.fluentFormat(locales, "scan-submit"),
       href: "/",
+      eventCategory: "About Page: Search Your Email",
     },
     {
       headline:"how-fxm-2-headline",
@@ -51,6 +52,8 @@ function getAboutPageStrings(args) {
       subhead: "how-fxm-3-blurb",
       localizedCta: LocaleUtils.fluentFormat(locales, "download-firefox-banner-button"),
       href: "https://www.mozilla.org/firefox",
+      eventCategory: "About Page: Download Firefox",
+      download: "download",
     },
   ];
 

views/about.hbs

@@ -28,7 +28,7 @@
                         {{ this.localizedCta }}
                       </button>
                     {{else}}
-                      <a class="btn-violet-secondary btn-transparent btn-small about-cta" target="_blank" href="{{ this.href }}">{{ this.localizedCta }}</a>
+                      <a class="btn-violet-secondary btn-transparent btn-small about-cta send-ga-ping" data-event-category="{{ eventCategory}}" data-event-label="About Page" data-event-action="Click" {{#if download}} target="_blank" {{/if}} href="{{ this.href }}">{{ this.localizedCta }}</a>
                     {{/ifCompare}}
                   </div>
                 </div>

views/partials/analytics/security-tips-link.hbs

@@ -0,0 +1 @@
+data-event-category="Security Tips Links" data-event-action="Click" data-event-label="{{ linkTitle }}"

views/partials/breach-card.hbs

@@ -19,9 +19,9 @@
     </div>
     <div class="breach-card-link-wrap">
       {{#if latestBreach}}
-        <span class="more-about-this-breach blue-link">{{ getString "latest-breach-link" }}</span>
+        <span class="more-about-this-breach blue-link" {{> analytics/internal-link eventLabel="Latest Breach: See if you were in this breach" }}>{{ getString "latest-breach-link" }}</span>
       {{else}}
-        <span class="more-about-this-breach blue-link">{{ LocalizedBreachCardStrings.MoreInfoLink }}</span>
+        <span class="more-about-this-breach blue-link" {{> analytics/internal-link eventLabel="Breach Card: More about this breach" }}>{{ LocalizedBreachCardStrings.MoreInfoLink }}</span>
       {{/if}}
     </div>
   </div>

views/partials/dashboards/manage-email-link.hbs

@@ -1 +1 @@
-<a href="/user/preferences" class="manage-emails {{ variableClass }} btn-violet-secondary btn-transparent btn-small flx">{{ getString "manage-email-addresses" }}</a>
+<a href="/user/preferences" class="manage-emails {{ variableClass }} btn-violet-secondary btn-transparent btn-small flx" {{> analytics/internal-link eventLabel="Manage Email Addresses" }}>{{ getString "manage-email-addresses" }}</a>

views/partials/dashboards/preferences.hbs

@@ -43,7 +43,7 @@
       </div>
       <div class="pref remove">
         {{> dashboards/remove-fxm-headline-subhead }}
-        <a class="remove-fxm btn-transparent btn-red btn-small" href="/user/remove-fxm">{{ getString "remove-fxm" }}</a>
+        <a class="remove-fxm btn-transparent btn-red btn-small" href="/user/remove-fxm" {{> analytics/internal-link eventLabel="Remove FXM - Dashboard" }}>{{ getString "remove-fxm" }}</a>
       </div>
     </div>
   </section>

views/partials/email-card.hbs

@@ -32,7 +32,7 @@
 
               {{#if prefs}} <!--user preferences dashboard / show trashcan to delete email-->
                 {{#if primary}}
-                  <a href="https://support.mozilla.org/kb/change-primary-email-address-firefox-accounts" target="_blank" rel="noopener noreferrer" class="change-primary-email blue-link hide-mobile">{{ getString "link-change-primary" }}</a>
+                  <a href="https://support.mozilla.org/kb/change-primary-email-address-firefox-accounts" target="_blank" rel="noopener noreferrer" class="change-primary-email blue-link hide-mobile" {{> analytics/internal-link eventLabel="Change Primary Email Address" }}>{{ getString "link-change-primary" }}</a>
                 {{else}}
                   {{> forms/remove-email-form }}
                 {{/if}}

views/partials/fuzzy-find.hbs

@@ -1,6 +1,6 @@
 
       <div class="fuzzy-wrapper">
-        <form id="fuzzy-form" class="fuzzy-form" data-no-csrf>
+        <form id="fuzzy-form" class="fuzzy-form" data-event-category="All Breaches: Fuzzy Finder" data-no-csrf>
           <input type="text" id="fuzzy-find-input" class="fuzzy-find-input" placeholder="{{ getString "search-breaches" }}" autocomplete="off" />
           <button id="fuzzy-find-submit" class="fuzzy-find-submit" aria-label="{{ getString "search-breaches" }}">{{> svg/search-icon }}</button>
         </form>

views/partials/scan-another-email.hbs

@@ -1,5 +1,5 @@
   <div class="row jst-cntr">
-    <div id="scan-another-email" class="scan-another-email col-6 txt-cntr">
+    <div id="scan-another-email" class="scan-another-email col-6 txt-cntr" data-analytics-id="scan-another-email">
       <h3 class="scan-another-email-headline section-headline txt-purple7 bold mw-500">{{getString "fxa-scan-another-email"}}</h3>
       {{> forms/scan-email-form addClasses=./addClass}}
     </div>

views/partials/sign-up-banners/scan-results-sign-up.hbs

@@ -5,7 +5,7 @@
             <h2 class="sign-up-headline">{{ getString "sign-up-headline-1" }}</h2>
             {{> feature-list}}
           </div>
-          <div class="flx flx-col sign-up-cta">
+          <div class="flx flx-col sign-up-cta" data-analytics-id="sign-up-banner">
             <button class="open-oauth btn-white btn-transparent btn-big"  {{> analytics/fxa id="fx-monitor-alert-me-btn" }} data-event-category="Alert me about new breaches">
               {{ getString "alert-about-new-breaches" }}
             </button>

views/partials/take-back-control/article-links.hbs

@@ -2,10 +2,10 @@
           {{#eachFromTo (articleLinks) 0 3}}
             <li class="logo-title-wrapper flx article">
               <div class="icon-inline-wrapper">{{> (lookup . 'pathToPartial') }}</div>
-              <a href="/security-tips#{{ this.class }}" class="article-link">{{ this.stringId }}{{> svg/arrow-head-right }}</a>
+              <a href="/security-tips#{{ this.class }}" class="article-link send-ga-ping" {{> analytics/security-tips-link linkTitle=this.title }}>{{ this.stringId }}{{> svg/arrow-head-right }}</a>
             </li>
           {{/eachFromTo}}
           <li class="logo-title-wrapper flx">
-            <a class="article-link security-tips-link btn-transparent btn-white btn-small" href="/security-tips">{{ getString "read-more-tips" }}</a>
+            <a class="article-link security-tips-link btn-transparent btn-white btn-small send-ga-ping" href="/security-tips" {{> analytics/security-tips-link linkTitle="Read More Security Tips" }}>{{ getString "read-more-tips" }}</a>
           </li>
         </ul>

views/partials/top-level/all-breaches.hbs

@@ -18,7 +18,7 @@
       <span id="no-results-blurb" class="no-results-blurb">{{ getString "no-results-blurb" }}</span>
       <!-- breach cards -->
       <div id="all-breaches" class="all-breaches flx"></div>
-      <button id="show-hidden-breaches" class="btn-violet-primary show-all-breaches">{{ getString "show-all" }}</button>
+      <button id="show-hidden-breaches" class="btn-violet-primary show-all-breaches" data-event-category="All Breaches: Show All Button">{{ getString "show-all" }}</button>
     </div>
   </section>
 </div>

views/partials/top-level/security-tips.hbs

@@ -10,7 +10,7 @@
           <li class="security-tip-list-item flx">
             <div class="article-icon {{ class }}">{{> (lookup . 'pathToPartial') }}</div>
             <div class="flx flx-col">
-              <a class="security-tip-link flx {{ class }}" href="#{{ class }}">{{ stringId }}{{> svg/arrow-head-right }}</a>
+              <a class="security-tip-link flx {{ class }} send-ga-ping" href="#{{ class }}" {{>analytics/security-tips-link linkTitle=title}}>{{ stringId }}{{> svg/arrow-head-right }}</a>
               <p class="security-tip-link-subhead">{{ subhead }}</p>
             </div>
           </li>