diff --git a/README.md b/README.md
index b672fde..d120c48 100644
--- a/README.md
+++ b/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 (
+ ...
+
+ )
+}
+```
+
#### Plausible Analytics
```tsx
diff --git a/packages/pliny/src/analytics/MicrosoftClarity.tsx b/packages/pliny/src/analytics/MicrosoftClarity.tsx
new file mode 100644
index 0000000..bfbf596
--- /dev/null
+++ b/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 (
+ <>
+
+ >
+ )
+}
diff --git a/packages/pliny/src/analytics/index.tsx b/packages/pliny/src/analytics/index.tsx
index 3dca44d..a0718e1 100644
--- a/packages/pliny/src/analytics/index.tsx
+++ b/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 && (
)}
+ {isProduction && 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 }
diff --git a/packages/pliny/src/config.ts b/packages/pliny/src/config.ts
index 397a541..891b1d9 100644
--- a/packages/pliny/src/config.ts
+++ b/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