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