Barbapapazes · Barbapapazes · Oct 3, 2024 · Jul 18, 2024 · Jul 18, 2024 · Jul 18, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -48,6 +48,8 @@ jobs:
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps
 
+      - run: pnpm run build
+
       - name: Playwright tests
         run: pnpm exec playwright test
 

diff --git a/playground/package.json b/playground/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@barbapapazes/plausible-tracker": "latest"
+    "@barbapapazes/plausible-tracker": "workspace:*"
   },
   "devDependencies": {
     "typescript": "^5.6.2",

diff --git a/playground/site-verification.html b/playground/site-verification.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>
+    Site Verification
+  </title>
+</head>
+<body>
+  <!--
+    This playground page is meant to be used by the end-to-end tests. Please do not remove any of the following elements.
+  -->
+  <script type="module" src="/src/site-verification.ts"></script>
+</body>
+</html>
diff --git a/playground/src/main.ts b/playground/src/main.ts
@@ -1,7 +1,7 @@
 import { createPlausibleTracker } from '@barbapapazes/plausible-tracker'
 import { defaultFileTypes, useAutoFileDownloadsTracking, useAutoOutboundTracking, useAutoPageviews } from '@barbapapazes/plausible-tracker/extensions'
 
-const plausible = createPlausibleTracker({ ignoreSubDomains: true })
+const plausible = createPlausibleTracker()
 
 const { install: installAutoPageviews, cleanup: cleanupAutoPageViews } = useAutoPageviews(plausible)
 const { install: installAutoOutboundTracking, cleanup: cleanupAutoOutboundTracking } = useAutoOutboundTracking(plausible)

diff --git a/playground/src/site-verification.ts b/playground/src/site-verification.ts
@@ -0,0 +1,5 @@
+import { createPlausibleTracker } from '@barbapapazes/plausible-tracker'
+
+createPlausibleTracker({
+  ignoredHostnames: [],
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,2 +1,3 @@
 packages:
+  - ./
   - playground
diff --git a/src/event.ts b/src/event.ts
@@ -1,4 +1,4 @@
-import type { EventData, EventPayload } from './types'
+import type { CallbackArgs, EventData, EventPayload } from './types'
 
 /**
  * Check if the protocol is file
@@ -75,15 +75,15 @@ export function sendEvent(
   apiHost: string,
   /** The event payload */
   payload: EventPayload,
-  callback?: () => void,
+  callback?: (args: CallbackArgs) => void,
 ) {
   return fetch(`${apiHost}/api/event`, {
     method: 'POST',
     headers: {
       'Content-Type': 'text/plain',
     },
     body: JSON.stringify(payload),
-  }).then(() => {
-    callback?.()
+  }).then((response: Response) => {
+    callback?.({ status: response.status })
   }).catch(() => {})
 }
diff --git a/src/plausible.ts b/src/plausible.ts
@@ -3,7 +3,7 @@
  * @see https://github.com/plausible/analytics/blob/master/tracker/src/customEvents.js#L77
  */
 
-import type { EventName, EventOptions, EventPayload, Plausible, PlausibleOptions } from './types'
+import type { CallbackArgs, EventName, EventOptions, EventPayload, Plausible, PlausibleOptions } from './types'
 import { sendEvent as _sendEvent, createEventData, isFile, isIgnored, isUserSelfExcluded } from './event'
 import { createPayload } from './payload'
 
@@ -30,7 +30,7 @@ export function createPlausibleTracker(initOptions?: Partial<PlausibleOptions>)
   // Options does not change later.
   const plausibleOptions = { ...defaultOptions, ...initOptions } satisfies PlausibleOptions
 
-  const sendEvent = (payload: EventPayload, callback?: () => void) => _sendEvent(plausibleOptions.apiHost, payload, callback)
+  const sendEvent = (payload: EventPayload, callback?: (args: CallbackArgs) => void) => _sendEvent(plausibleOptions.apiHost, payload, callback)
 
   /**
    * Send a custom event.
@@ -53,7 +53,7 @@ export function createPlausibleTracker(initOptions?: Partial<PlausibleOptions>)
         console.info(`[Plausible] ${eventName}`, payload)
 
       // Call the callback if it exists since we are not sending the event.
-      options?.callback?.()
+      options?.callback?.({ status: null })
     }
     else {
       return sendEvent(payload, options?.callback)
@@ -67,6 +67,11 @@ export function createPlausibleTracker(initOptions?: Partial<PlausibleOptions>)
     return trackEvent('pageview', options)
   }
 
+  /**
+   * Add Plausible script to the page to enable site verification.
+   */
+  window.plausible = trackEvent
+
   return {
     trackEvent,
     trackPageview,

diff --git a/src/types.ts b/src/types.ts
@@ -64,12 +64,16 @@ export interface PlausibleOptions {
   readonly logIgnored: boolean
 }
 
+export interface CallbackArgs {
+  readonly status: number | null
+}
+
 export interface EventOptions extends EventProps {
   data?: Partial<EventData>
   /**
    * Callback to be called after the event is sent.
    */
-  callback?: () => void
+  callback?: (args: CallbackArgs) => void
 }
 
 /**

diff --git a/src/window.d.ts b/src/window.d.ts
@@ -0,0 +1,7 @@
+import type { EventOptions } from './types'
+
+declare global {
+  interface Window {
+    plausible: (eventName: string, options?: EventOptions) => void
+  }
+}
diff --git a/test/e2e/site-verification.spec.ts b/test/e2e/site-verification.spec.ts
@@ -0,0 +1,26 @@
+import { expect, test } from '@playwright/test'
+import { plausibleEventRequest } from './utils'
+
+test.describe('Site verification', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/site-verification')
+  })
+
+  test('should be able to verify the site', async ({ page }) => {
+    const requestPromise = plausibleEventRequest(page)
+
+    const status = await page.evaluate(async () => {
+      let status: number | undefined
+      // @ts-expect-error - Plausible is available in the browser
+      await window.plausible('site-verification', { callback: (args) => {
+        status = args.status
+      } })
+
+      return status
+    })
+
+    await requestPromise
+
+    expect(status).toBe(202)
+  })
+})