feat: track darkmode with Plausible

maxpou · Jun 4, 2024 · 6585928 · 6585928
1 parent ff78007
commit 6585928
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -48,7 +48,6 @@ const { title, description, translations = [], seo } = Astro.props
 
 <script
   is:inline
-  async
   defer
   data-domain="maxpou.fr"
   src="https://plausible.io/js/plausible.js"></script>
@@ -108,4 +107,6 @@ const { title, description, translations = [], seo } = Astro.props
     document.documentElement.classList.add('dark')
   }
   window.localStorage.setItem('theme', theme)
+  typeof plausible !== 'undefined'
+    && plausible('pageview', {props: {darkMode: theme !== 'light'}})
 </script>
diff --git a/src/components/DarkModeButton.tsx b/src/components/DarkModeButton.tsx
@@ -18,7 +18,11 @@ export default function ThemeToggle({
   )
 
   const handleClick = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light')
+    const newTheme = theme === 'light' ? 'dark' : 'light'
+    setTheme(newTheme)
+    // @ts-ignore
+    typeof plausible !== 'undefined' && // @ts-ignore
+      plausible('darkModeClick', { props: { theme: newTheme } })
   }
 
   useEffect(() => {