diff --git a/config/default.js b/config/default.js index 99862cb0c93..c473fd4f81b 100644 --- a/config/default.js +++ b/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,8 +148,8 @@ module.exports = { `${baseUrlProd}${mediaPath}`, `${baseUrlProd}${staticPath}`, `${baseUrlProd}${serverStaticPath}`, - ga4AnalyticsHost, - ga4TagManagerHost, + gtmAnalyticsHost, + gtmHost, ], manifestSrc: ["'none'"], mediaSrc: ["'none'"], @@ -161,8 +157,8 @@ module.exports = { // 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, diff --git a/config/dev.js b/config/dev.js index cdfeb4c6aa7..3f1feac5809 100644 --- a/config/dev.js +++ b/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}`, diff --git a/config/development.js b/config/development.js index e2142a10037..e04dfb5fb50 100644 --- a/config/development.js +++ b/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,8 +65,8 @@ module.exports = { 'data:', baseUrlDev, webpackDevServer, - ga4AnalyticsHost, - ga4TagManagerHost, + gtmAnalyticsHost, + gtmHost, ], scriptSrc: [ "'self'", @@ -74,8 +74,8 @@ module.exports = { "'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, diff --git a/config/lib/shared.js b/config/lib/shared.js index b872bc5daa6..9c2de666167 100644 --- a/config/lib/shared.js +++ b/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. diff --git a/config/stage.js b/config/stage.js index 47f05b4ebec..8f68a9fb99a 100644 --- a/config/stage.js +++ b/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', }; diff --git a/src/amo/client/base.js b/src/amo/client/base.js index 2c8d4793e65..22a05c018d8 100644 --- a/src/amo/client/base.js +++ b/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, diff --git a/src/amo/components/AddonRecommendations/index.js b/src/amo/components/AddonRecommendations/index.js index c84259f5913..67754caf4ac 100644 --- a/src/amo/components/AddonRecommendations/index.js +++ b/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 { static defaultProps: DefaultProps = { + _getPromotedCategory: getPromotedCategory, tracking: defaultTracking, }; @@ -61,7 +66,9 @@ export class AddonRecommendationsBase extends React.Component { 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 { // 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 { 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 = compose( diff --git a/src/amo/components/AddonSuggestions/index.js b/src/amo/components/AddonSuggestions/index.js index 17708ba5930..d3a779c8826 100644 --- a/src/amo/components/AddonSuggestions/index.js +++ b/src/amo/components/AddonSuggestions/index.js @@ -1,4 +1,5 @@ /* @flow */ +/* global window */ import config from 'config'; import invariant from 'invariant'; import * as React from 'react'; @@ -18,7 +19,8 @@ import { import { withErrorHandler } from 'amo/errorHandler'; import translate from 'amo/i18n/translate'; import log from 'amo/logger'; -import defaultTracking, { getAddonTypeForTracking } from 'amo/tracking'; +import defaultTracking, { getAddonEventParams } from 'amo/tracking'; +import { getPromotedCategory } from 'amo/utils/addons'; import LoadingText from 'amo/components/LoadingText'; import type { AppState } from 'amo/store'; import type { ErrorHandlerType } from 'amo/types/errorHandler'; @@ -29,10 +31,12 @@ import type { DispatchFunc } from 'amo/types/redux'; import './styles.scss'; type DefaultProps = {| + _getPromotedCategory: typeof getPromotedCategory, tracking: typeof defaultTracking, |}; type PropsFromState = {| + clientApp: string, loading: boolean, suggestions: Array | null, |}; @@ -156,6 +160,7 @@ const getCategory = ( export class AddonSuggestionsBase extends React.Component { static defaultProps: DefaultProps = { + _getPromotedCategory: getPromotedCategory, tracking: defaultTracking, }; @@ -200,11 +205,13 @@ export class AddonSuggestionsBase extends React.Component { onAddonClick: (addon: AddonType | CollectionAddonType) => void = ( addon: AddonType | CollectionAddonType, ) => { - const { tracking } = this.props; + const { _getPromotedCategory, clientApp, tracking } = this.props; tracking.sendEvent({ - action: getAddonTypeForTracking(addon.type), category: SUGGESTIONS_CLICK_CATEGORY, - label: addon.guid, + params: { + ...getAddonEventParams(addon, window.location.pathname), + trusted: !!_getPromotedCategory({ addon, clientApp }), + }, }); }; @@ -286,7 +293,7 @@ const mapStateToProps = (state: AppState, ownProps: Props): PropsFromState => { state: state.suggestions, }); } - return { loading, suggestions }; + return { clientApp: state.api.clientApp, loading, suggestions }; }; const AddonSuggestions: React.ComponentType = compose( diff --git a/src/amo/components/ContributeCard/index.js b/src/amo/components/ContributeCard/index.js index 7aeea9cf978..4d85cf6d900 100644 --- a/src/amo/components/ContributeCard/index.js +++ b/src/amo/components/ContributeCard/index.js @@ -1,35 +1,46 @@ /* @flow */ +/* global window */ import * as React from 'react'; import { compose } from 'redux'; +import { connect } from 'react-redux'; import makeClassName from 'classnames'; import { ADDON_TYPE_EXTENSION, ADDON_TYPE_STATIC_THEME } from 'amo/constants'; import translate from 'amo/i18n/translate'; -import tracking from 'amo/tracking'; +import tracking, { getAddonEventParams } from 'amo/tracking'; +import { getPromotedCategory } from 'amo/utils/addons'; import Button from 'amo/components/Button'; import Icon from 'amo/components/Icon'; import type { AddonType } from 'amo/types/addons'; +import type { AppState } from 'amo/store'; import type { I18nType } from 'amo/types/i18n'; import './styles.scss'; -export const CONTRIBUTE_BUTTON_CLICK_ACTION = 'contribute-click'; export const CONTRIBUTE_BUTTON_CLICK_CATEGORY = - 'AMO Addon / Contribute Button Clicks'; + 'amo_addon_contribute_button_clicks'; type Props = {| addon: AddonType | null, i18n: I18nType, |}; +type PropsFromState = {| + clientApp: string, +|}; + type InternalProps = {| ...Props, + ...PropsFromState, _tracking: typeof tracking, + _getPromotedCategory: typeof getPromotedCategory, |}; export const ContributeCardBase = ({ _tracking = tracking, + _getPromotedCategory = getPromotedCategory, addon, + clientApp, i18n, }: InternalProps): null | React.Node => { if (!addon || (addon && !addon.contributions_url)) { @@ -87,9 +98,11 @@ export const ContributeCardBase = ({ const onButtonClick = () => { _tracking.sendEvent({ - action: CONTRIBUTE_BUTTON_CLICK_ACTION, category: CONTRIBUTE_BUTTON_CLICK_CATEGORY, - label: addon.guid, + params: { + ...getAddonEventParams(addon, window.location.pathname), + trusted: !!_getPromotedCategory({ addon, clientApp }), + }, }); }; @@ -121,7 +134,15 @@ export const ContributeCardBase = ({ ); }; -const ContributeCard: React.ComponentType = - compose(translate())(ContributeCardBase); +const mapStateToProps = (state: AppState): PropsFromState => { + return { + clientApp: state.api.clientApp, + }; +}; + +const ContributeCard: React.ComponentType = compose( + connect(mapStateToProps), + translate(), +)(ContributeCardBase); export default ContributeCard; diff --git a/src/amo/components/GetFirefoxBanner/index.js b/src/amo/components/GetFirefoxBanner/index.js index 7bf8de7b0f4..b07edc7c946 100644 --- a/src/amo/components/GetFirefoxBanner/index.js +++ b/src/amo/components/GetFirefoxBanner/index.js @@ -1,4 +1,5 @@ /* @flow */ +/* global window */ import * as React from 'react'; import { connect } from 'react-redux'; import { compose } from 'redux'; @@ -10,10 +11,7 @@ import { GET_FIREFOX_BANNER_UTM_CONTENT, } from 'amo/constants'; import Button from 'amo/components/Button'; -import { - GET_FIREFOX_BUTTON_CLICK_CATEGORY, - getDownloadLink, -} from 'amo/components/GetFirefoxButton'; +import { getDownloadLink } from 'amo/components/GetFirefoxButton'; import Notice from 'amo/components/Notice'; import Link from 'amo/components/Link'; import tracking from 'amo/tracking'; @@ -27,11 +25,10 @@ import type { ReactRouterLocationType } from 'amo/types/router'; import './styles.scss'; -export const GET_FIREFOX_BANNER_CLICK_ACTION = 'download-firefox-banner-click'; -export const GET_FIREFOX_BANNER_DISMISS_ACTION = - 'download-firefox-banner-dismiss'; +export const GET_FIREFOX_BANNER_CLICK_CATEGORY = + 'amo_download_firefox_banner_click'; export const GET_FIREFOX_BANNER_DISMISS_CATEGORY = - 'AMO Download Firefox Banner'; + 'amo_download_firefox_banner'; export type Props = {||}; @@ -61,15 +58,15 @@ export const GetFirefoxBannerBase = ({ }: InternalProps): null | React.Node => { const onButtonClick = () => { _tracking.sendEvent({ - action: GET_FIREFOX_BANNER_CLICK_ACTION, - category: GET_FIREFOX_BUTTON_CLICK_CATEGORY, + category: GET_FIREFOX_BANNER_CLICK_CATEGORY, + params: { page_path: window.location.pathname }, }); }; const onDismiss = () => { _tracking.sendEvent({ - action: GET_FIREFOX_BANNER_DISMISS_ACTION, category: GET_FIREFOX_BANNER_DISMISS_CATEGORY, + params: { page_path: window.location.pathname }, }); }; diff --git a/src/amo/components/GetFirefoxButton/index.js b/src/amo/components/GetFirefoxButton/index.js index c333050d770..6ebfe823c7b 100644 --- a/src/amo/components/GetFirefoxButton/index.js +++ b/src/amo/components/GetFirefoxButton/index.js @@ -1,4 +1,5 @@ /* @flow */ +/* global window */ import makeClassName from 'classnames'; import invariant from 'invariant'; import * as React from 'react'; @@ -17,9 +18,10 @@ import { GET_FIREFOX_BANNER_UTM_CONTENT, } from 'amo/constants'; import translate from 'amo/i18n/translate'; -import tracking from 'amo/tracking'; +import tracking, { getAddonEventParams } from 'amo/tracking'; import { makeQueryStringWithUTM } from 'amo/utils'; import { isFirefox } from 'amo/utils/compatibility'; +import { getPromotedCategory } from 'amo/utils/addons'; import { makeQueryString } from 'amo/api'; import type { UserAgentInfoType } from 'amo/reducers/api'; import type { AppState } from 'amo/store'; @@ -28,8 +30,7 @@ import type { I18nType } from 'amo/types/i18n'; import './styles.scss'; -export const GET_FIREFOX_BUTTON_CLICK_ACTION = 'download-firefox-click'; -export const GET_FIREFOX_BUTTON_CLICK_CATEGORY = 'AMO Download Firefox'; +export const GET_FIREFOX_BUTTON_CLICK_CATEGORY = 'amo_download_firefox_button'; export type Props = {| addon: AddonType, @@ -40,6 +41,7 @@ export type Props = {| export type DefaultProps = {| _encode: typeof encode, + _getPromotedCategory: typeof getPromotedCategory, _tracking: typeof tracking, |}; @@ -116,6 +118,7 @@ export const getDownloadLink = ({ export const GetFirefoxButtonBase = ({ _encode = encode, + _getPromotedCategory = getPromotedCategory, _tracking = tracking, addon, className, @@ -133,9 +136,11 @@ export const GetFirefoxButtonBase = ({ const onButtonClick = () => { _tracking.sendEvent({ - action: GET_FIREFOX_BUTTON_CLICK_ACTION, category: GET_FIREFOX_BUTTON_CLICK_CATEGORY, - label: addon.guid, + params: { + ...getAddonEventParams(addon, window.location.pathname), + trusted: !!_getPromotedCategory({ addon, clientApp }), + }, }); }; diff --git a/src/amo/components/HeroRecommendation/index.js b/src/amo/components/HeroRecommendation/index.js index 7dd9ad09b2d..64576d70f47 100644 --- a/src/amo/components/HeroRecommendation/index.js +++ b/src/amo/components/HeroRecommendation/index.js @@ -1,4 +1,5 @@ /* @flow */ +/* global window */ import makeClassName from 'classnames'; import invariant from 'invariant'; import * as React from 'react'; @@ -18,7 +19,7 @@ import { } from 'amo/constants'; import translate from 'amo/i18n/translate'; import log from 'amo/logger'; -import tracking from 'amo/tracking'; +import tracking, { getAddonEventParams } from 'amo/tracking'; import { getPromotedCategory } from 'amo/utils/addons'; import { addQueryParams } from 'amo/utils/url'; import LoadingText from 'amo/components/LoadingText'; @@ -29,11 +30,8 @@ import type { I18nType } from 'amo/types/i18n'; import './styles.scss'; -export const PRIMARY_HERO_CLICK_ACTION = 'primary-hero-click'; -export const PRIMARY_HERO_CLICK_CATEGORY = 'AMO Primary Hero Clicks'; -export const PRIMARY_HERO_EXTERNAL_LABEL = 'external-link'; -export const PRIMARY_HERO_IMPRESSION_ACTION = 'primary-hero-impression'; -export const PRIMARY_HERO_IMPRESSION_CATEGORY = 'AMO Primary Hero Impressions'; +export const PRIMARY_HERO_CLICK_CATEGORY = 'amo_primary_hero_clicks'; +export const PRIMARY_HERO_IMPRESSION_CATEGORY = 'amo_primary_hero_impressions'; export const PRIMARY_HERO_SRC = 'homepage-primary-hero'; type Props = {| @@ -92,30 +90,40 @@ export class HeroRecommendationBase extends React.Component { }; onHeroClick: () => void = () => { - const { _tracking, shelfData } = this.props; + const { _tracking, _getPromotedCategory, clientApp, shelfData } = + this.props; invariant(shelfData, 'The shelfData property is required'); const { addon } = shelfData; _tracking.sendEvent({ - action: PRIMARY_HERO_CLICK_ACTION, category: PRIMARY_HERO_CLICK_CATEGORY, - label: addon ? addon.guid : PRIMARY_HERO_EXTERNAL_LABEL, + params: addon + ? { + ...getAddonEventParams(addon, window.location.pathname), + trusted: !!_getPromotedCategory({ addon, clientApp }), + } + : { page_path: window.location.pathname }, }); }; onHeroImpression: () => void = () => { - const { _tracking, shelfData } = this.props; + const { _tracking, _getPromotedCategory, clientApp, shelfData } = + this.props; invariant(shelfData, 'The shelfData property is required'); const { addon } = shelfData; _tracking.sendEvent({ - action: PRIMARY_HERO_IMPRESSION_ACTION, category: PRIMARY_HERO_IMPRESSION_CATEGORY, - label: addon ? addon.guid : PRIMARY_HERO_EXTERNAL_LABEL, + params: addon + ? { + ...getAddonEventParams(addon, window.location.pathname), + trusted: !!_getPromotedCategory({ addon, clientApp }), + } + : { page_path: window.location.pathname }, }); }; diff --git a/src/amo/components/SecondaryHero/index.js b/src/amo/components/SecondaryHero/index.js index f4fb884317a..95e53ed518c 100644 --- a/src/amo/components/SecondaryHero/index.js +++ b/src/amo/components/SecondaryHero/index.js @@ -1,8 +1,9 @@ /* @flow */ +/* global window */ import * as React from 'react'; import Link from 'amo/components/Link'; -import { checkInternalURL, stripLangFromAmoUrl } from 'amo/utils'; +import { checkInternalURL } from 'amo/utils'; import tracking from 'amo/tracking'; import { DEFAULT_UTM_SOURCE, DEFAULT_UTM_MEDIUM } from 'amo/constants'; import { addQueryParams } from 'amo/utils/url'; @@ -11,12 +12,9 @@ import type { LinkWithTextType, SecondaryHeroShelfType, } from 'amo/reducers/home'; -import type { AnchorEvent } from 'amo/types/dom'; - import './styles.scss'; -export const SECONDARY_HERO_CLICK_ACTION = 'secondary-hero-click'; -export const SECONDARY_HERO_CLICK_CATEGORY = 'AMO Secondary Hero Clicks'; +export const SECONDARY_HERO_CLICK_CATEGORY = 'amo_secondary_hero_clicks'; export const SECONDARY_HERO_SRC = 'homepage-secondary-hero'; type Props = {| shelfData?: SecondaryHeroShelfType |}; @@ -24,7 +22,6 @@ type Props = {| shelfData?: SecondaryHeroShelfType |}; type InternalProps = {| ...Props, _checkInternalURL: typeof checkInternalURL, - _stripLangFromAmoUrl: typeof stripLangFromAmoUrl, _tracking: typeof tracking, |}; @@ -38,7 +35,6 @@ export const makeCallToActionURL = (urlString: string): string => { export const SecondaryHeroBase = ({ _checkInternalURL = checkInternalURL, - _stripLangFromAmoUrl = stripLangFromAmoUrl, _tracking = tracking, shelfData, }: InternalProps): null | React.Node => { @@ -50,11 +46,10 @@ export const SecondaryHeroBase = ({ const { headline, description, cta } = shelfData || {}; const modules = (shelfData && shelfData.modules) || Array(3).fill({}); - const onHeroClick = (event: AnchorEvent) => { + const onHeroClick = () => { _tracking.sendEvent({ - action: SECONDARY_HERO_CLICK_ACTION, category: SECONDARY_HERO_CLICK_CATEGORY, - label: _stripLangFromAmoUrl({ urlString: event.currentTarget.href }), + params: { page_path: window.location.pathname }, }); }; diff --git a/src/amo/components/ServerHtml/index.js b/src/amo/components/ServerHtml/index.js index 152a7b4a91c..3653f42c56a 100644 --- a/src/amo/components/ServerHtml/index.js +++ b/src/amo/components/ServerHtml/index.js @@ -97,16 +97,12 @@ export default class ServerHtml extends Component { getAnalytics() { const { _config } = this.props; if (this.props.trackingEnabled) { + const gtmContainerId = _config.get('gtmContainerId'); return ( - <> -