fragment-headless-sdk 2.1.8 → 2.2.0

package/dist/components/Announcement/AnnouncementButton.js

@@ -1,28 +1,23 @@
 import React from "react";
-import { ButtonType } from "../../constants";
-import { fireClickMetric, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, resolveTokenByCategory, } from "../../utils";
+import { ButtonType, SectionType } from "../../constants";
+import { fireClickMetric, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveAnnouncementColors, } from "../../utils";
 export default function AnnouncementButton({ content, buttonHref, clickHref, }) {
     // Don’t render if no button or explicitly None
     if (!content?.buttonText || content.buttonType === ButtonType.None)
         return null;
-    // If we weren’t given a usable href, don’t render a broken link
+    // If we weren't given a usable href, don't render a broken link
     if (!buttonHref)
         return null;
     const styling = content.styling;
-    const baseTextColor = resolveTokenByCategory(styling, "colors", "text") ||
-        resolveToken(styling, "textColor");
-    const buttonBgColor = resolveTokenByCategory(styling, "colors", "button") ||
-        resolveToken(styling, "buttonColor");
-    const buttonTextColor = resolveTokenByCategory(styling, "colors", "buttonText") ||
-        resolveToken(styling, "buttonTextColor");
+    const colors = resolveAnnouncementColors(content);
     const baseStyle = content.buttonType === ButtonType.Text
         ? {
             textDecoration: "underline",
-            color: baseTextColor,
+            color: colors.text,
         }
         : {
-            backgroundColor: buttonBgColor,
-            color: buttonTextColor,
+            backgroundColor: colors.button,
+            color: colors.buttonText,
         };
     const style = mergeSlotStyles(baseStyle, styling, "announcementButton", "button");
     const className = mergeSlotClasses("whitespace-nowrap rounded-md px-3 py-2 text-sm font-semibold no-underline hover:cursor-pointer hover:opacity-70", styling, "announcementButton", "button");
@@ -36,7 +31,7 @@ export default function AnnouncementButton({ content, buttonHref, clickHref, })
     const handleClick = React.useCallback(() => {
         if (!clickHref)
             return;
-        fireClickMetric(clickHref);
-    }, [clickHref]);
+        fireClickMetric(clickHref, content.measurementId, content.sectionType || SectionType.Announcement, content.sectionId);
+    }, [clickHref, 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/CountdownTimer.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, } from "../../utils";
+import { mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveCountdownColors, } from "../../utils";
 export default function CountdownTimer({ content, }) {
     const [timeLeft, setTimeLeft] = useState({
         days: "00",
@@ -33,28 +33,25 @@ export default function CountdownTimer({ content, }) {
     const blockClass = mergeSlotClasses("flex flex-col items-center", styling, "countdownBlock");
     const blockStyle = mergeSlotStyles(undefined, styling, "countdownBlock");
     const blockAttributes = mergeSlotAttributes(styling, "countdownBlock");
-    const digitClass = mergeSlotClasses("text-white text-xl font-bold flex items-center justify-center leading-none rounded px-1", styling, "countdownDigit");
-    const digitTextColor = resolveToken(styling, "counterDigitColor", "#FFFFFF") || "#FFFFFF";
-    const digitBackgroundColor = resolveToken(styling, "counterDigitBackgroundColor", "#000000") ||
-        "#000000";
-    const counterTextColor = resolveToken(styling, "counterTextColor", digitTextColor);
+    const digitClass = mergeSlotClasses("text-lg font-bold flex items-center justify-center leading-tight rounded px-1", styling, "countdownDigit");
+    const colors = resolveCountdownColors(content);
     const digitStyle = mergeSlotStyles({
-        color: digitTextColor,
-        backgroundColor: digitBackgroundColor,
+        color: colors.digitColor,
+        backgroundColor: colors.digitBackgroundColor,
     }, styling, "countdownDigit");
     const digitAttributes = mergeSlotAttributes(styling, "countdownDigit");
     const labelClass = mergeSlotClasses("mt-0.5 text-[10px] leading-tight", styling, "countdownLabel");
     const labelStyle = mergeSlotStyles({
-        color: counterTextColor,
+        color: colors.textColor,
     }, styling, "countdownLabel");
     const labelAttributes = mergeSlotAttributes(styling, "countdownLabel");
     const separatorClass = mergeSlotClasses("text-xl font-semibold -mt-4", styling, "countdownSeparator");
     const separatorStyle = mergeSlotStyles({
-        color: counterTextColor,
+        color: colors.textColor,
     }, styling, "countdownSeparator");
     const separatorAttributes = mergeSlotAttributes(styling, "countdownSeparator");
     const renderBlock = (value, label) => (React.createElement("div", { className: blockClass, style: blockStyle, ...(blockAttributes ?? {}) },
-        React.createElement("div", { className: "flex" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: digitClass, style: digitStyle, ...(digitAttributes ?? {}) }, digit)))),
+        React.createElement("div", { className: "flex gap-1" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: digitClass, style: digitStyle, ...(digitAttributes ?? {}) }, digit)))),
         React.createElement("span", { className: labelClass, style: labelStyle, ...(labelAttributes ?? {}) }, label)));
     return (React.createElement("div", { className: containerClass, style: containerStyle, ...(containerAttributes ?? {}) },
         renderBlock(timeLeft.days, "Days"),

package/dist/components/Announcement/index.js

@@ -1,7 +1,7 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import React, { useEffect, useRef } from "react";
-import { AnnouncementType, ButtonType } from "../../constants";
-import { buildClickUrl, fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, resolveTokenByCategory, } from "../../utils";
+import { AnnouncementType, ButtonType, SectionType } from "../../constants";
+import { buildClickUrl, fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveAnnouncementColors, } from "../../utils";
 import AnnouncementButton from "./AnnouncementButton";
 import { AnnouncementStyles } from "./AnnouncementStyles";
 import CountdownTimer from "./CountdownTimer";
@@ -9,9 +9,9 @@ export default function Announcement({ content, type, handleClose, }) {
     const ref = useRef(null);
     useEffect(() => {
         if (ref.current && content.impressionUrl) {
-            fireImpressionWhenVisible(ref.current, content.impressionUrl);
+            fireImpressionWhenVisible(ref.current, content.impressionUrl, content.measurementId, content.sectionType || SectionType.Announcement, content.sectionId);
         }
-    }, [content?.impressionUrl]);
+    }, [content?.impressionUrl, content?.measurementId, content?.sectionType, content?.sectionId]);
     const buttonHref = content?.buttonLink || undefined;
     const clickTrackingHref = content?.buttonLink && content?.clickUrlBase
         ? buildClickUrl(content.clickUrlBase, content.buttonLink)
@@ -19,15 +19,12 @@ export default function Announcement({ content, type, handleClose, }) {
     if (!content)
         return null;
     const styling = content.styling;
-    const backgroundColor = resolveTokenByCategory(styling, "colors", "background") ||
-        resolveToken(styling, "bgColor");
-    const textColor = resolveTokenByCategory(styling, "colors", "text") ||
-        resolveToken(styling, "textColor");
+    const colors = resolveAnnouncementColors(content);
     const themeClasses = getThemeClasses(styling);
     const rootClass = mergeSlotClasses(`relative w-full ${themeClasses}`, styling, "root");
     const rootStyle = mergeSlotStyles({
-        backgroundColor,
-        color: textColor,
+        backgroundColor: colors.background,
+        color: colors.text,
     }, styling, "root");
     const rootAttributes = mergeSlotAttributes(styling, "root");
     const innerClass = mergeSlotClasses("relative mx-auto flex max-w-screen-xl flex-col md:flex-row items-center justify-center gap-4 px-10 md:px-4 py-2 md:py-0 text-center md:text-left min-h-[50px]", styling, "inner", "wrapper");
@@ -48,13 +45,11 @@ export default function Announcement({ content, type, handleClose, }) {
     const contentRowClass = mergeSlotClasses("flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4 w-full", styling, "contentRow");
     const contentRowStyle = mergeSlotStyles(undefined, styling, "contentRow");
     const contentRowAttributes = mergeSlotAttributes(styling, "contentRow");
-    const announcementTextClass = mergeSlotClasses("max-w-none text-base font-semibold", styling, "announcementText");
+    const announcementTextClass = mergeSlotClasses("max-w-none text-based", styling, "announcementText");
     const announcementTextStyle = mergeSlotStyles(undefined, styling, "announcementText");
     const announcementTextAttributes = mergeSlotAttributes(styling, "announcementText");
     const closeButtonClass = mergeSlotClasses("absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer", styling, "closeButton");
-    const closeButtonColor = resolveTokenByCategory(styling, "colors", "closeButton") ||
-        (resolveToken(styling, "closeButtonColor", textColor ?? "#000") ?? "#000");
-    const closeButtonStyle = mergeSlotStyles({ color: closeButtonColor }, styling, "closeButton");
+    const closeButtonStyle = mergeSlotStyles({ color: colors.closeButton }, styling, "closeButton");
     const closeButtonAttributes = mergeSlotAttributes(styling, "closeButton");
     return (React.createElement("div", { ref: ref, className: rootClass, style: rootStyle, ...(rootAttributes ?? {}) },
         React.createElement(AnnouncementStyles, null),

package/dist/components/Hero/DesktopHero.js

@@ -1,4 +1,5 @@
 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, }) {
@@ -16,8 +17,13 @@ export default function DesktopHero({ buttonHref, clickHref, content, colors, co
     const handleClick = React.useCallback(() => {
         if (!clickHref)
             return;
-        fireClickMetric(clickHref);
-    }, [clickHref]);
+        fireClickMetric(clickHref, content.measurementId, content.sectionType || SectionType.HeroBanner, content.sectionId);
+    }, [
+        clickHref,
+        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.js

@@ -1,12 +1,18 @@
 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, }) {
     const handleClick = React.useCallback(() => {
         if (!clickHref)
             return;
-        fireClickMetric(clickHref);
-    }, [clickHref]);
+        fireClickMetric(clickHref, content.measurementId, content.sectionType || SectionType.HeroBanner, content.sectionId);
+    }, [
+        clickHref,
+        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,4 +1,5 @@
 import React, { useEffect, useRef } from "react";
+import { SectionType } from "../../constants";
 import { buildClickUrl, fireImpressionWhenVisible, } from "../../utils";
 import { resolveContentWidthClass, resolveHeight, resolveHeroColors, resolveHeroTypography, resolvePosition, } from "../../utils/hero-resolvers";
 import DesktopHero from "./DesktopHero";
@@ -7,9 +8,9 @@ export default function Hero({ content }) {
     const ref = useRef(null);
     useEffect(() => {
         if (ref.current && content.impressionUrl) {
-            fireImpressionWhenVisible(ref.current, content.impressionUrl);
+            fireImpressionWhenVisible(ref.current, content.impressionUrl, content.measurementId, content.sectionType || SectionType.HeroBanner, content.sectionId);
         }
-    }, [content?.impressionUrl]);
+    }, [content?.impressionUrl, content?.measurementId, content?.sectionType, content?.sectionId]);
     const buttonHref = content?.buttonLink || undefined;
     const clickTrackingHref = content?.buttonLink && content?.clickUrlBase
         ? buildClickUrl(content.clickUrlBase, content.buttonLink)

package/dist/constants/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./announcement";
 export * from "./hero";
+export * from "./section";

package/dist/constants/index.js

@@ -1,2 +1,3 @@
 export * from "./announcement";
 export * from "./hero";
+export * from "./section";

package/dist/constants/section.d.ts

@@ -0,0 +1,4 @@
+export declare enum SectionType {
+    Announcement = "announcement",
+    HeroBanner = "hero_banner"
+}

package/dist/constants/section.js

@@ -0,0 +1,5 @@
+export var SectionType;
+(function (SectionType) {
+    SectionType["Announcement"] = "announcement";
+    SectionType["HeroBanner"] = "hero_banner";
+})(SectionType || (SectionType = {}));

package/dist/types/announcement.d.ts

@@ -1,4 +1,4 @@
-import { AnnouncementStatus, AnnouncementType, ButtonType } from "../constants";
+import { AnnouncementStatus, AnnouncementType, ButtonType, SectionType } from "../constants";
 import { IAnnouncementStyling } from "./styling";
 export declare const buttonTypes: {
     label: string;
@@ -12,6 +12,9 @@ export interface IAnnouncementContent {
     counterEndDate?: string;
     impressionUrl: string;
     clickUrlBase: string;
+    measurementId?: string;
+    sectionId?: string;
+    sectionType?: SectionType;
     styling?: IAnnouncementStyling;
 }
 export interface IAnnouncement {
@@ -21,8 +24,11 @@ export interface IAnnouncement {
     name: string;
     status: AnnouncementStatus;
     content: IAnnouncementContent | null;
+    active_duration_seconds: number | null;
     active_start_date: string | null;
     active_end_date: string | null;
+    last_activated_at: string | null;
+    last_deactivated_at: string | null;
     created_at: string | null;
     updated_at: string | null;
     views_count: number;

package/dist/types/hero.d.ts

@@ -1,4 +1,4 @@
-import { HeroStatus, HeroType } from "../constants";
+import { HeroStatus, HeroType, SectionType } from "../constants";
 import { IHeroStyling } from "./styling";
 export type ShopPage = {
     id: string;
@@ -15,6 +15,9 @@ export interface IHeroContent {
     videoUrl?: string;
     impressionUrl: string;
     clickUrlBase: string;
+    measurementId?: string;
+    sectionId?: string;
+    sectionType?: SectionType;
     styling?: IHeroStyling;
 }
 export interface IHero {
@@ -25,7 +28,10 @@ export interface IHero {
     page: ShopPage["handle"] | null;
     status: HeroStatus;
     content: IHeroContent | null;
+    active_duration_seconds: number | null;
     active_start_date: string | null;
+    last_activated_at: string | null;
+    last_deactivated_at: string | null;
     active_end_date: string | null;
     created_at: string | null;
     updated_at: string | null;

package/dist/utils/announcement-resolvers.d.ts

@@ -0,0 +1,15 @@
+import { IAnnouncementContent } from "../types";
+export interface AnnouncementResolvedColors {
+    background: string;
+    text: string;
+    button: string;
+    buttonText: string;
+    closeButton: string;
+}
+export interface CountdownResolvedColors {
+    digitColor: string;
+    digitBackgroundColor: string;
+    textColor: string;
+}
+export declare function resolveAnnouncementColors(content: IAnnouncementContent): AnnouncementResolvedColors;
+export declare function resolveCountdownColors(content: IAnnouncementContent): CountdownResolvedColors;

package/dist/utils/announcement-resolvers.js

@@ -0,0 +1,45 @@
+import { resolveToken, resolveTokenByCategory } from "./styling";
+const DEFAULT_ANNOUNCEMENT_COLORS = {
+    background: "#000000",
+    text: "#ffffff",
+    button: "#ffffff",
+    buttonText: "#000000",
+    closeButton: "#ffffff",
+};
+const DEFAULT_COUNTDOWN_COLORS = {
+    digitColor: "#ffffff",
+    digitBackgroundColor: "#000000",
+    textColor: "#ffffff",
+};
+const fallbackColor = (value, fallback) => typeof value === "string" && value.trim().length > 0 ? value : fallback;
+export function resolveAnnouncementColors(content) {
+    const styling = content.styling;
+    const background = resolveTokenByCategory(styling, "colors", "background") ||
+        resolveToken(styling, "bgColor");
+    const text = resolveTokenByCategory(styling, "colors", "text") ||
+        resolveToken(styling, "textColor");
+    const button = resolveTokenByCategory(styling, "colors", "button") ||
+        resolveToken(styling, "buttonColor");
+    const buttonText = resolveTokenByCategory(styling, "colors", "buttonText") ||
+        resolveToken(styling, "buttonTextColor");
+    const closeButton = resolveTokenByCategory(styling, "colors", "closeButton") ||
+        resolveToken(styling, "closeButtonColor");
+    return {
+        background: fallbackColor(background, DEFAULT_ANNOUNCEMENT_COLORS.background),
+        text: fallbackColor(text, DEFAULT_ANNOUNCEMENT_COLORS.text),
+        button: fallbackColor(button, DEFAULT_ANNOUNCEMENT_COLORS.button),
+        buttonText: fallbackColor(buttonText, DEFAULT_ANNOUNCEMENT_COLORS.buttonText),
+        closeButton: fallbackColor(closeButton, fallbackColor(text, DEFAULT_ANNOUNCEMENT_COLORS.closeButton)),
+    };
+}
+export function resolveCountdownColors(content) {
+    const styling = content.styling;
+    const digitColor = resolveToken(styling, "counterDigitColor");
+    const digitBackgroundColor = resolveToken(styling, "counterDigitBackgroundColor");
+    const textColor = resolveToken(styling, "counterTextColor", digitColor);
+    return {
+        digitColor: fallbackColor(digitColor, DEFAULT_COUNTDOWN_COLORS.digitColor),
+        digitBackgroundColor: fallbackColor(digitBackgroundColor, DEFAULT_COUNTDOWN_COLORS.digitBackgroundColor),
+        textColor: fallbackColor(textColor, DEFAULT_COUNTDOWN_COLORS.textColor),
+    };
+}

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./announcement-resolvers";
 export * from "./cache";
 export * from "./fetch-resource";
 export * from "./hero-resolvers";

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export * from "./announcement-resolvers";
 export * from "./cache";
 export * from "./fetch-resource";
 export * from "./hero-resolvers";

package/dist/utils/metrics.d.ts

@@ -1,4 +1,11 @@
+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): void;
-export declare function fireImpressionWhenVisible(el: HTMLElement, pixelUrl: string): void;
+export declare function fireClickMetric(clickUrl: string, measurementId?: string, sectionType?: SectionType, sectionId?: string): void;
+declare global {
+    interface Window {
+        gtag?: (command: string, targetId: string | Date, config?: Record<string, unknown>) => void;
+        dataLayer?: unknown[];
+    }
+}
+export declare function fireImpressionWhenVisible(el: HTMLElement, pixelUrl: string, measurementId?: string, sectionType?: SectionType, sectionId?: string): void;

package/dist/utils/metrics.js

@@ -16,11 +16,15 @@ export function buildClickUrl(clickUrlBase, targetHref) {
 }
 // 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) {
+export function fireClickMetric(clickUrl, measurementId, sectionType, sectionId) {
     if (typeof window === "undefined")
         return;
     if (!clickUrl)
         return;
+    // Send to GA4 first (if available)
+    if (measurementId && sectionType && sectionId) {
+        sendGA4Event("section_click", measurementId, sectionType, sectionId);
+    }
     try {
         if (typeof fetch === "function") {
             fetch(clickUrl, {
@@ -45,9 +49,32 @@ export function fireClickMetric(clickUrl) {
         // nothing else we can do
     }
 }
+/**
+ * Sends a GA4 event if gtag is available and measurementId is provided.
+ * This is a fire-and-forget operation that won't throw errors.
+ */
+function sendGA4Event(eventName, measurementId, sectionType, sectionId) {
+    if (typeof window === "undefined")
+        return;
+    if (!measurementId)
+        return;
+    if (!window.gtag)
+        return;
+    try {
+        window.gtag("event", eventName, {
+            section_type: sectionType,
+            section_id: sectionId,
+            event_category: "Fragment Sections",
+            event_label: `${sectionType}_${sectionId}`,
+        });
+    }
+    catch {
+        // Silently fail - don't break tracking if GA4 fails
+    }
+}
 // --- View tracking (once per element) ---
 const seenEls = typeof WeakSet !== "undefined" ? new WeakSet() : null;
-export function fireImpressionWhenVisible(el, pixelUrl) {
+export function fireImpressionWhenVisible(el, pixelUrl, measurementId, sectionType, sectionId) {
     if (typeof window === "undefined")
         return; // SSR guard
     if (!el || !pixelUrl)
@@ -64,6 +91,10 @@ export function fireImpressionWhenVisible(el, pixelUrl) {
             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("section_view", measurementId, sectionType, sectionId);
+        }
     };
     // Fallback if IntersectionObserver is missing
     const fallback = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-headless-sdk",
-  "version": "2.1.8",
+  "version": "2.2.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/readme.md

@@ -4,7 +4,7 @@ The official SDK for integrating with Fragment-Shopify CMS. Provides React compo
 
 ## ✨ What's New
 
-**v2.1.8** - Enhanced countdown timer styling with customizable color tokens
+**v2.2.0** - Google Analytics 4 (GA4) integration with automatic section tracking
 
 > See [CHANGELOG.md](./docs/CHANGELOG.md) for full release history
 
@@ -71,6 +71,15 @@ Fragment-Shopify App (CMS) → API Endpoint → fragment-headless-sdk (Consumer)
 - 🌐 **Cross-Browser**: Works across all modern browsers with appropriate fallbacks
 - 🔄 **Graceful Degradation**: Tracking fails silently without affecting user experience
 
+### Google Analytics 4 (GA4) Integration (v2.2.0+)
+
+- 📊 **Automatic Event Tracking**: Automatic `section_view` and `section_click` events
+- 🎯 **Type-Safe Section Types**: `SectionType` enum for consistent section identification
+- 🔧 **Configurable Tracking**: Control tracking via `measurementId`, `sectionId`, and `sectionType` fields
+- ⚡ **Dual Tracking**: Maintains existing pixel tracking while adding GA4 support
+- 🛡️ **Graceful Fallback**: Works even if GA4 is not configured (doesn't break functionality)
+- 📦 **Exported Types**: `SectionType` enum available for consumer use
+
 ---
 
 ## 📦 Installation