fragment-headless-sdk 2.3.1 → 2.3.2

package/dist/components/Announcement/AnnouncementButton.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { IAnnouncementContent } from "../../types";
-export default function AnnouncementButton({ content, buttonHref, clickHref, }: {
+export default function AnnouncementButton({ content, buttonHref, }: {
     content: IAnnouncementContent;
     buttonHref?: string;
-    clickHref?: string;
 }): React.JSX.Element | null;

package/dist/components/Announcement/AnnouncementButton.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { ButtonType, SectionType } from "../../constants";
 import { fireClickMetric, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveAnnouncementColors, } from "../../utils";
-export default function AnnouncementButton({ content, buttonHref, clickHref, }) {
+export default function AnnouncementButton({ content, buttonHref, }) {
     // Don’t render if no button or explicitly None
     if (!content?.buttonText || content.buttonType === ButtonType.None)
         return null;
@@ -29,9 +29,7 @@ export default function AnnouncementButton({ content, buttonHref, clickHref, })
         delete attributes["aria-label"];
     }
     const handleClick = React.useCallback(() => {
-        if (!clickHref)
-            return;
-        fireClickMetric(clickHref, content.measurementId, content.sectionType || SectionType.Announcement, content.sectionId);
-    }, [clickHref, content.measurementId, content.sectionType, content.sectionId]);
+        fireClickMetric(content.measurementId, content.sectionType || SectionType.Announcement, content.sectionId);
+    }, [content.measurementId, content.sectionType, content.sectionId]);
     return (React.createElement("a", { href: buttonHref, className: className, style: style, onClick: handleClick, ...(attributes ?? {}), "aria-label": ariaLabel }, content.buttonText));
 }

package/dist/components/Announcement/index.js

@@ -1,21 +1,19 @@
+"use client";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import React, { useEffect, useRef } from "react";
 import { AnnouncementType, ButtonType, SectionType } from "../../constants";
-import { buildClickUrl, fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveAnnouncementColors, } from "../../utils";
+import { fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveAnnouncementColors, } from "../../utils";
 import AnnouncementButton from "./AnnouncementButton";
 import { AnnouncementStyles } from "./AnnouncementStyles";
 import CountdownTimer from "./CountdownTimer";
 export default function Announcement({ content, type, handleClose, }) {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && content.impressionUrl) {
-            fireImpressionWhenVisible(ref.current, content.impressionUrl, content.measurementId, content.sectionType || SectionType.Announcement, content.sectionId);
+        if (ref.current) {
+            fireImpressionWhenVisible(ref.current, content.measurementId, content.sectionType || SectionType.Announcement, content.sectionId);
         }
-    }, [content?.impressionUrl, content?.measurementId, content?.sectionType, content?.sectionId]);
+    }, [content?.measurementId, content?.sectionType, content?.sectionId]);
     const buttonHref = content?.buttonLink || undefined;
-    const clickTrackingHref = content?.buttonLink && content?.clickUrlBase
-        ? buildClickUrl(content.clickUrlBase, content.buttonLink)
-        : undefined;
     if (!content)
         return null;
     const styling = content.styling;
@@ -60,13 +58,13 @@ export default function Announcement({ content, type, handleClose, }) {
                         React.createElement("div", { className: marqueeContentClass, style: marqueeContentStyle, ...(marqueeContentAttributes ?? {}), dangerouslySetInnerHTML: {
                                 __html: content.announcementHtml || "",
                             } }))),
-                content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: buttonHref, clickHref: clickTrackingHref })))) : (React.createElement("div", { className: contentRowClass, style: contentRowStyle, ...(contentRowAttributes ?? {}) },
+                content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: buttonHref })))) : (React.createElement("div", { className: contentRowClass, style: contentRowStyle, ...(contentRowAttributes ?? {}) },
                 React.createElement("div", { className: announcementTextClass, style: announcementTextStyle, ...(announcementTextAttributes ?? {}) },
                     React.createElement("div", { dangerouslySetInnerHTML: {
                             __html: content.announcementHtml || "",
                         } })),
                 type === AnnouncementType.Countdown && (React.createElement(CountdownTimer, { content: content })),
-                content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: buttonHref, clickHref: clickTrackingHref })))),
+                content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: buttonHref })))),
             React.createElement("div", { onClick: handleClose, className: closeButtonClass, style: closeButtonStyle, ...(closeButtonAttributes ?? {}) },
                 React.createElement(XMarkIcon, { className: "w-5 h-5" })))));
 }

package/dist/components/Hero/DesktopHero.d.ts

@@ -3,7 +3,6 @@ import { IHeroContent } from "../../types";
 import { resolveHeroColors, resolveHeroTypography } from "../../utils/hero-resolvers";
 interface HeroViewProps {
     buttonHref?: string;
-    clickHref?: string;
     content: IHeroContent;
     colors: ReturnType<typeof resolveHeroColors>;
     contentWidthClass: string;
@@ -11,5 +10,5 @@ interface HeroViewProps {
     position: "left" | "center" | "right";
     height: string;
 }
-export default function DesktopHero({ buttonHref, clickHref, content, colors, contentWidthClass, typography, position, height, }: HeroViewProps): React.JSX.Element;
+export default function DesktopHero({ buttonHref, content, colors, contentWidthClass, typography, position, height, }: HeroViewProps): React.JSX.Element;
 export {};

package/dist/components/Hero/DesktopHero.js

@@ -2,7 +2,7 @@ import React from "react";
 import { SectionType } from "../../constants";
 import { fireClickMetric } from "../../utils";
 import { DEFAULT_CONTENT_WIDTH_CLASS, joinClassNames, renderText, } from "../../utils/hero-resolvers";
-export default function DesktopHero({ buttonHref, clickHref, content, colors, contentWidthClass, typography, position, height, }) {
+export default function DesktopHero({ buttonHref, content, colors, contentWidthClass, typography, position, height, }) {
     const getPositionClasses = () => {
         switch (position) {
             case "center":
@@ -15,15 +15,8 @@ export default function DesktopHero({ buttonHref, clickHref, content, colors, co
         }
     };
     const handleClick = React.useCallback(() => {
-        if (!clickHref)
-            return;
-        fireClickMetric(clickHref, content.measurementId, content.sectionType || SectionType.HeroBanner, content.sectionId);
-    }, [
-        clickHref,
-        content.measurementId,
-        content.sectionType,
-        content.sectionId,
-    ]);
+        fireClickMetric(content.measurementId, content.sectionType || SectionType.HeroBanner, content.sectionId);
+    }, [content.measurementId, content.sectionType, content.sectionId]);
     return (React.createElement("div", { className: `relative ${height} gap-4 w-full`, style: { backgroundColor: colors.background } },
         content?.videoUrl ? (React.createElement("video", { src: content.videoUrl, autoPlay: true, muted: true, loop: true, playsInline: true, className: "absolute inset-0 z-0 object-cover w-full h-full" })) : (
         /* Image Background */

package/dist/components/Hero/MobileHero.d.ts

@@ -3,10 +3,9 @@ import { IHeroContent } from "../../types";
 import { resolveHeroColors, resolveHeroTypography } from "../../utils/hero-resolvers";
 interface MobileHeroProps {
     buttonHref?: string;
-    clickHref?: string;
     content: IHeroContent;
     colors: ReturnType<typeof resolveHeroColors>;
     typography: ReturnType<typeof resolveHeroTypography>;
 }
-export default function MobileHero({ buttonHref, clickHref, content, colors, typography, }: MobileHeroProps): React.JSX.Element;
+export default function MobileHero({ buttonHref, content, colors, typography, }: MobileHeroProps): React.JSX.Element;
 export {};

package/dist/components/Hero/MobileHero.js

@@ -2,17 +2,10 @@ import React from "react";
 import { SectionType } from "../../constants";
 import { fireClickMetric } from "../../utils";
 import { renderText, } from "../../utils/hero-resolvers";
-export default function MobileHero({ buttonHref, clickHref, content, colors, typography, }) {
+export default function MobileHero({ buttonHref, content, colors, typography, }) {
     const handleClick = React.useCallback(() => {
-        if (!clickHref)
-            return;
-        fireClickMetric(clickHref, content.measurementId, content.sectionType || SectionType.HeroBanner, content.sectionId);
-    }, [
-        clickHref,
-        content.measurementId,
-        content.sectionType,
-        content.sectionId,
-    ]);
+        fireClickMetric(content.measurementId, content.sectionType || SectionType.HeroBanner, content.sectionId);
+    }, [content.measurementId, content.sectionType, content.sectionId]);
     return (React.createElement("div", { className: "relative z-10 mx-auto gap-4 flex max-w-screen-md flex-col items-center justify-center py-6 text-center", style: { backgroundColor: colors.background } },
         renderText({
             fontSize: typography.title.fontSize,

package/dist/components/Hero/index.js

@@ -1,20 +1,18 @@
+"use client";
 import React, { useEffect, useRef } from "react";
 import { SectionType } from "../../constants";
-import { buildClickUrl, fireImpressionWhenVisible, } from "../../utils";
+import { fireImpressionWhenVisible, } from "../../utils";
 import { resolveContentWidthClass, resolveHeight, resolveHeroColors, resolveHeroTypography, resolvePosition, } from "../../utils/hero-resolvers";
 import DesktopHero from "./DesktopHero";
 import MobileHero from "./MobileHero";
 export default function Hero({ content }) {
     const ref = useRef(null);
     useEffect(() => {
-        if (ref.current && content.impressionUrl) {
-            fireImpressionWhenVisible(ref.current, content.impressionUrl, content.measurementId, content.sectionType || SectionType.HeroBanner, content.sectionId);
+        if (ref.current) {
+            fireImpressionWhenVisible(ref.current, content.measurementId, content.sectionType || SectionType.HeroBanner, content.sectionId);
         }
-    }, [content?.impressionUrl, content?.measurementId, content?.sectionType, content?.sectionId]);
+    }, [content?.measurementId, content?.sectionType, content?.sectionId]);
     const buttonHref = content?.buttonLink || undefined;
-    const clickTrackingHref = content?.buttonLink && content?.clickUrlBase
-        ? buildClickUrl(content.clickUrlBase, content.buttonLink)
-        : undefined;
     if (!content)
         return null;
     const colors = resolveHeroColors(content);
@@ -24,7 +22,7 @@ export default function Hero({ content }) {
     const height = resolveHeight(content);
     return (React.createElement("div", { className: "bg-black", ref: ref, style: { backgroundColor: colors.background } },
         React.createElement("div", { className: "hidden lg:block" },
-            React.createElement(DesktopHero, { content: content, buttonHref: buttonHref, clickHref: clickTrackingHref, colors: colors, contentWidthClass: contentWidthClass, typography: typography, position: position, height: height })),
+            React.createElement(DesktopHero, { content: content, buttonHref: buttonHref, colors: colors, contentWidthClass: contentWidthClass, typography: typography, position: position, height: height })),
         React.createElement("div", { className: "block lg:hidden" },
-            React.createElement(MobileHero, { content: content, buttonHref: buttonHref, clickHref: clickTrackingHref, colors: colors, typography: typography }))));
+            React.createElement(MobileHero, { content: content, buttonHref: buttonHref, colors: colors, typography: typography }))));
 }

package/dist/types/announcement.d.ts

@@ -10,8 +10,6 @@ export interface IAnnouncementContent {
     buttonLink: string;
     announcementHtml: string;
     counterEndDate?: string;
-    impressionUrl: string;
-    clickUrlBase: string;
     measurementId?: string;
     sectionId?: string;
     sectionType?: SectionType;

package/dist/types/hero.d.ts

@@ -13,8 +13,6 @@ export interface IHeroContent {
     imageUrl: string;
     mobileImageUrl: string;
     videoUrl?: string;
-    impressionUrl: string;
-    clickUrlBase: string;
     measurementId?: string;
     sectionId?: string;
     sectionType?: SectionType;

package/dist/utils/cache.js

@@ -15,12 +15,14 @@ export async function revalidateFragmentCache(tags) {
     try {
         // Dynamic import to avoid issues in non-Next.js environments
         // @ts-ignore - next/cache may not be available in all environments
-        const { revalidateTag } = await import("next/cache");
+        const mod = await import("next/cache");
+        // Cast: Next.js types vary by version (1 arg vs 2 arg with profile). Pass tag + "max" for Next 16+.
+        const revalidateTag = mod.revalidateTag;
         if (tags && tags.length > 0) {
             // Revalidate specific tags
             tags.forEach((tag) => {
                 try {
-                    revalidateTag(tag);
+                    revalidateTag(tag, "max");
                 }
                 catch (err) {
                     console.warn(`Failed to revalidate tag ${tag}:`, err);
@@ -31,7 +33,7 @@ export async function revalidateFragmentCache(tags) {
             // Revalidate all Fragment resource types
             Object.values(ResourceType).forEach((type) => {
                 try {
-                    revalidateTag(`fragment-${type}`);
+                    revalidateTag(`fragment-${type}`, "max");
                 }
                 catch (err) {
                     console.warn(`Failed to revalidate fragment-${type}:`, err);

package/dist/utils/metrics.d.ts

@@ -1,7 +1,5 @@
 import { SectionType } from "../constants";
-export declare function toBase64Url(input: string): string;
-export declare function buildClickUrl(clickUrlBase: string, targetHref: string): string;
-export declare function fireClickMetric(clickUrl: string, measurementId?: string, sectionType?: SectionType, sectionId?: string): void;
+export declare function fireClickMetric(measurementId?: string, sectionType?: SectionType, sectionId?: string): void;
 declare global {
     interface Window {
         gtag?: (command: string, targetId: string | Date, config?: Record<string, unknown>) => void;
@@ -12,4 +10,4 @@ declare global {
  * Fire a scroll past metric when user scrolls past a section
  */
 export declare function fireScrollPastMetric(measurementId: string | undefined, sectionType: SectionType, sectionId: string): void;
-export declare function fireImpressionWhenVisible(el: HTMLElement, pixelUrl: string, measurementId?: string, sectionType?: SectionType, sectionId?: string): void;
+export declare function fireImpressionWhenVisible(el: HTMLElement, measurementId?: string, sectionType?: SectionType, sectionId?: string): void;

package/dist/utils/metrics.js

@@ -1,59 +1,15 @@
 import { SectionType } from "../constants";
 import { setAttribution } from "./attribution";
-// --- Unicode-safe Base64URL ---
-export function toBase64Url(input) {
-    // Handles emojis & non-ASCII reliably:
-    const b64 = btoa(encodeURIComponent(input).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16))));
-    return b64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-}
-// --- Robust query appender ---
-function appendQuery(url, key, value) {
-    const sep = url.includes("?") ? "&" : "?";
-    return `${url}${sep}${key}=${value}`;
-}
-// Build the tracking URL that encodes the final destination for metrics
-export function buildClickUrl(clickUrlBase, targetHref) {
-    const u = encodeURIComponent(toBase64Url(targetHref));
-    return appendQuery(clickUrlBase, "u", u);
-}
-// Fire the click tracking URL without relying on a redirect
-// Default to GET so legacy tracking endpoints continue to accept the request
-export function fireClickMetric(clickUrl, measurementId, sectionType, sectionId) {
+export function fireClickMetric(measurementId, sectionType, sectionId) {
     if (typeof window === "undefined")
         return;
-    if (!clickUrl)
-        return;
     // Store attribution for potential purchase/add-to-cart
     if (sectionType && sectionId) {
         setAttribution(sectionId, sectionType);
     }
-    // Send to GA4 first (if available)
     if (measurementId && sectionType && sectionId) {
         sendGA4Event("click", measurementId, sectionType, sectionId);
     }
-    try {
-        if (typeof fetch === "function") {
-            fetch(clickUrl, {
-                method: "GET",
-                mode: "no-cors",
-                keepalive: true,
-            }).catch(() => {
-                /* no-op */
-            });
-            return;
-        }
-    }
-    catch {
-        // swallow and fall back to <img>
-    }
-    try {
-        const img = new Image();
-        img.referrerPolicy = "strict-origin-when-cross-origin";
-        img.src = clickUrl;
-    }
-    catch {
-        // nothing else we can do
-    }
 }
 /**
  * Generates a section-specific event name for GA4 tracking.
@@ -102,25 +58,21 @@ export function fireScrollPastMetric(measurementId, sectionType, sectionId) {
 }
 // --- View tracking (once per element) ---
 const seenEls = typeof WeakSet !== "undefined" ? new WeakSet() : null;
-export function fireImpressionWhenVisible(el, pixelUrl, measurementId, sectionType, sectionId) {
+export function fireImpressionWhenVisible(el, measurementId, sectionType, sectionId) {
     if (typeof window === "undefined")
         return; // SSR guard
-    if (!el || !pixelUrl)
+    if (!el)
         return;
     if (seenEls && seenEls.has(el))
         return; // de-dupe by element
     let fired = false;
     let hasScrolledPast = false;
-    const img = new Image();
     const fire = () => {
         if (fired)
             return;
         fired = true;
         if (seenEls)
             seenEls.add(el);
-        img.referrerPolicy = "strict-origin-when-cross-origin";
-        img.src = pixelUrl; // GET to your /api/v1/metrics/i?e=...&sig=...
-        // Also send to GA4 if available
         if (measurementId && sectionType && sectionId) {
             sendGA4Event("view", measurementId, sectionType, sectionId);
         }

package/docs/CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+### [Unreleased]
+
+#### Removed
+
+### [2.3.2] - 2026-02-27
+
+#### Removed
+
+- **Legacy server-side tracking** – The previous pixel/click tracking system has been fully replaced by Google Analytics 4 (GA4):
+  - `impressionUrl` and `clickUrlBase` on content objects are no longer used; the API now provides `measurementId`, `sectionId`, and `sectionType` for GA4 events.
+  - The `makeSignedMetricUrls` helper and server-side `/api/v1/t` endpoints (impression/click) have been removed from the Fragment app; the SDK sends view/click/scroll_past via `gtag` only.
+  - See [2.2.0] for GA4 integration details. Historical entries [1.0.5] and earlier described the old pixel-based flow.
+
 ### [2.3.1] - 2026-01-25
 
 ### 🔧 Technical Improvements

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "fragment-headless-sdk",
-  "version": "2.3.1",
+  "version": "2.3.2",
+  "description": "Headless SDK for Fragment Shopify storefronts",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,12 +16,34 @@
     "dist",
     "docs/CHANGELOG.md"
   ],
+  "sideEffects": false,
   "scripts": {
-    "build": "tsc"
+    "build": "tsc && mkdir -p dist/styles && cp src/styles/*.css dist/styles/",
+    "dev": "tsc --watch",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo"
   },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sevenbrand/fragment-monorepo",
+    "directory": "packages/sdk"
+  },
+  "keywords": [
+    "shopify",
+    "headless",
+    "fragment",
+    "sdk",
+    "storefront"
+  ],
   "dependencies": {
-    "@heroicons/react": "^2.2.0",
-    "react": "^19.1.0"
+    "@heroicons/react": "^2.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@types/node": "^24.7.2",

package/readme.md

@@ -377,8 +377,9 @@ interface IHeroContent {
   imageUrl: string;
   mobileImageUrl: string;
   videoUrl?: string;
-  impressionUrl: string;
-  clickUrlBase: string;
+  measurementId?: string;   // GA4 measurement ID (from app config)
+  sectionId?: string;      // Section ID for GA4 event params
+  sectionType?: SectionType;
   styling?: IHeroStyling; // v2.0+ enhanced styling
 }
 ```
@@ -434,8 +435,9 @@ interface IAnnouncementContent {
   buttonLink: string;
   announcementHtml: string;
   counterEndDate?: string;
-  impressionUrl: string;
-  clickUrlBase: string;
+  measurementId?: string;   // GA4 measurement ID (from app config)
+  sectionId?: string;       // Section ID for GA4 event params
+  sectionType?: SectionType;
   styling?: IAnnouncementStyling; // v2.0+ enhanced styling
 }
 ```