Fixed mozilla#1820 - Added GA Events for all the experiment interactions

smileys2 · Aug 17, 2020 · bfa2e6a · bfa2e6a
1 parent 4daaa41
commit bfa2e6a
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 25 deletions.
diff --git a/public/js/experiment.js b/public/js/experiment.js
@@ -1,10 +1,27 @@
 "use strict";
 
-function copyURL() {
-	// TODO: Add GA event
+/* global ga */
+
+function selectURL(e, skipAnalyticsPing = false) {
 	const shareModalInput = document.getElementById("shareModalInput");
+
+	// If an a user-init'd focus, send analytics ping
+	if (!skipAnalyticsPing) {
+		sendShareModalPing(shareModalInput);
+	}
+
 	shareModalInput.select();
   shareModalInput.setSelectionRange(0, 99999);
+}
+
+
+function copyURL(e) {
+	// TODO: Add GA event
+	sendShareModalPing(e.target);
+	const shareModalInput = document.getElementById("shareModalInput");
+	shareModalInput.removeEventListener("focus", selectURL);
+	selectURL(null, true);
+	shareModalInput.addEventListener("focus", selectURL);
 	document.execCommand("copy");
 }
 
@@ -20,6 +37,16 @@ function closeShareModal() {
 	shareModal.style.display = "none";
 }
 
+function sendShareModalPing(el) {
+	if (typeof(ga) !== "undefined") {
+		const eventCategory = "exp5-share-modal";
+		const eventAction = el.dataset.eventAction;
+		const eventLabel = el.dataset.eventLabel;
+		const options = {};
+    return ga("send", "event", eventCategory, eventAction, eventLabel, options);
+  }
+}
+
 function initShareModal(href, breachText) {
 	const shareModal = document.getElementById("shareModal");
 	const shareModalInput = document.getElementById("shareModalInput");
@@ -42,13 +69,8 @@ function initShareModal(href, breachText) {
 		shareTextBreach.classList.add("hidden");
 	}
 
-	// Event Listeners ----
-	shareModalInput.addEventListener("focus", (e)=>{
-		// TODO: Add GA event
-		shareModalInput.select();
-	});
-
 	document.addEventListener("keydown", keyPress);
+	shareModalInput.addEventListener("focus", selectURL);
 	shareModalCopy.addEventListener("click", copyURL);
 	btnCloseShareModal.addEventListener("click", closeShareModal);
 
@@ -70,16 +92,7 @@ if (btnOpenShareModal) {
 	btnOpenShareModal.forEach( el => {
 		el.addEventListener("click", (e)=> {
 			e.preventDefault();
-			openShareModal(e.target);
+			openShareModal(e.target, e.target.dataset.breach);
 		});
 	});
 }
-
-const btnOpenShareModalBreach = document.querySelector(".js-share-modal-breach");
-
-if (btnOpenShareModalBreach) {
-	btnOpenShareModalBreach.addEventListener("click", (e)=> {
-		e.preventDefault();
-		openShareModal(e.target, true);
-	});
-}
diff --git a/public/js/fxa-analytics.js b/public/js/fxa-analytics.js
@@ -166,6 +166,17 @@ function setGAListeners(){
           await sendPing(el, "Click", el.dataset.eventLabel, {transport: "beacon"});
         });
       });
+
+      document.querySelectorAll(".js-share-modal, .js-share-modal-breach").forEach((el) => {
+        if (el.dataset.label) {
+          el.dataset.eventLabel = el.dataset.label;
+        }
+
+        if (el.dataset.eventCategory !== "exp5-share-modal") {
+          el.dataset.eventCategory = "exp5-share-modal";
+        }
+      });
+
     }
 
   }

diff --git a/template-helpers/footer.js b/template-helpers/footer.js
@@ -41,6 +41,7 @@ function getFooterLinks(args) {
       stringId: "share-monitor",
       href: "/share/purple",
       experiment: "js-share-modal",
+      label: "share-modal--footer",
     };
 
     footerLinks.splice(2, 0, shareMonitorFooter);

diff --git a/template-helpers/header.js b/template-helpers/header.js
@@ -69,6 +69,7 @@ function fxaMenuLinks(args) {
       stringId: "share-monitor",
       href: "/share/orange",
       experiment: "js-share-modal",
+      label: "share-modal--header",
     };
 
     fxaLinks.unshift(shareMonitorFooter);

diff --git a/views/partials/experiment--share-modal.hbs b/views/partials/experiment--share-modal.hbs
@@ -6,8 +6,8 @@
 			<p id="shareTextGeneral" class="share-monitor--modal-promo">Copy this link to share Monitor with people you care about. You can paste the link into email, text messages, social media - wherever&nbsp;you&nbsp;want.</p>
 			<p id="shareTextBreach" class="hidden share-monitor--modal-promo">Share this link with someone you know who may have been involved in this breach. You can paste the link into email, text messages, social media - wherever&nbsp;you&nbsp;want.</p>
 			<label class="copy-form" for="shareModalCopy">
-				<input class="copy-form-input" id="shareModalInput" type="text" name="" value="" readonly="readonly">
-				<button class="copy-form-btn" id="shareModalCopy" type="button" name="button">Copy <span>Link</span> </button>
+				<input class="copy-form-input" data-event-label="shareModalInput" data-event-action="focus" id="shareModalInput" type="text" name="" value="" readonly="readonly">
+				<button class="copy-form-btn" data-event-label="shareModalCopy" data-event-action="click" id="shareModalCopy" type="button" name="button">Copy <span>Link</span> </button>
 			</label>
 			<p class="disclaimer">Monitor won’t track whether or not you share this link. They&nbsp;can&nbsp;check their results for free. No&nbsp;account&nbsp;required.</p>
 		</div>

diff --git a/views/partials/experiment--share-promo-breach.hbs b/views/partials/experiment--share-promo-breach.hbs
@@ -4,7 +4,7 @@
     <img src="/img/svg/present.svg" alt="Gift present with a bow">
     <div class="text">
       <h3 class="txt-purple7">Know someone who may have been affected by this&nbsp;breach?</h3>
-      <a class="blue-link js-share-modal-breach" href="/share/{{ name }}">Send them an invitation to check their email&nbsp;address</a>
+      <a class="blue-link js-share-modal" data-ga-link="" data-breach="true" data-event-category="exp5-share-modal" data-event-label="share-modal--breach-detail" href="/share/{{ name }}">Send them an invitation to check their email&nbsp;address</a>
     </div>
   </div>
 </div>
diff --git a/views/partials/experiment--share-promo-dashboard.hbs b/views/partials/experiment--share-promo-dashboard.hbs
@@ -1,5 +1,6 @@
 <div class="share-monitor--dashboard txt-cntr">
   <img class="" src="/img/svg/present.svg" alt="Gift present with a bow">
   <h3 class="section-headline txt-purple7">Help protect your family and&nbsp;friends</h3>
-  <a class="blue-link js-share-modal" href="/share/blue">Send them an invitation to check their email&nbsp;address</a>
+  <a class="blue-link js-share-modal" data-ga-link="" data-event-category="exp5-share-modal
+  " data-event-label="share-modal--dashboard" href="/share/blue">Send them an invitation to check their email&nbsp;address</a>
 </div>
diff --git a/views/partials/footer.hbs b/views/partials/footer.hbs
@@ -7,7 +7,7 @@
       </li>
       {{#each (getFooterLinks)}}
       <li class="footer-link-wrapper">
-        <a class="footer-link {{this.experiment}}" href="{{ this.href }}" {{> analytics/outbound-link eventLabel=this.title }} {{#if openNewWindow}} target="_blank" {{/if}} rel="noopener">
+        <a class="footer-link {{this.experiment}}" href="{{ this.href }}" {{> analytics/outbound-link eventLabel=this.title }} {{#if this.label}} data-label="{{ this.label }}" {{/if}}  {{#if openNewWindow}} target="_blank" {{/if}} rel="noopener">
           {{ this.stringId }}
         </a>
       </li>

diff --git a/views/partials/header/fxa-menu.hbs b/views/partials/header/fxa-menu.hbs
@@ -1,5 +1,5 @@
 <div class="fxa-menu-wrapper">
-  <div id="avatar-wrapper" class="avatar-wrapper {{ addClass }}" tabindex="0" aria-label="{{ getString "open-fxa-menu" }}">
+  <div id="avatar-wrapper" data-ga-link="" data-event-category="avatar-menu" data-event-label="open-fxa-menu-open" class="avatar-wrapper {{ addClass }}" tabindex="0" aria-label="{{ getString "open-fxa-menu" }}">
     <img alt="{{ req.session.user.primary_email }}" class="avatar" src="{{ req.session.user.fxa_profile_json.avatar }}"/>
   </div>
   <div id="fxa-menu" class="fxa-menu">
@@ -8,7 +8,7 @@
         <span class="signed-in-as">{{{ getSignedInAs }}}</span>
       </div>
       {{#each (fxaMenuLinks)}}
-        <a class="fxa-menu-link {{this.experiment}}" {{> analytics/internal-link eventLabel=this.title }} href="{{ this.href }}">{{ this.stringId }}</a>
+        <a class="fxa-menu-link {{this.experiment}}" {{> analytics/internal-link eventLabel=this.title }} {{#if this.label}} data-label="{{ this.label }}" {{/if}} href="{{ this.href }}">{{ this.stringId }}</a>
       {{/each}}
     </div>
   </div>