@cartbase/storefront 0.6.0 → 0.8.0

package/src/tracking/attribution.ts

@@ -1,5 +1,16 @@
 "use client"
 
+import {
+  KNOWN_VISITOR_KEY,
+  LEGACY_KNOWN_VISITOR_KEY,
+  LEGACY_UTM_FIRST_COOKIE,
+  LEGACY_UTM_LAST_COOKIE,
+  LEGACY_VISITOR_COOKIE,
+  UTM_FIRST_COOKIE,
+  UTM_LAST_COOKIE,
+  VISITOR_COOKIE,
+} from "../lib/cookie-names"
+
 /**
  * Self-managed Facebook attribution helpers.
  *
@@ -29,10 +40,13 @@
 
 const FBP_COOKIE = "_fbp"
 const FBC_COOKIE = "_fbc"
-const ANON_ID_COOKIE = "_1c_anon"
-const KNOWN_VISITOR_LS = "_1c_visitor_v1"
-const UTM_FIRST_COOKIE = "_1c_utm_first"
-const UTM_LAST_COOKIE = "_1c_utm_last"
+
+// The visitor id and the UTM tuples moved into THE cookie registry
+// (cookie-names.ts) with the platform prefix, 2026-09-04. Every read
+// prefers the new name and falls back to the pre-rename one, so a visitor
+// who arrived earlier keeps their identity instead of being counted as new.
+const ANON_ID_COOKIE = VISITOR_COOKIE
+const KNOWN_VISITOR_LS = KNOWN_VISITOR_KEY
 
 /** _fbp / _fbc TTL per Meta spec — 90 days first-party. */
 const FB_COOKIE_TTL_DAYS = 90
@@ -157,7 +171,7 @@ export function getOrCreateFbc(): string | undefined {
  * it to cart.metadata for the order.placed subscriber.
  */
 export function getOrCreateAnonId(): string | undefined {
-  const existing = getCookie(ANON_ID_COOKIE)
+  const existing = getCookie(ANON_ID_COOKIE) ?? getCookie(LEGACY_VISITOR_COOKIE)
   if (existing) return existing
   if (!isBrowser()) return undefined
 
@@ -192,7 +206,9 @@ export function getKnownVisitor(): KnownVisitor {
   let stored: KnownVisitor = {}
   if (isBrowser()) {
     try {
-      const raw = window.localStorage.getItem(KNOWN_VISITOR_LS)
+      const raw =
+        window.localStorage.getItem(KNOWN_VISITOR_LS) ??
+        window.localStorage.getItem(LEGACY_KNOWN_VISITOR_KEY)
       if (raw) stored = JSON.parse(raw) as KnownVisitor
     } catch {
       // localStorage unavailable / parse error — return empty
@@ -265,6 +281,38 @@ export function normalisePhoneForHash(raw: string): string {
   return digits
 }
 
+/**
+ * Normalise a phone for GOOGLE, which is not the same string as Meta's.
+ *
+ * Google requires E.164 WITH the leading plus: "must be 11 to 15 digits
+ * including a plus sign (+) prefix and country code with no dashes,
+ * parentheses, or spaces"
+ * (https://support.google.com/google-ads/answer/13258081). Meta requires
+ * digits only. Two different strings, two different digests, and a shared
+ * normaliser can only ever serve one of them.
+ *
+ * This existing as a separate function is the fix for a real defect:
+ * `setEnhancedConversions` fed Meta's digits-only value into Google's
+ * `sha256_phone_number`, which matched nobody, for as long as it shipped.
+ * It fails silently — gtag accepts the hash, no error is raised anywhere,
+ * and the only symptom is enhanced conversions recovering fewer
+ * conversions than they should. Whoever refactors these two into one
+ * "shared" helper will recreate it.
+ *
+ * Returns undefined when the result could not be a real E.164 number:
+ * hashing a malformed number is strictly worse than sending nothing,
+ * because it cannot match AND it occupies the field Google would
+ * otherwise fall back from.
+ */
+export function normalisePhoneForGoogleHash(raw: string): string | undefined {
+  const digits = normalisePhoneForHash(raw)
+  if (!digits) return undefined
+  // Google's stated range, country code included. A Bulgarian mobile is
+  // 12 digits (359 plus 9 national).
+  if (digits.length < 11 || digits.length > 15) return undefined
+  return "+" + digits
+}
+
 // ── UTM attribution capture ──────────────────────────────────────────
 //
 // Captures `utm_source / utm_medium / utm_campaign / utm_term /
@@ -341,8 +389,8 @@ function readUtmsFromSearch(search: string): CapturedUtms | null {
 /** Read + parse one of the two UTM cookies. Defensive — malformed JSON
  *  or shape drift returns null so the caller treats it as missing
  *  instead of crashing. */
-function readUtmsCookie(name: string): CapturedUtms | null {
-  const raw = getCookie(name)
+function readUtmsCookie(name: string, legacy?: string): CapturedUtms | null {
+  const raw = getCookie(name) ?? (legacy ? getCookie(legacy) : undefined)
   if (!raw) return null
   try {
     const parsed = JSON.parse(decodeURIComponent(raw)) as Partial<CapturedUtms>
@@ -388,7 +436,7 @@ export function captureUtmsFromUrl(): void {
   // First-touch: write only when the cookie is currently absent.
   // Re-arriving with a fresh UTM does NOT overwrite the original
   // acquisition record — that's the whole point of "first-touch".
-  if (!readUtmsCookie(UTM_FIRST_COOKIE)) {
+  if (!readUtmsCookie(UTM_FIRST_COOKIE, LEGACY_UTM_FIRST_COOKIE)) {
     writeUtmsCookie(UTM_FIRST_COOKIE, utms, UTM_FIRST_TTL_DAYS)
   }
   // Last-touch: always overwrite when the URL carries UTMs. Refreshes
@@ -404,7 +452,7 @@ export function captureUtmsFromUrl(): void {
  * cookies() API) instead — this function is browser-only.
  */
 export function getCapturedFirstTouchUtms(): CapturedUtms | null {
-  return readUtmsCookie(UTM_FIRST_COOKIE)
+  return readUtmsCookie(UTM_FIRST_COOKIE, LEGACY_UTM_FIRST_COOKIE)
 }
 
 /**
@@ -414,5 +462,99 @@ export function getCapturedFirstTouchUtms(): CapturedUtms | null {
  * this is browser-only.
  */
 export function getCapturedLastTouchUtms(): CapturedUtms | null {
-  return readUtmsCookie(UTM_LAST_COOKIE)
+  return readUtmsCookie(UTM_LAST_COOKIE, LEGACY_UTM_LAST_COOKIE)
+}
+
+// ── Ad-click identifiers ─────────────────────────────────────────────
+//
+// Meta's `fbclid` is folded into the `_fbc` cookie above by Meta's own
+// format. TikTok's and Google's click ids have no such carrier, and both
+// platforms need them:
+//
+//   ttclid  appended by TikTok to the landing URL on an ad click.
+//           Without it TikTok cannot tie a conversion back to the click
+//           that caused it, which is the reporting an advertiser checks
+//           first. Forwarded to the Events API as `user.ttclid`.
+//   _ttp    a first-party cookie the TikTok pixel writes ITSELF once
+//           first-party cookies are enabled in pixel settings. We never
+//           write it, only read it; forwarded as `user.ttp`.
+//   gclid   Google's standard click id.
+//   gbraid  iOS app-to-web variant.
+//   wbraid  iOS web-to-web variant.
+//
+// A Google campaign can deliver any one of those three, so capturing
+// gclid alone silently loses iOS traffic — the traffic most likely to be
+// missing a cookie in the first place.
+//
+// Write-once semantics deliberately do NOT apply: a newer click of the
+// same kind overwrites, because the most recent click is what the ad
+// platforms attribute to. What must never happen is a later ORGANIC
+// visit clearing the click that acquired the visitor, and that is why
+// each cookie is only touched when its parameter is actually present.
+
+const TTCLID_COOKIE = "_1c_ttclid"
+const GCLID_COOKIE = "_1c_gclid"
+const GBRAID_COOKIE = "_1c_gbraid"
+const WBRAID_COOKIE = "_1c_wbraid"
+
+/** TikTok's ttclid lifetime follows the CTA window in Attribution
+ *  Manager; Google's conversion window tops out at 90 days. One TTL
+ *  covers both, and each platform applies its own window on top and
+ *  ignores anything older. */
+const CLICK_ID_TTL_DAYS = 90
+
+/** Cookie name → the URL parameter it is captured from. */
+const CLICK_ID_CAPTURE: ReadonlyArray<readonly [string, string]> = [
+  [TTCLID_COOKIE, "ttclid"],
+  [GCLID_COOKIE, "gclid"],
+  [GBRAID_COOKIE, "gbraid"],
+  [WBRAID_COOKIE, "wbraid"],
+]
+
+/**
+ * The cookies the click ids live in, and the flat `order.metadata` keys
+ * the checkout writeback maps them onto. `ttp` is in the list because it
+ * is READ from TikTok's own cookie; it is never written here.
+ */
+export const CLICK_ID_COOKIES = {
+  ttclid: TTCLID_COOKIE,
+  gclid: GCLID_COOKIE,
+  gbraid: GBRAID_COOKIE,
+  wbraid: WBRAID_COOKIE,
+  ttp: "_ttp",
+} as const
+
+/** cookie name → order.metadata key (code truth for the server side:
+ *  `TrackingAttributionMeta` in src/lib/tracking/constants.ts). */
+export const CLICK_ID_METADATA_KEYS: ReadonlyArray<readonly [string, string]> = [
+  [CLICK_ID_COOKIES.ttclid, "tt_ttclid"],
+  [CLICK_ID_COOKIES.ttp, "tt_ttp"],
+  [CLICK_ID_COOKIES.gclid, "google_gclid"],
+  [CLICK_ID_COOKIES.gbraid, "google_gbraid"],
+  [CLICK_ID_COOKIES.wbraid, "google_wbraid"],
+]
+
+/**
+ * Capture every ad-click identifier present on the current URL.
+ *
+ * Idempotent and safe to call on every mount, next to
+ * `captureUtmsFromUrl()`: a URL carrying no click id leaves every
+ * existing cookie untouched.
+ */
+export function captureClickIdsFromUrl(): void {
+  if (!isBrowser()) return
+
+  let params: URLSearchParams
+  try {
+    params = new URLSearchParams(window.location.search)
+  } catch {
+    return
+  }
+
+  for (const [cookieName, param] of CLICK_ID_CAPTURE) {
+    const raw = params.get(param)
+    if (raw && raw.trim().length > 0) {
+      setCookie(cookieName, encodeURIComponent(raw.trim()), CLICK_ID_TTL_DAYS)
+    }
+  }
 }

package/src/tracking/consent.ts

@@ -117,6 +117,20 @@ export function applyConsent(choices: ConsentChoices): void {
   if (typeof w.fbq === "function") {
     w.fbq("consent", choices.ads ? "grant" : "revoke")
   }
+
+  // TikTok. `ttq` registers grantConsent / revokeConsent alongside track
+  // and page, and `setAndDefer` queues them before the SDK is fetched, so
+  // this works whether or not the pixel script has loaded yet.
+  //
+  // The decision is relayed HERE, in the one function every consent door
+  // already goes through (the built-in banner, setConsent for an external
+  // CMP), rather than by watching the cookie from outside. A vendor added
+  // to this list is live everywhere at once; a vendor that has to poll for
+  // the decision is a vendor that will one day miss it.
+  if (w.ttq && typeof w.ttq.grantConsent === "function") {
+    if (choices.ads) w.ttq.grantConsent()
+    else w.ttq.revokeConsent()
+  }
 }
 
 /**

package/src/tracking/events.ts

@@ -0,0 +1,294 @@
+"use client"
+
+import {
+  trackAddToCart,
+  trackInitiateCheckout,
+  trackPurchase,
+  trackViewContent,
+} from "./fbq"
+import {
+  trackGAAddToCart,
+  trackGABeginCheckout,
+  trackGAPurchase,
+  trackGAViewItem,
+} from "./gtag"
+import {
+  trackRybbitAddToCart,
+  trackRybbitBeginCheckout,
+  trackRybbitPurchase,
+  trackRybbitViewItem,
+} from "./rybbit-events"
+import {
+  trackTikTokAddToCart,
+  trackTikTokInitiateCheckout,
+  trackTikTokPurchase,
+  trackTikTokViewContent,
+} from "./ttq"
+import { googleAdsPurchaseSendTo, trackGoogleAdsPurchase } from "./google-ads"
+import type { TrackingConfig } from "./types"
+
+/**
+ * ONE call per commerce moment, every vendor at once.
+ *
+ * The per-vendor helpers beside this file stay exported and stay usable.
+ * This is the door a storefront should reach for anyway, because the
+ * failure these functions prevent is the most common one in tracking and
+ * it is invisible: a store adds a fifth vendor, updates four call sites,
+ * misses the fifth, and nobody notices until an ad account has been
+ * optimising on partial data for a month. We have watched it happen to a
+ * product page whose buy box predated a shared helper: ViewContent and
+ * InitiateCheckout were present, AddToCart was missing from the single
+ * most-used add path in the store.
+ *
+ * With one function per moment, a vendor is added HERE, once, and every
+ * surface that already calls it gains the vendor for free.
+ *
+ * Every helper underneath no-ops when its tag is absent, so passing a
+ * config with only two vendors configured fires exactly those two.
+ *
+ * Identifier discipline, and it is not cosmetic:
+ *   - `productId` is the catalogue key. Meta's content_ids, TikTok's
+ *     content_id and the feed's <g:id> must be the SAME value or the
+ *     event matches no catalogue entry, which costs dynamic ads and
+ *     product-level reporting on both platforms.
+ *   - GA4 is the exception on purpose: its items are keyed by VARIANT,
+ *     because GA4 reports on what was actually bought rather than
+ *     matching an ads catalogue.
+ *   - Purchase dedup keys are derived from `displayId` inside the
+ *     helpers, never passed in, so the browser and the server cannot
+ *     drift apart.
+ */
+
+/** One line, in the shape every vendor is derived from. */
+export type TrackedLine = {
+  /** Catalogue key. Meta + TikTok content ids, and the feed's <g:id>. */
+  productId: string
+  /** What was actually bought. GA4 item_id. */
+  variantId?: string
+  title: string
+  quantity: number
+  /** Unit price, in `currency`. */
+  price: number
+}
+
+export type TrackedOrder = {
+  /** THE dedup key across every vendor and both sides of the wire. */
+  displayId: string | number
+  currency: string
+  /** Order total actually collected. */
+  value: number
+  tax?: number
+  shipping?: number
+  coupon?: string
+  lines: TrackedLine[]
+  /**
+   * First order for this buyer. Computed server-side by the order.placed
+   * forwarder and persisted on the order as `metadata.customer_type`;
+   * read it from there rather than deriving it in the browser, so the two
+   * sides tell the ad platforms the same thing. Omit when unknown.
+   */
+  customerType?: "new" | "returning"
+}
+
+const gaItems = (lines: TrackedLine[], currency: string) =>
+  lines.map((line, index) => ({
+    item_id: line.variantId || line.productId,
+    item_name: line.title,
+    quantity: line.quantity,
+    price: line.price,
+    currency,
+    index,
+  }))
+
+const metaContents = (lines: TrackedLine[]) =>
+  lines.map((line) => ({
+    id: line.productId,
+    quantity: line.quantity,
+    item_price: line.price,
+  }))
+
+const tiktokContents = (lines: TrackedLine[]) =>
+  lines.map((line) => ({
+    content_id: line.productId,
+    content_name: line.title,
+    quantity: line.quantity,
+    price: line.price,
+  }))
+
+const unitCount = (lines: TrackedLine[]) =>
+  lines.reduce((sum, line) => sum + (Number(line.quantity) || 0), 0)
+
+/** Product page view. */
+export function trackProductView(input: {
+  line: TrackedLine
+  currency: string
+  value: number
+}): void {
+  const { line, currency, value } = input
+  trackViewContent({
+    content_ids: [line.productId],
+    content_type: "product",
+    currency,
+    value,
+  })
+  trackTikTokViewContent({
+    contentId: line.productId,
+    contentName: line.title,
+    currency,
+    value,
+  })
+  trackGAViewItem({ currency, value, items: gaItems([line], currency) })
+  trackRybbitViewItem({
+    item_id: line.variantId || line.productId,
+    item_name: line.title,
+    currency,
+    value,
+  })
+}
+
+/** Add to cart, from ANY surface — listing card, buy box, upsell rail. */
+export function trackCartAdd(input: {
+  line: TrackedLine
+  currency: string
+  value: number
+}): void {
+  const { line, currency, value } = input
+  trackAddToCart({
+    content_ids: [line.productId],
+    content_type: "product",
+    currency,
+    value,
+    contents: metaContents([line]),
+  })
+  trackTikTokAddToCart({
+    contentId: line.productId,
+    contentName: line.title,
+    quantity: line.quantity,
+    price: line.price,
+    currency,
+    value,
+  })
+  trackGAAddToCart({ currency, value, items: gaItems([line], currency) })
+  trackRybbitAddToCart({
+    item_id: line.variantId || line.productId,
+    item_name: line.title,
+    quantity: line.quantity,
+    currency,
+    value,
+  })
+}
+
+/** Checkout started. */
+export function trackCheckoutStart(input: {
+  lines: TrackedLine[]
+  currency: string
+  value: number
+  coupon?: string
+}): void {
+  const { lines, currency, value, coupon } = input
+  trackInitiateCheckout({
+    content_ids: lines.map((line) => line.productId),
+    content_type: "product",
+    currency,
+    value,
+    num_items: unitCount(lines),
+    contents: metaContents(lines),
+  })
+  trackTikTokInitiateCheckout({
+    contents: tiktokContents(lines),
+    currency,
+    value,
+  })
+  trackGABeginCheckout({
+    currency,
+    value,
+    items: gaItems(lines, currency),
+    ...(coupon ? { coupon } : {}),
+  })
+  trackRybbitBeginCheckout({
+    item_ids: lines.map((line) => line.variantId || line.productId),
+    num_items: unitCount(lines),
+    currency,
+    value,
+  })
+}
+
+/**
+ * Order confirmed — the money event.
+ *
+ * Google Ads only fires when the store configured BOTH the account id
+ * and the purchase conversion label, which is why the config is a
+ * parameter here: `googleAdsPurchaseSendTo` returns null otherwise, and a
+ * malformed `send_to` is accepted by Google and silently dropped.
+ *
+ * Everything here is deduped against the server: Meta on
+ * `purchase_<displayId>`, TikTok on `tt_purchase_<displayId>`, GA4 and
+ * Google Ads on the transaction id, which is `displayId` itself.
+ */
+export function trackOrderPurchase(
+  order: TrackedOrder,
+  config?: TrackingConfig
+): void {
+  const {
+    displayId,
+    currency,
+    value,
+    lines,
+    tax,
+    shipping,
+    coupon,
+    customerType,
+  } = order
+  const transactionId = String(displayId)
+
+  trackPurchase(
+    {
+      content_ids: lines.map((line) => line.productId),
+      content_type: "product",
+      currency,
+      value,
+      num_items: unitCount(lines),
+      contents: metaContents(lines),
+    },
+    displayId
+  )
+
+  trackTikTokPurchase({
+    contents: tiktokContents(lines),
+    currency,
+    value,
+    displayId,
+    customerType,
+  })
+
+  trackGAPurchase({
+    transaction_id: transactionId,
+    currency,
+    value,
+    items: gaItems(lines, currency),
+    ...(typeof tax === "number" ? { tax } : {}),
+    ...(typeof shipping === "number" ? { shipping } : {}),
+    ...(coupon ? { coupon } : {}),
+  })
+
+  trackRybbitPurchase({
+    transaction_id: transactionId,
+    item_ids: lines.map((line) => line.variantId || line.productId),
+    num_items: unitCount(lines),
+    currency,
+    value,
+  })
+
+  const sendTo = config ? googleAdsPurchaseSendTo(config) : null
+  if (sendTo) {
+    trackGoogleAdsPurchase({
+      sendTo,
+      value,
+      currency,
+      transactionId,
+      ...(customerType
+        ? { newCustomer: customerType === "new" }
+        : {}),
+    })
+  }
+}

package/src/tracking/ga4.tsx

@@ -1,49 +1,93 @@
-"use client"
-
-import Script from "next/script"
-
-/**
- * GA4 — Google Analytics 4 base script loader.
- *
- * Loads `https://www.googletagmanager.com/gtag/js?id=<measurementId>` via
- * Next.js `<Script strategy="afterInteractive">` and initialises gtag with
- * the given measurement ID. Once loaded, gtag automatically sets the
- * `_ga` and `_ga_<MEASUREMENT_ID>` first-party cookies, which the server
- * action `getTrackingAttribution` then reads on cart completion to
- * forward `ga_client_id` / `ga_session_id` into the order metadata for
- * GA4 Measurement Protocol Purchase events.
- *
- * Renders nothing when `measurementId` is falsy — every consuming layout
- * can call this unconditionally; the script is only injected when the
- * admin has configured GA4.
- *
- * `send_page_view: true` (default) — initial page_view fires automatically
- * on script load. Subsequent SPA route changes are NOT auto-tracked by
- * gtag; storefronts that need per-route page_views should call
- * `gtag('event', 'page_view', { page_path })` from a route-change effect.
- */
-export function GA4({ measurementId }: { measurementId?: string }) {
-  if (!measurementId) return null
-
-  const initSnippet = `
-window.dataLayer = window.dataLayer || [];
-function gtag(){dataLayer.push(arguments);}
-gtag('js', new Date());
-gtag('config', '${measurementId}');
-`.trim()
-
-  return (
-    <>
-      <Script
-        id="ga4-loader"
-        strategy="afterInteractive"
-        src={`https://www.googletagmanager.com/gtag/js?id=${measurementId}`}
-      />
-      <Script
-        id="ga4-init"
-        strategy="afterInteractive"
-        dangerouslySetInnerHTML={{ __html: initSnippet }}
-      />
-    </>
-  )
-}
+"use client"
+
+import Script from "next/script"
+
+import { jsStringLiteral, urlParam } from "./inline-script"
+
+/**
+ * GoogleTag — THE single Google tag for a storefront.
+ *
+ * Loads `https://www.googletagmanager.com/gtag/js` once and issues one
+ * `config` per destination: GA4 for analytics, Google Ads for conversions
+ * and remarketing audiences.
+ *
+ * ONE loader, TWO configs, and that is Google's own instruction: when a
+ * page already carries a Google tag you add the Ads conversion ID with an
+ * additional `config` command, never a second `<script src>`
+ * (https://support.google.com/google-ads/answer/2476688). Every agency
+ * onboarding email pastes a second loader anyway, contradicting the line
+ * printed above it in the same email. Take the instruction, not the
+ * snippet.
+ *
+ * The Ads `config` is also what powers Google Ads remarketing audiences.
+ * It is not optional for an account that intends to retarget, and linking
+ * GA4 to Ads does not substitute for it.
+ *
+ * Consent needs nothing here: <ConsentInit> sets the Consent Mode v2
+ * defaults synchronously ahead of this loader, and because the Ads
+ * destination rides the same gtag instance, `ad_storage` /
+ * `ad_user_data` / `ad_personalization` gate it with no extra wiring.
+ * That is the direct payoff of refusing the second script tag.
+ *
+ * Renders nothing when neither id is configured, so a layout can mount it
+ * unconditionally.
+ *
+ * `send_page_view` stays at its default, so the initial page_view fires
+ * on load. SPA route changes are NOT auto-tracked by gtag; a storefront
+ * that wants per-route page_views calls `gtag('event', 'page_view', …)`
+ * from a route-change effect. Take care doing that: a `router.replace`
+ * that only rewrites a query parameter reads as a navigation to gtag, to
+ * the Meta pixel and to TikTok alike, and every vendor then counts two
+ * views of one page.
+ */
+export function GoogleTag({
+  measurementId,
+  adsConversionId,
+}: {
+  /** GA4 destination, e.g. "G-8BLJ6CW7VX". */
+  measurementId?: string
+  /** Google Ads destination, e.g. "AW-18150814603". */
+  adsConversionId?: string
+}) {
+  const destinations = [measurementId, adsConversionId].filter(
+    (id): id is string => Boolean(id && id.trim())
+  )
+  if (destinations.length === 0) return null
+
+  // Which id lands in the loader URL is cosmetic — gtag treats every
+  // `config` equally once loaded. GA4 leads when present so the URL stays
+  // what it has always been for stores that only run analytics.
+  const loaderId = destinations[0]
+
+  const initSnippet = `
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+${destinations.map((id) => `gtag('config', ${jsStringLiteral(id)});`).join("\n")}
+`.trim()
+
+  return (
+    <>
+      <Script
+        id="google-tag-loader"
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${urlParam(loaderId)}`}
+      />
+      <Script
+        id="google-tag-init"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{ __html: initSnippet }}
+      />
+    </>
+  )
+}
+
+/**
+ * GA4 — the analytics-only door, kept because storefronts mount it by
+ * this name. It is <GoogleTag> with one destination; a store that also
+ * runs Google Ads should mount <GoogleTag> with both ids instead, since
+ * two loaders on one page is the thing Google tells you not to do.
+ */
+export function GA4({ measurementId }: { measurementId?: string }) {
+  return <GoogleTag measurementId={measurementId} />
+}