Migrate analytics from UA+gtag.js to Google Tag Manager (GA4)

config/default.js

@@ -7,9 +7,9 @@ import path from 'path';
 import {
   apiProdHost,
   baseUrlProd,
-  ga4AdditionalAnalyticsHost,
-  ga4AnalyticsHost,
-  ga4TagManagerHost,
+  gtmAdditionalAnalyticsHost,
+  gtmAnalyticsHost,
+  gtmHost,
   mediaPath,
   prodDomain,
   serverStaticPath,
@@ -101,8 +101,7 @@ module.exports = {
     'experiments',
     'extensionWorkshopUrl',
     'fxaConfig',
-    'ga4DebugMode',
-    'ga4PropertyId',
+    'gtmContainerId',
     'hrefLangsMap',
     'isDeployed',
     'isDevelopment',
@@ -114,9 +113,6 @@ module.exports = {
     'rtlLangs',
     'staticPath',
     'trackingEnabled',
-    'trackingId',
-    'trackingSendInitPageView',
-    'trackingSendWebVitals',
     'unsupportedHrefLangs',
     'validClientAppUrlExceptions',
     'validClientApplications',
@@ -137,9 +133,9 @@ module.exports = {
       childSrc: ["'none'"],
       connectSrc: [
         apiProdHost,
-        ga4AnalyticsHost,
-        ga4AdditionalAnalyticsHost,
-        ga4TagManagerHost,
+        gtmAnalyticsHost,
+        gtmAdditionalAnalyticsHost,
+        gtmHost,
       ],
       fontSrc: [
         `${baseUrlProd}${staticPath}`,
@@ -152,17 +148,17 @@ module.exports = {
         `${baseUrlProd}${mediaPath}`,
         `${baseUrlProd}${staticPath}`,
         `${baseUrlProd}${serverStaticPath}`,
-        ga4AnalyticsHost,
-        ga4TagManagerHost,
+        gtmAnalyticsHost,
+        gtmHost,
       ],
       manifestSrc: ["'none'"],
       mediaSrc: ["'none'"],
       objectSrc: ["'none'"],
       // Script is limited to the static path
       scriptSrc: [
         `${baseUrlProd}${staticPath}`,
-        ga4AnalyticsHost,
-        ga4TagManagerHost,
+        gtmAnalyticsHost,
+        gtmHost,
       ],
       styleSrc: [
         `${baseUrlProd}${staticPath}`,
@@ -274,15 +270,9 @@ module.exports = {
   localeDir: path.resolve(path.join(__dirname, '../locale')),
 
   trackingEnabled: true,
-  trackingId: 'UA-36116321-7',
-  // send a page view on initialization.
-  trackingSendInitPageView: true,
-  // send web vitals stats to GA
-  trackingSendWebVitals: true,
-
-  // For GA4
-  ga4DebugMode: false,
-  ga4PropertyId: 'G-B9CY1C9VBC',
+
+  // For GTM
+  gtmContainerId: 'GTM-WVHFHF6',
 
   enablePostCssLoader: true,
 

config/dev.js

@@ -4,9 +4,9 @@ import {
   baseUrlDev,
   devDomain,
   devLangs,
-  ga4AdditionalAnalyticsHost,
-  ga4AnalyticsHost,
-  ga4TagManagerHost,
+  gtmAdditionalAnalyticsHost,
+  gtmAnalyticsHost,
+  gtmHost,
   mediaPath,
   serverStaticPath,
   staticPath,
@@ -25,9 +25,9 @@ module.exports = {
     directives: {
       connectSrc: [
         apiDevHost,
-        ga4AnalyticsHost,
-        ga4AdditionalAnalyticsHost,
-        ga4TagManagerHost,
+        gtmAnalyticsHost,
+        gtmAdditionalAnalyticsHost,
+        gtmHost,
       ],
       fontSrc: [
         `${baseUrlDev}${staticPath}`,
@@ -38,13 +38,13 @@ module.exports = {
         `${baseUrlDev}${mediaPath}`,
         `${baseUrlDev}${staticPath}`,
         `${baseUrlDev}${serverStaticPath}`,
-        ga4AnalyticsHost,
-        ga4TagManagerHost,
+        gtmAnalyticsHost,
+        gtmHost,
       ],
       scriptSrc: [
         `${baseUrlDev}${staticPath}`,
-        ga4AnalyticsHost,
-        ga4TagManagerHost,
+        gtmAnalyticsHost,
+        gtmHost,
       ],
       styleSrc: [
         `${baseUrlDev}${staticPath}`,

config/development.js

@@ -3,9 +3,9 @@ import {
   apiDevHost,
   baseUrlDev,
   devLangs,
-  ga4AdditionalAnalyticsHost,
-  ga4AnalyticsHost,
-  ga4TagManagerHost,
+  gtmAdditionalAnalyticsHost,
+  gtmAnalyticsHost,
+  gtmHost,
 } from './lib/shared';
 
 const webpackServerHost = process.env.WEBPACK_SERVER_HOST || '127.0.0.1';
@@ -22,7 +22,7 @@ module.exports = {
   proxyEnabled: true,
 
   fxaConfig: 'local',
-  trackingEnabled: false,
+  trackingEnabled: true,
   loggingLevel: 'debug',
 
   isDeployed: false,
@@ -53,9 +53,9 @@ module.exports = {
         webpackDevServer,
         // This is needed for pino-devtools.
         `${webpackServerHost}:3010`,
-        ga4AnalyticsHost,
-        ga4AdditionalAnalyticsHost,
-        ga4TagManagerHost,
+        gtmAnalyticsHost,
+        gtmAdditionalAnalyticsHost,
+        gtmHost,
       ],
       fontSrc: [
         webpackDevServer,
@@ -65,17 +65,17 @@ module.exports = {
         'data:',
         baseUrlDev,
         webpackDevServer,
-        ga4AnalyticsHost,
-        ga4TagManagerHost,
+        gtmAnalyticsHost,
+        gtmHost,
       ],
       scriptSrc: [
         "'self'",
         // webpack injects inline JS
         "'unsafe-inline'",
         baseUrlDev,
         webpackDevServer,
-        ga4AnalyticsHost,
-        ga4TagManagerHost,
+        gtmAnalyticsHost,
+        gtmHost,
       ],
       styleSrc: [
         "'self'",
@@ -86,8 +86,6 @@ module.exports = {
     reportOnly: true,
   },
 
-  ga4DebugMode: true,
-
   extensionWorkshopUrl: 'https://extensionworkshop.allizom.org',
 
   langs: devLangs,

config/lib/shared.js

@@ -11,10 +11,10 @@ export const baseUrlProd = apiProdHost;
 export const baseUrlStage = apiStageHost;
 
 // https://github.com/mozilla/addons/issues/14799#issuecomment-2127359422
-// These match Google's recommendations for CSP with GA4.
-export const ga4TagManagerHost = 'https://*.googletagmanager.com';
-export const ga4AnalyticsHost = 'https://*.google-analytics.com';
-export const ga4AdditionalAnalyticsHost = 'https://*.analytics.google.com';
+// These match Google's recommendations for CSP with GTM/GA4.
+export const gtmHost = 'https://*.googletagmanager.com';
+export const gtmAnalyticsHost = 'https://*.google-analytics.com';
+export const gtmAdditionalAnalyticsHost = 'https://*.analytics.google.com';
 
 export const staticPath = '/static-frontend/';
 export const serverStaticPath = '/static-server/';  // addons-server statics.

config/stage.js

@@ -2,9 +2,9 @@
 import {
   apiStageHost,
   baseUrlStage,
-  ga4AdditionalAnalyticsHost,
-  ga4AnalyticsHost,
-  ga4TagManagerHost,
+  gtmAdditionalAnalyticsHost,
+  gtmAnalyticsHost,
+  gtmHost,
   mediaPath,
   serverStaticPath,
   stageDomain,
@@ -23,9 +23,9 @@ module.exports = {
     directives: {
       connectSrc: [
         apiStageHost,
-        ga4AnalyticsHost,
-        ga4AdditionalAnalyticsHost,
-        ga4TagManagerHost,
+        gtmAnalyticsHost,
+        gtmAdditionalAnalyticsHost,
+        gtmHost,
       ],
       fontSrc: [
         `${baseUrlStage}${staticPath}`,
@@ -36,13 +36,13 @@ module.exports = {
         `${baseUrlStage}${mediaPath}`,
         `${baseUrlStage}${staticPath}`,
         `${baseUrlStage}${serverStaticPath}`,
-        ga4AnalyticsHost,
-        ga4TagManagerHost,
+        gtmAnalyticsHost,
+        gtmHost,
       ],
       scriptSrc: [
         `${baseUrlStage}${staticPath}`,
-        ga4AnalyticsHost,
-        ga4TagManagerHost,
+        gtmAnalyticsHost,
+        gtmHost,
       ],
       styleSrc: [
         `${baseUrlStage}${staticPath}`,
@@ -51,7 +51,6 @@ module.exports = {
   },
 
   allowErrorSimulation: true,
-  ga4DebugMode: true,
 
   extensionWorkshopUrl: 'https://extensionworkshop.allizom.org',
 };

src/amo/client/base.js

@@ -9,14 +9,12 @@ import Root from 'amo/components/Root';
 import { langToLocale, makeI18n, sanitizeLanguage } from 'amo/i18n/utils';
 import log from 'amo/logger';
 import { addQueryParamsToHistory } from 'amo/utils';
-import tracking from 'amo/tracking';
 
 export default async function createClient(
   createStore,
   {
     _config = config,
     _createBrowserHistory = createBrowserHistory,
-    _tracking = tracking,
     sagas = null,
   } = {},
 ) {
@@ -58,14 +56,6 @@ export default async function createClient(
     }),
   });
 
-  // See: https://github.com/mozilla/addons-frontend/issues/8647
-  history.listen((location) => {
-    _tracking.setPage(location.pathname);
-    // It is guaranteed that the navigation has happened but the title of the
-    // page is likely stale, so we are omitting it.
-    _tracking.pageView({ title: '' });
-  });
-
   const { connectedHistory, sagaMiddleware, store } = createStore({
     history,
     initialState,

src/amo/components/AddonRecommendations/index.js

@@ -1,4 +1,5 @@
 /* @flow */
+/* global window */
 import makeClassName from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
@@ -14,7 +15,8 @@ import {
 import { withErrorHandler } from 'amo/errorHandler';
 import translate from 'amo/i18n/translate';
 import log from 'amo/logger';
-import defaultTracking from 'amo/tracking';
+import defaultTracking, { getAddonEventParams } from 'amo/tracking';
+import { getPromotedCategory } from 'amo/utils/addons';
 import LoadingText from 'amo/components/LoadingText';
 import type { Recommendations } from 'amo/reducers/recommendations';
 import type { AppState } from 'amo/store';
@@ -25,13 +27,15 @@ import type { DispatchFunc } from 'amo/types/redux';
 
 import './styles.scss';
 
-export const TAAR_IMPRESSION_CATEGORY = 'AMO Addon / Recommendations Shown';
+export const TAAR_IMPRESSION_CATEGORY = 'amo_addon_recommendations_shown';
 
 type DefaultProps = {|
+  _getPromotedCategory: typeof getPromotedCategory,
   tracking: typeof defaultTracking,
 |};
 
 type PropsFromState = {|
+  clientApp: string,
   recommendations: Recommendations | null,
 |};
 
@@ -47,6 +51,7 @@ type Props = {|
 
 export class AddonRecommendationsBase extends React.Component<Props> {
   static defaultProps: DefaultProps = {
+    _getPromotedCategory: getPromotedCategory,
     tracking: defaultTracking,
   };
 
@@ -61,7 +66,9 @@ export class AddonRecommendationsBase extends React.Component<Props> {
   componentDidUpdate(prevProps: Props) {
     const { addon: oldAddon, recommendations: oldRecommendations } = prevProps;
     const {
+      _getPromotedCategory,
       addon: newAddon,
+      clientApp,
       recommendations: newRecommendations,
       tracking,
       errorHandler,
@@ -77,7 +84,7 @@ export class AddonRecommendationsBase extends React.Component<Props> {
 
     // Send the GA ping when recommendations are loaded.
     if (newRecommendations && oldRecommendations !== newRecommendations) {
-      const { fallbackReason, loading, outcome } = newRecommendations;
+      const { loading, outcome } = newRecommendations;
 
       if (loading || errorHandler.hasError()) {
         return;
@@ -86,14 +93,12 @@ export class AddonRecommendationsBase extends React.Component<Props> {
       invariant(newAddon, 'newAddon is required');
       invariant(outcome, 'outcome is required');
 
-      let action = outcome;
-      if (fallbackReason) {
-        action = `${action}-${fallbackReason}`;
-      }
       tracking.sendEvent({
-        action,
         category: TAAR_IMPRESSION_CATEGORY,
-        label: newAddon.guid,
+        params: {
+          ...getAddonEventParams(newAddon, window.location.pathname),
+          trusted: !!_getPromotedCategory({ addon: newAddon, clientApp }),
+        },
       });
     }
   }
@@ -159,7 +164,7 @@ const mapStateToProps = (state: AppState, ownProps: Props): PropsFromState => {
         state: state.recommendations,
       })
     : null;
-  return { recommendations };
+  return { clientApp: state.api.clientApp, recommendations };
 };
 
 const AddonRecommendations: React.ComponentType<Props> = compose(