MNTOR-1440 switch from GTM to gtag js (#2916)

* chore: switch from gtm to gtag.js

Co-authored-by: Amri Toufali <atoufali@mozilla.com>

docs/analytics.md

@@ -1,4 +1,4 @@
-_Last updated: Nov 19, 2019_
+_Last updated: Mar 21, 2021_
 
 # Firefox Monitor Analytics Plan
 
@@ -33,49 +33,39 @@ This is the Analytics plan for Firefox Monitor. It documents our use of Google A
 
 ## Collection
 
-Events are reported using the [Google Analytics Measurement Protocol](https://developers.google.com/analytics/devguides/collection/protocol/v1/).
+Events are reported using the [Google Analytics 4 Measurement Protocol](https://developers.google.com/analytics/devguides/collection/protocol/ga4).
 
 We collect data for the following events:
 
-- When the page loads (or reloads).
-  * `hitType` : pageView
-  * `page` : location.pathName
-
+- [Enhanced measurement events](https://support.google.com/analytics/answer/9216061):
 ### Scan and Add Email Forms
 
 **`Email Scan Form`**     **`Scan Another Email Form`**     **`Add Another Email Form`**
 
 - When a form appears on the page.
-  * `hitType` : event
-  * `eventCategory` : Form ID
-  * `eventAction` : View
-  * `eventLabel` : Page location ID.
-
+  * `category   `   : Form ID
+  * `action`        : view
+  * `page_location` : Page location ID.
 
 - When a user focuses inside a form input.
-  * `hitType` : event
   * `eventCategory` : Form ID
-  * `eventAction` : Engage
-  * `eventLabel` : Page location ID.
-
+  * `action`        : engage
+  * `page_location` : Page location ID.
 
 - When a user submits a form.
-  * `hitType` : event
-  * `eventCategory` : Form ID
-  * `eventAction` : Submit
-  * `eventLabel` : Page location ID.
+  * `category`      : Form ID
+  * `action`        : submit
+  * `page_location` : Page location ID.
 
 - When a user submits an invalid email.
-  * `hitType` : event
-  * `eventCategory` : Form ID
-  * `eventAction` : Failure
-  * `eventLabel` : Page location ID.
+  * `category`      : Form ID
+  * `action`        : failure
+  * `page_location` : Page location ID.
 
 - When a user submits a valid email.
-  * `hitType` : event
-  * `eventCategory` : Form ID
-  * `eventAction` : Success
-  * `eventLabel` : Page location ID.
+  * `category`      : Form ID
+  * `action`        : success
+  * `page_location` : Page location ID.
   
 
 ### Sign Up Buttons & Links (FxA Entrypoints)
@@ -83,59 +73,38 @@ We collect data for the following events:
 **`Sign In Button`** -   **`Sign Up Button`**     **`Sign In Link`**   **`About page SignUp Button`**     **`Alert Me About New Breaches`**     **`Alert Me About New Breaches - Banner`**   
 
 - When a button appears on the page
-  * `hitType` : event
-  * `eventCategory` : Button ID
-  * `eventAction` : View
-  * `eventLabel` : Page location ID.
+  * `category`      : Button ID
+  * `action`        : view
+  * `page_location` : Page location ID.
 
 - When a user clicks a link or button.
-  * `hitType` : event
-  * `eventCategory` : Button or Link ID
-  * `eventAction` : Engage
-  * `eventLabel` : Page location ID.
+  * `category`      : Button or Link ID
+  * `action`        : engage
+  * `page_location` : Page location ID.
 
 ### Miscellaneous
 
 **`All Breaches: Fuzzy Finder`**   **`All Breaches: Show All Button`**   **`About Page: Download Firefox`**   **`About Page: Search Your Email`**   **`Breach Detail: Change Password Button`**   **`Breach Detail: Website URL Link`**   **`Remove Email Form`**   **`Show All Breaches Button`**
 
-
 - When a user clicks a triggering element
-  * `hitType` : event
-  * `eventCategory` : Type of Link (Outbound or Internal)
-  * `eventAction` : Click / Engage
-  * `eventLabel` : Link ID
+  * `categorty`   : Type of Link (Outbound or Internal)
+  * `action`      : click / engage
+  * `link_id`     : Link ID
   
+### User menu
 
-### Links
+- When a user opens the User menu
+  * `category` : User Menu
+  * `action`   : open
 
-**`Outbound & Utility Links`**     **`Internal Links`**     **`Security Tips Links`**
+- When a user closes the User menu
+  * `category` : User Menu
+  * `action`   : close
 
-- When a user clicks a link.
-  * `hitType` : event
-  * `eventCategory` :Button or Link ID
-  * `eventAction` : Click
-  * `eventLabel` : Page location ID.
-
-
-### Bento
-
-- When a user opens the Bento menu
-  * `hitType` : event
-  * `eventCategory` : bento
-  * `eventAction` : bento-opened
-  * `eventLabel` : fx-monitor
-
-- When a user closes the Bento menu
-  * `hitType` : event
-  * `eventCategory` : bento
-  * `eventAction` : bento-closed
-  * `eventLabel` : fx-monitor
-
-- When a user clicks on one of the Bento menu links
-  * `hitType` : event
-  * `eventCategory` : bento
-  * `eventAction` : bento-app-link-click
-  * `eventLabel` : link identifier
+- When a user clicks on one of the User menu links
+  * `category` : User Menu
+  * `action`   : click
+  * `link_id`  : Link ID
 
 
 ## Opt Out of Google Analytics Tracking

src/client/js/components/toast-alert.js

@@ -178,9 +178,11 @@ customElements.define('toast-alert', class extends HTMLElement {
     switch (true) {
       case e.target.matches('button'):
         this.remove()
+        window.gtag('event', 'Toast Alert', { action: 'dismiss' })
         break
       case e.animationName === 'fade-out':
         this.remove()
+        window.gtag('event', 'Toast Alert', { action: 'faded' })
         break
     }
   }

src/client/js/dialog.js

@@ -55,6 +55,7 @@ async function openDialog (path) {
     })
 
     if (!res.ok) throw new Error('Bad fetch response')
+    window.gtag('event', 'Dialog', { action: 'open', result: 'success', page_location: location.href })
 
     const content = await res.text()
     dialogEl.insertAdjacentHTML('beforeend', content)
@@ -67,6 +68,7 @@ async function openDialog (path) {
     }
   } catch (e) {
     dialogEl.close()
+    window.gtag('event', 'Dialog', { action: 'open', result: 'failed', page_location: location.href })
     console.error(`Could not load dialog content for ${partialName}.`, e)
   }
 }

src/client/js/partials/add-email.js

@@ -33,6 +33,8 @@ async function handleSubmit (e) {
 
     if (!res.ok) throw new Error()
 
+    window.gtag('event', 'Add Email', { result: 'success' })
+
     const { newEmailCount } = await res.json()
 
     renderSuccess({
@@ -45,6 +47,7 @@ async function handleSubmit (e) {
     toast.textContent = `Could not add email. ${e.message}`
     dialogEl.append(toast)
     console.error('Could not add email.', e)
+    window.gtag('event', 'Add Email', { result: 'fail' })
   } finally {
     form.elements['email-submit'].toggleAttribute('disabled', false)
   }

src/client/js/partials/breaches.js

@@ -57,6 +57,10 @@ function handleEvent (e) {
       break
     case e.target.matches('.resolve-list-item [type="checkbox"]'):
       updateBreachStatus(e.target)
+      window.gtag('event', 'Breach Item', {
+        action: e.target.checked ? 'resolved' : 'unresolved',
+        page_location: location.href
+      })
       break
     case e.type === 'email-added':
       state.emailCount = e.detail.newEmailCount

src/client/js/partials/notFound.js

@@ -7,6 +7,8 @@ if (window.history.length > 1) {
   backCta?.addEventListener('click', () => {
     window.history.back()
 
+    window.gtag('event', 'Go Back', { action: 'click', page_location: location.href })
+
     // The call to `window.history.back()` might do nothing; for example, if the
     // user has clicked Back to get to the 404 page: while there might not be
     // another page to go back to, window.history.length will still be > 1

src/client/js/partials/settings.js

@@ -12,7 +12,9 @@ function handleEvent (e) {
   switch (true) {
     case e.type === 'email-added':
       document.querySelector('dialog[data-partial="add-email"]')
-        .addEventListener('close', () => window.location.reload(), { once: true })
+        .addEventListener('close', () => {
+          window.location.reload()
+        }, { once: true })
       break
   }
 }
@@ -44,6 +46,7 @@ if (settingsAlertOptionsInputs?.length) {
         throw new Error(`Updating communication option failed: ${err}`)
       }
       event.preventDefault()
+      window.gtag('event', 'Change Email Preference', { action: 'click', page_location: location.href })
       return false
     })
   }
@@ -73,6 +76,8 @@ if (settingsRemoveEmailButtons?.length) {
         if (response && response.redirected === true) {
           return window.location.reload(true)
         }
+
+        window.gtag('event', 'Remove Email', { action: 'click', page_location: location.href })
       } catch (err) {
         console.error(`Error: ${err}`)
       }
@@ -115,6 +120,7 @@ if (settingsResendEmailLinks?.length) {
         throw new Error(`Re-sending verification email failed. ${err}`)
       }
       event.preventDefault()
+      window.gtag('event', 'Resend Email', { action: 'click', page_location: location.href })
       return false
     })
   }

src/client/js/partials/unsubscribe.js

@@ -54,6 +54,8 @@ async function handleEvent (event) {
   } catch (error) {
     throw new Error(errorMessage)
   }
+
+  window.gtag('event', 'Unsubscribe', { action: 'click', page_location: location.href })
 }
 
 /**

src/client/js/user-menu.js

@@ -31,12 +31,16 @@ function handleMenuButton () {
     // Handle onblur
     userMenuWrapper.addEventListener('blur', (event) => handleBlur(event, handleMenuButton))
     userMenuWrapper.focus()
+
+    window.gtag('event', 'User Menu', { action: 'open' })
   } else {
     // Hide popover
     userMenuPopover.setAttribute('aria-expanded', false)
     userMenuPopover.setAttribute('hidden', '')
 
     userMenuButton.focus()
+
+    window.gtag('event', 'User Menu', { action: 'close' })
   }
 }
 

src/views/guestLayout.js

@@ -35,14 +35,26 @@ const guestLayout = data => `
 
     <script src='/js/index.js' type='module'></script>
 
-    <!-- Google Tag Manager -->
-    <script nonce='${data.nonce}'>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
-    n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','${AppConstants.GA4_MEASUREMENT_ID}');</script>
-    <!-- End Google Tag Manager -->
+    <!-- Google tag (gtag.js) -->
+    <script nonce='${data.nonce}' type='module'>
+      if (navigator.doNotTrack !== '1') {
+        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+        'https://www.googletagmanager.com/gtag/js?id='+i+dl;var n=d.querySelector('[nonce]');
+        n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
+        })(window,document,'script','dataLayer','${AppConstants.GA4_MEASUREMENT_ID}');
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date()); gtag('config', '${AppConstants.GA4_MEASUREMENT_ID}');
+        window.gtag = gtag
+      } else {
+        function gtag() {
+          console.debug("Google Analytics disbled by DNT")
+        }
+        window.gtag = gtag
+      }
+      </script>
+    <!-- End Google tag (gtag.js) -->
   </head>
   <body>
     <header>

src/views/mainLayout.js

@@ -35,14 +35,26 @@ const mainLayout = data => `
 
     <script src='/js/index.js' type='module'></script>
 
-    <!-- Google Tag Manager -->
-    <script nonce='${data.nonce}'>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
-    n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','${AppConstants.GA4_MEASUREMENT_ID}');</script>
-    <!-- End Google Tag Manager -->
+    <!-- Google tag (gtag.js) -->
+    <script nonce='${data.nonce}' type='module'>
+      if (navigator.doNotTrack !== '1') {
+        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+        'https://www.googletagmanager.com/gtag/js?id='+i+dl;var n=d.querySelector('[nonce]');
+        n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
+        })(window,document,'script','dataLayer','${AppConstants.GA4_MEASUREMENT_ID}');
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date()); gtag('config', '${AppConstants.GA4_MEASUREMENT_ID}');
+        window.gtag = gtag
+      } else {
+        function gtag() {
+          console.debug("Google Analytics disbled by DNT")
+        }
+        window.gtag = gtag
+      }
+      </script>
+    <!-- End Google tag (gtag.js) -->
   </head>
   <body>
     <header>