@netlify/spark-ui 0.0.45 → 0.0.46-alpha

package/dist/analytics/analytics.d.ts

@@ -0,0 +1,8 @@
+export default class Analytics {
+    /**
+     * Pushes an event payload into the dataLayer.
+     * @param eventName e.g. 'www:search_query_changed'
+     * @param payload   additional key/value data
+     */
+    track(eventName: string, payload?: Record<string, any>): void;
+}

package/dist/analytics/index.d.ts

@@ -0,0 +1,4 @@
+import { default as GoogleTagManager } from './GoogleTagManager.astro';
+import { default as GoogleAnalytics } from './GoogleAnalytics.astro';
+import { default as Analytics } from './analytics';
+export { Analytics, GoogleAnalytics, GoogleTagManager };

package/dist/components/preact/SearchModal/hooks/useSearchLogger.d.ts

@@ -1,17 +1,26 @@
 import { SearchState } from '../types/search.types';
 /**
- * Hook that logs search-related events to your analytics Logger.
+ * Custom hook that logs search-related events for analytics.
  *
- * It will:
- * - Push a `searchQueryChanged` event whenever the search term changes.
- * - Push a `searchNoResults` event whenever a non-empty query returns zero results.
- * - Provide a click handler (`handleClick`) to log `searchResultClick` events.
+ * This hook tracks the following search events:
+ * - `spark_search:query_changed`: Logs when the search query changes.
+ * - `spark_search:no_results`: Logs when no results are found for a search.
+ * - `spark_search:result_clicked`: Logs when a search result is clicked.
  *
- * @param {SearchState} state - The current search state, containing:
- *   - `searchTerm` (string): the text the user has searched for.
- *   - `results` (Array<any>): the array of result objects returned.
- * @returns {{ handleClick: (e: Event) => void }}
- *   An object with a `handleClick` function that you can attach to result links to log clicks.
+ * It uses an instance of `Analytics` to track these events. The hook listens to changes in the `searchTerm` and `results` properties from the provided `SearchState`.
+ *
+ * @param {SearchState} [state] - The search state, which includes the current search term and the results of the search.
+ *   - `state.searchTerm`: The current search query string.
+ *   - `state.results`: The search results array. If it's empty, the hook will log a no-results event.
+ *
+ * @returns {Object} - An object with the following function:
+ *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `spark_search:result_clicked` events with the clicked result's title and URL.
+ *
+ * @example
+ * const { handleClick } = useSearchLogger(searchState);
+ *
+ * // In your component, attach handleClick to the search result links
+ * <a href="result-url" onClick={handleClick}>Search Result</a>
  */
 export declare function useSearchLogger(state?: SearchState): {
     handleClick: (e: Event) => void;

package/dist/components/preact/SearchModal/hooks/useSearchLogger.js

@@ -1,43 +1,33 @@
-var a = Object.defineProperty;
-var d = (r, e, c) => e in r ? a(r, e, { enumerable: !0, configurable: !0, writable: !0, value: c }) : r[e] = c;
-var h = (r, e, c) => d(r, typeof e != "symbol" ? e + "" : e, c);
-import { A as L, y as l, q as s } from "../../../../chunks/hooks.module.CNV9mxng.js";
+import { A as k, y as u, q as f } from "../../../../chunks/hooks.module.CNV9mxng.js";
 class g {
-  /**
-   * @param dl Optional injected dataLayer array. Defaults to window.dataLayer.
-   */
-  constructor(e) {
-    h(this, "dataLayer");
-    this.dataLayer = Array.isArray(e) ? e : window.dataLayer, Array.isArray(this.dataLayer) || (window.dataLayer = [], this.dataLayer = window.dataLayer);
-  }
   /**
    * Pushes an event payload into the dataLayer.
-   * @param eventName e.g. 'searchResultClick'
+   * @param eventName e.g. 'www:search_query_changed'
    * @param payload   additional key/value data
    */
-  push(e, c = {}) {
-    this.dataLayer.push({ event: e, ...c });
+  track(n, c = {}) {
+    gtag("event", n, c);
   }
 }
-function m(r) {
-  const e = L(new g());
-  return l(() => {
-    r != null && r.searchTerm && e.current.push("searchQueryChanged", { query: r == null ? void 0 : r.searchTerm });
-  }, [r == null ? void 0 : r.searchTerm]), l(() => {
-    r != null && r.results && r != null && r.searchTerm && r.results.length === 0 && e.current.push("searchNoResults", { query: r == null ? void 0 : r.searchTerm });
+function T(r) {
+  const c = k(new g()).current;
+  return u(() => {
+    r != null && r.searchTerm && c.track("spark_search:query_changed", { query: r == null ? void 0 : r.searchTerm });
+  }, [r == null ? void 0 : r.searchTerm]), u(() => {
+    r != null && r.results && r != null && r.searchTerm && r.results.length === 0 && c.track("spark_search:no_results", { query: r == null ? void 0 : r.searchTerm });
   }, [r == null ? void 0 : r.results]), {
-    handleClick: s((i) => {
-      var u;
-      const n = i.target.closest("a");
-      if (!n) return;
-      const o = (u = n.querySelector(".n-search-link-label")) == null ? void 0 : u.innerHTML, y = n.getAttribute("href");
-      e.current.push("searchResultClick", {
-        searchResultTitle: o,
-        searchResultURL: y
+    handleClick: f((h) => {
+      var e;
+      const l = h.target.closest("a");
+      if (!l) return;
+      const i = (e = l.querySelector(".n-search-link-label")) == null ? void 0 : e.innerHTML, o = l.getAttribute("href");
+      c.track("spark_search:result_clicked", {
+        resultTitle: i,
+        resultUrl: o
       });
     }, [])
   };
 }
 export {
-  m as useSearchLogger
+  T as useSearchLogger
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "0.0.45",
+  "version": "0.0.46-alpha",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -28,7 +28,8 @@
     "./logos/*.svg": "./packages/assets/logos/*.svg",
     "./styles/*.css": "./packages/styles/*.css",
     "./components": "./packages/components/index.ts",
-    "./utils": "./packages/utils/index.ts"
+    "./utils": "./packages/utils/index.ts",
+    "./analytics": "./packages/analytics/index.ts"
   },
   "dependencies": {
     "@preact/preset-vite": "^2.10.1",
@@ -42,6 +43,7 @@
   "devDependencies": {
     "@terrazzo/cli": "^0.6.3",
     "@terrazzo/plugin-css": "^0.6.0",
+    "@types/gtag.js": "^0.0.20",
     "tslib": "^2.8.1",
     "typescript": "^5.8.2"
   },

package/packages/analytics/GoogleAnalytics.astro

@@ -0,0 +1,9 @@
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-X2FMMZSSS9"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-X2FMMZSSS9');
+</script>

package/packages/analytics/GoogleTagManager.astro

@@ -0,0 +1,14 @@
+<!-- Google Tag Manager -->
+<script>
+  (function (w, d, s, l, i) {
+    w[l] = w[l] || [];
+    w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+    var f = d.getElementsByTagName(s)[0],
+      j = d.createElement(s),
+      dl = l != 'dataLayer' ? '&l=' + l : '';
+    j.async = true;
+    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+    f.parentNode.insertBefore(j, f);
+  })(window, document, 'script', 'dataLayer', 'GTM-T7WNFLD');
+</script>
+<!-- End Google Tag Manager -->

package/packages/analytics/analytics.ts

@@ -0,0 +1,10 @@
+export default class Analytics {
+  /**
+   * Pushes an event payload into the dataLayer.
+   * @param eventName e.g. 'www:search_query_changed'
+   * @param payload   additional key/value data
+   */
+  track(eventName: string, payload: Record<string, any> = {}): void {
+    gtag('event', eventName, payload);
+  }
+}

package/packages/analytics/index.ts

@@ -0,0 +1,5 @@
+import GoogleTagManager from "./GoogleTagManager.astro";
+import GoogleAnalytics from "./GoogleAnalytics.astro";
+import Analytics from "./analytics"
+
+export { Analytics, GoogleAnalytics, GoogleTagManager }

package/packages/components/preact/SearchModal/hooks/useSearchLogger.ts

@@ -1,30 +1,39 @@
 import type { SearchState } from '../types/search.types';
 import { useEffect, useRef, useCallback } from 'preact/hooks';
-import { Logger } from '../../../../analytics/logger';
+import Analytics from '../../../../analytics/analytics';
 
 /**
- * Hook that logs search-related events to your analytics Logger.
+ * Custom hook that logs search-related events for analytics.
  *
- * It will:
- * - Push a `searchQueryChanged` event whenever the search term changes.
- * - Push a `searchNoResults` event whenever a non-empty query returns zero results.
- * - Provide a click handler (`handleClick`) to log `searchResultClick` events.
+ * This hook tracks the following search events:
+ * - `spark_search:query_changed`: Logs when the search query changes.
+ * - `spark_search:no_results`: Logs when no results are found for a search.
+ * - `spark_search:result_clicked`: Logs when a search result is clicked.
  *
- * @param {SearchState} state - The current search state, containing:
- *   - `searchTerm` (string): the text the user has searched for.
- *   - `results` (Array<any>): the array of result objects returned.
- * @returns {{ handleClick: (e: Event) => void }}
- *   An object with a `handleClick` function that you can attach to result links to log clicks.
+ * It uses an instance of `Analytics` to track these events. The hook listens to changes in the `searchTerm` and `results` properties from the provided `SearchState`.
+ *
+ * @param {SearchState} [state] - The search state, which includes the current search term and the results of the search.
+ *   - `state.searchTerm`: The current search query string.
+ *   - `state.results`: The search results array. If it's empty, the hook will log a no-results event.
+ *
+ * @returns {Object} - An object with the following function:
+ *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `spark_search:result_clicked` events with the clicked result's title and URL.
+ *
+ * @example
+ * const { handleClick } = useSearchLogger(searchState);
+ * 
+ * // In your component, attach handleClick to the search result links
+ * <a href="result-url" onClick={handleClick}>Search Result</a>
  */
 
-
 export function useSearchLogger(state?: SearchState) {
-  const loggerRef = useRef<Logger>(new Logger());
+  const ref = useRef<Analytics>(new Analytics());
+  const analytics = ref.current;
 
   // Log search query
   useEffect(() => {
     if (!state?.searchTerm) return 
-    loggerRef.current.push('searchQueryChanged', { query: state?.searchTerm });
+    analytics.track('spark_search:query_changed', { query: state?.searchTerm });
   }, [state?.searchTerm]);
 
   // Log zero‑hit searches
@@ -32,7 +41,7 @@ export function useSearchLogger(state?: SearchState) {
     if (!state?.results) return 
 
     if (state?.searchTerm && state.results.length === 0) {
-      loggerRef.current.push('searchNoResults', { query: state?.searchTerm });
+      analytics.track('spark_search:no_results', { query: state?.searchTerm });
     }
   }, [state?.results]);
 
@@ -44,9 +53,9 @@ export function useSearchLogger(state?: SearchState) {
     const label = anchor.querySelector('.n-search-link-label')?.innerHTML
     const url = anchor.getAttribute('href')
 
-    loggerRef.current.push('searchResultClick', {
-      searchResultTitle: label,
-      searchResultURL: url,
+    analytics.track('spark_search:result_clicked', {
+      resultTitle: label,
+      resultUrl: url,
     });
   }, []);
 

package/dist/analytics/logger.d.ts

@@ -1,13 +0,0 @@
-export declare class Logger {
-    private dataLayer;
-    /**
-     * @param dl Optional injected dataLayer array. Defaults to window.dataLayer.
-     */
-    constructor(dl?: any[]);
-    /**
-     * Pushes an event payload into the dataLayer.
-     * @param eventName e.g. 'searchResultClick'
-     * @param payload   additional key/value data
-     */
-    push(eventName: string, payload?: Record<string, any>): void;
-}

package/packages/analytics/logger.ts

@@ -1,26 +0,0 @@
-export class Logger {
-  private dataLayer: any[];
-
-  /**
-   * @param dl Optional injected dataLayer array. Defaults to window.dataLayer.
-   */
-  constructor(dl?: any[]) {
-    // Use injected or global dataLayer
-    this.dataLayer = Array.isArray(dl) ? dl : (window as any).dataLayer;
-
-    // If for some reason it's not an array, initialize it
-    if (!Array.isArray(this.dataLayer)) {
-      (window as any).dataLayer = [];
-      this.dataLayer = (window as any).dataLayer;
-    }
-  }
-
-  /**
-   * Pushes an event payload into the dataLayer.
-   * @param eventName e.g. 'searchResultClick'
-   * @param payload   additional key/value data
-   */
-  push(eventName: string, payload: Record<string, any> = {}): void {
-    this.dataLayer.push({ event: eventName, ...payload });
-  }
-}