fixing GA on sandbox + benchmark

Author: miller-28

benchmark/browser/index.html

@@ -59,7 +59,7 @@ <h3>⏱️ Mean Execution Time</h3>
     </div>
 
     <footer>
-      <p>Powered by <a href="https://github.com/tinylibs/tinybench" target="_blank" onclick="gtag('event', 'click', {event_category: 'Navigation', event_label: 'Tinybench GitHub'});">Tinybench</a></p>
+      <p>Powered by <a href="https://github.com/tinylibs/tinybench" target="_blank" onclick="if(typeof gtag==='function'){gtag('event','link_click',{'link_category':'Navigation','link_name':'tinybench_github'});}">Tinybench</a></p>
     </footer>
   </div>
 

benchmark/browser/runner.js

@@ -33,9 +33,9 @@ class BrowserBenchmarkRunner {
 		document.getElementById('clearBtn').addEventListener('click', () => {
 			// Track clear action in Google Analytics
 			if (typeof gtag === 'function') {
-				gtag('event', 'click', {
-					event_category: 'Benchmark',
-					event_label: 'Clear Results'
+				gtag('event', 'clear_results', {
+					action_category: 'Benchmark',
+					action_name: 'clear_results'
 				});
 			}
 			this.clearResults();
@@ -44,8 +44,8 @@ class BrowserBenchmarkRunner {
 			// Track category selection in Google Analytics
 			if (typeof gtag === 'function') {
 				gtag('event', 'select_content', {
-					event_category: 'Benchmark',
-					event_label: `Category: ${e.target.value}`
+					content_type: 'benchmark_category',
+					category_name: e.target.value
 				});
 			}
 			if (e.target.value !== 'all') {
@@ -66,8 +66,8 @@ class BrowserBenchmarkRunner {
 		// Track benchmark run in Google Analytics
 		if (typeof gtag === 'function') {
 			gtag('event', 'run_benchmark', {
-				event_category: 'Benchmark',
-				event_label: category === 'all' ? 'All Categories' : category
+				benchmark_category: 'Benchmark',
+				benchmark_name: category === 'all' ? 'all_categories' : category
 			});
 		}
 

sandbox/index.html

@@ -63,16 +63,16 @@ <h2>💡 Philosophy</h2>
 		</div>
 
 		<div class="links">
-			<a href="https://www.npmjs.com/package/luminara" target="_blank" rel="noopener noreferrer" class="link-btn" onclick="gtag('event', 'click', {event_category: 'Navigation', event_label: 'npm Package'});">
+			<a href="https://www.npmjs.com/package/luminara" target="_blank" rel="noopener noreferrer" class="link-btn" onclick="if(typeof gtag==='function'){gtag('event','link_click',{'link_category':'Navigation','link_name':'npm_package'});}">
 				📦 npm Package
 			</a>
-			<a href="https://github.com/miller-28/luminara" target="_blank" rel="noopener noreferrer" class="link-btn" onclick="gtag('event', 'click', {event_category: 'Navigation', event_label: 'GitHub Repository'});">
+			<a href="https://github.com/miller-28/luminara" target="_blank" rel="noopener noreferrer" class="link-btn" onclick="if(typeof gtag==='function'){gtag('event','link_click',{'link_category':'Navigation','link_name':'github_repository'});}">
 				🐙 GitHub Repository
 			</a>
-			<a href="https://github.com/miller-28/luminara/blob/master/docs/features/README.md" target="_blank" rel="noopener noreferrer" class="link-btn" onclick="gtag('event', 'click', {event_category: 'Navigation', event_label: 'Documentation'});">
+			<a href="https://github.com/miller-28/luminara/blob/master/docs/features/README.md" target="_blank" rel="noopener noreferrer" class="link-btn" onclick="if(typeof gtag==='function'){gtag('event','link_click',{'link_category':'Navigation','link_name':'documentation'});}">
 				📖 Documentation
 			</a>
-			<a href="./benchmark/" target="_blank" rel="noopener noreferrer" class="link-btn" onclick="gtag('event', 'click', {event_category: 'Navigation', event_label: 'Performance Benchmarks'});">
+			<a href="./benchmark/" target="_blank" rel="noopener noreferrer" class="link-btn" onclick="if(typeof gtag==='function'){gtag('event','link_click',{'link_category':'Navigation','link_name':'performance_benchmarks'});}">
 				⚡ Performance Benchmarks
 			</a>
 		</div>

sandbox/main.js

@@ -229,8 +229,8 @@ class SandboxUI {
 				entries.forEach(entry => {
 					if (entry.isIntersecting && !hasTrackedFeaturesView && typeof gtag === 'function') {
 						gtag('event', 'view_section', {
-							event_category: 'Engagement',
-							event_label: 'Features List'
+							section_category: 'Engagement',
+							section_name: 'features_list'
 						});
 						hasTrackedFeaturesView = true;
 						featuresObserver.disconnect(); // Only track once
@@ -434,8 +434,8 @@ class SandboxUI {
 		// Track example run in Google Analytics
 		if (typeof gtag === 'function') {
 			gtag('event', 'run_example', {
-				event_category: 'Examples',
-				event_label: example.title
+				example_category: 'Examples',
+				example_name: example.title.replace(/[^a-zA-Z0-9]/g, '_').toLowerCase()
 			});
 		}
 
@@ -470,8 +470,8 @@ class SandboxUI {
 		const feature = examples[featureKey];
 		if (feature && typeof gtag === 'function') {
 			gtag('event', 'run_feature_group', {
-				event_category: 'Examples',
-				event_label: feature.title
+				feature_category: 'Examples',
+				feature_name: feature.title.replace(/[^a-zA-Z0-9]/g, '_').toLowerCase()
 			});
 		}
 
@@ -577,8 +577,8 @@ class FooterScrollTracker {
 				entries.forEach(entry => {
 					if (entry.isIntersecting && !hasTrackedFooter && typeof gtag === 'function') {
 						gtag('event', 'scroll_to_section', {
-							event_category: 'Engagement',
-							event_label: 'Footer'
+							section_category: 'Engagement',
+							section_name: 'footer'
 						});
 						hasTrackedFooter = true;
 						footerObserver.disconnect(); // Only track once