From a685ab3b1aa52075aac082b90dd912b0188bb358 Mon Sep 17 00:00:00 2001 From: Brian Doyle Date: Thu, 25 Sep 2025 17:46:04 -0400 Subject: [PATCH 1/9] Add events for navbar only on homepage --- docusaurus.config.js | 36 +++++++++++++++++++ .../lib/Pages/HomePage/BrowseByCategory.tsx | 12 +++++++ 2 files changed, 48 insertions(+) diff --git a/docusaurus.config.js b/docusaurus.config.js index 723858e41d..42de36247c 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -272,24 +272,60 @@ const config = { position: 'left', label: 'Build', activeBasePath: '/build', + onClick: () => { + if (typeof window !== 'undefined' && window['gtag']) { + window['gtag']('event', 'action_card_click', { + event_category: 'action_card', + event_label: 'Nav - Build', + location: true, + }); + } + }, }, { to: 'blockchain-development-tutorials', position: 'left', label: 'Tutorials', activeBasePath: '/blockchain-development-tutorials', + onClick: () => { + if (typeof window !== 'undefined' && window['gtag']) { + window['gtag']('event', 'action_card_click', { + event_category: 'action_card', + event_label: 'Nav - Tutorials', + location: true, + }); + } + }, }, { to: 'protocol/flow-networks', position: 'left', label: 'Protocol', activeBasePath: '/protocol', + onClick: () => { + if (typeof window !== 'undefined' && window['gtag']) { + window['gtag']('event', 'action_card_click', { + event_category: 'action_card', + event_label: 'Nav - Protocol', + location: true, + }); + } + }, }, { to: 'ecosystem', position: 'left', label: 'Ecosystem', activeBasePath: '/ecosystem', + onClick: () => { + if (typeof window !== 'undefined' && window['gtag']) { + window['gtag']('event', 'action_card_click', { + event_category: 'action_card', + event_label: 'Nav - Ecosystem', + location: true, + }); + } + }, }, { type: 'custom-connectButton', diff --git a/src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx b/src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx index aa1fbc5e07..f1b087b87c 100644 --- a/src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx +++ b/src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx @@ -1,4 +1,6 @@ import React from 'react'; +import { event } from '@site/src/utils/gtags.client'; +import { GA_EVENTS, GA_CATEGORIES } from '@site/src/constants/ga-events'; const CATEGORIES = [ { @@ -92,6 +94,15 @@ const CATEGORIES = [ ]; const BrowseByCategory: React.FC = () => { + const handleLinkClick = (label: string, href: string, category: string) => { + event({ + action: GA_EVENTS.ACTION_CARD_CLICK, + category: GA_CATEGORIES.ACTION_CARD, + label: `${category} - ${label}`, + location: true, + }); + }; + return (

Browse by Category

@@ -106,6 +117,7 @@ const BrowseByCategory: React.FC = () => { href={link.href} target={link.href.startsWith('http') ? '_blank' : undefined} rel={link.href.startsWith('http') ? 'noopener noreferrer' : undefined} + onClick={() => handleLinkClick(link.label, link.href, cat.title)} className="text-base text-gray-800 dark:text-gray-100 hover:text-primary-green-500 dark:hover:text-primary-green-300 transition-colors" > {link.label} From c7da2dd599cccf934e1785e53be081b2436e3efc Mon Sep 17 00:00:00 2001 From: Brian Doyle Date: Thu, 25 Sep 2025 18:00:31 -0400 Subject: [PATCH 2/9] Cleanup errors in docusaurus config --- docusaurus.config.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 42de36247c..6309d0b22a 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -132,7 +132,7 @@ const editUrl = ({ docPath }) => { }; } return acc; - }, null); + }, /** @type {Repository & SourceDestination | null} */ (null)); if (!sourceRepository) { return `https://github.com/onflow/docs/tree/main/docs/${docPath}`; } @@ -273,9 +273,9 @@ const config = { label: 'Build', activeBasePath: '/build', onClick: () => { - if (typeof window !== 'undefined' && window['gtag']) { + if (typeof window !== 'undefined' && window['gtag'] && window.location.pathname === '/') { window['gtag']('event', 'action_card_click', { - event_category: 'action_card', + event_category: 'nav_bar', event_label: 'Nav - Build', location: true, }); @@ -288,9 +288,9 @@ const config = { label: 'Tutorials', activeBasePath: '/blockchain-development-tutorials', onClick: () => { - if (typeof window !== 'undefined' && window['gtag']) { + if (typeof window !== 'undefined' && window['gtag'] && window.location.pathname === '/') { window['gtag']('event', 'action_card_click', { - event_category: 'action_card', + event_category: 'nav_bar', event_label: 'Nav - Tutorials', location: true, }); @@ -303,9 +303,9 @@ const config = { label: 'Protocol', activeBasePath: '/protocol', onClick: () => { - if (typeof window !== 'undefined' && window['gtag']) { + if (typeof window !== 'undefined' && window['gtag'] && window.location.pathname === '/') { window['gtag']('event', 'action_card_click', { - event_category: 'action_card', + event_category: 'nav_bar', event_label: 'Nav - Protocol', location: true, }); @@ -318,9 +318,9 @@ const config = { label: 'Ecosystem', activeBasePath: '/ecosystem', onClick: () => { - if (typeof window !== 'undefined' && window['gtag']) { + if (typeof window !== 'undefined' && window['gtag'] && window.location.pathname === '/') { window['gtag']('event', 'action_card_click', { - event_category: 'action_card', + event_category: 'nav_bar', event_label: 'Nav - Ecosystem', location: true, }); @@ -541,17 +541,18 @@ const config = { name: 'docusaurus-svgo', configureWebpack(config) { // allow svgr to use svgo config file - for (const rule of config.module.rules) { + for (const rule of config.module?.rules || []) { if ( + rule && typeof rule === 'object' && - rule.test.toString() === '/\\.svg$/i' + rule.test?.toString() === '/\\.svg$/i' ) { - for (const nestedRule of rule.oneOf) { - if (nestedRule.use instanceof Array) { + for (const nestedRule of rule.oneOf || []) { + if (nestedRule && typeof nestedRule === 'object' && nestedRule.use instanceof Array) { for (const loader of nestedRule.use) { if ( typeof loader === 'object' && - loader.loader === require.resolve('@svgr/webpack') + loader?.loader === require.resolve('@svgr/webpack') ) { if (typeof loader.options === 'object') { loader.options.svgoConfig = null; @@ -567,7 +568,7 @@ const config = { 'module.rules': 'replace', }, module: { - rules: config.module.rules, + rules: config.module?.rules || [], }, }; }, @@ -585,8 +586,7 @@ const config = { }; }, /** this function needs doesn't pick up hot reload event, it needs a restart */ - // @ts-expect-error - function (context, options) { + function (context) { const { siteConfig } = context; return { name: 'docusaurus-flow-networks-plugin', From a566248d59e36389828aa3c4fcd2e2bbf7aa2e34 Mon Sep 17 00:00:00 2001 From: Brian Doyle Date: Fri, 26 Sep 2025 13:48:36 -0400 Subject: [PATCH 3/9] Add tracking to navbar items --- docusaurus.config.js | 39 +---------- src/components/ConnectButton.tsx | 20 +++++- src/constants/ga-events.ts | 4 ++ src/theme/NavbarItem/ComponentTypes.js | 91 +++++++++++++++++++++++++- src/theme/SearchBar.js | 19 +++++- 5 files changed, 134 insertions(+), 39 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 6309d0b22a..e30627b8e4 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -272,76 +272,43 @@ const config = { position: 'left', label: 'Build', activeBasePath: '/build', - onClick: () => { - if (typeof window !== 'undefined' && window['gtag'] && window.location.pathname === '/') { - window['gtag']('event', 'action_card_click', { - event_category: 'nav_bar', - event_label: 'Nav - Build', - location: true, - }); - } - }, }, { to: 'blockchain-development-tutorials', position: 'left', label: 'Tutorials', activeBasePath: '/blockchain-development-tutorials', - onClick: () => { - if (typeof window !== 'undefined' && window['gtag'] && window.location.pathname === '/') { - window['gtag']('event', 'action_card_click', { - event_category: 'nav_bar', - event_label: 'Nav - Tutorials', - location: true, - }); - } - }, }, { to: 'protocol/flow-networks', position: 'left', label: 'Protocol', activeBasePath: '/protocol', - onClick: () => { - if (typeof window !== 'undefined' && window['gtag'] && window.location.pathname === '/') { - window['gtag']('event', 'action_card_click', { - event_category: 'nav_bar', - event_label: 'Nav - Protocol', - location: true, - }); - } - }, }, { to: 'ecosystem', position: 'left', label: 'Ecosystem', activeBasePath: '/ecosystem', - onClick: () => { - if (typeof window !== 'undefined' && window['gtag'] && window.location.pathname === '/') { - window['gtag']('event', 'action_card_click', { - event_category: 'nav_bar', - event_label: 'Nav - Ecosystem', - location: true, - }); - } - }, }, { type: 'custom-connectButton', position: 'right', + label: 'Connect', }, { href: 'https://github.com/onflow', html: 'GitHubGithub', position: 'right', className: 'h-8 desktop:p-1', + label: 'GitHub', }, { href: 'https://discord.gg/flow', html: 'DiscordDiscord', position: 'right', className: 'h-8 desktop:p-1', + label: 'Discord', }, ], }, diff --git a/src/components/ConnectButton.tsx b/src/components/ConnectButton.tsx index 2f11e61476..fe96d0e997 100644 --- a/src/components/ConnectButton.tsx +++ b/src/components/ConnectButton.tsx @@ -10,6 +10,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useProfile } from '../hooks/use-profile'; import { useGithubAvatar } from '../hooks/use-github-avatar'; import { SocialType } from '../types/gold-star'; +import { event } from '@site/src/utils/gtags.client'; +import { GA_EVENTS, GA_CATEGORIES } from '@site/src/constants/ga-events'; const shortenAddress = (address: string) => { if (!address) return ''; @@ -40,9 +42,25 @@ const ConnectButton: React.FC = () => { setIsProfileModalOpen(false); }; + const handleSignInClick = () => { + // Check if we're on the homepage + const isHomepage = typeof window !== 'undefined' && window.location.pathname === '/'; + + // Track the Sign In click + event({ + action: isHomepage ? GA_EVENTS.ACTION_CARD_CLICK : GA_EVENTS.NAV_BAR_CLICK, + category: isHomepage ? GA_CATEGORIES.NAV_BAR : GA_CATEGORIES.NAV_BAR, + label: 'Nav-Sign In', + location: true, + }); + + // Call the original logIn function + logIn(); + }; + if (!user.loggedIn) { return ( - ); diff --git a/src/constants/ga-events.ts b/src/constants/ga-events.ts index 3558990471..385823e464 100644 --- a/src/constants/ga-events.ts +++ b/src/constants/ga-events.ts @@ -2,6 +2,8 @@ export const GA_EVENTS = { // Existing events currently used in the codebase ACTION_CARD_CLICK: 'action_card_click', + NAV_BAR_CLICK: 'nav_bar_click', + SEARCH_CLICK: 'search_click', FEEDBACK_CLICK: 'feedback_click', AUTH_LOGIN: 'login', } as const; @@ -9,6 +11,8 @@ export const GA_EVENTS = { // Event categories for consistent tracking - Using existing categories export const GA_CATEGORIES = { ACTION_CARD: 'action_card', + NAV_BAR: 'nav_bar', + SEARCH: 'search', FEEDBACK: 'feedback', AUTH: 'auth', } as const; diff --git a/src/theme/NavbarItem/ComponentTypes.js b/src/theme/NavbarItem/ComponentTypes.js index f3e72147b7..758c9b9a7c 100644 --- a/src/theme/NavbarItem/ComponentTypes.js +++ b/src/theme/NavbarItem/ComponentTypes.js @@ -1,7 +1,96 @@ +import React from 'react'; import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes'; import ConnectButton from '@site/src/components/ConnectButton'; +import { event } from '@site/src/utils/gtags.client'; +import { GA_EVENTS, GA_CATEGORIES, GA_ACTIONS } from '@site/src/constants/ga-events'; + +// Wrapper component that adds tracking to navbar items +const withTracking = (Component) => { + return (props) => { + const handleClick = (e) => { + // Extract meaningful label from props + const label = props.label || 'unknown-navbar-item'; + + // Check if we're on the homepage + const isHomepage = typeof window !== 'undefined' && window.location.pathname === '/'; + + // Track the navbar item click with appropriate event based on page + event({ + action: isHomepage ? GA_EVENTS.ACTION_CARD_CLICK : GA_EVENTS.NAV_BAR_CLICK, + category: isHomepage ? GA_CATEGORIES.ACTION_CARD : GA_CATEGORIES.NAV_BAR, + label: label, + location: true, + }); + + // Call original onClick if it exists + if (props.onClick) { + props.onClick(e); + } + }; + + return ; + }; +}; + +// Create tracked versions of all component types +const trackedComponentTypes = {}; +Object.keys(ComponentTypes).forEach(key => { + trackedComponentTypes[key] = withTracking(ComponentTypes[key]); +}); + +// Add specific wrapper for html type navbar items +const withHtmlTracking = (Component) => { + return (props) => { + const handleClick = (e) => { + // Debug: log all available props + console.log('Html NavbarItem props:', props); + + // Try to get the label from various sources + let label = props.label || props.item?.label; + + // If no label in props, try to extract from HTML span + if (!label && props.html) { + const spanMatch = props.html.match(/]*>([^<]+)<\/span>/); + if (spanMatch) { + label = spanMatch[1].trim(); + } + } + + // Final fallback + if (!label) { + label = 'unknown-html-item'; + } + + // Add Nav- prefix to match existing pattern + const prefixedLabel = `Nav-${label}`; + alert(`Html NavbarItem clicked: ${prefixedLabel}`); + + // Check if we're on the homepage + const isHomepage = typeof window !== 'undefined' && window.location.pathname === '/'; + + // Track the navbar item click with appropriate event based on page + event({ + action: isHomepage ? GA_EVENTS.ACTION_CARD_CLICK : GA_EVENTS.NAV_BAR_CLICK, + category: isHomepage ? GA_CATEGORIES.NAV_BAR : GA_CATEGORIES.NAV_BAR, + label: prefixedLabel, + location: true, + }); + + // Call original onClick if it exists + if (props.onClick) { + props.onClick(e); + } + }; + + return ; + }; +}; export default { - ...ComponentTypes, + ...trackedComponentTypes, 'custom-connectButton': ConnectButton, + // Add html type if it exists + ...(ComponentTypes.html ? { html: withHtmlTracking(ComponentTypes.html) } : {}), + // Add default type if it exists (for href items) + ...(ComponentTypes.default ? { default: withHtmlTracking(ComponentTypes.default) } : {}), }; \ No newline at end of file diff --git a/src/theme/SearchBar.js b/src/theme/SearchBar.js index cd0a7ee0b3..b820e2654d 100644 --- a/src/theme/SearchBar.js +++ b/src/theme/SearchBar.js @@ -2,13 +2,30 @@ import React from 'react'; import SearchBar from '@theme-original/SearchBar'; import AskCookbook from '@cookbookdev/docsbot/react'; import BrowserOnly from '@docusaurus/BrowserOnly'; +import { event } from '@site/src/utils/gtags.client'; +import { GA_EVENTS, GA_CATEGORIES } from '@site/src/constants/ga-events'; /** It's a public API key, so it's safe to expose it here */ const COOKBOOK_PUBLIC_API_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2NzEyYWRkYjk5YjBmNWViM2ZkODQxOGMiLCJpYXQiOjE3MjkyNzc0MDMsImV4cCI6MjA0NDg1MzQwM30._bhlmAnFpvxvkTV0PvU-6FwabhFOdSOx-qed2UIogpY'; export default function SearchBarWrapper(props) { + const handleSearchClick = () => { + // Check if we're on the homepage + const isHomepage = typeof window !== 'undefined' && window.location.pathname === '/'; + + // Track the search bar click + event({ + action: isHomepage ? GA_EVENTS.ACTION_CARD_CLICK : GA_EVENTS.SEARCH_CLICK, + category: isHomepage ? GA_CATEGORIES.ACTION_CARD : GA_CATEGORIES.SEARCH, + label: 'Nav-Search', + location: true, + }); + }; + return ( <> - +
+ +
{() => } From 2498c541f741256f07c9f0f1e06a076fa7e8e47f Mon Sep 17 00:00:00 2001 From: Brian Doyle Date: Fri, 26 Sep 2025 13:51:20 -0400 Subject: [PATCH 4/9] Update src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx b/src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx index f1b087b87c..e437dc1e38 100644 --- a/src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx +++ b/src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx @@ -100,6 +100,7 @@ const BrowseByCategory: React.FC = () => { category: GA_CATEGORIES.ACTION_CARD, label: `${category} - ${label}`, location: true, + href: href, }); }; From ae94818883dd72c08cac43d66d9ce5f0e848035e Mon Sep 17 00:00:00 2001 From: Brian Doyle Date: Fri, 26 Sep 2025 13:51:49 -0400 Subject: [PATCH 5/9] Update src/theme/NavbarItem/ComponentTypes.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/theme/NavbarItem/ComponentTypes.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/theme/NavbarItem/ComponentTypes.js b/src/theme/NavbarItem/ComponentTypes.js index 758c9b9a7c..89810cc410 100644 --- a/src/theme/NavbarItem/ComponentTypes.js +++ b/src/theme/NavbarItem/ComponentTypes.js @@ -63,7 +63,6 @@ const withHtmlTracking = (Component) => { // Add Nav- prefix to match existing pattern const prefixedLabel = `Nav-${label}`; - alert(`Html NavbarItem clicked: ${prefixedLabel}`); // Check if we're on the homepage const isHomepage = typeof window !== 'undefined' && window.location.pathname === '/'; From 85804869d7e1182235e9d00dab8f9caece84283e Mon Sep 17 00:00:00 2001 From: Brian Doyle Date: Fri, 26 Sep 2025 13:52:10 -0400 Subject: [PATCH 6/9] Update src/theme/NavbarItem/ComponentTypes.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/theme/NavbarItem/ComponentTypes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/NavbarItem/ComponentTypes.js b/src/theme/NavbarItem/ComponentTypes.js index 89810cc410..6685b2b5e4 100644 --- a/src/theme/NavbarItem/ComponentTypes.js +++ b/src/theme/NavbarItem/ComponentTypes.js @@ -70,7 +70,7 @@ const withHtmlTracking = (Component) => { // Track the navbar item click with appropriate event based on page event({ action: isHomepage ? GA_EVENTS.ACTION_CARD_CLICK : GA_EVENTS.NAV_BAR_CLICK, - category: isHomepage ? GA_CATEGORIES.NAV_BAR : GA_CATEGORIES.NAV_BAR, + category: isHomepage ? GA_CATEGORIES.ACTION_CARD : GA_CATEGORIES.NAV_BAR, label: prefixedLabel, location: true, }); From 23f321ce901719c5f9e57bf81ec2c6b26d206f0f Mon Sep 17 00:00:00 2001 From: Brian Doyle Date: Fri, 26 Sep 2025 13:52:25 -0400 Subject: [PATCH 7/9] Update src/components/ConnectButton.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/components/ConnectButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ConnectButton.tsx b/src/components/ConnectButton.tsx index fe96d0e997..a65abd7d51 100644 --- a/src/components/ConnectButton.tsx +++ b/src/components/ConnectButton.tsx @@ -49,7 +49,7 @@ const ConnectButton: React.FC = () => { // Track the Sign In click event({ action: isHomepage ? GA_EVENTS.ACTION_CARD_CLICK : GA_EVENTS.NAV_BAR_CLICK, - category: isHomepage ? GA_CATEGORIES.NAV_BAR : GA_CATEGORIES.NAV_BAR, + category: isHomepage ? GA_CATEGORIES.ACTION_CARD : GA_CATEGORIES.NAV_BAR, label: 'Nav-Sign In', location: true, }); From 1ec7a709b0ff691e364c5dd1db9fdfa8d810775b Mon Sep 17 00:00:00 2001 From: Brian Doyle Date: Fri, 26 Sep 2025 13:52:32 -0400 Subject: [PATCH 8/9] Update src/theme/NavbarItem/ComponentTypes.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/theme/NavbarItem/ComponentTypes.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/theme/NavbarItem/ComponentTypes.js b/src/theme/NavbarItem/ComponentTypes.js index 6685b2b5e4..3adfc55cb0 100644 --- a/src/theme/NavbarItem/ComponentTypes.js +++ b/src/theme/NavbarItem/ComponentTypes.js @@ -43,7 +43,6 @@ const withHtmlTracking = (Component) => { return (props) => { const handleClick = (e) => { // Debug: log all available props - console.log('Html NavbarItem props:', props); // Try to get the label from various sources let label = props.label || props.item?.label; From 04de7536384cefc8aafc05777472cbb592c489a6 Mon Sep 17 00:00:00 2001 From: Brian Doyle Date: Fri, 26 Sep 2025 14:04:57 -0400 Subject: [PATCH 9/9] Remove labels from html navbar items --- docusaurus.config.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index e30627b8e4..1926343f95 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -301,14 +301,12 @@ const config = { html: 'GitHubGithub', position: 'right', className: 'h-8 desktop:p-1', - label: 'GitHub', }, { href: 'https://discord.gg/flow', html: 'DiscordDiscord', position: 'right', className: 'h-8 desktop:p-1', - label: 'Discord', }, ], },