feat: pixel tracking

Author: izadoesdev

packages/tracker/src/core/types.ts

@@ -19,6 +19,7 @@ export type TrackerOptions = {
     trackInteractions?: boolean;
     trackErrors?: boolean;
     ignoreBotDetection?: boolean;
+    usePixel?: boolean;
 
     // Sampling & Retries
     samplingRate?: number;

packages/tracker/src/core/utils.ts

@@ -72,7 +72,7 @@ export function getTrackerConfig(): TrackerOptions {
                     } catch (_e) {
                         value = [];
                     }
-                } else if (value === 'true') {
+                } else if (value === 'true' || value === '') {
                     value = true;
                 } else if (value === 'false') {
                     value = false;

packages/tracker/src/index.ts

@@ -3,6 +3,7 @@ import type { TrackerOptions } from "./core/types";
 import { generateUUIDv4, getTrackerConfig, isOptedOut } from "./core/utils";
 import { initErrorTracking } from "./plugins/errors";
 import { initInteractionTracking } from "./plugins/interactions";
+import { initPixelTracking } from "./plugins/pixel";
 import { initScrollDepthTracking } from "./plugins/scroll-depth";
 import { initWebVitalsTracking } from "./plugins/vitals";
 
@@ -19,6 +20,10 @@ export class Databuddy extends BaseTracker {
         }
 
         if (!this.isServer()) {
+            if (this.options.usePixel) {
+                initPixelTracking(this);
+            }
+
             if (this.options.trackScreenViews) {
                 this.trackScreenViews();
                 setTimeout(() => this.screenView(), 0);

packages/tracker/src/plugins/pixel.ts

@@ -0,0 +1,69 @@
+import type { BaseTracker } from "../core/tracker";
+
+export function initPixelTracking(tracker: BaseTracker) {
+    tracker.options.enableBatching = false;
+
+    const sendToPixel = (endpoint: string, data: any): Promise<any> => {
+        const params = new URLSearchParams();
+
+        const flatten = (obj: any, prefix = "") => {
+            for (const key in obj) {
+                if (Object.hasOwn(obj, key)) {
+                    const value = obj[key];
+                    const newKey = prefix ? `${prefix}[${key}]` : key;
+
+                    if (value === null || value === undefined) {
+                        continue;
+                    }
+
+                    if (typeof value === "object" && value !== null) {
+                        if (prefix === "" && key === "properties") {
+                            params.append(key, JSON.stringify(value));
+                        } else {
+                            params.append(newKey, JSON.stringify(value));
+                        }
+                    } else {
+                        params.append(newKey, String(value));
+                    }
+                }
+            }
+        };
+
+        flatten(data);
+
+        if (tracker.options.clientId && !params.has("client_id")) {
+            params.set("client_id", tracker.options.clientId);
+        }
+
+        if (!params.has("sdk_name")) {
+            params.set("sdk_name", tracker.options.sdk || "web");
+        }
+        if (!params.has("sdk_version")) {
+            params.set("sdk_version", tracker.options.sdkVersion || "2.0.0");
+        }
+
+        const baseUrl = tracker.options.apiUrl || "https://basket.databuddy.cc";
+        const url = new URL(endpoint === "/" ? "/pixel.gif" : endpoint, baseUrl);
+
+        params.forEach((value, key) => {
+            url.searchParams.append(key, value);
+        });
+
+        return new Promise((resolve) => {
+            const img = new Image();
+            img.onload = () => resolve({ success: true });
+            img.onerror = () => resolve({ success: false });
+            img.src = url.toString();
+        });
+    };
+
+    tracker.api.fetch = (endpoint: string, data: any) =>
+        sendToPixel(endpoint, data);
+
+    tracker.sendBeacon = (event: any) => {
+        sendToPixel("/", event);
+        return { success: true };
+    };
+
+    tracker.sendBatchBeacon = () => null;
+}

packages/tracker/src/plugins/vitals.ts

@@ -10,13 +10,13 @@ export function initWebVitalsTracking(tracker: BaseTracker) {
     const metrics: {
         fcp: number | undefined;
         lcp: number | undefined;
-        cls: number;
+        cls: number | undefined;
         inp: number | undefined;
         ttfb: number | undefined;
     } = {
         fcp: undefined,
         lcp: undefined,
-        cls: 0,
+        cls: undefined,
         inp: undefined,
         ttfb: undefined,
     };
@@ -37,7 +37,7 @@ export function initWebVitalsTracking(tracker: BaseTracker) {
             timestamp: Date.now(),
             fcp: clamp(metrics.fcp),
             lcp: clamp(metrics.lcp),
-            cls: metrics.cls,
+            cls: clamp(metrics.cls),
             inp: metrics.inp,
             ttfb: clamp(metrics.ttfb),
             ...tracker.getBaseContext(),
@@ -59,7 +59,7 @@ export function initWebVitalsTracking(tracker: BaseTracker) {
                 metrics.lcp = Math.round(metric.value);
                 break;
             case "CLS":
-                metrics.cls = metric.value;
+                metrics.cls = Math.round(metric.value);
                 break;
             case "INP":
                 metrics.inp = Math.round(metric.value);
@@ -73,14 +73,12 @@ export function initWebVitalsTracking(tracker: BaseTracker) {
         logger.log(`Web Vitals Metric: ${metric.name}`, metric.value);
     };
 
-    // Initialize web-vitals listeners
     onFCP(handleMetric);
     onLCP(handleMetric);
     onCLS(handleMetric);
     onINP(handleMetric);
     onTTFB(handleMetric);
 
-    // Send report on page hide / unload
     const report = () => {
         if (reported) {
             return;

packages/tracker/test-server.ts

@@ -17,9 +17,14 @@ serve({
         <html>
           <head>
             <title>Databuddy Tracker Test</title>
+            <script src="/dist/databuddy-debug.js" data-client-id="dev-test-id"></script>
           </head>
           <body>
             <h1>Tracker Test Page</h1>
+            <button onclick="databuddy.track('test_click')">Track Click</button>
+            <button onclick="databuddyOptOut()">Opt Out</button>
+            <button onclick="databuddyOptIn()">Opt In</button>
+            <p>Open console to debug</p>
           </body>
         </html>
       `,