From 0918aa54562451f01be2aa8faa537882d9aa2bc1 Mon Sep 17 00:00:00 2001 From: Blue Mouse Date: Thu, 11 Jul 2024 01:30:37 +0200 Subject: [PATCH] added Swetrix --- README.md | 19 ++++++ packages/pliny/src/analytics/Swetrix.tsx | 73 ++++++++++++++++++++++++ packages/pliny/src/analytics/index.tsx | 24 +++++++- packages/pliny/src/config.ts | 3 + 4 files changed, 116 insertions(+), 3 deletions(-) create mode 100644 packages/pliny/src/analytics/Swetrix.tsx diff --git a/README.md b/README.md index f7ed0f1..7006ebb 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ Pliny provides out of the box components to enhance your static site: - Plausible Analytics - Simple Analytics - Umami Analytics + - Swetrix - Posthog - Microsoft Clarity - Comments @@ -91,6 +92,9 @@ const analytics: AnalyticsConfig = { clarityAnalytics: { ClarityWebsiteId: '', // e.g. abcdefjhij }, + swetrixAnalytics: { + swetrixProjectId: '', // e.g. ABCdEfG123hI + }, } export default function Layout() { @@ -176,6 +180,21 @@ export default function Layout() { } ``` +#### Swetrix + +```tsx +import { Swetrix } from 'pliny/analytics/Swetrix' + +const swetrixProjectId = '' // e.g. ABCdEfG123hI + +export default function Layout() { + return ( + ... + + ) +} +``` + #### Posthog ```tsx diff --git a/packages/pliny/src/analytics/Swetrix.tsx b/packages/pliny/src/analytics/Swetrix.tsx new file mode 100644 index 0000000..51d2508 --- /dev/null +++ b/packages/pliny/src/analytics/Swetrix.tsx @@ -0,0 +1,73 @@ +import Script from 'next/script.js' + +export interface SwetrixProps { + swetrixProjectId: string + apiURL?: string + src?: string +} + +/** + * Swetrix analytics component. + * To proxy the requests through your own domain, you can use the apiURL and src attributes. + * See the Swetrix [proxying docs](https://docs.swetrix.com/adblockers/guides/nextjs#update-swetrix-tracking-script-configuration) + * for more information. + * + */ +export const Swetrix = ({ + swetrixProjectId, + apiURL = 'https://api.swetrix.com/log', + src = 'https://swetrix.org/swetrix.js', +}: SwetrixProps) => { + return ( + <> + + + ) +} + +export interface LogEventProps { + /** The custom event name. */ + ev: string + + /** If set to `true`, only 1 event with the same ID will be saved per user session. */ + unique?: boolean + + /** Event-related metadata object with string values. */ + meta?: { + [key: string]: string + } +} + +// https://docs.swetrix.com/swetrix-js-reference#track +export const logEvent = (options: LogEventProps) => { + return window.swetrix?.track?.(options) +} + +export interface LogErrorProps { + name: string + message: string | null | undefined + lineno: number | null | undefined + colno: number | null | undefined + filename: string | null | undefined +} + +// https://docs.swetrix.com/swetrix-js-reference#trackerror +export const logError = (payload: LogErrorProps) => { + return window.swetrix?.trackError?.(payload) +} diff --git a/packages/pliny/src/analytics/index.tsx b/packages/pliny/src/analytics/index.tsx index a0718e1..ab1edf2 100644 --- a/packages/pliny/src/analytics/index.tsx +++ b/packages/pliny/src/analytics/index.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { GA, GoogleAnalyticsProps } from './GoogleAnalytics' import { Plausible, PlausibleProps } from './Plausible' +import { Swetrix, SwetrixProps } from './Swetrix' import { SimpleAnalytics, SimpleAnalyticsProps } from './SimpleAnalytics.js' import { Umami, UmamiProps } from './Umami' import { Posthog, PosthogProps } from './Posthog' @@ -11,12 +12,17 @@ declare global { gtag?: (...args: any[]) => void plausible?: (...args: any[]) => void sa_event?: (...args: any[]) => void + swetrix?: { + track: (...args: any[]) => void + trackError: (...args: any[]) => void + } } } export interface AnalyticsConfig { googleAnalytics?: GoogleAnalyticsProps plausibleAnalytics?: PlausibleProps + swetrixAnalytics?: SwetrixProps umamiAnalytics?: UmamiProps posthogAnalytics?: PosthogProps simpleAnalytics?: SimpleAnalyticsProps @@ -32,6 +38,7 @@ export interface AnalyticsConfig { * posthogProjectApiKey: '', // e.g. AhnJK8392ndPOav87as450xd * googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX * ClarityWebsiteId: '', // e.g. abcdefjhij + * swetrixProjectId: '', // e.g. ABCdEfG123hI * } */ export interface AnalyticsProps { @@ -41,7 +48,7 @@ export interface AnalyticsProps { const isProduction = process.env.NODE_ENV === 'production' /** - * Supports Plausible, Simple Analytics, Umami, Posthog or Google Analytics. + * Supports Plausible, Simple Analytics, Umami, Posthog, Swetrix or Google Analytics. * All components default to the hosted service, but can be configured to use a self-hosted * or proxied version of the script by providing the `src` / `apiHost` props. * @@ -71,10 +78,21 @@ export const Analytics = ({ analyticsConfig }: AnalyticsProps) => { {isProduction && analyticsConfig.clarityAnalytics && ( )} + {isProduction && analyticsConfig.swetrixAnalytics && ( + + )} ) } -export { GA, Plausible, SimpleAnalytics, Umami, Posthog, Clarity } +export { GA, Plausible, SimpleAnalytics, Umami, Posthog, Clarity, Swetrix } -export type { GoogleAnalyticsProps, PlausibleProps, UmamiProps, PosthogProps, SimpleAnalyticsProps, ClarityProps } +export type { + GoogleAnalyticsProps, + PlausibleProps, + UmamiProps, + PosthogProps, + SimpleAnalyticsProps, + ClarityProps, + SwetrixProps, +} diff --git a/packages/pliny/src/config.ts b/packages/pliny/src/config.ts index 891b1d9..c9dd48e 100644 --- a/packages/pliny/src/config.ts +++ b/packages/pliny/src/config.ts @@ -59,6 +59,9 @@ const sampleConfig: PlinyConfig = { plausibleAnalytics: { plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app }, + swetrixAnalytics: { + swetrixProjectId: '', // e.g. ABCdEfG123hI + }, simpleAnalytics: {}, umamiAnalytics: { umamiWebsiteId: '', // e.g. 123e4567-e89b-12d3-a456-426614174000