Merge pull request #157 from MilesHan/main

add Microsoft Clarity Analytics

README.md

@@ -87,6 +87,9 @@ const analytics: AnalyticsConfig = {
     googleAnalytics: {
       googleAnalyticsId: '', // e.g. G-XXXXXXX
     },
+    clarityAnalytics: {
+      ClarityWebsiteId: '', // e.g. abcdefjhij
+    },
   }
 
 export default function Layout() {
@@ -114,6 +117,21 @@ export default function Layout() {
 }
 ```
 
+#### Microsoft Clarity Analytics
+
+```tsx
+import { GA } from 'pliny/analytics/MicrosoftClarity'
+
+const ClarityWebsiteId = '' // e.g. abcdefjhij
+
+export default function Layout() {
+  return (
+    ...
+    <Clarity ClarityWebsiteId={ClarityWebsiteId} />
+  )
+}
+```
+
 #### Plausible Analytics
 
 ```tsx

packages/pliny/src/analytics/MicrosoftClarity.tsx

@@ -0,0 +1,23 @@
+import Script from 'next/script.js'
+
+export interface ClarityProps {
+  ClarityWebsiteId: string
+}
+
+// https://clarity.microsoft.com/
+// https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-setup
+export const Clarity = ({ ClarityWebsiteId }: ClarityProps) => {
+  return (
+    <>
+      <Script id="microsoft-clarity-init" strategy="afterInteractive">
+          {`
+          (function(c,l,a,r,i,t,y){
+                c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+                y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+            })(window, document, "clarity", "script", "${ClarityWebsiteId}");
+          `}
+      </Script>
+    </>
+  )
+}

packages/pliny/src/analytics/index.tsx

@@ -4,6 +4,7 @@ import { Plausible, PlausibleProps } from './Plausible'
 import { SimpleAnalytics, SimpleAnalyticsProps } from './SimpleAnalytics.js'
 import { Umami, UmamiProps } from './Umami'
 import { Posthog, PosthogProps } from './Posthog'
+import { Clarity, ClarityProps } from './MicrosoftClarity'
 
 declare global {
   interface Window {
@@ -19,6 +20,7 @@ export interface AnalyticsConfig {
   umamiAnalytics?: UmamiProps
   posthogAnalytics?: PosthogProps
   simpleAnalytics?: SimpleAnalyticsProps
+  clarityAnalytics?: ClarityProps
 }
 
 /**
@@ -29,6 +31,7 @@ export interface AnalyticsConfig {
  *  umamiWebsiteId: '', // e.g. 123e4567-e89b-12d3-a456-426614174000
  *  posthogProjectApiKey: '', // e.g. AhnJK8392ndPOav87as450xd
  *  googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
+ *  ClarityWebsiteId: '', // e.g. abcdefjhij
  * }
  */
 export interface AnalyticsProps {
@@ -65,10 +68,13 @@ export const Analytics = ({ analyticsConfig }: AnalyticsProps) => {
       {isProduction && analyticsConfig.googleAnalytics && (
         <GA {...analyticsConfig.googleAnalytics} />
       )}
+      {isProduction && analyticsConfig.clarityAnalytics && (
+        <Clarity {...analyticsConfig.clarityAnalytics} />
+      )}
     </>
   )
 }
 
-export { GA, Plausible, SimpleAnalytics, Umami, Posthog }
+export { GA, Plausible, SimpleAnalytics, Umami, Posthog, Clarity }
 
-export type { GoogleAnalyticsProps, PlausibleProps, UmamiProps, PosthogProps, SimpleAnalyticsProps }
+export type { GoogleAnalyticsProps, PlausibleProps, UmamiProps, PosthogProps, SimpleAnalyticsProps, ClarityProps }

packages/pliny/src/config.ts

@@ -69,6 +69,9 @@ const sampleConfig: PlinyConfig = {
     googleAnalytics: {
       googleAnalyticsId: '', // e.g. G-XXXXXXX
     },
+    clarityAnalytics: {
+      ClarityWebsiteId: '', // e.g. abcdefjhij
+    },
   },
   newsletter: {
     // supports mailchimp, buttondown, convertkit, klaviyo, revue, emailOctopus