feat: add server side tracking support

Author: JeanMeijer

manifest.json

@@ -3,19 +3,14 @@
   "namespace": "simple-analytics",
   "description": "Privacy-friendly and simple Google Analytics alternative.",
   "icon": "assets/icon.svg",
+  "categories": ["Analytics"],
+  "provides": ["events"],
+  "allowCustomFields": true,
   "permissions": {
-    "access_client_kv": {
-      "description": "This permission is used to facilitate better a user experience.",
-      "required": true
-    },
     "execute_unsafe_scripts": {
       "description": "This permission is used to facilitate better a user experience.",
       "required": true
     },
-    "client_network_requests": {
-      "description": "This permission is used to facilitate better a user experience.",
-      "required": true
-    },
     "server_network_requests": {
       "description": "This permission is used to facilitate better a user experience.",
       "required": true

package.json

@@ -20,6 +20,7 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@cloudflare/workers-types": "^4.20251008.0",
     "@managed-components/types": "^1.3.14",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "esbuild": "^0.20.1",

pnpm-lock.yaml

@@ -1,66 +1,51 @@
-import { ComponentSettings, Manager } from '@managed-components/types'
+import type { Manager } from '@managed-components/types'
+import { trackEvent, trackPageview } from './server/simple-analytics'
+import { getIncomingRequestCfProperties } from './server/utils'
+// import { createScript } from './script'
 
-interface ClientInfo {
-  readonly emitter: string
-  readonly userAgent: string
-  readonly language: string
-  readonly referer: string
-  readonly ip: string
-  readonly title?: string
-  readonly timestamp?: number
-  readonly url: URL
-  readonly timezoneOffset?: number
-  readonly screenWidth?: number
-  readonly screenHeight?: number
-  readonly viewportWidth?: number
-  readonly viewportHeight?: number
-}
+export default async function (manager: Manager) {
+  // manager.addEventListener('clientcreated', async event => {
+  //   const { client } = event
+  //   const script = createScript()
+
+  //   client.execute(script)
+  // })
 
-export default async function (manager: Manager, _settings: ComponentSettings) {
-  //
-  manager.addEventListener('pageview', event => {
+  manager.addEventListener('pageview', async event => {
     const { client } = event
+    const { timezone } = await getIncomingRequestCfProperties()
 
-    const clientInfo: ClientInfo = {
-      emitter: client.emitter,
-      userAgent: client.userAgent,
-      language: client.language,
-      referer: client.referer,
-      ip: client.ip,
-      url: client.url,
-      viewportHeight: client.viewportHeight,
-      viewportWidth: client.viewportWidth,
-      screenHeight: client.screenHeight,
-      screenWidth: client.screenWidth,
-      timezoneOffset: client.timezoneOffset,
-      timestamp: client.timestamp,
-      title: client.title,
-    }
+    await trackPageview({
+      client,
+      clientOptions: {
+        timezone,
+      },
+    })
+  })
+
+  manager.addEventListener('event', async event => {
+    const { client } = event
+    const { timezone } = await getIncomingRequestCfProperties()
 
-    console.log('Hello server!')
-    event.client.execute("console.log('Hello browser')")
+    await trackEvent('event', {
+      client,
+      clientOptions: {
+        timezone,
+      },
+    })
   })
 
-  // historyChange
   manager.createEventListener('historyChange', async event => {
     const { client } = event
+    const { timezone } = await getIncomingRequestCfProperties()
 
-    const clientInfo: ClientInfo = {
-      emitter: client.emitter,
-      userAgent: client.userAgent,
-      language: client.language,
-      referer: client.referer,
-      ip: client.ip,
-      url: client.url,
-      viewportHeight: client.viewportHeight,
-      viewportWidth: client.viewportWidth,
-      screenHeight: client.screenHeight,
-      screenWidth: client.screenWidth,
-      timezoneOffset: client.timezoneOffset,
-      timestamp: client.timestamp,
-      title: client.title,
-    }
+    // client.fetch('https://queue.simpleanalyticscdn.com/noscript.gif')
 
-    console.info('History changed', clientInfo)
+    await trackPageview({
+      client,
+      clientOptions: {
+        timezone,
+      },
+    })
   })
 }

src/index.ts

@@ -0,0 +1,18 @@
+/* eslint-disable prettier/prettier */
+export function createScript() {
+  return `
+  (function () {
+    if (document.getElementById("sa-script")) {
+      return;
+    }
+    
+    const el = document.createElement("script");
+    el.id = "sa-script";
+    el.type = "text/javascript";
+    el.async = true;
+    el.src = "https://scripts.simpleanalyticscdn.com/latest.js";
+    // TODO: set data attributes
+    document.head.appendChild(el);
+  })();
+  `
+}

src/script.ts

@@ -1,58 +1,29 @@
-import type { AnalyticsEvent, IgnoredMetrics } from './interfaces'
-
-export function parseViewportWidth(headers: Headers) {
-  const width =
-    headers.get('Sec-CH-Viewport-Width') ?? headers.get('Viewport-Width')
-
-  return width ? Number.parseInt(width, 10) : undefined
-}
-
-export function parseViewportHeight(headers: Headers) {
-  const height = headers.get('Sec-CH-Viewport-Height')
-
-  return height ? Number.parseInt(height, 10) : undefined
-}
-
-export function parseLanguage(headers: Headers) {
-  const language = headers.get('Sec-CH-Lang') ?? headers.get('Lang')
-
-  if (!language) {
-    const acceptLanguage = headers.get('Accept-Language')
-
-    return acceptLanguage ? acceptLanguage.split(',')[0] : undefined
-  }
-
-  return language.split(',')[0]?.slice(0, -1)
-}
-
-export function parseTimezone(headers: Headers) {
-  return (
-    headers.get('X-Vercel-IP-Timezone') ??
-    headers.get('CloudFront-Viewer-Time-Zone') ??
-    headers.get('Cf-Timezone') ??
-    undefined
-  )
-}
-
-export function parseUserAgent(headers: Headers) {
-  return headers.get('User-Agent') ?? ''
-}
-
-export function parseHeaders(
-  headers: Headers,
+import type {
+  AnalyticsEvent,
+  ClientInfo,
+  ClientInfoOptions,
+  IgnoredMetrics,
+} from './interfaces'
+
+export function parseClientInfo(
+  client: ClientInfo,
+  options: ClientInfoOptions | undefined,
   ignoredMetrics: IgnoredMetrics = {}
 ) {
   return {
-    ua: !ignoredMetrics.userAgent ? parseUserAgent(headers) : '',
+    ua: !ignoredMetrics.userAgent ? client.userAgent : '',
 
     viewport_width: !ignoredMetrics.viewportSize
-      ? parseViewportWidth(headers)
+      ? client.viewportWidth
       : undefined,
     viewport_height: !ignoredMetrics.viewportSize
-      ? parseViewportHeight(headers)
+      ? client.viewportHeight
       : undefined,
 
-    language: !ignoredMetrics.language ? parseLanguage(headers) : undefined,
-    timezone: !ignoredMetrics.timezone ? parseTimezone(headers) : undefined,
+    screen_width: !ignoredMetrics.screenSize ? client.screenWidth : undefined,
+    screen_height: !ignoredMetrics.screenSize ? client.screenHeight : undefined,
+
+    language: !ignoredMetrics.language ? client.language : undefined,
+    timezone: !ignoredMetrics.timezone ? options?.timezone : undefined,
   } satisfies Partial<AnalyticsEvent>
 }

src/server/headers.ts

@@ -38,18 +38,32 @@ export interface IgnoredMetrics {
   userAgent?: boolean | undefined
   viewportSize?: boolean | undefined
   language?: boolean | undefined
+  screenSize?: boolean | undefined
 }
 
-export type ServerContext = ServerContextWithRequest | ServerContextWithPath
-
-export type ServerContextWithRequest = { request: Request }
-
-export type HeaderOnlyContext = { headers: Headers }
+export interface ClientInfo {
+  emitter: string
+  userAgent: string
+  language: string
+  referer: string
+  ip: string
+  url: URL
+  title?: string | undefined
+  timestamp?: number | undefined
+  timezoneOffset?: number | undefined
+  screenWidth?: number | undefined
+  screenHeight?: number | undefined
+  viewportWidth?: number | undefined
+  viewportHeight?: number | undefined
+}
 
-export type ServerContextWithPath = {
-  path: string
-  headers: Headers
-  searchParams?: Record<string, string | string[] | undefined>
+export interface ClientInfoOptions {
+  timezone?: string | undefined
+  forwardedFor?: string | undefined
+  doNotTrack?: boolean | undefined
+  method?: string | undefined
+  isNavigationRequest?: boolean | undefined
+  fetchMode?: string | undefined
 }
 
 export interface TrackingOptions {