diff --git a/.gitignore b/.gitignore index fe97056833b..8e188e9452d 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ .env.development.local .env.test.local .env.production.local +.prettierignore npm-debug.log* .vercel diff --git a/docusaurus.config.js b/docusaurus.config.js index 4c67292f8fb..fa044d5b8d5 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -264,7 +264,17 @@ const config = { [ '@docusaurus/plugin-google-tag-manager', { - containerId: 'GTM-5FGPLC2Q', + // TODO: change to GTM-5FGPLC2Q. Below is test container. + containerId: 'GTM-MTBMB3DL', + }, + ], + + [ + '@docusaurus/plugin-google-gtag', + { + // TODO: change to G-E8PSQ0E1L7. Below is test measurement ID. + trackingID: process.env.GA4_MEASUREMENT_ID || 'G-3R2ZC64RNY', + anonymizeIP: true, }, ], ], diff --git a/src/components/PageFeedback/index.tsx b/src/components/PageFeedback/index.tsx new file mode 100644 index 00000000000..ad4ca486d69 --- /dev/null +++ b/src/components/PageFeedback/index.tsx @@ -0,0 +1,160 @@ +import React, { useState, useEffect } from 'react' +import { trackFeedback } from '../../lib/feedbackAnalytics' +import styles from './styles.module.scss' + +export default function PageFeedback() { + const [feedbackGiven, setFeedbackGiven] = useState(false) + const [reason, setReason] = useState('') + const [otherReason, setOtherReason] = useState('') + const [submitted, setSubmitted] = useState(false) + + // Demo logging when component loads + useEffect(() => { + console.log('🚀 PageFeedback component loaded and ready for demo!') + console.log('📍 Current page:', window.location.pathname) + }, []) + + const handleFeedback = (positive: boolean) => { + console.log(`🎯 User clicked: ${positive ? 'Yes' : 'No'} (positive: ${positive})`) + setFeedbackGiven(true) + if (positive) { + trackFeedback({ + positive: true, + locale: navigator.language, + }) + setSubmitted(true) + } + } + + const handleReasonSubmit = (r: string) => { + console.log(`💭 User selected reason: "${r}"`) + + const data = { + positive: false, + reason: r, + ...(r === 'other' && otherReason.trim() && { custom_reason: otherReason.trim() }), + locale: navigator.language, + } + trackFeedback(data) + setSubmitted(true) + } + + const handleOtherReasonChange = (e: React.ChangeEvent) => { + setOtherReason(e.target.value.slice(0, 120)) + } + + if (submitted) { + return ( +
+
+
+

+ Thanks for your feedback! We appreciate your input. +

+
+
+
+ ) + } + + if (!feedbackGiven) { + return ( +
+
+
+

Was this page helpful?

+
+ + +
+
+
+
+ ) + } + + if (!reason) { + return ( +
+
+
+

What didn't work for you?

+
+
+
+ + + + +
+
+ ) + } + + if (reason === 'other') { + return ( +
+
+
+

Please tell us more:

+
+
+