feat: track announcement bar clicks with their source and page

src/components/AnnouncementBar/AnnouncementBar.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
+import { useLocation } from 'react-router-dom'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { t, T } from 'decentraland-dapps/dist/modules/translation/utils'
 import { config } from 'config/index'
@@ -10,19 +11,32 @@ import styles from './AnnouncementBar.module.css'
 // Shared with the marketplace on purpose: both run on the same origin in
 // production, so dismissing the bar in one of them dismisses it everywhere.
 const ANNOUNCEMENT_BAR_KEY = 'shop-announcement-bar'
+const ANNOUNCEMENT_BAR_SOURCE = 'builder'
 
 export const isAnnouncementBarDismissed = () => localStorage.getItem(ANNOUNCEMENT_BAR_KEY) !== null
 
 const AnnouncementBar = ({ onDismiss }: Props) => {
+  const { pathname } = useLocation()
+
+  // The campaign params let the shop attribute what these visitors do after they
+  // land, which the click event alone cannot tell us.
+  const shopUrl = useMemo(() => {
+    const url = new URL(config.get('SHOP_URL'))
+    url.searchParams.set('utm_source', ANNOUNCEMENT_BAR_SOURCE)
+    url.searchParams.set('utm_medium', 'announcement_bar')
+    url.searchParams.set('utm_campaign', 'shop_launch')
+    return url.toString()
+  }, [])
+
   const handleDismiss = useCallback(() => {
     localStorage.setItem(ANNOUNCEMENT_BAR_KEY, '1')
-    getAnalytics()?.track('Dismiss Shop Announcement Bar')
+    getAnalytics()?.track('Dismiss Shop Announcement Bar', { source: ANNOUNCEMENT_BAR_SOURCE, path: pathname })
     onDismiss()
-  }, [onDismiss])
+  }, [onDismiss, pathname])
 
   const handleClick = useCallback(() => {
-    getAnalytics()?.track('Click Shop Announcement Bar')
-  }, [])
+    getAnalytics()?.track('Click Shop Announcement Bar', { source: ANNOUNCEMENT_BAR_SOURCE, path: pathname })
+  }, [pathname])
 
   return (
     <aside className={styles.bar}>
@@ -32,7 +46,7 @@ const AnnouncementBar = ({ onDismiss }: Props) => {
           values={{ highlight: <span className={styles.highlight}>{t('announcement_bar.highlight')}</span> }}
         />
       </p>
-      <a className={styles.cta} href={config.get('SHOP_URL')} target="_blank" rel="noopener noreferrer" onClick={handleClick}>
+      <a className={styles.cta} href={shopUrl} target="_blank" rel="noopener noreferrer" onClick={handleClick}>
         <span className={styles.ctaLabel}>{t('announcement_bar.cta')}</span>
         <span className={styles.ctaIcon}>
           <img src={ArrowIcon} alt="" />