blume 1.7.3 → 2.0.1

package/src/analytics/clarity.ts

@@ -0,0 +1,46 @@
+import { z } from "zod";
+
+import type { AdapterDescriptor } from "../core/adapter.ts";
+import { adapterDescriptorSchema } from "../core/adapter.ts";
+import type { HeadScript } from "./head.ts";
+import { inlineJson } from "./inline.ts";
+
+/** Options for {@link clarity}. */
+export interface ClarityOptions {
+  /** Project ID, from the project's tracking code in the Clarity dashboard. */
+  id: string;
+}
+
+export const clarityOptionsSchema = z.strictObject({
+  id: z.string().min(1),
+});
+
+export type ClarityAdapter = AdapterDescriptor<"clarity", ClarityOptions>;
+
+export const clarityAdapterSchema = adapterDescriptorSchema(
+  "clarity",
+  clarityOptionsSchema
+);
+
+/**
+ * Microsoft Clarity session recordings and heatmaps. The project ID is public;
+ * it only picks the project the tag reports to.
+ */
+export const clarity = (options: ClarityOptions): ClarityAdapter => ({
+  kind: "clarity",
+  options,
+  requiredSecrets: [],
+  runtimeDeps: [],
+});
+
+/**
+ * The dashboard's tracking code: a `window.clarity` queue and the async tag
+ * load. Clarity follows history changes itself, so client-router navigations
+ * need no extra hook.
+ */
+export const clarityHead = (options: ClarityOptions): HeadScript[] => [
+  {
+    attributes: {},
+    content: `(function(c,l,a,r,i,t,y){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);})(window,document,"clarity","script",${inlineJson(encodeURIComponent(options.id))});`,
+  },
+];

package/src/analytics/clearbit.ts

@@ -0,0 +1,47 @@
+import { z } from "zod";
+
+import type { AdapterDescriptor } from "../core/adapter.ts";
+import { adapterDescriptorSchema } from "../core/adapter.ts";
+import type { HeadScript } from "./head.ts";
+
+/** Options for {@link clearbit}. */
+export interface ClearbitOptions {
+  /** Publishable API key (`pk_…`). */
+  key: string;
+}
+
+export const clearbitOptionsSchema = z.strictObject({
+  key: z.string().min(1),
+});
+
+export type ClearbitAdapter = AdapterDescriptor<"clearbit", ClearbitOptions>;
+
+export const clearbitAdapterSchema = adapterDescriptorSchema(
+  "clearbit",
+  clearbitOptionsSchema
+);
+
+/**
+ * Clearbit's website tag (Reveal and the Clearbit tags it manages). The
+ * publishable key is meant for the browser.
+ */
+export const clearbit = (options: ClearbitOptions): ClearbitAdapter => ({
+  kind: "clearbit",
+  options,
+  requiredSecrets: [],
+  runtimeDeps: [],
+});
+
+/** The tag origin; the key picks the tags bundle. */
+export const CLEARBIT_TAG_ORIGIN = "https://tag.clearbitscripts.com/v1/";
+
+/** The tag as Clearbit's install snippet renders it. */
+export const clearbitHead = (options: ClearbitOptions): HeadScript[] => [
+  {
+    attributes: {
+      referrerpolicy: "strict-origin-when-cross-origin",
+      src: `${CLEARBIT_TAG_ORIGIN}${encodeURIComponent(options.key)}/tags.js`,
+    },
+    content: null,
+  },
+];

package/src/analytics/cloudflare.ts

@@ -0,0 +1,67 @@
+import { z } from "zod";
+
+import type { AdapterDescriptor, JsonValue } from "../core/adapter.ts";
+import { adapterDescriptorSchema } from "../core/adapter.ts";
+import type { HeadScript } from "./head.ts";
+
+/** The beacon script Cloudflare's dashboard snippet loads. */
+export const CLOUDFLARE_BEACON_SRC =
+  "https://static.cloudflareinsights.com/beacon.min.js";
+
+/** The options {@link cloudflare} maps itself. */
+export interface CloudflareNamedOptions {
+  /** Site token from the Web Analytics JS snippet (`data-cf-beacon`). */
+  token: string;
+}
+
+/**
+ * Options for {@link cloudflare}: the token plus any other `data-cf-beacon`
+ * setting, forwarded verbatim (`spa`, …). JSON values only.
+ */
+export type CloudflareOptions = CloudflareNamedOptions & {
+  [option: string]: JsonValue;
+};
+
+export const cloudflareOptionsSchema = z
+  .object({
+    token: z.string().min(1),
+  })
+  .catchall(z.json());
+
+export type CloudflareAdapter = AdapterDescriptor<
+  "cloudflare",
+  CloudflareOptions
+>;
+
+export const cloudflareAdapterSchema = adapterDescriptorSchema(
+  "cloudflare",
+  cloudflareOptionsSchema
+);
+
+/**
+ * Cloudflare Web Analytics in manual (JS snippet) mode, for a site Cloudflare
+ * doesn't proxy. A proxied zone with automatic RUM injection on needs no
+ * adapter at all — listing one there would count every pageview twice.
+ */
+export const cloudflare = (options: CloudflareOptions): CloudflareAdapter => ({
+  kind: "cloudflare",
+  options,
+  requiredSecrets: [],
+  runtimeDeps: [],
+});
+
+/**
+ * The beacon tag exactly as the dashboard's snippet renders it, with the whole
+ * option object as its `data-cf-beacon` JSON. The beacon tracks history
+ * changes itself, so client-router navigations need no extra hook.
+ */
+export const cloudflareHead = (options: CloudflareOptions): HeadScript[] => [
+  {
+    attributes: {
+      "data-cf-beacon": JSON.stringify(options),
+      defer: true,
+      src: CLOUDFLARE_BEACON_SRC,
+    },
+    content: null,
+  },
+];

package/src/analytics/fathom.ts

@@ -0,0 +1,64 @@
+import { z } from "zod";
+
+import type { AdapterDescriptor } from "../core/adapter.ts";
+import { adapterDescriptorSchema } from "../core/adapter.ts";
+import type { HeadScript } from "./head.ts";
+
+/** The script Fathom's dashboard snippet loads. */
+export const FATHOM_SCRIPT_SRC = "https://cdn.usefathom.com/script.js";
+
+/** The options {@link fathom} maps itself. */
+export interface FathomNamedOptions {
+  /** Site ID, from the site's script settings. */
+  site: string;
+}
+
+/**
+ * Options for {@link fathom}: the site ID plus any other script setting,
+ * forwarded as a `data-` attribute on the tag (`spa` → `data-spa`,
+ * `"honor-dnt"` → `data-honor-dnt`, `"excluded-domains"`, `canonical`, …).
+ */
+export type FathomOptions = FathomNamedOptions & {
+  [setting: string]: string;
+};
+
+export const fathomOptionsSchema = z
+  .object({
+    site: z.string().min(1),
+  })
+  .catchall(z.string());
+
+export type FathomAdapter = AdapterDescriptor<"fathom", FathomOptions>;
+
+export const fathomAdapterSchema = adapterDescriptorSchema(
+  "fathom",
+  fathomOptionsSchema
+);
+
+/**
+ * Fathom Analytics. The site ID is public — it's in the tag on every page.
+ */
+export const fathom = (options: FathomOptions): FathomAdapter => ({
+  kind: "fathom",
+  options,
+  requiredSecrets: [],
+  runtimeDeps: [],
+});
+
+/**
+ * The deferred tag from the dashboard, with `site` as `data-site` and every
+ * other option as its own `data-` attribute. Fathom only tracks history
+ * changes when the tag opts in, so `spa` defaults to `"auto"` — Blume's
+ * client router navigates without full loads — and an explicit `spa` wins.
+ */
+export const fathomHead = (options: FathomOptions): HeadScript[] => {
+  const { site, ...settings } = { spa: "auto", ...options };
+  const attributes: HeadScript["attributes"] = {};
+  for (const [setting, value] of Object.entries(settings)) {
+    attributes[`data-${setting}`] = value;
+  }
+  attributes["data-site"] = site;
+  attributes.defer = true;
+  attributes.src = FATHOM_SCRIPT_SRC;
+  return [{ attributes, content: null }];
+};

package/src/analytics/google-analytics.ts

@@ -0,0 +1,84 @@
+import { z } from "zod";
+
+import type { AdapterDescriptor, JsonValue } from "../core/adapter.ts";
+import { adapterDescriptorSchema } from "../core/adapter.ts";
+import type { HeadScript } from "./head.ts";
+import { inlineJson } from "./inline.ts";
+
+/** The options {@link googleAnalytics} maps itself. */
+export interface GoogleAnalyticsNamedOptions {
+  /** Measurement ID of the GA4 web data stream (`G-…`). */
+  id: string;
+}
+
+/**
+ * Options for {@link googleAnalytics}: the measurement ID plus any other
+ * `gtag('config', …)` parameter, forwarded verbatim (`send_page_view`,
+ * `anonymize_ip`, `cookie_domain`, `debug_mode`, …). JSON values only.
+ */
+export type GoogleAnalyticsOptions = GoogleAnalyticsNamedOptions & {
+  [parameter: string]: JsonValue;
+};
+
+export const googleAnalyticsOptionsSchema = z
+  .object({
+    id: z.string().min(1),
+  })
+  .catchall(z.json());
+
+export type GoogleAnalyticsAdapter = AdapterDescriptor<
+  "google-analytics",
+  GoogleAnalyticsOptions
+>;
+
+export const googleAnalyticsAdapterSchema = adapterDescriptorSchema(
+  "google-analytics",
+  googleAnalyticsOptionsSchema
+);
+
+/**
+ * Google Analytics 4 through the Google tag (`gtag.js`). The measurement ID is
+ * public; it names the data stream the tag reports to.
+ */
+export const googleAnalytics = (
+  options: GoogleAnalyticsOptions
+): GoogleAnalyticsAdapter => ({
+  kind: "google-analytics",
+  options,
+  requiredSecrets: [],
+  runtimeDeps: [],
+});
+
+/** The Google tag loader; the measurement ID travels in its query string. */
+export const GOOGLE_TAG_SRC = "https://www.googletagmanager.com/gtag/js";
+
+/**
+ * The two tags from the data stream's install instructions: the async loader
+ * and the `dataLayer` bootstrap with the `config` call. Extra options ride on
+ * the `config` call, and it is emitted bare when there are none, exactly as
+ * the instructions print it. GA4's enhanced measurement counts history
+ * changes as page views by default, so client-router navigations need no
+ * extra hook here.
+ */
+export const googleAnalyticsHead = (
+  options: GoogleAnalyticsOptions
+): HeadScript[] => {
+  const { id, ...parameters } = options;
+  const config =
+    Object.keys(parameters).length === 0
+      ? `gtag("config",${inlineJson(id)});`
+      : `gtag("config",${inlineJson(id)},${inlineJson(parameters)});`;
+  return [
+    {
+      attributes: {
+        async: true,
+        src: `${GOOGLE_TAG_SRC}?id=${encodeURIComponent(id)}`,
+      },
+      content: null,
+    },
+    {
+      attributes: {},
+      content: `window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag("js",new Date());${config}`,
+    },
+  ];
+};

package/src/analytics/google-tag-manager.ts

@@ -0,0 +1,61 @@
+import { z } from "zod";
+
+import type { AdapterDescriptor } from "../core/adapter.ts";
+import { adapterDescriptorSchema } from "../core/adapter.ts";
+import type { HeadScript } from "./head.ts";
+import { inlineJson } from "./inline.ts";
+
+/** Options for {@link googleTagManager}. */
+export interface GoogleTagManagerOptions {
+  /** Name of the data layer global the container reads. Defaults to `dataLayer`. */
+  dataLayer?: string;
+  /** Container ID (`GTM-…`). */
+  id: string;
+}
+
+export const googleTagManagerOptionsSchema = z.strictObject({
+  dataLayer: z.string().min(1).optional(),
+  id: z.string().min(1),
+});
+
+export type GoogleTagManagerAdapter = AdapterDescriptor<
+  "google-tag-manager",
+  GoogleTagManagerOptions
+>;
+
+export const googleTagManagerAdapterSchema = adapterDescriptorSchema(
+  "google-tag-manager",
+  googleTagManagerOptionsSchema
+);
+
+/**
+ * Google Tag Manager. Blume loads the container; which tags fire, and on what,
+ * is the container's configuration. The container ID is public.
+ */
+export const googleTagManager = (
+  options: GoogleTagManagerOptions
+): GoogleTagManagerAdapter => ({
+  kind: "google-tag-manager",
+  options,
+  requiredSecrets: [],
+  runtimeDeps: [],
+});
+
+/**
+ * The container snippet from the workspace's install instructions (the
+ * `<head>` half; the `<noscript>` iframe is for browsers without JavaScript,
+ * which never run analytics anyway). Client-router navigations reach the
+ * container as history changes — fire pageview tags from a History Change
+ * trigger rather than the page-load one. The snippet also keeps a reference
+ * to its data layer on `window.__blumeGtmLayer`, so `track()` pushes custom
+ * events into the layer this container reads rather than the default
+ * `dataLayer`.
+ */
+export const googleTagManagerHead = (
+  options: GoogleTagManagerOptions
+): HeadScript[] => [
+  {
+    attributes: {},
+    content: `(function(w,d,s,l,i){w[l]=w[l]||[];w.__blumeGtmLayer=w[l];w[l].push({"gtm.start":new Date().getTime(),event:"gtm.js"});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!="dataLayer"?"&l="+l:"";j.async=true;j.src="https://www.googletagmanager.com/gtm.js?id="+i+dl;f.parentNode.insertBefore(j,f);})(window,document,"script",${inlineJson(options.dataLayer ?? "dataLayer")},${inlineJson(encodeURIComponent(options.id))});`,
+  },
+];

package/src/analytics/head.ts

@@ -0,0 +1,130 @@
+import { adobeHead } from "./adobe.ts";
+import { amplitudeHead } from "./amplitude.ts";
+import { clarityHead } from "./clarity.ts";
+import { clearbitHead } from "./clearbit.ts";
+import { cloudflareHead } from "./cloudflare.ts";
+import { fathomHead } from "./fathom.ts";
+import { googleAnalyticsHead } from "./google-analytics.ts";
+import { googleTagManagerHead } from "./google-tag-manager.ts";
+import { heapHead } from "./heap.ts";
+import { hightouchHead } from "./hightouch.ts";
+import { hotjarHead } from "./hotjar.ts";
+import { logrocketHead } from "./logrocket.ts";
+import { mixpanelHead } from "./mixpanel.ts";
+import { pirschHead } from "./pirsch.ts";
+import { plausibleHead } from "./plausible.ts";
+import { posthogHead } from "./posthog.ts";
+import type { AnalyticsAdapter } from "./schema.ts";
+import { scriptHead } from "./script.ts";
+import { segmentHead } from "./segment.ts";
+import type { VercelOptions } from "./vercel.ts";
+
+/** One `<script>` tag an adapter emits into `<head>`. */
+export interface HeadScript {
+  /**
+   * Attributes on the tag, including `src` for an external script. `true`
+   * renders a bare boolean attribute (`async`, `defer`).
+   */
+  attributes: Record<string, string | boolean>;
+  /** Inline body, or `null` for an external script. */
+  content: string | null;
+}
+
+/**
+ * One thing `Analytics.astro` renders, in the adapters' declared order. Vercel
+ * is the one adapter that renders a component rather than a tag: the official
+ * component injects the first-party script and resolves the deployment's base
+ * path itself, so it travels as its props.
+ */
+export type HeadNode =
+  | (HeadScript & { type: "script" })
+  | { props: VercelOptions; type: "vercel" };
+
+/**
+ * The tags one adapter emits. Each adapter module owns its snippet; this is
+ * the one place that branches on `kind`. A provider whose install snippet is
+ * two tags (an SDK plus its init call) emits two.
+ */
+const adapterScripts = (
+  adapter: Exclude<AnalyticsAdapter, { kind: "vercel" }>
+): HeadScript[] => {
+  switch (adapter.kind) {
+    case "adobe": {
+      return adobeHead(adapter.options);
+    }
+    case "amplitude": {
+      return amplitudeHead(adapter.options);
+    }
+    case "clarity": {
+      return clarityHead(adapter.options);
+    }
+    case "clearbit": {
+      return clearbitHead(adapter.options);
+    }
+    case "cloudflare": {
+      return cloudflareHead(adapter.options);
+    }
+    case "fathom": {
+      return fathomHead(adapter.options);
+    }
+    case "google-analytics": {
+      return googleAnalyticsHead(adapter.options);
+    }
+    case "google-tag-manager": {
+      return googleTagManagerHead(adapter.options);
+    }
+    case "heap": {
+      return heapHead(adapter.options);
+    }
+    case "hightouch": {
+      return hightouchHead(adapter.options);
+    }
+    case "hotjar": {
+      return hotjarHead(adapter.options);
+    }
+    case "logrocket": {
+      return logrocketHead(adapter.options);
+    }
+    case "mixpanel": {
+      return mixpanelHead(adapter.options);
+    }
+    case "pirsch": {
+      return pirschHead(adapter.options);
+    }
+    case "plausible": {
+      return plausibleHead(adapter.options);
+    }
+    case "posthog": {
+      return posthogHead(adapter.options);
+    }
+    case "segment": {
+      return segmentHead(adapter.options);
+    }
+    default: {
+      return scriptHead(adapter.options);
+    }
+  }
+};
+
+/**
+ * Map the configured adapters to what `Analytics.astro` renders, in declared
+ * order. A second `vercel()` is dropped — two copies of the component would
+ * count every pageview twice — so the first one keeps its position.
+ */
+export const analyticsHead = (adapters: AnalyticsAdapter[]): HeadNode[] => {
+  const nodes: HeadNode[] = [];
+  let hasVercel = false;
+  for (const adapter of adapters) {
+    if (adapter.kind === "vercel") {
+      if (!hasVercel) {
+        hasVercel = true;
+        nodes.push({ props: adapter.options, type: "vercel" });
+      }
+    } else {
+      for (const tag of adapterScripts(adapter)) {
+        nodes.push({ ...tag, type: "script" });
+      }
+    }
+  }
+  return nodes;
+};

package/src/analytics/heap.ts

@@ -0,0 +1,65 @@
+import { z } from "zod";
+
+import type { AdapterDescriptor, JsonValue } from "../core/adapter.ts";
+import { adapterDescriptorSchema } from "../core/adapter.ts";
+import type { HeadScript } from "./head.ts";
+import { inlineJson } from "./inline.ts";
+
+/** The options {@link heap} maps itself. */
+export interface HeapNamedOptions {
+  /** App ID (the environment ID), from the project's install settings. */
+  id: string;
+}
+
+/**
+ * Options for {@link heap}: the app ID plus any other `heap.load` config
+ * option, forwarded verbatim (`disableTextCapture`, `secureCookie`, …). JSON
+ * values only.
+ */
+export type HeapOptions = HeapNamedOptions & {
+  [option: string]: JsonValue;
+};
+
+export const heapOptionsSchema = z
+  .object({
+    id: z.string().min(1),
+  })
+  .catchall(z.json());
+
+export type HeapAdapter = AdapterDescriptor<"heap", HeapOptions>;
+
+export const heapAdapterSchema = adapterDescriptorSchema(
+  "heap",
+  heapOptionsSchema
+);
+
+/**
+ * Heap autocapture analytics. The app ID is public — the tag carries it on
+ * every page.
+ */
+export const heap = (options: HeapOptions): HeapAdapter => ({
+  kind: "heap",
+  options,
+  requiredSecrets: [],
+  runtimeDeps: [],
+});
+
+// The install snippet: a `window.heap` queue whose `load` injects the keyed
+// script and stubs the API until it arrives.
+const HEAP_LOADER =
+  'window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};';
+
+/**
+ * The loader plus `heap.load` with `id` mapped and everything else forwarded
+ * as the config object; the object is left off when there is nothing to pass,
+ * as the install snippet prints it. Heap autocaptures history changes as
+ * pageviews, so client-router navigations need no extra hook.
+ */
+export const heapHead = (options: HeapOptions): HeadScript[] => {
+  const { id, ...config } = options;
+  const load =
+    Object.keys(config).length === 0
+      ? `heap.load(${inlineJson(id)});`
+      : `heap.load(${inlineJson(id)},${inlineJson(config)});`;
+  return [{ attributes: {}, content: `${HEAP_LOADER}${load}` }];
+};

package/src/analytics/hightouch.ts

@@ -0,0 +1,77 @@
+import { z } from "zod";
+
+import type { AdapterDescriptor, JsonValue } from "../core/adapter.ts";
+import { adapterDescriptorSchema } from "../core/adapter.ts";
+import type { HeadScript } from "./head.ts";
+import { inlineJson, spaPageviews } from "./inline.ts";
+
+/** The events API host `hightouch()` uses when `host` is unset. */
+export const HIGHTOUCH_DEFAULT_HOST = "us-east-1.hightouch-events.com";
+
+/** The options {@link hightouch} maps itself. */
+export interface HightouchNamedOptions {
+  /** Events API host, without a scheme. Defaults to the US East region. */
+  host?: string;
+  /** Write key of the event source. */
+  key: string;
+}
+
+/**
+ * Options for {@link hightouch}: the named options plus any other
+ * `htevents.load` option, forwarded verbatim. JSON values only.
+ */
+export type HightouchOptions = HightouchNamedOptions & {
+  [option: string]: JsonValue;
+};
+
+export const hightouchOptionsSchema = z
+  .object({
+    host: z.string().min(1).optional(),
+    key: z.string().min(1),
+  })
+  .catchall(z.json());
+
+export type HightouchAdapter = AdapterDescriptor<"hightouch", HightouchOptions>;
+
+export const hightouchAdapterSchema = adapterDescriptorSchema(
+  "hightouch",
+  hightouchOptionsSchema
+);
+
+/**
+ * Hightouch Events. The write key is meant for the browser — it identifies
+ * the event source the SDK reports to.
+ */
+export const hightouch = (options: HightouchOptions): HightouchAdapter => ({
+  kind: "hightouch",
+  options,
+  requiredSecrets: [],
+  runtimeDeps: [],
+});
+
+// The install snippet: a `window.htevents` queue whose `load` injects the SDK.
+const HIGHTOUCH_LOADER =
+  '!function(){var e=window.htevents=window.htevents||[];if(!e.initialize)if(e.invoked)window.console&&console.error&&console.error("Hightouch snippet included twice.");else{e.invoked=!0,e.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"],e.factory=function(t){return function(){var r=Array.prototype.slice.call(arguments);return r.unshift(t),e.push(r),e}};for(var t=0;t<e.methods.length;t++){var r=e.methods[t];e[r]=e.factory(r)}e.load=function(t,r){var n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://cdn.hightouch-events.com/browser/release/v1-latest/events.min.js";var o=document.getElementsByTagName("script")[0];o.parentNode.insertBefore(n,o),e._loadOptions=r,e._writeKey=t},e.SNIPPET_VERSION="0.0.1",';
+
+// The SDK sends one `page()` per real page load (the snippet's own call), so
+// client-router swaps are sent here.
+const HIGHTOUCH_SPA_PAGEVIEWS = spaPageviews(
+  "__blumeHightouchPath",
+  "htevents.page();"
+);
+
+/**
+ * The loader with `key` mapped to the write key and `host` to `apiHost`;
+ * everything else lands in the load options verbatim, after the mapped host
+ * so a raw `apiHost` still wins.
+ */
+export const hightouchHead = (options: HightouchOptions): HeadScript[] => {
+  const { host, key, ...load } = options;
+  const loadOptions = { apiHost: host ?? HIGHTOUCH_DEFAULT_HOST, ...load };
+  return [
+    {
+      attributes: {},
+      content: `${HIGHTOUCH_LOADER}e.load(${inlineJson(key)},${inlineJson(loadOptions)}),e.page()}}();${HIGHTOUCH_SPA_PAGEVIEWS}`,
+    },
+  ];
+};