Merge pull request #1447 from mozilla/fix-1445

Fix #1445
mozilla · Dec 16, 2019 · eafd1bf · eafd1bf
2 parents f777e0d + 9274182
commit eafd1bf
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 13 deletions.
diff --git a/public/js/fxa-analytics.js b/public/js/fxa-analytics.js
@@ -77,6 +77,16 @@ function getUTMNames() {
   return ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"];
 }
 
+function sendRecommendationPings(ctaSelector) {
+  document.querySelectorAll(ctaSelector).forEach(cta => {
+    const eventLabel = cta.dataset.eventLabel;
+    ga("send", "event", "Breach Detail: Recommendation CTA", "View", eventLabel);
+    cta.addEventListener("click", () => {
+      ga("send", "event", "Breach Detail: Recommendation CTA", "Engage", eventLabel);
+    });
+  });
+}
+
 (() => {
   const win = window;
   const winLocationSearch = win.location.search;
@@ -122,14 +132,8 @@ function getUTMNames() {
       },
     });
 
-    // Temporarily send "View" and "Engage" pings for recommendation CTAs.
-    document.querySelectorAll(".recommendation-cta").forEach(cta => {
-      const eventLabel = cta.dataset.eventLabel;
-      ga("send", "event", "Breach Detail: Recommendation CTA", "View", eventLabel);
-      cta.addEventListener("click", () => {
-        ga("send", "event", "Breach Detail: Recommendation CTA", "Engage", eventLabel);
-      });
-    });
+    // Send "View" pings for any visible recommendation CTAs.
+    sendRecommendationPings(".first-four-recs");
 
     document.querySelectorAll(".send-ga-ping, [data-send-ga-ping]").forEach((el) => {
       el.addEventListener("click", (e) => {

diff --git a/public/js/monitor.js b/public/js/monitor.js
@@ -3,6 +3,8 @@
 /* global sendPing */
 /* global getFxaUtms */
 /* global hashEmailAndSend */
+/* global sendRecommendationPings */
+/* global ga */
 
 if (typeof TextEncoder === "undefined") {
   const cryptoScript = document.createElement("script");
@@ -277,6 +279,12 @@ function addBentoObserver(){
       button.classList.add("fade-out");
       const overflowRecs = document.getElementById("overflow-recs");
       overflowRecs.classList.remove("hide");
+      if (typeof(ga) !== "undefined") {
+        // Send "Click" ping for #see-additional-recs click
+        ga("send", "event", "Breach Details: See Additional Recommendations" , "Click", "See Additional Recommendations");
+        // Send "View" pings for any CTAs that become visible on #see-additional-recs click
+        sendRecommendationPings(".overflow-rec-cta");
+      }
     });
   });
 

diff --git a/template-helpers/recommendations.js b/template-helpers/recommendations.js
@@ -106,7 +106,7 @@ module.exports = {
             },
             ctaHref: "https://www.mozilla.org/firefox/lockwise/",
             ctaShouldOpenNewTab: true,
-            ctaAnalyticsId: "View logins in Firefox Lockwise",
+            ctaAnalyticsId: "Get Firefox Lockwise",
             recIconClassName: "rec-pw-3",
           },
         ],

diff --git a/views/partials/breach-detail-content-group.hbs b/views/partials/breach-detail-content-group.hbs
@@ -14,13 +14,13 @@
               {{#if this.recommendationsList }}
                 <div class="flx feature-tip-group">
                   {{#eachFromTo recommendationsList  0 4}}
-                    {{> recommendation this}}
+                    {{> recommendation this ctaClassName="first-four-recs"}}
                   {{/eachFromTo}}
                   {{#ifCompare recommendationsList.length ">" 4}}
-                    <button id="see-additional-recs" class="btn-violet-secondary btn-transparent btn-small" data-send-ga-ping="" data-event-category="See Additional Recommendations" data-event-label="{{ getBreachTitle }}" data-event-action="Click">{{getString "see-additional-recs"}}</button>
+                    <button id="see-additional-recs" class="btn-violet-secondary btn-transparent btn-small">{{getString "see-additional-recs"}}</button>
                     <div id="overflow-recs" class="overflow-recs flx flx-col hide">
                     {{#eachFromTo recommendationsList  4 recommendationsList.length}}
-                      {{> recommendation this}}
+                      {{> recommendation this ctaClassName="overflow-rec-cta"}}
                     {{/eachFromTo}}
                     </div>
                   {{/ifCompare}}

diff --git a/views/partials/recommendation.hbs b/views/partials/recommendation.hbs
@@ -4,7 +4,7 @@
               <h3 class="feature-title">{{ recommendationCopy.subhead }}</h3>
               <h4 class="feature-subhead">{{ recommendationCopy.body }}</h4>
               {{#if recommendationCopy.cta}}
-                <a class="recommendation-cta feature-tip-link blue-link" href="{{ ctaHref }}" data-event-label="{{ ctaAnalyticsId }}" {{#if ctaShouldOpenNewTab}} target="_blank" rel="noopener noreferrer"{{/if}}>{{ recommendationCopy.cta }}</a>
+                <a class="{{ ctaClassName }} recommendation-cta feature-tip-link blue-link" href="{{ ctaHref }}" data-event-label="{{ ctaAnalyticsId }}" {{#if ctaShouldOpenNewTab}} target="_blank" rel="noopener noreferrer"{{/if}}>{{ recommendationCopy.cta }}</a>
               {{/if}}
             </div>
           </div>