UTM install time injection & GTM Data Layer push (#14130)

Author: amit-fytq

src/amo/components/AddonSuggestions/index.js

@@ -261,7 +261,6 @@ export class AddonSuggestionsBase extends React.Component<Props> {
           pathname: `/collections/${config.get('mozillaUserId')}/${
             category.collection
           }/`,
-          query: { addonInstallSource: INSTALL_SOURCE_SUGGESTIONS },
         }
       : null;
 

src/amo/components/HeroRecommendation/index.js

@@ -19,6 +19,7 @@ import {
 } from 'amo/constants';
 import translate from 'amo/i18n/translate';
 import log from 'amo/logger';
+import { setAddonInstallSource } from 'amo/reducers/addonInstallSource';
 import tracking, { getAddonEventParams } from 'amo/tracking';
 import { getPromotedCategory } from 'amo/utils/addons';
 import { addQueryParams } from 'amo/utils/url';
@@ -55,6 +56,7 @@ export type InternalProps = {|
   ...Props,
   ...PropsFromState,
   ...DefaultProps,
+  dispatch: (action: Object) => void,
   i18n: I18nType,
 |};
 
@@ -72,14 +74,14 @@ export class HeroRecommendationBase extends React.Component<InternalProps> {
     const { addon, external } = shelfData;
 
     if (addon) {
-      return addQueryParams(getAddonURL(addon.slug), {
-        utm_source: DEFAULT_UTM_SOURCE,
-        utm_medium: DEFAULT_UTM_MEDIUM,
-        utm_content: PRIMARY_HERO_SRC,
-      });
+      // Internal addon link: clean URL without UTM params. The install source
+      // is dispatched to Redux in onHeroClick() and injected into the page URL
+      // at install time. See utils/installAttribution.js.
+      return getAddonURL(addon.slug);
     }
 
     invariant(external, 'Either an addon or an external is required');
+    // External link: keep UTM params (these go to third-party sites).
     return external.homepage
       ? addQueryParams(external.homepage.url, {
           utm_source: DEFAULT_UTM_SOURCE,
@@ -90,13 +92,18 @@ export class HeroRecommendationBase extends React.Component<InternalProps> {
   };
 
   onHeroClick: () => void = () => {
-    const { _tracking, _getPromotedCategory, clientApp, shelfData } =
+    const { _tracking, _getPromotedCategory, clientApp, dispatch, shelfData } =
       this.props;
 
     invariant(shelfData, 'The shelfData property is required');
 
     const { addon } = shelfData;
 
+    // Store install source in Redux for install-time UTM injection.
+    if (addon) {
+      dispatch(setAddonInstallSource(PRIMARY_HERO_SRC));
+    }
+
     _tracking.sendEvent({
       category: PRIMARY_HERO_CLICK_CATEGORY,
       params: addon

src/amo/components/SearchResult/index.js

@@ -8,16 +8,12 @@ import { compose } from 'redux';
 import Link from 'amo/components/Link';
 import { getAddonURL, nl2br, sanitizeHTML } from 'amo/utils';
 import { getPromotedProps } from 'amo/utils/promoted';
-import {
-  ADDON_TYPE_STATIC_THEME,
-  DEFAULT_UTM_SOURCE,
-  DEFAULT_UTM_MEDIUM,
-} from 'amo/constants';
+import { ADDON_TYPE_STATIC_THEME } from 'amo/constants';
 import translate from 'amo/i18n/translate';
 import { getAddonIconUrl, getPreviewImage } from 'amo/imageUtils';
 import { isRecentAddon } from 'amo/reducers/addons';
+import { setAddonInstallSource } from 'amo/reducers/addonInstallSource';
 import { getPromotedCategory } from 'amo/utils/addons';
-import { addQueryParams } from 'amo/utils/url';
 import Icon from 'amo/components/Icon';
 import LoadingText from 'amo/components/LoadingText';
 import Rating from 'amo/components/Rating';
@@ -55,6 +51,7 @@ type InternalProps = {|
   ...Props,
   ...PropsFromState,
   _getPromotedCategory: typeof getPromotedCategory,
+  dispatch: (action: Object) => void,
   history: ReactRouterHistoryType,
   i18n: I18nType,
 |};
@@ -72,25 +69,19 @@ export class SearchResultBase extends React.Component<InternalProps> {
     useThemePlaceholder: false,
   };
 
-  getAddonLink(
-    addon: AddonType | CollectionAddonType,
-    addonInstallSource?: string,
-  ): string {
-    let linkTo = getAddonURL(addon.slug);
-
-    if (addonInstallSource) {
-      linkTo = addQueryParams(linkTo, {
-        utm_source: DEFAULT_UTM_SOURCE,
-        utm_medium: DEFAULT_UTM_MEDIUM,
-        utm_content: addonInstallSource,
-      });
-    }
-
-    return linkTo;
+  // Returns a clean addon URL without UTM params. The install source is
+  // dispatched to Redux on click (see onClickResult) and injected into the
+  // page URL at install time instead. See utils/installAttribution.js.
+  getAddonLink(addon: AddonType | CollectionAddonType): string {
+    return getAddonURL(addon.slug);
   }
 
   onClickAddon: HTMLElementEventHandler = (e: ElementEvent) => {
-    const { addon, onClick } = this.props;
+    const { addon, addonInstallSource, dispatch, onClick } = this.props;
+
+    if (addon && addonInstallSource) {
+      dispatch(setAddonInstallSource(addonInstallSource));
+    }
 
     e.stopPropagation();
     if (addon && onClick) {
@@ -129,7 +120,6 @@ export class SearchResultBase extends React.Component<InternalProps> {
   renderResult(): React.Node {
     const {
       addon,
-      addonInstallSource,
       i18n,
       onImpression,
       showFullSizePreview,
@@ -154,7 +144,7 @@ export class SearchResultBase extends React.Component<InternalProps> {
       addonTitle = (
         <Link
           className="SearchResult-link"
-          to={this.getAddonLink(addon, addonInstallSource)}
+          to={this.getAddonLink(addon)}
           onClick={this.onClickAddon}
         >
           {addon.name}
@@ -275,13 +265,25 @@ export class SearchResultBase extends React.Component<InternalProps> {
   }
 
   onClickResult: () => void = () => {
-    const { addon, addonInstallSource, clientApp, history, lang, onClick } =
-      this.props;
+    const {
+      addon,
+      addonInstallSource,
+      clientApp,
+      dispatch,
+      history,
+      lang,
+      onClick,
+    } = this.props;
 
     if (addon) {
-      history.push(
-        `/${lang}/${clientApp}${this.getAddonLink(addon, addonInstallSource)}`,
-      );
+      // Store the install source in Redux so it survives navigation to the
+      // addon detail page. It will be used at install time to inject UTM
+      // params into the URL for Firefox attribution.
+      if (addonInstallSource) {
+        dispatch(setAddonInstallSource(addonInstallSource));
+      }
+
+      history.push(`/${lang}/${clientApp}${this.getAddonLink(addon)}`);
 
       if (onClick) {
         onClick(addon);

src/amo/components/SecondaryHero/index.js

@@ -1,11 +1,14 @@
 /* @flow */
 /* global window */
 import * as React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
 
 import Link from 'amo/components/Link';
 import { checkInternalURL } from 'amo/utils';
 import tracking from 'amo/tracking';
 import { DEFAULT_UTM_SOURCE, DEFAULT_UTM_MEDIUM } from 'amo/constants';
+import { setAddonInstallSource } from 'amo/reducers/addonInstallSource';
 import { addQueryParams } from 'amo/utils/url';
 import LoadingText from 'amo/components/LoadingText';
 import type {
@@ -25,6 +28,7 @@ type InternalProps = {|
   ...Props,
   _checkInternalURL: typeof checkInternalURL,
   _tracking: typeof tracking,
+  dispatch: (action: Object) => void,
 |};
 
 export const makeCallToActionURL = (urlString: string): string => {
@@ -38,6 +42,7 @@ export const makeCallToActionURL = (urlString: string): string => {
 export const SecondaryHeroBase = ({
   _checkInternalURL = checkInternalURL,
   _tracking = tracking,
+  dispatch,
   shelfData,
 }: InternalProps): null | React.Node => {
   if (shelfData === null) {
@@ -65,15 +70,24 @@ export const SecondaryHeroBase = ({
     });
   };
 
+  // Store install source in Redux for install-time UTM injection.
+  const onInternalLinkClick = () => {
+    dispatch(setAddonInstallSource(SECONDARY_HERO_SRC));
+    onHeroClick();
+  };
+
   const getLinkProps = (link: LinkWithTextType | null) => {
-    const props = { onClick: onHeroClick };
     if (link) {
       const urlInfo = _checkInternalURL({ urlString: link.url });
       if (urlInfo.isInternal) {
-        return { ...props, to: makeCallToActionURL(urlInfo.relativeURL) };
+        // Internal link: clean URL without UTM params. Install source is
+        // dispatched to Redux on click and injected at install time.
+        // See utils/installAttribution.js.
+        return { onClick: onInternalLinkClick, to: urlInfo.relativeURL };
       }
+      // External link: keep UTM params (these go to third-party sites).
       return {
-        ...props,
+        onClick: onHeroClick,
         href: makeCallToActionURL(link.url),
         prependClientApp: false,
         prependLang: false,
@@ -155,4 +169,7 @@ export const SecondaryHeroBase = ({
   );
 };
 
-export default SecondaryHeroBase;
+const SecondaryHero: React.ComponentType<Props> =
+  compose(connect())(SecondaryHeroBase);
+
+export default SecondaryHero;

src/amo/constants.js

@@ -236,6 +236,11 @@ export const CLICK_CATEGORY = 'amo_addon_theme_clicks';
 
 export const SUGGESTIONS_CLICK_CATEGORY = 'amo_suggested_addon_clicks';
 
+export const SET_ADDON_INSTALL_SOURCE: 'SET_ADDON_INSTALL_SOURCE' =
+  'SET_ADDON_INSTALL_SOURCE';
+export const CLEAR_ADDON_INSTALL_SOURCE: 'CLEAR_ADDON_INSTALL_SOURCE' =
+  'CLEAR_ADDON_INSTALL_SOURCE';
+
 // Collection tracking event categories
 export const COLLECTION_CREATE_STARTED_CATEGORY =
   'amo_create_collection_started';

src/amo/installAddon.js

@@ -38,6 +38,10 @@ import * as addonManager from 'amo/addonManager';
 import { getVersionById } from 'amo/reducers/versions';
 import { getDisplayName } from 'amo/utils';
 import { getFileHash, getPromotedCategory } from 'amo/utils/addons';
+import {
+  injectUTMParams as defaultInjectUTMParams,
+  removeUTMParams as defaultRemoveUTMParams,
+} from 'amo/utils/installAttribution';
 import type { AppState } from 'amo/store';
 import type { AddonVersionType } from 'amo/reducers/versions';
 import type { AddonType } from 'amo/types/addons';
@@ -57,6 +61,7 @@ type EventType = {|
 |};
 
 type MakeProgressHandlerParams = {|
+  _removeUTMParams: typeof defaultRemoveUTMParams,
   _tracking: typeof tracking,
   addon: AddonType,
   dispatch: DispatchFunc,
@@ -65,6 +70,7 @@ type MakeProgressHandlerParams = {|
 |};
 
 export function makeProgressHandler({
+  _removeUTMParams,
   _tracking,
   addon,
   dispatch,
@@ -98,6 +104,7 @@ export function makeProgressHandler({
           params: getAddonEventParams(addon, window.location.pathname),
         });
       }
+      _removeUTMParams();
     } else if (event.type === 'onInstallCancelled') {
       dispatch({
         type: INSTALL_CANCELLED,
@@ -108,8 +115,10 @@ export function makeProgressHandler({
         category: getAddonEventCategory(type, INSTALL_CANCELLED_ACTION),
         params: getAddonEventParams(addon, window.location.pathname),
       });
+      _removeUTMParams();
     } else if (event.type === 'onInstallFailed') {
       dispatch(setInstallError({ guid, error: INSTALL_FAILED }));
+      _removeUTMParams();
     }
   };
 }
@@ -123,12 +132,15 @@ type WithInstallHelpersPropsFromState = {|
   WrappedComponent: React.ComponentType<any>,
   clientApp: string,
   currentVersion: AddonVersionType | null,
+  installSource: string | null,
 |};
 
 type WithInstallHelpersDefaultProps = {|
   _addonManager: typeof addonManager,
   _getPromotedCategory: typeof getPromotedCategory,
+  _injectUTMParams: typeof defaultInjectUTMParams,
   _log: typeof log,
+  _removeUTMParams: typeof defaultRemoveUTMParams,
   _tracking: typeof tracking,
 |};
 
@@ -158,7 +170,9 @@ export class WithInstallHelpers extends React.Component<WithInstallHelpersIntern
   static defaultProps: WithInstallHelpersDefaultProps = {
     _addonManager: addonManager,
     _getPromotedCategory: getPromotedCategory,
+    _injectUTMParams: defaultInjectUTMParams,
     _log: log,
+    _removeUTMParams: defaultRemoveUTMParams,
     _tracking: tracking,
   };
 
@@ -268,12 +282,15 @@ export class WithInstallHelpers extends React.Component<WithInstallHelpersIntern
     const {
       _addonManager,
       _getPromotedCategory,
+      _injectUTMParams,
       _log,
+      _removeUTMParams,
       _tracking,
       addon,
       clientApp,
       currentVersion,
       dispatch,
+      installSource,
     } = this.props;
 
     invariant(addon, 'need an addon to call install()');
@@ -287,6 +304,12 @@ export class WithInstallHelpers extends React.Component<WithInstallHelpersIntern
       return Promise.resolve();
     }
 
+    // Inject UTM params into the page URL so Firefox can read them at
+    // install time for attribution.
+    if (installSource) {
+      _injectUTMParams(installSource);
+    }
+
     return new Promise((resolve) => {
       dispatch({ type: START_DOWNLOAD, payload: { guid } });
       _tracking.sendEvent({
@@ -311,6 +334,7 @@ export class WithInstallHelpers extends React.Component<WithInstallHelpersIntern
         return _addonManager.install(
           installURL || '',
           makeProgressHandler({
+            _removeUTMParams,
             _tracking,
             addon,
             dispatch,
@@ -341,10 +365,16 @@ export class WithInstallHelpers extends React.Component<WithInstallHelpersIntern
             },
           });
         }
+
+        // Clean up UTM params injected before install. This is called on
+        // every exit path (success, failure, cancel) to ensure the URL is
+        // always restored. removeUTMParams() is idempotent.
+        _removeUTMParams();
       })
       .catch((error) => {
         _log.error(`Install error: ${error}`);
 
+        _removeUTMParams();
         dispatch(setInstallError({ guid, error: FATAL_INSTALL_ERROR }));
       });
   }
@@ -419,6 +449,7 @@ export const withInstallHelpers = (
       WrappedComponent,
       clientApp: state.api.clientApp,
       currentVersion,
+      installSource: state.addonInstallSource.installSource,
     };
   };