@netlify/spark-ui 0.0.46-alpha.3 → 0.0.46

package/dist/analytics/analytics.d.ts

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

package/dist/analytics/index.d.ts

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

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

@@ -3,9 +3,9 @@ import { SearchState } from '../types/search.types';
  * Custom hook that logs search-related events for analytics.
  *
  * 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.
+ * - `search:new_query`: Logs when the search query changes.
+ * - `search:no_results`: Logs when no results are found for a search.
+ * - `search:result_selected`: Logs when a search result is clicked.
  *
  * 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`.
  *
@@ -15,7 +15,7 @@ import { SearchState } from '../types/search.types';
  * @param {boolean} [debug=false] - Flag to enable debug mode. If true, additional debug information will be sent with the event payloads.
  *
  * @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.
+ *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `search:result_selected` events with the clicked result's title and URL.
  *
  * @example
  * const { handleClick } = useSearchLogger(searchState);

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

@@ -1,34 +1,34 @@
-import { A as k, y as h, q as m } from "../../../../chunks/hooks.module.CNV9mxng.js";
-class y {
+import { A as y, y as h, q as k } from "../../../../chunks/hooks.module.CNV9mxng.js";
+class s {
   /**
    * Pushes an event payload into the dataLayer.
-   * @param eventName e.g. 'www:search_query_changed'
+   * @param eventName e.g. 'www:search_new_query'
    * @param payload   additional key/value data
    */
-  track(l, u = {}) {
-    gtag("event", l, { ...u });
+  track(n, i = {}) {
+    typeof gtag == "function" ? gtag("event", n, { ...i }) : console.error(`gtag is not defined. Event [${n}] failed.`);
   }
 }
-function p(r, l) {
-  const n = k(new y()).current;
+function p(r, n) {
+  const l = y(new s()).current, e = (c) => c.debug_mode = !0;
   return h(() => {
     if (!(r != null && r.searchTerm)) return;
     const c = { query: r == null ? void 0 : r.searchTerm };
-    l && (c.debug_mode = !0), n.track("spark_search:query_changed", c);
+    n && e(c), l.track("search:new_query", c);
   }, [r == null ? void 0 : r.searchTerm]), h(() => {
     if (!(r != null && r.results)) return;
     const c = { query: r == null ? void 0 : r.searchTerm };
-    l && (c.debug_mode = !0), r != null && r.searchTerm && r.results.length === 0 && n.track("spark_search:no_results", c);
+    n && e(c), r != null && r.searchTerm && r.results.length === 0 && l.track("search:no_results", c);
   }, [r == null ? void 0 : r.results]), {
-    handleClick: m((c) => {
-      var i;
-      const e = c.target.closest("a");
-      if (!e) return;
-      const d = (i = e.querySelector(".n-search-link-label")) == null ? void 0 : i.innerHTML, f = e.getAttribute("href"), o = {
-        resultTitle: d,
-        resultUrl: f
+    handleClick: k((c) => {
+      var f;
+      const o = c.target.closest("a");
+      if (!o) return;
+      const g = (f = o.querySelector(".n-search-link-label")) == null ? void 0 : f.innerHTML, d = o.getAttribute("href") || void 0, u = {
+        resultTitle: g,
+        resultUrl: d
       };
-      l && (o.debug_mode = !0), n.track("spark_search:result_clicked", o);
+      n && e(u), l.track("search:result_selected", u);
     }, [])
   };
 }

package/dist/components/preact/SearchModal/types/search.types.d.ts

@@ -23,3 +23,9 @@ export interface SearchState {
     results: SearchLinkProps[];
     isLoading: boolean;
 }
+export interface SearchGTMObjectProps {
+    resultTitle?: string;
+    resultUrl?: string;
+    query?: string;
+    debug_mode?: boolean;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "0.0.46-alpha.3",
+  "version": "0.0.46",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/analytics/GoogleAnalytics.astro

@@ -1,9 +1,21 @@
+---
+interface Props {
+  gaId: string;
+}
+
+const { gaId } = Astro.props as Props;
+---
 <!-- 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>
+{gaId && 
+<>
+  <script async src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}></script>
+  <script define:vars={{id: gaId}}>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', id);
+  </script>
+</>
+}

package/packages/analytics/GoogleTagManager.astro

@@ -1,5 +1,13 @@
+---
+interface Props {
+  gtmId: string;
+  gaId: string;
+}
+
+const { gtmId, gaId } = Astro.props as Props;
+---
 <!-- Google Tag Manager -->
-<script>
+{gtmId && <script define:vars={{id: gtmId}}>
   (function (w, d, s, l, i) {
     w[l] = w[l] || [];
     w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
@@ -9,15 +17,15 @@
     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>
+  })(window, document, 'script', 'dataLayer', id);
+</script>}
 <!-- End Google Tag Manager -->
 
 <!-- Google Analytics (gtag.js) -->
-<script>
+{gaId && <script define:vars={{id: gaId}}>
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
 
-  gtag('config', 'G-X2FMMZSSS9');
-</script>
+  gtag('config', id);
+</script>}
 <!-- End Google Analytics (gtag.js) -->

package/packages/analytics/GoogleTagManagerNoscript.astro

@@ -0,0 +1,12 @@
+{
+  Astro.props.gtmId && (
+    <noscript>
+      <iframe
+        src={`https://www.googletagmanager.com/ns.html?id=${Astro.props.gtmId}`}
+        height="0"
+        width="0"
+        style="display:none;visibility:hidden"
+      ></iframe>
+    </noscript>
+  )
+}

package/packages/analytics/analytics.ts

@@ -1,10 +1,16 @@
 export default class Analytics {
+
   /**
    * Pushes an event payload into the dataLayer.
-   * @param eventName e.g. 'www:search_query_changed'
+   * @param eventName e.g. 'www:search_new_query'
    * @param payload   additional key/value data
    */
   track(eventName: string, payload: Record<string, any> = {}): void {
-    gtag('event', eventName, { ...payload });
+    // Ensures that gtag is available before pushing events
+    if (typeof gtag === 'function') {
+      gtag('event', eventName, { ...payload });
+    } else {
+      console.error(`gtag is not defined. Event [${eventName}] failed.`);
+    }
   }
-}
+}

package/packages/analytics/index.ts

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

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

@@ -1,4 +1,4 @@
-import type { SearchState } from '../types/search.types';
+import type { SearchState, SearchGTMObjectProps } from '../types/search.types';
 import { useEffect, useRef, useCallback } from 'preact/hooks';
 import Analytics from '../../../../analytics/analytics';
 
@@ -6,9 +6,9 @@ import Analytics from '../../../../analytics/analytics';
  * Custom hook that logs search-related events for analytics.
  *
  * 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.
+ * - `search:new_query`: Logs when the search query changes.
+ * - `search:no_results`: Logs when no results are found for a search.
+ * - `search:result_selected`: Logs when a search result is clicked.
  *
  * 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`.
  *
@@ -18,7 +18,7 @@ import Analytics from '../../../../analytics/analytics';
  * @param {boolean} [debug=false] - Flag to enable debug mode. If true, additional debug information will be sent with the event payloads.
  * 
  * @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.
+ *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `search:result_selected` events with the clicked result's title and URL.
  *
  * @example
  * const { handleClick } = useSearchLogger(searchState);
@@ -31,16 +31,16 @@ export function useSearchLogger(state?: SearchState, debug?: boolean) {
   const ref = useRef<Analytics>(new Analytics());
   const analytics = ref.current;
 
+  const enableDebugger = (o: SearchGTMObjectProps) => o.debug_mode = true
+
   // Log search query
   useEffect(() => {
     if (!state?.searchTerm) return;
     const payload = { query: state?.searchTerm };
 
-    if (debug) {
-      payload.debug_mode = true;
-    }
+    if (debug) enableDebugger(payload)
 
-    analytics.track('spark_search:query_changed', payload);
+    analytics.track('search:new_query', payload);
   }, [state?.searchTerm]);
 
   // Log zero‑hit searches
@@ -49,12 +49,10 @@ export function useSearchLogger(state?: SearchState, debug?: boolean) {
 
     const payload = { query: state?.searchTerm };
 
-    if (debug) {
-      payload.debug_mode = true;
-    }
+    if (debug) enableDebugger(payload)
 
     if (state?.searchTerm && state.results.length === 0) {
-      analytics.track('spark_search:no_results', payload);
+      analytics.track('search:no_results', payload);
     }
   }, [state?.results]);
 
@@ -64,17 +62,16 @@ export function useSearchLogger(state?: SearchState, debug?: boolean) {
     if (!anchor) return;
 
     const label = anchor.querySelector('.n-search-link-label')?.innerHTML;
-    const url = anchor.getAttribute('href');
+    const url = anchor.getAttribute('href') || undefined;
     const payload = {
       resultTitle: label,
       resultUrl: url,
     };
 
-    if (debug) {
-      payload.debug_mode = true;
-    }
+    if (debug) enableDebugger(payload)
+
 
-    analytics.track('spark_search:result_clicked', payload);
+    analytics.track('search:result_selected', payload);
   }, []);
 
   return {

package/packages/components/preact/SearchModal/types/search.types.tsx

@@ -27,3 +27,10 @@ export interface SearchState {
   results: SearchLinkProps[];
   isLoading: boolean;
 }
+
+export interface SearchGTMObjectProps {
+  resultTitle?: string;
+  resultUrl?: string;
+  query?: string;
+  debug_mode?: boolean;
+}