From bfa2e6a5f9abf89b10f1e4ecf128c543af6bb83c Mon Sep 17 00:00:00 2001 From: Maxx Crawford Date: Tue, 28 Jul 2020 13:11:39 -0500 Subject: [PATCH] Fixed #1820 - Added GA Events for all the experiment interactions --- public/js/experiment.js | 49 ++++++++++++------- public/js/fxa-analytics.js | 11 +++++ template-helpers/footer.js | 1 + template-helpers/header.js | 1 + views/partials/experiment--share-modal.hbs | 4 +- .../experiment--share-promo-breach.hbs | 2 +- .../experiment--share-promo-dashboard.hbs | 3 +- views/partials/footer.hbs | 2 +- views/partials/header/fxa-menu.hbs | 4 +- 9 files changed, 52 insertions(+), 25 deletions(-) diff --git a/public/js/experiment.js b/public/js/experiment.js index 9f9a0c2b77d..8ef2ea4925a 100644 --- 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 index e91fed8e252..3af0087d81f 100644 --- 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 index ee07bfff98a..5b111b36979 100644 --- 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 index 5ece8a219fc..768eb78a1b3 100644 --- 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 index 8ef27718273..2ef86dea050 100644 --- a/views/partials/experiment--share-modal.hbs +++ b/views/partials/experiment--share-modal.hbs @@ -6,8 +6,8 @@

Copy this link to share Monitor with people you care about. You can paste the link into email, text messages, social media - wherever you want.

Monitor won’t track whether or not you share this link. They can check their results for free. No account required.

diff --git a/views/partials/experiment--share-promo-breach.hbs b/views/partials/experiment--share-promo-breach.hbs index 43e49eb5d89..7714189dbf2 100644 --- a/views/partials/experiment--share-promo-breach.hbs +++ b/views/partials/experiment--share-promo-breach.hbs @@ -4,7 +4,7 @@ Gift present with a bow

Know someone who may have been affected by this breach?

- Send them an invitation to check their email address + Send them an invitation to check their email address
diff --git a/views/partials/experiment--share-promo-dashboard.hbs b/views/partials/experiment--share-promo-dashboard.hbs index a963782e093..c78a829e792 100644 --- a/views/partials/experiment--share-promo-dashboard.hbs +++ b/views/partials/experiment--share-promo-dashboard.hbs @@ -1,5 +1,6 @@
Gift present with a bow

Help protect your family and friends

- Send them an invitation to check their email address + Send them an invitation to check their email address
diff --git a/views/partials/footer.hbs b/views/partials/footer.hbs index 84596d3e4ad..3d78ca5e2b9 100644 --- a/views/partials/footer.hbs +++ b/views/partials/footer.hbs @@ -7,7 +7,7 @@ {{#each (getFooterLinks)}}
  • - analytics/outbound-link eventLabel=this.title }} {{#if openNewWindow}} target="_blank" {{/if}} rel="noopener"> + analytics/outbound-link eventLabel=this.title }} {{#if this.label}} data-label="{{ this.label }}" {{/if}} {{#if openNewWindow}} target="_blank" {{/if}} rel="noopener"> {{ this.stringId }}
    • diff --git a/views/partials/header/fxa-menu.hbs b/views/partials/header/fxa-menu.hbs index b991959f350..450d55a7fd4 100644 --- a/views/partials/header/fxa-menu.hbs +++ b/views/partials/header/fxa-menu.hbs @@ -1,5 +1,5 @@
    -