@escape-game-over/atlas 0.1.58 → 0.1.59

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@escape-game-over/atlas",
-    "version": "0.1.58",
+    "version": "0.1.59",
     "type": "module",
     "description": "Typed, data-driven machinery for static multi-locale, multi-deployment Astro sites.",
     "private": false,

package/src/analytics/drip.ts

@@ -0,0 +1,16 @@
+import { warn } from "../warn.ts";
+
+/** Drip's site tracking. Marketing: it loads only once a visitor grants that. */
+export interface DripSettings {
+    /** From Drip's Site Setup: digits, the `_dcs.account` of its snippet. */
+    readonly accountId: string;
+}
+
+/** Warns about an id that is not an account id: it would report nowhere. */
+export function checkDrip(drip: DripSettings | undefined, at: string): void {
+    if (drip === undefined || /^\d+$/.test(drip.accountId)) return;
+    warn(
+        at,
+        `Drip account id "${drip.accountId}" is not all digits, so it reports nowhere. Copy it from Drip's Site Setup.`
+    );
+}

package/src/analytics/index.ts

@@ -1,6 +1,7 @@
 import type { MetaTag } from "../meta/tag.ts";
 import type { HttpsUrl } from "../url.ts";
 import { type AxonPixelSettings, checkAxonPixel } from "./axon-pixel.ts";
+import { checkDrip, type DripSettings } from "./drip.ts";
 import { type GoogleSettings, googleEmits, googleScripts } from "./google.ts";
 import { checkMetaPixel, type MetaPixelSettings } from "./meta-pixel.ts";
 import { checkSnapPixel, type SnapPixelSettings } from "./snap-pixel.ts";
@@ -28,6 +29,7 @@ import {
  */
 
 export type { AxonPixelSettings } from "./axon-pixel.ts";
+export type { DripSettings } from "./drip.ts";
 export {
     CONSENT_UPDATE_GLOBAL,
     type ConsentDefaults,
@@ -56,6 +58,8 @@ export interface AnalyticsSettings {
     readonly snapchat?: SnapPixelSettings;
     /** Loaded by `ConsentBanner`, after marketing is granted. */
     readonly axon?: AxonPixelSettings;
+    /** Loaded by `ConsentBanner`, after marketing is granted. */
+    readonly drip?: DripSettings;
 }
 
 /**
@@ -80,6 +84,7 @@ export function analyticsScripts(
     checkTikTokPixel(analytics.tiktok, origin);
     checkSnapPixel(analytics.snapchat, origin);
     checkAxonPixel(analytics.axon, origin);
+    checkDrip(analytics.drip, origin);
     const google = googleScripts(analytics.google, origin);
     return {
         head: [...google.head, ...umamiScripts(analytics.umami)],
@@ -126,6 +131,8 @@ export function consentVendors(
         snapchat: analytics.snapchat !== undefined,
         // No consent mode at all.
         axon: analytics.axon !== undefined,
+        // No consent mode at all.
+        drip: analytics.drip !== undefined,
     };
 
     return (Object.keys(VENDORS) as (keyof AnalyticsSettings)[]).filter(

package/src/astro/ConsentBanner.astro

@@ -5,13 +5,14 @@
  * buttons.
  *
  * Renders nothing — and ships no script — when this site's analytics need no
- * permission. Also loads the vendors that wait for consent, such as the Meta, TikTok, Snap and Axon pixels. Otherwise the banner starts hidden and shows only to a visitor
+ * permission. Also loads the vendors that wait for consent, such as the Meta, TikTok, Snap and Axon pixels and Drip. Otherwise the banner starts hidden and shows only to a visitor
  * with no answer on record, or when a `data-consent-reopen` control is pressed.
  */
 import type { HTMLAttributes } from "astro/types";
 import { type AnalyticsSettings, consentRequired } from "../analytics/index.ts";
 import AxonPixel from "./AxonPixel.astro";
 import ConsentElement from "./ConsentElement.astro";
+import Drip from "./Drip.astro";
 import MetaPixel from "./MetaPixel.astro";
 import SnapPixel from "./SnapPixel.astro";
 import TikTokPixel from "./TikTokPixel.astro";
@@ -32,5 +33,6 @@ const { analytics, ...attrs } = Astro.props;
         {analytics?.tiktok && <TikTokPixel settings={analytics.tiktok} />}
         {analytics?.snapchat && <SnapPixel settings={analytics.snapchat} />}
         {analytics?.axon && <AxonPixel settings={analytics.axon} />}
+        {analytics?.drip && <Drip settings={analytics.drip} />}
     </>
 )}

package/src/astro/Drip.astro

@@ -0,0 +1,18 @@
+---
+/** Internal to `ConsentBanner.astro`, so Drip's script ships only where it is configured. */
+import type { DripSettings } from "../analytics/drip.ts";
+import AtlasElement from "./AtlasElement.astro";
+import { dripElement } from "./drip.ts";
+
+interface Props {
+    readonly settings: DripSettings;
+}
+---
+
+<script src="./drip.ts" />
+
+<AtlasElement
+    of={dripElement}
+    data-account-id={Astro.props.settings.accountId}
+    hidden
+/>

package/src/astro/client.ts

@@ -16,6 +16,7 @@ export * from "./carousel.ts";
 // Reading only: a form that reports what the visitor agreed to. Recording an
 // answer stays with the banner.
 export { type ConsentRecord, readConsent } from "./consent.ts";
+export * from "./drip-event.ts";
 export {
     type Connect,
     type ElementContext,

package/src/astro/drip-event.ts

@@ -0,0 +1,24 @@
+import { readConsent } from "./consent.ts";
+
+/** What `drip.ts` defines once marketing is granted. */
+interface DripWindow {
+    _dcq?: unknown[][];
+}
+
+/**
+ * Records an event with Drip, to start a workflow — a lead sent, a voucher
+ * bought. Drip's events are named by the site, so any name goes.
+ *
+ * Dropped unless Drip loaded and marketing is still granted: Drip has no
+ * consent call of its own, so the check is here. An analytics call must never
+ * be the reason a page misbehaves, so a dropped event is silent.
+ */
+export function dripEvent(
+    action: string,
+    properties?: Readonly<Record<string, string | number | boolean>>
+): void {
+    if (readConsent()?.marketing !== "granted") return;
+    const queue = (window as unknown as DripWindow)._dcq;
+    if (properties === undefined) queue?.push(["track", action]);
+    else queue?.push(["track", action, properties]);
+}

package/src/astro/drip.ts

@@ -0,0 +1,37 @@
+import { appendScript } from "./append-script.ts";
+import type { ConsentGated } from "./consent-gate.ts";
+import { whenGranted } from "./consent-gate.ts";
+import { element } from "./element.ts";
+import { data } from "./ref.ts";
+
+/** Drip's globals: a queue of calls, and the account its script reports to. */
+interface DripWindow {
+    _dcq?: unknown[][];
+    _dcs?: { account?: string };
+}
+
+/**
+ * Drip, loaded on the first grant. Its script records visits by itself, so
+ * nothing is queued here. Drip has no consent call, so a withdrawal cannot
+ * pause what already loaded: `dripEvent` stops sending, and the next page does
+ * not load it.
+ */
+export function drip(accountId: string): ConsentGated {
+    let loaded = false;
+    return {
+        grant: () => {
+            if (loaded) return;
+            loaded = true;
+            const global = window as unknown as DripWindow;
+            global._dcq ??= [];
+            global._dcs ??= {};
+            global._dcs.account = accountId;
+            appendScript(`https://tag.getdrip.com/${accountId}.js`);
+        },
+    };
+}
+
+/** Internal to `Drip.astro`. */
+export const dripElement = element("atlas-drip", ({ root, signal }) => {
+    whenGranted("marketing", drip(data(root, "account-id")), signal);
+});

package/src/index.ts

@@ -28,6 +28,7 @@ export {
     type ConsentState,
     consentRequired,
     consentVendors,
+    type DripSettings,
     type GoogleSettings,
     type MetaPixelSettings,
     type SnapPixelSettings,