tracking

Author: bunsenstraat

libs/remix-ui/desktop-download/README.md

@@ -19,11 +19,14 @@ import { DesktopDownload } from '@remix-ui/desktop-download'
 function MyComponent() {
   return (
     <div>
-      {/* Compact layout (default) */}
-      <DesktopDownload />
+      {/* Compact layout with tracking */}
+      <DesktopDownload trackingContext="navbar" />
 
       {/* Full layout */}
-      <DesktopDownload compact={false} />
+      <DesktopDownload compact={false} trackingContext="home" />
+      
+      {/* Span variant for dropdowns */}
+      <DesktopDownload variant="span" trackingContext="dropdown" />
     </div>
   )
 }
@@ -63,10 +66,29 @@ Perfect for dropdown items or anywhere you need a simple link without button sty
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes to apply to the component |
-| `compact` | `boolean` | `true` | Whether to use compact single-line layout or full multi-line layout |
-| `variant` | `'button' \| 'span'` | `'button'` | Whether to render as a button or as a simple span/link |
-| `style` | `React.CSSProperties` | `{}` | Inline styles to apply to the root component |
+| `className` | `string` | `''` | Additional CSS classes |
+| `compact` | `boolean` | `true` | Use compact layout |
+| `variant` | `'button' \| 'span'` | `'button'` | Display variant |
+| `style` | `CSSProperties` | `{}` | Inline styles |
+| `trackingContext` | `string` | `'unknown'` | Context for Matomo analytics (e.g., 'hometab', 'dropdown', 'navbar') |
+
+## Analytics Tracking
+
+The component includes automatic Matomo analytics tracking for all download interactions. Set the `trackingContext` prop to identify where the component is used:
+
+```tsx
+<DesktopDownload trackingContext="hometab" />
+```
+
+**Tracking Events:**
+- Category: `desktopDownload`
+- Action: `{context}-{variant}` (e.g., `hometab-compact`, `dropdown-span`)
+- Name: `{platform}-{filename}` or `releases-page` for fallbacks
+
+**Examples:**
+- `['trackEvent', 'desktopDownload', 'hometab-compact', 'linux-remix-desktop_1.1.0_amd64.deb']`
+- `['trackEvent', 'desktopDownload', 'dropdown-span', 'windows-remix-desktop-1.1.0-setup.exe']`
+- `['trackEvent', 'desktopDownload', 'navbar-full-fallback', 'releases-page']`
 
 ## Platform Support
 

libs/remix-ui/desktop-download/lib/desktop-download.tsx

@@ -3,11 +3,14 @@ import { CustomTooltip } from '@remix-ui/helper'
 import { FormattedMessage } from 'react-intl'
 import './desktop-download.css'
 
+const _paq = (window._paq = window._paq || []) // eslint-disable-line
+
 interface DesktopDownloadProps {
   className?: string
   compact?: boolean
-  variant?: 'button' | 'span'
+  variant?: 'button' | 'span' | 'auto'
   style?: React.CSSProperties
+  trackingContext?: string // Context for Matomo tracking (e.g., 'hometab', 'dropdown', 'navbar')
 }
 
 interface ReleaseAsset {
@@ -35,7 +38,13 @@ const GITHUB_API_URL = 'https://api.github.com/repos/remix-project-org/remix-des
 const CACHE_KEY = 'remix-desktop-release-cache'
 const CACHE_DURATION = 30 * 60 * 1000 // 30 minutes in milliseconds
 
-export const DesktopDownload: React.FC<DesktopDownloadProps> = ({ className = '', compact = true, variant = 'button', style = {} }) => {
+export const DesktopDownload: React.FC<DesktopDownloadProps> = ({ 
+  className = '', 
+  compact = true, 
+  variant = 'button', 
+  style = {},
+  trackingContext = 'unknown' 
+}) => {
   const [releaseData, setReleaseData] = useState<ReleaseData | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -181,6 +190,17 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({ className = ''
     }
   }
 
+  // Track download click events
+  const trackDownloadClick = (platform?: string, filename?: string, variant?: string) => {
+    const trackingData = [
+      'trackEvent', 
+      'desktopDownload', 
+      `${trackingContext}-${variant || 'button'}`, 
+      platform ? `${platform}-${filename}` : 'releases-page'
+    ]
+    _paq.push(trackingData)
+  }
+
   // Load release data on component mount
   useEffect(() => {
     const loadReleaseData = async () => {
@@ -277,6 +297,7 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({ className = ''
                 style={{ color: 'inherit' }}
                 onClick={(e) => {
                   e.stopPropagation()
+                  trackDownloadClick(detectedDownload.platform, detectedDownload.filename, 'span')
                   // Allow the default link behavior
                 }}
               >
@@ -337,6 +358,7 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({ className = ''
                   className="btn btn-sm btn-primary d-flex align-items-center gap-2"
                   target="_blank"
                   rel="noopener noreferrer"
+                  onClick={() => trackDownloadClick(detectedDownload.platform, detectedDownload.filename, 'compact')}
                 >
                   <i className="far fa-desktop"></i>
                   <span>
@@ -379,6 +401,7 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({ className = ''
                   className="btn btn-sm btn-primary d-flex align-items-center gap-2"
                   target="_blank"
                   rel="noopener noreferrer"
+                  onClick={() => trackDownloadClick(undefined, undefined, 'compact-fallback')}
                 >
                   <i className="far fa-desktop"></i>
                   <span>
@@ -433,6 +456,7 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({ className = ''
                   className="btn btn-primary d-flex align-items-center gap-2"
                   target="_blank"
                   rel="noopener noreferrer"
+                  onClick={() => trackDownloadClick(detectedDownload.platform, detectedDownload.filename, 'full')}
                 >
                   <i className={getPlatformIcon(detectedDownload.platform)}></i>
                   <span>
@@ -471,6 +495,7 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({ className = ''
                 className="btn btn-primary d-flex align-items-center gap-2"
                 target="_blank"
                 rel="noopener noreferrer"
+                onClick={() => trackDownloadClick(undefined, undefined, 'full-fallback')}
               >
                 <i className="fas fa-external-link-alt"></i>
                 <span>

libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx

@@ -116,7 +116,7 @@ function HomeTabTitle() {
           <a className="btn btn-secondary bg-dark text-decoration-none col-md-5" style={{ fontSize: '0.7rem', minWidth: '125px', color: isDark ? 'white' : 'black' }} href="https://remix-ide.readthedocs.io/en/latest" target="_blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'titleCard', 'documentation'])}><FormattedMessage id="home.documentation" /></a>
           <a className="btn btn-secondary bg-dark text-decoration-none col-md-5" style={{ fontSize: '0.7rem', minWidth: '125px', color: isDark ? 'white' : 'black' }} href="https://remix-project.org" target="_blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'titleCard', 'webSite'])}><FormattedMessage id="home.website" /></a>
         </div>
-        <DesktopDownload className='mt-3' compact />
+                <DesktopDownload className='mt-3' compact trackingContext="hometab" />
       </div>
     </div>
   )

libs/remix-ui/top-bar/src/components/WorkspaceDropdown.tsx

@@ -328,7 +328,7 @@ export const WorkspacesDropdown: React.FC<WorkspacesDropdownProps> = ({ menuItem
           </Dropdown.Item>
           <Dropdown.Divider className="border mb-0 mt-0 remixui_menuhr" style={{ pointerEvents: 'none' }} />
           <Dropdown.Item>
-            <DesktopDownload style={{ color: '#D678FF' }} variant="span" />
+            <DesktopDownload style={{ color: '#D678FF' }} variant="span" trackingContext="dropdown" />
           </Dropdown.Item>
           <Dropdown.Item onClick={() => {
             downloadWorkspaces()