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

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.js

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

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-alpha.4",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/analytics/GoogleAnalytics.astro

@@ -1,9 +1,14 @@
+---
+const { gaId } = Astro.props;
+
+if (!gaId) console.error ('[GoogleTagManager] no GTM id provided')
+---
 <!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-X2FMMZSSS9"></script>
-<script>
+<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', 'G-X2FMMZSSS9');
+  gtag('config', id);
 </script>

package/packages/analytics/GoogleTagManager.astro

@@ -1,5 +1,11 @@
+---
+const { gtmId, gaId } = Astro.props;
+
+if (!gtmId) console.error ('[GoogleTagManager] no GTM id provided')
+if (!gaId) console.error ('[GoogleTagManager] no GA id provided')
+---
 <!-- Google Tag Manager -->
-<script>
+<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 +15,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');
+  })(window, document, 'script', 'dataLayer', id);
 </script>
 <!-- End Google Tag Manager -->
 
 <!-- Google Analytics (gtag.js) -->
-<script>
+<script define:vars={{id: gaId}}>
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
 
-  gtag('config', 'G-X2FMMZSSS9');
+  gtag('config', id);
 </script>
 <!-- End Google Analytics (gtag.js) -->

package/packages/analytics/GoogleTagManagerNoscript.astro

@@ -0,0 +1,9 @@
+<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 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. Tracking event failed.`, eventName);
+    }
   }
-}
+}

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 }