feat: Add UTM params to floating banner

src/utils/utmParams.js

@@ -0,0 +1,16 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * @param {{ linkUrl: string; utmParams: { [key: string]: string; }; }} options
+ * @returns {string} url
+ */
+export function appendUtmParams ({ linkUrl, utmParams }) {
+  const url = new URL(linkUrl)
+
+  for (const param in utmParams) {
+    url.searchParams.append(param, utmParams[param])
+  }
+  return url.href
+}

src/views/partials/floatingBanner.js

@@ -4,10 +4,11 @@
 
 import AppConstants from '../../appConstants.js'
 import { getMessage } from '../../utils/fluent.js'
+import { appendUtmParams } from '../../utils/utmParams.js'
 
 /**
  * @param {{ pathname: string; }} options
- * @returns { string } banner
+ * @returns {string} banner
  */
 export const getFloatingBanner = ({ pathname }) => {
   const pageHasFloatingBanner = AppConstants.FLOATING_BANNER_PAGES?.split(',').includes(pathname)
@@ -15,6 +16,15 @@ export const getFloatingBanner = ({ pathname }) => {
     return ''
   }
 
+  const linkHref = appendUtmParams({
+    linkUrl: AppConstants.FLOATING_BANNER_LINK,
+    utmParams: {
+      utm_source: 'fx-monitor',
+      utm_medium: 'mozilla-websites',
+      utm_content: `${AppConstants.FLOATING_BANNER_TYPE}_${pathname}`
+    }
+  })
+
   return `
     <link rel='stylesheet' href='/css/partials/floatingBanner.css' type='text/css'>
     <script src='/js/partials/floatingBanner.js' type='module'></script>
@@ -22,7 +32,7 @@ export const getFloatingBanner = ({ pathname }) => {
       <img class='floating-banner-image' src='/images/banner-icon.svg' alt='' />
       <p class='floating-banner-content'>${getMessage('floating-banner-text')}</p>
       <div class='floating-banner-buttons'>
-        <a href='${AppConstants.FLOATING_BANNER_LINK}' target='_blank' class='button primary'>${getMessage('floating-banner-link-label')}</a>
+        <a href='${linkHref}' target='_blank' class='button primary'>${getMessage('floating-banner-link-label')}</a>
         <button class='floating-banner-dismiss secondary'>${getMessage('floating-banner-dismiss-button-label')}</button>
       </div>
     </div>

tsconfig.json

@@ -16,7 +16,8 @@
     "src/utils/emailAddress.js",
     "src/utils/log.js",
     "src/utils/states.js",
-    "src/utils/parse.js"
+    "src/utils/parse.js",
+    "src/utils/utmParams.js"
     // Replace the above with the following when our entire codebase has type annotations:
     // "src/**/*",
   ],