@shware/analytics 8.3.0 → 8.6.0

package/README.md

@@ -46,6 +46,15 @@ function Button() {
 }
 ```
 
+## Page views
+
+`page_view` fires on a path or query change, never on a hash change — GA4's enhanced measurement,
+Next.js's `usePathname` + `useSearchParams` pattern and PostHog's `history_change` all draw the
+line there (`?page=2` is another page to a funnel, `#faq` is not). Tracking parameters (`utm_*`
+and the ad click ids) are ignored when comparing, so a landing page that cleans them out of its
+URL with `replaceState` does not count itself twice. `page_load_id` rotates on exactly the same
+changes. The framework `Analytics` components wire this up.
+
 ## Backend API
 
 - /analytics/tracks: track events
@@ -130,28 +139,30 @@ Microsoft recommends the UET tag and the Conversions API (CAPI) together. The tw
 (`tagId`, `eventName`, `eventId`): the browser sends the internal event name as the UET action with
 the event id as `event_id`, the server sends the same name as `eventName` with the same id.
 
-Browser — install the UET snippet from the tag's "Set up tagging" step, then:
+Browser — pass the tag id and the customer id to the framework `Analytics` component
+(`<Analytics uetTagId="97267979" uetCustomerId="255004870" />` from `@shware/analytics/tanstack`,
+`/next` or `/react-router`). It inlines Microsoft's snippet with `enableAutoSpaTracking: true` (the
+tag owns page loads, `sendUETEvent` drops `page_view` and forwards everything else) and fires the
+Conversions API's ID Sync pixel once per visit for the SDK visitor — anonymous visitors included,
+they are who remarketing audiences are built from. Then:
 
 ```ts
-import {
-  sendUETEvent,
-  setUETUser,
-  setUETConsent,
-  sendUETIdSync,
-} from '@shware/analytics/third-parties';
+import { sendUETEvent, setUETUser, setUETConsent } from '@shware/analytics/third-parties';
 
 setupAnalytics({
   thirdPartyTrackers: [sendUETEvent],
   // Enhanced conversions: the tag hashes the email/phone itself before they leave the page.
-  thirdPartyUserSetters: [setUETUser()],
+  thirdPartyUserSetters: [setUETUser],
 });
 // Consent mode (EEA/UK/CH): push `default` before the tag loads, `update` on the visitor's choice.
-setUETConsent('default', { ad_storage: 'denied' });
-// ID Sync, once per session: ties the visitor id CAPI sends as `anonymousId` to Microsoft's ids.
-// Required for remarketing built from CAPI events, recommended for measurement.
-sendUETIdSync({ customerId: 255004870, visitorId: (await getVisitor()).id });
+setUETConsent('default', { ad_storage: 'denied', wait_for_update: 2000 });
 ```
 
+ID Sync ties the visitor id CAPI receives as `anonymousId` to Microsoft's ids — required for
+remarketing built from CAPI events, recommended for measurement. `setUETUser` re-syncs on sign-in
+with the user id hashed into `UID` (the same SHA-256 the server sends as `externalId`). Outside the
+`Analytics` components, `configureUET({ customerId })` + `syncUETVisitor()` do the same.
+
 Server — the token comes from the UET tag's "Use Conversions API" step (or the Campaign Management
 API's `UetTagAuthKey/Query`; an account whose tag setup lacks that option has to ask Microsoft
 Advertising support), `tagId` is the UET tag id:
@@ -180,9 +191,10 @@ await sendMicrosoftEvents(process.env.MS_ADS_CAPI_TOKEN, 97267979, events, userD
 - em / ph: SHA-256 of the normalized email (dots and `+alias` stripped from the user part for every
   domain, lowercase) and of the E.164 phone.
 - `page_view` events are dropped by default (the tag already reports every page load); pass
-  `pageLoads: true` for a CAPI-only site to send them as `pageLoad` events. Not yet modelled in
-  that mode: `pageLoadId` (the id that links a `custom` event to the page load it happened on) and
-  the revenue-only `custom` event a destination-URL goal with variable revenue needs alongside its
-  `pageLoad`. With the tag on the page neither applies — the tag reports page loads itself.
+  `pageLoads: true` for a CAPI-only site to send them as `pageLoad` events, each `custom` event
+  then carrying the `pageLoadId` of the page load it happened on (the `page_load_id` tag, one
+  v4 UUID per page load). Not yet modelled in that mode: the revenue-only `custom` event a
+  destination-URL goal with variable revenue needs alongside its `pageLoad`. With the tag on the
+  page neither applies — the tag reports page loads itself.
 
 - [Click IDs](https://learn.microsoft.com/en-us/linkedin/marketing/conversions/enabling-first-party-cookies?view=li-lms-2025-10&source=recommendations): get li_fat_id from url params and cookie

package/dist/hooks/use-uet-id-sync.cjs

@@ -0,0 +1,19 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_third_parties_microsoft_uet = require("../third-parties/microsoft-uet.cjs");
+let react = require("react");
+//#region src/hooks/use-uet-id-sync.ts
+/**
+* Microsoft Advertising ID Sync from the framework `Analytics` components: record the customer
+* id for `setUETUser` and sync the visitor once per mount — the first page view of the visit,
+* which is where Microsoft wants it. No-op without a customer id.
+*/
+function useUETIdSync(customerId) {
+	(0, react.useEffect)(() => {
+		require_third_parties_microsoft_uet.configureUET({ customerId });
+		if (customerId !== void 0) require_third_parties_microsoft_uet.syncUETVisitor();
+	}, [customerId]);
+}
+//#endregion
+exports.useUETIdSync = useUETIdSync;
+
+//# sourceMappingURL=use-uet-id-sync.cjs.map

package/dist/hooks/use-uet-id-sync.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-uet-id-sync.cjs","names":["syncUETVisitor"],"sources":["../../src/hooks/use-uet-id-sync.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { configureUET, syncUETVisitor } from '../third-parties/microsoft-uet';\n\n/**\n * Microsoft Advertising ID Sync from the framework `Analytics` components: record the customer\n * id for `setUETUser` and sync the visitor once per mount — the first page view of the visit,\n * which is where Microsoft wants it. No-op without a customer id.\n */\nexport function useUETIdSync(customerId: string | number | undefined) {\n  useEffect(() => {\n    configureUET({ customerId });\n    if (customerId !== undefined) void syncUETVisitor();\n  }, [customerId]);\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgB,aAAa,YAAyC;CACpE,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,oCAAA,aAAa,EAAE,WAAW,CAAC;EAC3B,IAAI,eAAe,KAAA,GAAW,oCAAKA,eAAe;CACpD,GAAG,CAAC,UAAU,CAAC;AACjB"}

package/dist/hooks/use-uet-id-sync.d.cts

@@ -0,0 +1,10 @@
+//#region src/hooks/use-uet-id-sync.d.ts
+/**
+ * Microsoft Advertising ID Sync from the framework `Analytics` components: record the customer
+ * id for `setUETUser` and sync the visitor once per mount — the first page view of the visit,
+ * which is where Microsoft wants it. No-op without a customer id.
+ */
+declare function useUETIdSync(customerId: string | number | undefined): void;
+//#endregion
+export { useUETIdSync };
+//# sourceMappingURL=use-uet-id-sync.d.cts.map

package/dist/hooks/use-uet-id-sync.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-uet-id-sync.d.cts","names":[],"sources":["../../src/hooks/use-uet-id-sync.ts"],"mappings":";;;;;;iBAQgB,aAAa"}

package/dist/hooks/use-uet-id-sync.d.mts

@@ -0,0 +1,10 @@
+//#region src/hooks/use-uet-id-sync.d.ts
+/**
+ * Microsoft Advertising ID Sync from the framework `Analytics` components: record the customer
+ * id for `setUETUser` and sync the visitor once per mount — the first page view of the visit,
+ * which is where Microsoft wants it. No-op without a customer id.
+ */
+declare function useUETIdSync(customerId: string | number | undefined): void;
+//#endregion
+export { useUETIdSync };
+//# sourceMappingURL=use-uet-id-sync.d.mts.map

package/dist/hooks/use-uet-id-sync.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-uet-id-sync.d.mts","names":[],"sources":["../../src/hooks/use-uet-id-sync.ts"],"mappings":";;;;;;iBAQgB,aAAa"}

package/dist/hooks/use-uet-id-sync.mjs

@@ -0,0 +1,18 @@
+import { configureUET, syncUETVisitor } from "../third-parties/microsoft-uet.mjs";
+import { useEffect } from "react";
+//#region src/hooks/use-uet-id-sync.ts
+/**
+* Microsoft Advertising ID Sync from the framework `Analytics` components: record the customer
+* id for `setUETUser` and sync the visitor once per mount — the first page view of the visit,
+* which is where Microsoft wants it. No-op without a customer id.
+*/
+function useUETIdSync(customerId) {
+	useEffect(() => {
+		configureUET({ customerId });
+		if (customerId !== void 0) syncUETVisitor();
+	}, [customerId]);
+}
+//#endregion
+export { useUETIdSync };
+
+//# sourceMappingURL=use-uet-id-sync.mjs.map

package/dist/hooks/use-uet-id-sync.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-uet-id-sync.mjs","names":[],"sources":["../../src/hooks/use-uet-id-sync.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { configureUET, syncUETVisitor } from '../third-parties/microsoft-uet';\n\n/**\n * Microsoft Advertising ID Sync from the framework `Analytics` components: record the customer\n * id for `setUETUser` and sync the visitor once per mount — the first page view of the visit,\n * which is where Microsoft wants it. No-op without a customer id.\n */\nexport function useUETIdSync(customerId: string | number | undefined) {\n  useEffect(() => {\n    configureUET({ customerId });\n    if (customerId !== undefined) void syncUETVisitor();\n  }, [customerId]);\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,aAAa,YAAyC;CACpE,gBAAgB;EACd,aAAa,EAAE,WAAW,CAAC;EAC3B,IAAI,eAAe,KAAA,GAAW,eAAoB;CACpD,GAAG,CAAC,UAAU,CAAC;AACjB"}

package/dist/hooks/use-web-analytics.cjs

@@ -4,6 +4,7 @@ const require_constants_storage = require("../constants/storage.cjs");
 const require_setup_session = require("../setup/session.cjs");
 const require_track_index = require("../track/index.cjs");
 const require_hooks_use_previous = require("./use-previous.cjs");
+const require_web_page_key = require("../web/page-key.cjs");
 let _shware_utils = require("@shware/utils");
 let react = require("react");
 //#region src/hooks/use-web-analytics.ts
@@ -51,13 +52,18 @@ function onVisibilityChange() {
 * 1. send session_start event when the page is loaded
 * 2. send scroll event when the user scrolls more than 90% of the page
 * 3. send user_engagement event when the page is hidden or the user is not focused
+* 4. send page_view when the page changes — path or query, see `getPageKey`; `search` is the
+*    router's query string (`?a=1`, or `''`), required so no caller forgets that the query is
+*    part of what makes a page
 */
-function useWebAnalytics(pathname) {
+function useWebAnalytics(pathname, search) {
+	const page = require_web_page_key.getPageKey(pathname, search);
+	const prevPage = require_hooks_use_previous.usePrevious(page);
 	const prevPathname = require_hooks_use_previous.usePrevious(pathname);
 	const hasSendScroll = (0, react.useRef)(false);
 	(0, react.useEffect)(() => {
 		hasSendScroll.current = false;
-	}, [pathname]);
+	}, [page]);
 	(0, react.useEffect)(() => {
 		const session = require_setup_session.getSession();
 		sendFirstVisit(pathname);
@@ -103,10 +109,10 @@ function useWebAnalytics(pathname) {
 			page_title: document.title,
 			page_referrer: document.referrer,
 			page_location: window.location.href,
-			previous_page_path: prevPathname ?? void 0,
-			engagement_time_msec: prevPathname ? require_setup_session.getSession().flush() : void 0
+			previous_page_path: prevPage === void 0 ? void 0 : prevPathname,
+			engagement_time_msec: prevPage === void 0 ? void 0 : require_setup_session.getSession().flush()
 		});
-	}, [pathname]);
+	}, [page]);
 }
 //#endregion
 exports.useWebAnalytics = useWebAnalytics;

package/dist/hooks/use-web-analytics.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-web-analytics.cjs","names":["config","keys","getSession","usePrevious","useRef","throttle"],"sources":["../../src/hooks/use-web-analytics.ts"],"sourcesContent":["import { throttle } from '@shware/utils';\nimport { useEffect, useRef } from 'react';\nimport { keys } from '../constants/storage';\nimport { config } from '../setup/index';\nimport { getSession } from '../setup/session';\nimport { sendBeacon, track } from '../track/index';\nimport { usePrevious } from './use-previous';\n\nfunction sendFirstVisit(pathname: string) {\n  if (config.storage.getItem(keys.first_visit_time)) return;\n  track('first_visit', {\n    page_path: pathname,\n    page_title: document.title,\n    page_referrer: document.referrer,\n    page_location: window.location.href,\n  });\n  config.storage.setItem(keys.first_visit_time, new Date().toISOString());\n}\n\nfunction sendUserEngagement(trigger: 'pagehide' | 'visibilitychange') {\n  const engagement_time_msec = getSession().flush();\n  if (engagement_time_msec <= 0) return;\n  sendBeacon('user_engagement', { engagement_time_msec, trigger });\n}\n\n/** Whether the event was actually sent — a zero-engagement crossing reports nothing. */\nfunction sendScroll(): boolean {\n  const engagement_time_msec = getSession().flush();\n  if (engagement_time_msec <= 0) return false;\n  track('scroll', { engagement_time_msec });\n  return true;\n}\n\nfunction getScrollPercent() {\n  const scrollTop = window.scrollY || document.documentElement.scrollTop;\n  const windowHeight = window.innerHeight;\n  const docHeight = document.documentElement.scrollHeight;\n  if (docHeight === 0) return 0;\n  return ((scrollTop + windowHeight) * 100) / docHeight;\n}\n\nfunction onPageHide() {\n  getSession().pagehide();\n  sendUserEngagement('pagehide');\n}\n\nfunction onVisibilityChange() {\n  getSession().visibilitychange(document.visibilityState);\n  if (document.visibilityState === 'hidden') {\n    sendUserEngagement('visibilitychange');\n  }\n}\n\n/**\n * 1. send session_start event when the page is loaded\n * 2. send scroll event when the user scrolls more than 90% of the page\n * 3. send user_engagement event when the page is hidden or the user is not focused\n */\nexport function useWebAnalytics(pathname: string) {\n  const prevPathname = usePrevious(pathname);\n\n  // reset state when the pathname changes and send scroll when the user navigates to a new page\n  const hasSendScroll = useRef(false);\n  useEffect(() => {\n    hasSendScroll.current = false;\n  }, [pathname]);\n\n  useEffect(() => {\n    // One lookup for the whole effect: `addEventListener` and its matching\n    // `removeEventListener` have to be handed the very same function.\n    const session = getSession();\n\n    sendFirstVisit(pathname);\n\n    const onScroll = throttle(() => {\n      session.updateAccumulator();\n      if (hasSendScroll.current) return;\n      // only send scroll when the user has scrolled more than 90% of the page\n      if (getScrollPercent() < 90) return;\n      // A crossing with no engaged time (a restored scroll position in an unfocused window) must\n      // not consume the page's one shot: the flag is set only once the event is actually sent.\n      hasSendScroll.current = sendScroll();\n    }, 500);\n\n    const checkpointEvents = ['mousedown', 'keydown', 'touchstart'];\n    const checkpoint = throttle(session.updateAccumulator, 1000);\n\n    window.addEventListener('focus', session.focus);\n    window.addEventListener('blur', session.blur);\n    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('pageshow', session.pageshow);\n    window.addEventListener('pagehide', onPageHide);\n    document.addEventListener('visibilitychange', onVisibilityChange);\n\n    // save checkpoint\n    checkpointEvents.forEach((e) => {\n      window.addEventListener(e, checkpoint, { passive: true, capture: true });\n    });\n\n    return () => {\n      window.removeEventListener('focus', session.focus);\n      window.removeEventListener('blur', session.blur);\n      window.removeEventListener('scroll', onScroll);\n      window.removeEventListener('pageshow', session.pageshow);\n      window.removeEventListener('pagehide', onPageHide);\n      document.removeEventListener('visibilitychange', onVisibilityChange);\n      checkpointEvents.forEach((e) => window.removeEventListener(e, checkpoint, { capture: true }));\n\n      onScroll.cancel();\n      checkpoint.cancel();\n    };\n  }, []);\n\n  useEffect(() => {\n    track('page_view', {\n      page_path: pathname,\n      page_title: document.title,\n      page_referrer: document.referrer,\n      page_location: window.location.href,\n      previous_page_path: prevPathname ?? undefined,\n      engagement_time_msec: prevPathname ? getSession().flush() : undefined,\n    });\n  }, [pathname]);\n}\n"],"mappings":";;;;;;;;;AAQA,SAAS,eAAe,UAAkB;CACxC,IAAIA,oBAAAA,OAAO,QAAQ,QAAQC,0BAAAA,KAAK,gBAAgB,GAAG;CACnD,oBAAA,MAAM,eAAe;EACnB,WAAW;EACX,YAAY,SAAS;EACrB,eAAe,SAAS;EACxB,eAAe,OAAO,SAAS;CACjC,CAAC;CACD,oBAAA,OAAO,QAAQ,QAAQA,0BAAAA,KAAK,mCAAkB,IAAI,KAAK,EAAA,CAAE,YAAY,CAAC;AACxE;AAEA,SAAS,mBAAmB,SAA0C;CACpE,MAAM,uBAAuBC,sBAAAA,WAAW,CAAC,CAAC,MAAM;CAChD,IAAI,wBAAwB,GAAG;CAC/B,oBAAA,WAAW,mBAAmB;EAAE;EAAsB;CAAQ,CAAC;AACjE;;AAGA,SAAS,aAAsB;CAC7B,MAAM,uBAAuBA,sBAAAA,WAAW,CAAC,CAAC,MAAM;CAChD,IAAI,wBAAwB,GAAG,OAAO;CACtC,oBAAA,MAAM,UAAU,EAAE,qBAAqB,CAAC;CACxC,OAAO;AACT;AAEA,SAAS,mBAAmB;CAC1B,MAAM,YAAY,OAAO,WAAW,SAAS,gBAAgB;CAC7D,MAAM,eAAe,OAAO;CAC5B,MAAM,YAAY,SAAS,gBAAgB;CAC3C,IAAI,cAAc,GAAG,OAAO;CAC5B,QAAS,YAAY,gBAAgB,MAAO;AAC9C;AAEA,SAAS,aAAa;CACpB,sBAAA,WAAW,CAAC,CAAC,SAAS;CACtB,mBAAmB,UAAU;AAC/B;AAEA,SAAS,qBAAqB;CAC5B,sBAAA,WAAW,CAAC,CAAC,iBAAiB,SAAS,eAAe;CACtD,IAAI,SAAS,oBAAoB,UAC/B,mBAAmB,kBAAkB;AAEzC;;;;;;AAOA,SAAgB,gBAAgB,UAAkB;CAChD,MAAM,eAAeC,2BAAAA,YAAY,QAAQ;CAGzC,MAAM,iBAAA,GAAgBC,MAAAA,OAAAA,CAAO,KAAK;CAClC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,cAAc,UAAU;CAC1B,GAAG,CAAC,QAAQ,CAAC;CAEb,CAAA,GAAA,MAAA,UAAA,OAAgB;EAGd,MAAM,UAAUF,sBAAAA,WAAW;EAE3B,eAAe,QAAQ;EAEvB,MAAM,YAAA,GAAWG,cAAAA,SAAAA,OAAe;GAC9B,QAAQ,kBAAkB;GAC1B,IAAI,cAAc,SAAS;GAE3B,IAAI,iBAAiB,IAAI,IAAI;GAG7B,cAAc,UAAU,WAAW;EACrC,GAAG,GAAG;EAEN,MAAM,mBAAmB;GAAC;GAAa;GAAW;EAAY;EAC9D,MAAM,cAAA,GAAaA,cAAAA,SAAAA,CAAS,QAAQ,mBAAmB,GAAI;EAE3D,OAAO,iBAAiB,SAAS,QAAQ,KAAK;EAC9C,OAAO,iBAAiB,QAAQ,QAAQ,IAAI;EAC5C,OAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;EAC7D,OAAO,iBAAiB,YAAY,QAAQ,QAAQ;EACpD,OAAO,iBAAiB,YAAY,UAAU;EAC9C,SAAS,iBAAiB,oBAAoB,kBAAkB;EAGhE,iBAAiB,SAAS,MAAM;GAC9B,OAAO,iBAAiB,GAAG,YAAY;IAAE,SAAS;IAAM,SAAS;GAAK,CAAC;EACzE,CAAC;EAED,aAAa;GACX,OAAO,oBAAoB,SAAS,QAAQ,KAAK;GACjD,OAAO,oBAAoB,QAAQ,QAAQ,IAAI;GAC/C,OAAO,oBAAoB,UAAU,QAAQ;GAC7C,OAAO,oBAAoB,YAAY,QAAQ,QAAQ;GACvD,OAAO,oBAAoB,YAAY,UAAU;GACjD,SAAS,oBAAoB,oBAAoB,kBAAkB;GACnE,iBAAiB,SAAS,MAAM,OAAO,oBAAoB,GAAG,YAAY,EAAE,SAAS,KAAK,CAAC,CAAC;GAE5F,SAAS,OAAO;GAChB,WAAW,OAAO;EACpB;CACF,GAAG,CAAC,CAAC;CAEL,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,oBAAA,MAAM,aAAa;GACjB,WAAW;GACX,YAAY,SAAS;GACrB,eAAe,SAAS;GACxB,eAAe,OAAO,SAAS;GAC/B,oBAAoB,gBAAgB,KAAA;GACpC,sBAAsB,eAAeH,sBAAAA,WAAW,CAAC,CAAC,MAAM,IAAI,KAAA;EAC9D,CAAC;CACH,GAAG,CAAC,QAAQ,CAAC;AACf"}
+{"version":3,"file":"use-web-analytics.cjs","names":["config","keys","getSession","getPageKey","usePrevious","useRef","throttle"],"sources":["../../src/hooks/use-web-analytics.ts"],"sourcesContent":["import { throttle } from '@shware/utils';\nimport { useEffect, useRef } from 'react';\nimport { keys } from '../constants/storage';\nimport { config } from '../setup/index';\nimport { getSession } from '../setup/session';\nimport { sendBeacon, track } from '../track/index';\nimport { getPageKey } from '../web/page-key';\nimport { usePrevious } from './use-previous';\n\nfunction sendFirstVisit(pathname: string) {\n  if (config.storage.getItem(keys.first_visit_time)) return;\n  track('first_visit', {\n    page_path: pathname,\n    page_title: document.title,\n    page_referrer: document.referrer,\n    page_location: window.location.href,\n  });\n  config.storage.setItem(keys.first_visit_time, new Date().toISOString());\n}\n\nfunction sendUserEngagement(trigger: 'pagehide' | 'visibilitychange') {\n  const engagement_time_msec = getSession().flush();\n  if (engagement_time_msec <= 0) return;\n  sendBeacon('user_engagement', { engagement_time_msec, trigger });\n}\n\n/** Whether the event was actually sent — a zero-engagement crossing reports nothing. */\nfunction sendScroll(): boolean {\n  const engagement_time_msec = getSession().flush();\n  if (engagement_time_msec <= 0) return false;\n  track('scroll', { engagement_time_msec });\n  return true;\n}\n\nfunction getScrollPercent() {\n  const scrollTop = window.scrollY || document.documentElement.scrollTop;\n  const windowHeight = window.innerHeight;\n  const docHeight = document.documentElement.scrollHeight;\n  if (docHeight === 0) return 0;\n  return ((scrollTop + windowHeight) * 100) / docHeight;\n}\n\nfunction onPageHide() {\n  getSession().pagehide();\n  sendUserEngagement('pagehide');\n}\n\nfunction onVisibilityChange() {\n  getSession().visibilitychange(document.visibilityState);\n  if (document.visibilityState === 'hidden') {\n    sendUserEngagement('visibilitychange');\n  }\n}\n\n/**\n * 1. send session_start event when the page is loaded\n * 2. send scroll event when the user scrolls more than 90% of the page\n * 3. send user_engagement event when the page is hidden or the user is not focused\n * 4. send page_view when the page changes — path or query, see `getPageKey`; `search` is the\n *    router's query string (`?a=1`, or `''`), required so no caller forgets that the query is\n *    part of what makes a page\n */\nexport function useWebAnalytics(pathname: string, search: string) {\n  const page = getPageKey(pathname, search);\n  const prevPage = usePrevious(page);\n  const prevPathname = usePrevious(pathname);\n\n  // reset state when the page changes and send scroll when the user navigates to a new page\n  const hasSendScroll = useRef(false);\n  useEffect(() => {\n    hasSendScroll.current = false;\n  }, [page]);\n\n  useEffect(() => {\n    // One lookup for the whole effect: `addEventListener` and its matching\n    // `removeEventListener` have to be handed the very same function.\n    const session = getSession();\n\n    sendFirstVisit(pathname);\n\n    const onScroll = throttle(() => {\n      session.updateAccumulator();\n      if (hasSendScroll.current) return;\n      // only send scroll when the user has scrolled more than 90% of the page\n      if (getScrollPercent() < 90) return;\n      // A crossing with no engaged time (a restored scroll position in an unfocused window) must\n      // not consume the page's one shot: the flag is set only once the event is actually sent.\n      hasSendScroll.current = sendScroll();\n    }, 500);\n\n    const checkpointEvents = ['mousedown', 'keydown', 'touchstart'];\n    const checkpoint = throttle(session.updateAccumulator, 1000);\n\n    window.addEventListener('focus', session.focus);\n    window.addEventListener('blur', session.blur);\n    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('pageshow', session.pageshow);\n    window.addEventListener('pagehide', onPageHide);\n    document.addEventListener('visibilitychange', onVisibilityChange);\n\n    // save checkpoint\n    checkpointEvents.forEach((e) => {\n      window.addEventListener(e, checkpoint, { passive: true, capture: true });\n    });\n\n    return () => {\n      window.removeEventListener('focus', session.focus);\n      window.removeEventListener('blur', session.blur);\n      window.removeEventListener('scroll', onScroll);\n      window.removeEventListener('pageshow', session.pageshow);\n      window.removeEventListener('pagehide', onPageHide);\n      document.removeEventListener('visibilitychange', onVisibilityChange);\n      checkpointEvents.forEach((e) => window.removeEventListener(e, checkpoint, { capture: true }));\n\n      onScroll.cancel();\n      checkpoint.cancel();\n    };\n  }, []);\n\n  useEffect(() => {\n    // `page_path` stays the path — the query is in `page_location` — and the previous page is\n    // named by its path too, so a query-only change reports the same path as its predecessor.\n    track('page_view', {\n      page_path: pathname,\n      page_title: document.title,\n      page_referrer: document.referrer,\n      page_location: window.location.href,\n      previous_page_path: prevPage === undefined ? undefined : prevPathname,\n      engagement_time_msec: prevPage === undefined ? undefined : getSession().flush(),\n    });\n  }, [page]);\n}\n"],"mappings":"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"}

package/dist/hooks/use-web-analytics.d.cts

@@ -3,8 +3,11 @@
  * 1. send session_start event when the page is loaded
  * 2. send scroll event when the user scrolls more than 90% of the page
  * 3. send user_engagement event when the page is hidden or the user is not focused
+ * 4. send page_view when the page changes — path or query, see `getPageKey`; `search` is the
+ *    router's query string (`?a=1`, or `''`), required so no caller forgets that the query is
+ *    part of what makes a page
  */
-declare function useWebAnalytics(pathname: string): void;
+declare function useWebAnalytics(pathname: string, search: string): void;
 //#endregion
 export { useWebAnalytics };
 //# sourceMappingURL=use-web-analytics.d.cts.map

package/dist/hooks/use-web-analytics.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"use-web-analytics.d.cts","names":[],"sources":["../../src/hooks/use-web-analytics.ts"],"mappings":";;;;;;iBA0DgB,gBAAgB"}
+{"version":3,"file":"use-web-analytics.d.cts","names":[],"sources":["../../src/hooks/use-web-analytics.ts"],"mappings":";;;;;;;;;iBA8DgB,gBAAgB,kBAAkB"}

package/dist/hooks/use-web-analytics.d.mts

@@ -3,8 +3,11 @@
  * 1. send session_start event when the page is loaded
  * 2. send scroll event when the user scrolls more than 90% of the page
  * 3. send user_engagement event when the page is hidden or the user is not focused
+ * 4. send page_view when the page changes — path or query, see `getPageKey`; `search` is the
+ *    router's query string (`?a=1`, or `''`), required so no caller forgets that the query is
+ *    part of what makes a page
  */
-declare function useWebAnalytics(pathname: string): void;
+declare function useWebAnalytics(pathname: string, search: string): void;
 //#endregion
 export { useWebAnalytics };
 //# sourceMappingURL=use-web-analytics.d.mts.map

package/dist/hooks/use-web-analytics.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"use-web-analytics.d.mts","names":[],"sources":["../../src/hooks/use-web-analytics.ts"],"mappings":";;;;;;iBA0DgB,gBAAgB"}
+{"version":3,"file":"use-web-analytics.d.mts","names":[],"sources":["../../src/hooks/use-web-analytics.ts"],"mappings":";;;;;;;;;iBA8DgB,gBAAgB,kBAAkB"}

package/dist/hooks/use-web-analytics.mjs

@@ -3,6 +3,7 @@ import { keys } from "../constants/storage.mjs";
 import { getSession } from "../setup/session.mjs";
 import { sendBeacon, track } from "../track/index.mjs";
 import { usePrevious } from "./use-previous.mjs";
+import { getPageKey } from "../web/page-key.mjs";
 import { throttle } from "@shware/utils";
 import { useEffect, useRef } from "react";
 //#region src/hooks/use-web-analytics.ts
@@ -50,13 +51,18 @@ function onVisibilityChange() {
 * 1. send session_start event when the page is loaded
 * 2. send scroll event when the user scrolls more than 90% of the page
 * 3. send user_engagement event when the page is hidden or the user is not focused
+* 4. send page_view when the page changes — path or query, see `getPageKey`; `search` is the
+*    router's query string (`?a=1`, or `''`), required so no caller forgets that the query is
+*    part of what makes a page
 */
-function useWebAnalytics(pathname) {
+function useWebAnalytics(pathname, search) {
+	const page = getPageKey(pathname, search);
+	const prevPage = usePrevious(page);
 	const prevPathname = usePrevious(pathname);
 	const hasSendScroll = useRef(false);
 	useEffect(() => {
 		hasSendScroll.current = false;
-	}, [pathname]);
+	}, [page]);
 	useEffect(() => {
 		const session = getSession();
 		sendFirstVisit(pathname);
@@ -102,10 +108,10 @@ function useWebAnalytics(pathname) {
 			page_title: document.title,
 			page_referrer: document.referrer,
 			page_location: window.location.href,
-			previous_page_path: prevPathname ?? void 0,
-			engagement_time_msec: prevPathname ? getSession().flush() : void 0
+			previous_page_path: prevPage === void 0 ? void 0 : prevPathname,
+			engagement_time_msec: prevPage === void 0 ? void 0 : getSession().flush()
 		});
-	}, [pathname]);
+	}, [page]);
 }
 //#endregion
 export { useWebAnalytics };

package/dist/hooks/use-web-analytics.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-web-analytics.mjs","names":[],"sources":["../../src/hooks/use-web-analytics.ts"],"sourcesContent":["import { throttle } from '@shware/utils';\nimport { useEffect, useRef } from 'react';\nimport { keys } from '../constants/storage';\nimport { config } from '../setup/index';\nimport { getSession } from '../setup/session';\nimport { sendBeacon, track } from '../track/index';\nimport { usePrevious } from './use-previous';\n\nfunction sendFirstVisit(pathname: string) {\n  if (config.storage.getItem(keys.first_visit_time)) return;\n  track('first_visit', {\n    page_path: pathname,\n    page_title: document.title,\n    page_referrer: document.referrer,\n    page_location: window.location.href,\n  });\n  config.storage.setItem(keys.first_visit_time, new Date().toISOString());\n}\n\nfunction sendUserEngagement(trigger: 'pagehide' | 'visibilitychange') {\n  const engagement_time_msec = getSession().flush();\n  if (engagement_time_msec <= 0) return;\n  sendBeacon('user_engagement', { engagement_time_msec, trigger });\n}\n\n/** Whether the event was actually sent — a zero-engagement crossing reports nothing. */\nfunction sendScroll(): boolean {\n  const engagement_time_msec = getSession().flush();\n  if (engagement_time_msec <= 0) return false;\n  track('scroll', { engagement_time_msec });\n  return true;\n}\n\nfunction getScrollPercent() {\n  const scrollTop = window.scrollY || document.documentElement.scrollTop;\n  const windowHeight = window.innerHeight;\n  const docHeight = document.documentElement.scrollHeight;\n  if (docHeight === 0) return 0;\n  return ((scrollTop + windowHeight) * 100) / docHeight;\n}\n\nfunction onPageHide() {\n  getSession().pagehide();\n  sendUserEngagement('pagehide');\n}\n\nfunction onVisibilityChange() {\n  getSession().visibilitychange(document.visibilityState);\n  if (document.visibilityState === 'hidden') {\n    sendUserEngagement('visibilitychange');\n  }\n}\n\n/**\n * 1. send session_start event when the page is loaded\n * 2. send scroll event when the user scrolls more than 90% of the page\n * 3. send user_engagement event when the page is hidden or the user is not focused\n */\nexport function useWebAnalytics(pathname: string) {\n  const prevPathname = usePrevious(pathname);\n\n  // reset state when the pathname changes and send scroll when the user navigates to a new page\n  const hasSendScroll = useRef(false);\n  useEffect(() => {\n    hasSendScroll.current = false;\n  }, [pathname]);\n\n  useEffect(() => {\n    // One lookup for the whole effect: `addEventListener` and its matching\n    // `removeEventListener` have to be handed the very same function.\n    const session = getSession();\n\n    sendFirstVisit(pathname);\n\n    const onScroll = throttle(() => {\n      session.updateAccumulator();\n      if (hasSendScroll.current) return;\n      // only send scroll when the user has scrolled more than 90% of the page\n      if (getScrollPercent() < 90) return;\n      // A crossing with no engaged time (a restored scroll position in an unfocused window) must\n      // not consume the page's one shot: the flag is set only once the event is actually sent.\n      hasSendScroll.current = sendScroll();\n    }, 500);\n\n    const checkpointEvents = ['mousedown', 'keydown', 'touchstart'];\n    const checkpoint = throttle(session.updateAccumulator, 1000);\n\n    window.addEventListener('focus', session.focus);\n    window.addEventListener('blur', session.blur);\n    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('pageshow', session.pageshow);\n    window.addEventListener('pagehide', onPageHide);\n    document.addEventListener('visibilitychange', onVisibilityChange);\n\n    // save checkpoint\n    checkpointEvents.forEach((e) => {\n      window.addEventListener(e, checkpoint, { passive: true, capture: true });\n    });\n\n    return () => {\n      window.removeEventListener('focus', session.focus);\n      window.removeEventListener('blur', session.blur);\n      window.removeEventListener('scroll', onScroll);\n      window.removeEventListener('pageshow', session.pageshow);\n      window.removeEventListener('pagehide', onPageHide);\n      document.removeEventListener('visibilitychange', onVisibilityChange);\n      checkpointEvents.forEach((e) => window.removeEventListener(e, checkpoint, { capture: true }));\n\n      onScroll.cancel();\n      checkpoint.cancel();\n    };\n  }, []);\n\n  useEffect(() => {\n    track('page_view', {\n      page_path: pathname,\n      page_title: document.title,\n      page_referrer: document.referrer,\n      page_location: window.location.href,\n      previous_page_path: prevPathname ?? undefined,\n      engagement_time_msec: prevPathname ? getSession().flush() : undefined,\n    });\n  }, [pathname]);\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-web-analytics.mjs","names":[],"sources":["../../src/hooks/use-web-analytics.ts"],"sourcesContent":["import { throttle } from '@shware/utils';\nimport { useEffect, useRef } from 'react';\nimport { keys } from '../constants/storage';\nimport { config } from '../setup/index';\nimport { getSession } from '../setup/session';\nimport { sendBeacon, track } from '../track/index';\nimport { getPageKey } from '../web/page-key';\nimport { usePrevious } from './use-previous';\n\nfunction sendFirstVisit(pathname: string) {\n  if (config.storage.getItem(keys.first_visit_time)) return;\n  track('first_visit', {\n    page_path: pathname,\n    page_title: document.title,\n    page_referrer: document.referrer,\n    page_location: window.location.href,\n  });\n  config.storage.setItem(keys.first_visit_time, new Date().toISOString());\n}\n\nfunction sendUserEngagement(trigger: 'pagehide' | 'visibilitychange') {\n  const engagement_time_msec = getSession().flush();\n  if (engagement_time_msec <= 0) return;\n  sendBeacon('user_engagement', { engagement_time_msec, trigger });\n}\n\n/** Whether the event was actually sent — a zero-engagement crossing reports nothing. */\nfunction sendScroll(): boolean {\n  const engagement_time_msec = getSession().flush();\n  if (engagement_time_msec <= 0) return false;\n  track('scroll', { engagement_time_msec });\n  return true;\n}\n\nfunction getScrollPercent() {\n  const scrollTop = window.scrollY || document.documentElement.scrollTop;\n  const windowHeight = window.innerHeight;\n  const docHeight = document.documentElement.scrollHeight;\n  if (docHeight === 0) return 0;\n  return ((scrollTop + windowHeight) * 100) / docHeight;\n}\n\nfunction onPageHide() {\n  getSession().pagehide();\n  sendUserEngagement('pagehide');\n}\n\nfunction onVisibilityChange() {\n  getSession().visibilitychange(document.visibilityState);\n  if (document.visibilityState === 'hidden') {\n    sendUserEngagement('visibilitychange');\n  }\n}\n\n/**\n * 1. send session_start event when the page is loaded\n * 2. send scroll event when the user scrolls more than 90% of the page\n * 3. send user_engagement event when the page is hidden or the user is not focused\n * 4. send page_view when the page changes — path or query, see `getPageKey`; `search` is the\n *    router's query string (`?a=1`, or `''`), required so no caller forgets that the query is\n *    part of what makes a page\n */\nexport function useWebAnalytics(pathname: string, search: string) {\n  const page = getPageKey(pathname, search);\n  const prevPage = usePrevious(page);\n  const prevPathname = usePrevious(pathname);\n\n  // reset state when the page changes and send scroll when the user navigates to a new page\n  const hasSendScroll = useRef(false);\n  useEffect(() => {\n    hasSendScroll.current = false;\n  }, [page]);\n\n  useEffect(() => {\n    // One lookup for the whole effect: `addEventListener` and its matching\n    // `removeEventListener` have to be handed the very same function.\n    const session = getSession();\n\n    sendFirstVisit(pathname);\n\n    const onScroll = throttle(() => {\n      session.updateAccumulator();\n      if (hasSendScroll.current) return;\n      // only send scroll when the user has scrolled more than 90% of the page\n      if (getScrollPercent() < 90) return;\n      // A crossing with no engaged time (a restored scroll position in an unfocused window) must\n      // not consume the page's one shot: the flag is set only once the event is actually sent.\n      hasSendScroll.current = sendScroll();\n    }, 500);\n\n    const checkpointEvents = ['mousedown', 'keydown', 'touchstart'];\n    const checkpoint = throttle(session.updateAccumulator, 1000);\n\n    window.addEventListener('focus', session.focus);\n    window.addEventListener('blur', session.blur);\n    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('pageshow', session.pageshow);\n    window.addEventListener('pagehide', onPageHide);\n    document.addEventListener('visibilitychange', onVisibilityChange);\n\n    // save checkpoint\n    checkpointEvents.forEach((e) => {\n      window.addEventListener(e, checkpoint, { passive: true, capture: true });\n    });\n\n    return () => {\n      window.removeEventListener('focus', session.focus);\n      window.removeEventListener('blur', session.blur);\n      window.removeEventListener('scroll', onScroll);\n      window.removeEventListener('pageshow', session.pageshow);\n      window.removeEventListener('pagehide', onPageHide);\n      document.removeEventListener('visibilitychange', onVisibilityChange);\n      checkpointEvents.forEach((e) => window.removeEventListener(e, checkpoint, { capture: true }));\n\n      onScroll.cancel();\n      checkpoint.cancel();\n    };\n  }, []);\n\n  useEffect(() => {\n    // `page_path` stays the path — the query is in `page_location` — and the previous page is\n    // named by its path too, so a query-only change reports the same path as its predecessor.\n    track('page_view', {\n      page_path: pathname,\n      page_title: document.title,\n      page_referrer: document.referrer,\n      page_location: window.location.href,\n      previous_page_path: prevPage === undefined ? undefined : prevPathname,\n      engagement_time_msec: prevPage === undefined ? undefined : getSession().flush(),\n    });\n  }, [page]);\n}\n"],"mappings":"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"}

package/dist/next/index.cjs

@@ -3,17 +3,29 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
 const require_track_index = require("../track/index.cjs");
 const require_hooks_use_outbound_click_analytics = require("../hooks/use-outbound-click-analytics.cjs");
+const require_hooks_use_uet_id_sync = require("../hooks/use-uet-id-sync.cjs");
 const require_hooks_use_web_analytics = require("../hooks/use-web-analytics.cjs");
+let react = require("react");
 let next_navigation_js = require("next/navigation.js");
 let next_script_js = require("next/script.js");
 next_script_js = require_runtime.__toESM(next_script_js, 1);
 let next_web_vitals_js = require("next/web-vitals.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/next/index.tsx
-function Analytics({ gaId, gaSrc, nonce, debugMode, metaPixelId, hotjarId, redditPixelId, linkedInPartnerId, facebookAppId, reportWebVitals = true }) {
+/**
+* Its own component under a Suspense boundary: `useSearchParams` in a statically rendered route
+* bails the whole tree out to client rendering unless something above it suspends, and Next
+* fails the build for a page that lets it. The boundary is here so a host does not have to know.
+*/
+function PageViews() {
 	const pathname = (0, next_navigation_js.usePathname)();
-	require_hooks_use_web_analytics.useWebAnalytics(pathname);
+	const searchParams = (0, next_navigation_js.useSearchParams)();
+	require_hooks_use_web_analytics.useWebAnalytics(pathname, searchParams.toString());
+	return null;
+}
+function Analytics({ gaId, gaSrc, nonce, debugMode, metaPixelId, hotjarId, redditPixelId, linkedInPartnerId, uetTagId, uetCustomerId, facebookAppId, reportWebVitals = true }) {
 	require_hooks_use_outbound_click_analytics.useOutboundClickAnalytics();
+	require_hooks_use_uet_id_sync.useUETIdSync(uetCustomerId);
 	(0, next_web_vitals_js.useReportWebVitals)((metric) => {
 		if (!reportWebVitals) return;
 		const properties = {
@@ -28,6 +40,10 @@ function Analytics({ gaId, gaSrc, nonce, debugMode, metaPixelId, hotjarId, reddi
 		require_track_index.track(metric.name, properties);
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+			fallback: null,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageViews, {})
+		}),
 		facebookAppId && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("meta", {
 			property: "fb:app_id",
 			content: facebookAppId
@@ -111,6 +127,28 @@ function Analytics({ gaId, gaSrc, nonce, debugMode, metaPixelId, hotjarId, reddi
                 s.parentNode.insertBefore(b, s);
               })(window.lintrk);
               ` }
+		}),
+		uetTagId && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(next_script_js.default, {
+			strategy: "afterInteractive",
+			id: "uet-tag",
+			dangerouslySetInnerHTML: { __html: `
+              (function (w, d, t, u, o) {
+                w[u] = w[u] || [], o.ts = (new Date).getTime();
+                var n = d.createElement(t);
+                n.src = "https://bat.bing.net/bat.js?ti=" + o.ti + ("uetq" != u ? "&q=" + u : ""),
+                n.async = 1, n.onload = n.onreadystatechange = function() {
+                  var s = this.readyState;
+                  s && "loaded" !== s && "complete" !== s ||
+                  (o.q = w[u], w[u] = new UET(o), w[u].push("pageLoad"),
+                  n.onload = n.onreadystatechange = null)
+                };
+                var i = d.getElementsByTagName(t)[0];
+                i.parentNode.insertBefore(n, i);
+              })(window, document, "script", "uetq", {
+                ti: "${uetTagId}",
+                enableAutoSpaTracking: true
+              });
+            ` }
 		}),
 		hotjarId && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(next_script_js.default, {
 			id: "hotjar",

package/dist/next/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["usePathname","Script"],"sources":["../../src/next/index.tsx"],"sourcesContent":["'use client';\n\nimport { usePathname } from 'next/navigation';\nimport Script from 'next/script';\nimport { useReportWebVitals } from 'next/web-vitals';\nimport { useOutboundClickAnalytics } from '../hooks/use-outbound-click-analytics';\nimport { useWebAnalytics } from '../hooks/use-web-analytics';\nimport type { PixelId as MetaPixelId } from '../track/fbq';\nimport type { GaId, GtmId } from '../track/gtag';\nimport { track } from '../track/index';\nimport type { PixelId as RedditPixelId } from '../track/rdt';\n\ninterface Props {\n  gaId?: GaId;\n  gaSrc?: string;\n  gtmId?: GtmId;\n  hotjarId?: `${number}`;\n  metaPixelId?: MetaPixelId;\n  redditPixelId?: RedditPixelId;\n  linkedInPartnerId?: `${number}`;\n  facebookAppId?: string;\n  nonce?: string;\n  debugMode?: boolean;\n  reportWebVitals?: boolean;\n}\n\nexport function Analytics({\n  gaId,\n  gaSrc,\n  nonce,\n  debugMode,\n  metaPixelId,\n  hotjarId,\n  redditPixelId,\n  linkedInPartnerId,\n  facebookAppId,\n  reportWebVitals = true,\n}: Props) {\n  const pathname = usePathname();\n  useWebAnalytics(pathname);\n  useOutboundClickAnalytics();\n\n  useReportWebVitals((metric) => {\n    if (!reportWebVitals) return;\n    const properties = {\n      value: metric.delta,\n      metric_id: metric.id,\n      metric_value: metric.value,\n      metric_delta: metric.delta,\n      metric_rating: metric.rating,\n      metric_navigation_type: metric.navigationType,\n      non_interaction: true, // avoids affecting bounce rate.\n    };\n    track(metric.name, properties);\n  });\n\n  return (\n    <>\n      {facebookAppId && <meta property=\"fb:app_id\" content={facebookAppId} />}\n      {gaId && (\n        <>\n          <Script\n            id=\"gtag\"\n            nonce={nonce}\n            src={gaSrc ?? `https://www.googletagmanager.com/gtag/js?id=${gaId}`}\n          />\n          <Script\n            nonce={nonce}\n            id=\"gtag-init\"\n            dangerouslySetInnerHTML={{\n              __html: `\n              window.dataLayer = window.dataLayer || [];\n              function gtag(){dataLayer.push(arguments);}\n              gtag('js', new Date());\n              gtag('config', '${gaId}'${debugMode ? \" ,{ 'debug_mode': true }\" : ''});\n            `,\n            }}\n          />\n        </>\n      )}\n      {metaPixelId && (\n        <Script\n          id=\"meta-pixel\"\n          strategy=\"afterInteractive\"\n          dangerouslySetInnerHTML={{\n            __html: `\n            !(function (f, b, e, v, n, t, s) {\n              if (f.fbq) return;\n              n = f.fbq = function () {\n                n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);\n              };\n              if (!f._fbq) f._fbq = n;\n              n.push = n;\n              n.loaded = !0;\n              n.version = '2.0';\n              n.queue = [];\n              t = b.createElement(e);\n              t.async = !0;\n              t.src = v;\n              s = b.getElementsByTagName(e)[0];\n              s.parentNode.insertBefore(t, s);\n            })(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');\n            fbq('init', '${metaPixelId}');\n            fbq('track', 'PageView');`,\n          }}\n        />\n      )}\n      {redditPixelId && (\n        <Script\n          id=\"reddit-pixel\"\n          strategy=\"afterInteractive\"\n          dangerouslySetInnerHTML={{\n            __html: `\n            !function(w,d) {\n              if(!w.rdt) {\n                var p = w.rdt = function() {\n                  p.sendEvent ? p.sendEvent.apply(p,arguments) : p.callQueue.push(arguments)\n                };\n                p.callQueue = [];\n                var t = d.createElement(\"script\");\n                t.src = \"https://www.redditstatic.com/ads/pixel.js\";\n                t.async = !0;\n                var s = d.getElementsByTagName(\"script\")[0];\n                s.parentNode.insertBefore(t,s)\n              }\n            }(window, document);\n            rdt('init', '${redditPixelId}');\n            rdt('track', 'PageVisit');`,\n          }}\n        />\n      )}\n      {linkedInPartnerId && (\n        <Script\n          id=\"linkedin-insight-tag\"\n          strategy=\"afterInteractive\"\n          dangerouslySetInnerHTML={{\n            __html: `\n              _linkedin_partner_id = \"${linkedInPartnerId}\";\n              window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];\n              window._linkedin_data_partner_ids.push(_linkedin_partner_id);\n\n              (function(l) {\n                if (!l){\n                  window.lintrk = function(a,b){ \n                    window.lintrk.q.push([a,b])\n                  };\n                  window.lintrk.q=[]\n                }\n                var s = document.getElementsByTagName(\"script\")[0];\n                var b = document.createElement(\"script\");\n                b.type = \"text/javascript\";b.async = true;\n                b.src = \"https://snap.licdn.com/li.lms-analytics/insight.min.js\";\n                s.parentNode.insertBefore(b, s);\n              })(window.lintrk);\n              `,\n          }}\n        />\n      )}\n      {hotjarId && (\n        <Script\n          id=\"hotjar\"\n          strategy=\"afterInteractive\"\n          dangerouslySetInnerHTML={{\n            __html: `\n            (function(h,o,t,j,a,r){\n              h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};\n              h._hjSettings={hjid:${hotjarId},hjsv:6};\n              a=o.getElementsByTagName('head')[0];\n              r=o.createElement('script');r.async=1;\n              r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;\n              a.appendChild(r);\n            })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');\n            `,\n          }}\n        />\n      )}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AA0BA,SAAgB,UAAU,EACxB,MACA,OACA,OACA,WACA,aACA,UACA,eACA,mBACA,eACA,kBAAkB,QACV;CACR,MAAM,YAAA,GAAWA,mBAAAA,YAAAA,CAAY;CAC7B,gCAAA,gBAAgB,QAAQ;CACxB,2CAAA,0BAA0B;CAE1B,CAAA,GAAA,mBAAA,mBAAA,EAAoB,WAAW;EAC7B,IAAI,CAAC,iBAAiB;EACtB,MAAM,aAAa;GACjB,OAAO,OAAO;GACd,WAAW,OAAO;GAClB,cAAc,OAAO;GACrB,cAAc,OAAO;GACrB,eAAe,OAAO;GACtB,wBAAwB,OAAO;GAC/B,iBAAiB;EACnB;EACA,oBAAA,MAAM,OAAO,MAAM,UAAU;CAC/B,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;EACG,iBAAiB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,UAAS;GAAY,SAAS;EAAgB,CAAA;EACrE,QACC,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,SAAD;GACE,IAAG;GACI;GACP,KAAK,SAAS,+CAA+C;EAC9D,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,SAAD;GACS;GACP,IAAG;GACH,yBAAyB,EACvB,QAAQ;;;;gCAIU,KAAK,GAAG,YAAY,6BAA6B,GAAG;cAExE;EACD,CAAA,CACD,EAAA,CAAA;EAEH,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,SAAD;GACE,IAAG;GACH,UAAS;GACT,yBAAyB,EACvB,QAAQ;;;;;;;;;;;;;;;;;2BAiBO,YAAY;uCAE7B;EACD,CAAA;EAEF,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,SAAD;GACE,IAAG;GACH,UAAS;GACT,yBAAyB,EACvB,QAAQ;;;;;;;;;;;;;;2BAcO,cAAc;wCAE/B;EACD,CAAA;EAEF,qBACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,SAAD;GACE,IAAG;GACH,UAAS;GACT,yBAAyB,EACvB,QAAQ;wCACoB,kBAAkB;;;;;;;;;;;;;;;;;gBAkBhD;EACD,CAAA;EAEF,YACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,SAAD;GACE,IAAG;GACH,UAAS;GACT,yBAAyB,EACvB,QAAQ;;;oCAGgB,SAAS;;;;;;cAOnC;EACD,CAAA;CAEH,EAAA,CAAA;AAEN"}
+{"version":3,"file":"index.cjs","names":["usePathname","useSearchParams","Suspense","Script"],"sources":["../../src/next/index.tsx"],"sourcesContent":["'use client';\n\nimport { usePathname, useSearchParams } from 'next/navigation';\nimport Script from 'next/script';\nimport { useReportWebVitals } from 'next/web-vitals';\nimport { Suspense } from 'react';\nimport { useOutboundClickAnalytics } from '../hooks/use-outbound-click-analytics';\nimport { useUETIdSync } from '../hooks/use-uet-id-sync';\nimport { useWebAnalytics } from '../hooks/use-web-analytics';\nimport type { PixelId as MetaPixelId } from '../track/fbq';\nimport type { GaId, GtmId } from '../track/gtag';\nimport { track } from '../track/index';\nimport type { PixelId as RedditPixelId } from '../track/rdt';\n\ninterface Props {\n  gaId?: GaId;\n  gaSrc?: string;\n  gtmId?: GtmId;\n  hotjarId?: `${number}`;\n  metaPixelId?: MetaPixelId;\n  redditPixelId?: RedditPixelId;\n  linkedInPartnerId?: `${number}`;\n  /** Microsoft Advertising UET tag id. The tag reports page loads itself (`enableAutoSpaTracking`). */\n  uetTagId?: `${number}`;\n  /** Microsoft Advertising customer id (`cid` in the ads UI's URLs): enables the Conversions API's ID Sync pixel. */\n  uetCustomerId?: `${number}`;\n  facebookAppId?: string;\n  nonce?: string;\n  debugMode?: boolean;\n  reportWebVitals?: boolean;\n}\n\n/**\n * Its own component under a Suspense boundary: `useSearchParams` in a statically rendered route\n * bails the whole tree out to client rendering unless something above it suspends, and Next\n * fails the build for a page that lets it. The boundary is here so a host does not have to know.\n */\nfunction PageViews() {\n  const pathname = usePathname();\n  const searchParams = useSearchParams();\n  useWebAnalytics(pathname, searchParams.toString());\n  return null;\n}\n\nexport function Analytics({\n  gaId,\n  gaSrc,\n  nonce,\n  debugMode,\n  metaPixelId,\n  hotjarId,\n  redditPixelId,\n  linkedInPartnerId,\n  uetTagId,\n  uetCustomerId,\n  facebookAppId,\n  reportWebVitals = true,\n}: Props) {\n  useOutboundClickAnalytics();\n  useUETIdSync(uetCustomerId);\n\n  useReportWebVitals((metric) => {\n    if (!reportWebVitals) return;\n    const properties = {\n      value: metric.delta,\n      metric_id: metric.id,\n      metric_value: metric.value,\n      metric_delta: metric.delta,\n      metric_rating: metric.rating,\n      metric_navigation_type: metric.navigationType,\n      non_interaction: true, // avoids affecting bounce rate.\n    };\n    track(metric.name, properties);\n  });\n\n  return (\n    <>\n      <Suspense fallback={null}>\n        <PageViews />\n      </Suspense>\n      {facebookAppId && <meta property=\"fb:app_id\" content={facebookAppId} />}\n      {gaId && (\n        <>\n          <Script\n            id=\"gtag\"\n            nonce={nonce}\n            src={gaSrc ?? `https://www.googletagmanager.com/gtag/js?id=${gaId}`}\n          />\n          <Script\n            nonce={nonce}\n            id=\"gtag-init\"\n            dangerouslySetInnerHTML={{\n              __html: `\n              window.dataLayer = window.dataLayer || [];\n              function gtag(){dataLayer.push(arguments);}\n              gtag('js', new Date());\n              gtag('config', '${gaId}'${debugMode ? \" ,{ 'debug_mode': true }\" : ''});\n            `,\n            }}\n          />\n        </>\n      )}\n      {metaPixelId && (\n        <Script\n          id=\"meta-pixel\"\n          strategy=\"afterInteractive\"\n          dangerouslySetInnerHTML={{\n            __html: `\n            !(function (f, b, e, v, n, t, s) {\n              if (f.fbq) return;\n              n = f.fbq = function () {\n                n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);\n              };\n              if (!f._fbq) f._fbq = n;\n              n.push = n;\n              n.loaded = !0;\n              n.version = '2.0';\n              n.queue = [];\n              t = b.createElement(e);\n              t.async = !0;\n              t.src = v;\n              s = b.getElementsByTagName(e)[0];\n              s.parentNode.insertBefore(t, s);\n            })(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');\n            fbq('init', '${metaPixelId}');\n            fbq('track', 'PageView');`,\n          }}\n        />\n      )}\n      {redditPixelId && (\n        <Script\n          id=\"reddit-pixel\"\n          strategy=\"afterInteractive\"\n          dangerouslySetInnerHTML={{\n            __html: `\n            !function(w,d) {\n              if(!w.rdt) {\n                var p = w.rdt = function() {\n                  p.sendEvent ? p.sendEvent.apply(p,arguments) : p.callQueue.push(arguments)\n                };\n                p.callQueue = [];\n                var t = d.createElement(\"script\");\n                t.src = \"https://www.redditstatic.com/ads/pixel.js\";\n                t.async = !0;\n                var s = d.getElementsByTagName(\"script\")[0];\n                s.parentNode.insertBefore(t,s)\n              }\n            }(window, document);\n            rdt('init', '${redditPixelId}');\n            rdt('track', 'PageVisit');`,\n          }}\n        />\n      )}\n      {linkedInPartnerId && (\n        <Script\n          id=\"linkedin-insight-tag\"\n          strategy=\"afterInteractive\"\n          dangerouslySetInnerHTML={{\n            __html: `\n              _linkedin_partner_id = \"${linkedInPartnerId}\";\n              window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];\n              window._linkedin_data_partner_ids.push(_linkedin_partner_id);\n\n              (function(l) {\n                if (!l){\n                  window.lintrk = function(a,b){ \n                    window.lintrk.q.push([a,b])\n                  };\n                  window.lintrk.q=[]\n                }\n                var s = document.getElementsByTagName(\"script\")[0];\n                var b = document.createElement(\"script\");\n                b.type = \"text/javascript\";b.async = true;\n                b.src = \"https://snap.licdn.com/li.lms-analytics/insight.min.js\";\n                s.parentNode.insertBefore(b, s);\n              })(window.lintrk);\n              `,\n          }}\n        />\n      )}\n      {uetTagId && (\n        <Script\n          strategy=\"afterInteractive\"\n          id=\"uet-tag\"\n          dangerouslySetInnerHTML={{\n            __html: `\n              (function (w, d, t, u, o) {\n                w[u] = w[u] || [], o.ts = (new Date).getTime();\n                var n = d.createElement(t);\n                n.src = \"https://bat.bing.net/bat.js?ti=\" + o.ti + (\"uetq\" != u ? \"&q=\" + u : \"\"),\n                n.async = 1, n.onload = n.onreadystatechange = function() {\n                  var s = this.readyState;\n                  s && \"loaded\" !== s && \"complete\" !== s ||\n                  (o.q = w[u], w[u] = new UET(o), w[u].push(\"pageLoad\"),\n                  n.onload = n.onreadystatechange = null)\n                };\n                var i = d.getElementsByTagName(t)[0];\n                i.parentNode.insertBefore(n, i);\n              })(window, document, \"script\", \"uetq\", {\n                ti: \"${uetTagId}\",\n                enableAutoSpaTracking: true\n              });\n            `,\n          }}\n        />\n      )}\n      {hotjarId && (\n        <Script\n          id=\"hotjar\"\n          strategy=\"afterInteractive\"\n          dangerouslySetInnerHTML={{\n            __html: `\n            (function(h,o,t,j,a,r){\n              h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};\n              h._hjSettings={hjid:${hotjarId},hjsv:6};\n              a=o.getElementsByTagName('head')[0];\n              r=o.createElement('script');r.async=1;\n              r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;\n              a.appendChild(r);\n            })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');\n            `,\n          }}\n        />\n      )}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqCA,SAAS,YAAY;CACnB,MAAM,YAAA,GAAWA,mBAAAA,YAAAA,CAAY;CAC7B,MAAM,gBAAA,GAAeC,mBAAAA,gBAAAA,CAAgB;CACrC,gCAAA,gBAAgB,UAAU,aAAa,SAAS,CAAC;CACjD,OAAO;AACT;AAEA,SAAgB,UAAU,EACxB,MACA,OACA,OACA,WACA,aACA,UACA,eACA,mBACA,UACA,eACA,eACA,kBAAkB,QACV;CACR,2CAAA,0BAA0B;CAC1B,8BAAA,aAAa,aAAa;CAE1B,CAAA,GAAA,mBAAA,mBAAA,EAAoB,WAAW;EAC7B,IAAI,CAAC,iBAAiB;EACtB,MAAM,aAAa;GACjB,OAAO,OAAO;GACd,WAAW,OAAO;GAClB,cAAc,OAAO;GACrB,cAAc,OAAO;GACrB,eAAe,OAAO;GACtB,wBAAwB,OAAO;GAC/B,iBAAiB;EACnB;EACA,oBAAA,MAAM,OAAO,MAAM,UAAU;CAC/B,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,MAAAA,UAAD;GAAU,UAAU;GAClB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD,CAAY,CAAA;EACJ,CAAA;EACT,iBAAiB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,UAAS;GAAY,SAAS;EAAgB,CAAA;EACrE,QACC,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,SAAD;GACE,IAAG;GACI;GACP,KAAK,SAAS,+CAA+C;EAC9D,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,SAAD;GACS;GACP,IAAG;GACH,yBAAyB,EACvB,QAAQ;;;;gCAIU,KAAK,GAAG,YAAY,6BAA6B,GAAG;cAExE;EACD,CAAA,CACD,EAAA,CAAA;EAEH,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,SAAD;GACE,IAAG;GACH,UAAS;GACT,yBAAyB,EACvB,QAAQ;;;;;;;;;;;;;;;;;2BAiBO,YAAY;uCAE7B;EACD,CAAA;EAEF,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,SAAD;GACE,IAAG;GACH,UAAS;GACT,yBAAyB,EACvB,QAAQ;;;;;;;;;;;;;;2BAcO,cAAc;wCAE/B;EACD,CAAA;EAEF,qBACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,SAAD;GACE,IAAG;GACH,UAAS;GACT,yBAAyB,EACvB,QAAQ;wCACoB,kBAAkB;;;;;;;;;;;;;;;;;gBAkBhD;EACD,CAAA;EAEF,YACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,SAAD;GACE,UAAS;GACT,IAAG;GACH,yBAAyB,EACvB,QAAQ;;;;;;;;;;;;;;uBAcG,SAAS;;;cAItB;EACD,CAAA;EAEF,YACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,SAAD;GACE,IAAG;GACH,UAAS;GACT,yBAAyB,EACvB,QAAQ;;;oCAGgB,SAAS;;;;;;cAOnC;EACD,CAAA;CAEH,EAAA,CAAA;AAEN"}

package/dist/next/index.d.cts

@@ -10,12 +10,16 @@ interface Props {
   metaPixelId?: PixelId;
   redditPixelId?: PixelId$1;
   linkedInPartnerId?: `${number}`;
+  /** Microsoft Advertising UET tag id. The tag reports page loads itself (`enableAutoSpaTracking`). */
+  uetTagId?: `${number}`;
+  /** Microsoft Advertising customer id (`cid` in the ads UI's URLs): enables the Conversions API's ID Sync pixel. */
+  uetCustomerId?: `${number}`;
   facebookAppId?: string;
   nonce?: string;
   debugMode?: boolean;
   reportWebVitals?: boolean;
 }
-declare function Analytics({ gaId, gaSrc, nonce, debugMode, metaPixelId, hotjarId, redditPixelId, linkedInPartnerId, facebookAppId, reportWebVitals }: Props): import("react").JSX.Element;
+declare function Analytics({ gaId, gaSrc, nonce, debugMode, metaPixelId, hotjarId, redditPixelId, linkedInPartnerId, uetTagId, uetCustomerId, facebookAppId, reportWebVitals }: Props): import("react").JSX.Element;
 //#endregion
 export { Analytics };
 //# sourceMappingURL=index.d.cts.map

package/dist/next/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/next/index.tsx"],"mappings":";;;;UAYU;EACR,OAAO;EACP;EACA,QAAQ;EACR;EACA,cAAc;EACd,gBAAgB;EAChB;EACA;EACA;EACA;EACA;;iBAGc,YACd,MACA,OACA,OACA,WACA,aACA,UACA,eACA,mBACA,eACA,mBACC,wBAAK,IAAA"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/next/index.tsx"],"mappings":";;;;UAcU;EACR,OAAO;EACP;EACA,QAAQ;EACR;EACA,cAAc;EACd,gBAAgB;EAChB;;EAEA;;EAEA;EACA;EACA;EACA;EACA;;iBAec,YACd,MACA,OACA,OACA,WACA,aACA,UACA,eACA,mBACA,UACA,eACA,eACA,mBACC,wBAAK,IAAA"}

package/dist/next/index.d.mts

@@ -10,12 +10,16 @@ interface Props {
   metaPixelId?: PixelId;
   redditPixelId?: PixelId$1;
   linkedInPartnerId?: `${number}`;
+  /** Microsoft Advertising UET tag id. The tag reports page loads itself (`enableAutoSpaTracking`). */
+  uetTagId?: `${number}`;
+  /** Microsoft Advertising customer id (`cid` in the ads UI's URLs): enables the Conversions API's ID Sync pixel. */
+  uetCustomerId?: `${number}`;
   facebookAppId?: string;
   nonce?: string;
   debugMode?: boolean;
   reportWebVitals?: boolean;
 }
-declare function Analytics({ gaId, gaSrc, nonce, debugMode, metaPixelId, hotjarId, redditPixelId, linkedInPartnerId, facebookAppId, reportWebVitals }: Props): import("react").JSX.Element;
+declare function Analytics({ gaId, gaSrc, nonce, debugMode, metaPixelId, hotjarId, redditPixelId, linkedInPartnerId, uetTagId, uetCustomerId, facebookAppId, reportWebVitals }: Props): import("react").JSX.Element;
 //#endregion
 export { Analytics };
 //# sourceMappingURL=index.d.mts.map

package/dist/next/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/next/index.tsx"],"mappings":";;;;UAYU;EACR,OAAO;EACP;EACA,QAAQ;EACR;EACA,cAAc;EACd,gBAAgB;EAChB;EACA;EACA;EACA;EACA;;iBAGc,YACd,MACA,OACA,OACA,WACA,aACA,UACA,eACA,mBACA,eACA,mBACC,wBAAK,IAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/next/index.tsx"],"mappings":";;;;UAcU;EACR,OAAO;EACP;EACA,QAAQ;EACR;EACA,cAAc;EACd,gBAAgB;EAChB;;EAEA;;EAEA;EACA;EACA;EACA;EACA;;iBAec,YACd,MACA,OACA,OACA,WACA,aACA,UACA,eACA,mBACA,UACA,eACA,eACA,mBACC,wBAAK,IAAA"}

package/dist/next/index.mjs

@@ -1,16 +1,28 @@
 "use client";
 import { track } from "../track/index.mjs";
 import { useOutboundClickAnalytics } from "../hooks/use-outbound-click-analytics.mjs";
+import { useUETIdSync } from "../hooks/use-uet-id-sync.mjs";
 import { useWebAnalytics } from "../hooks/use-web-analytics.mjs";
-import { usePathname } from "next/navigation.js";
+import { Suspense } from "react";
+import { usePathname, useSearchParams } from "next/navigation.js";
 import Script from "next/script.js";
 import { useReportWebVitals } from "next/web-vitals.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/next/index.tsx
-function Analytics({ gaId, gaSrc, nonce, debugMode, metaPixelId, hotjarId, redditPixelId, linkedInPartnerId, facebookAppId, reportWebVitals = true }) {
+/**
+* Its own component under a Suspense boundary: `useSearchParams` in a statically rendered route
+* bails the whole tree out to client rendering unless something above it suspends, and Next
+* fails the build for a page that lets it. The boundary is here so a host does not have to know.
+*/
+function PageViews() {
 	const pathname = usePathname();
-	useWebAnalytics(pathname);
+	const searchParams = useSearchParams();
+	useWebAnalytics(pathname, searchParams.toString());
+	return null;
+}
+function Analytics({ gaId, gaSrc, nonce, debugMode, metaPixelId, hotjarId, redditPixelId, linkedInPartnerId, uetTagId, uetCustomerId, facebookAppId, reportWebVitals = true }) {
 	useOutboundClickAnalytics();
+	useUETIdSync(uetCustomerId);
 	useReportWebVitals((metric) => {
 		if (!reportWebVitals) return;
 		const properties = {
@@ -25,6 +37,10 @@ function Analytics({ gaId, gaSrc, nonce, debugMode, metaPixelId, hotjarId, reddi
 		track(metric.name, properties);
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Suspense, {
+			fallback: null,
+			children: /* @__PURE__ */ jsx(PageViews, {})
+		}),
 		facebookAppId && /* @__PURE__ */ jsx("meta", {
 			property: "fb:app_id",
 			content: facebookAppId
@@ -108,6 +124,28 @@ function Analytics({ gaId, gaSrc, nonce, debugMode, metaPixelId, hotjarId, reddi
                 s.parentNode.insertBefore(b, s);
               })(window.lintrk);
               ` }
+		}),
+		uetTagId && /* @__PURE__ */ jsx(Script, {
+			strategy: "afterInteractive",
+			id: "uet-tag",
+			dangerouslySetInnerHTML: { __html: `
+              (function (w, d, t, u, o) {
+                w[u] = w[u] || [], o.ts = (new Date).getTime();
+                var n = d.createElement(t);
+                n.src = "https://bat.bing.net/bat.js?ti=" + o.ti + ("uetq" != u ? "&q=" + u : ""),
+                n.async = 1, n.onload = n.onreadystatechange = function() {
+                  var s = this.readyState;
+                  s && "loaded" !== s && "complete" !== s ||
+                  (o.q = w[u], w[u] = new UET(o), w[u].push("pageLoad"),
+                  n.onload = n.onreadystatechange = null)
+                };
+                var i = d.getElementsByTagName(t)[0];
+                i.parentNode.insertBefore(n, i);
+              })(window, document, "script", "uetq", {
+                ti: "${uetTagId}",
+                enableAutoSpaTracking: true
+              });
+            ` }
 		}),
 		hotjarId && /* @__PURE__ */ jsx(Script, {
 			id: "hotjar",