Merge pull request #293 from curiosta/feat/add-umami-script

feat: add umami script
curiosta · Aug 25, 2023 · ab976e5 · ab976e5
2 parents 0ab6adf + c47f8ff
commit ab976e5
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 27 deletions.
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -54,8 +54,15 @@ Description is longer than 160 characters in ${Astro.url.pathname}
 window.dataLayer = window.dataLayer || [];
 function gtag() {
   dataLayer.push(arguments);
-  }
-  gtag("js", new Date());
+}
+gtag("js", new Date());
 
-  gtag("config", "G-1ZSJXCXN8X");
+gtag("config", "G-1ZSJXCXN8X");
 </script>
+
+<!-- umami script -->
+<script
+  async
+  src="https://umami.curiosta.com/script.js"
+  data-website-id="2994f655-b2b0-4afa-a05b-af202b6ad1a3"
+  data-auto-track="false"></script>
diff --git a/src/components/Products/SearchInput.tsx b/src/components/Products/SearchInput.tsx
@@ -1,40 +1,63 @@
-import Button from '@components/Button';
-import FormControl from '@components/FormControl';
-import Input from '@components/Input';
-import type { Signal } from '@preact/signals';
-import type { Product } from '@store/productStore';
-import debounce from '@utils/debounce';
-import getProductsFromUrl from '@utils/getProductsFromUrl';
-import type { FunctionComponent } from 'preact';
+import Button from "@components/Button";
+import FormControl from "@components/FormControl";
+import Input from "@components/Input";
+import type { Signal } from "@preact/signals";
+import type { Product } from "@store/productStore";
+import debounce from "@utils/debounce";
+import getProductsFromUrl from "@utils/getProductsFromUrl";
+import type { FunctionComponent } from "preact";
 
 type TSearchInputProps = {
-  products: Signal<Product[]>
-}
+  products: Signal<Product[]>;
+};
 
 const SearchInput: FunctionComponent<TSearchInputProps> = ({ products }) => {
   const onSearchChange = (e: any) => {
-    const url = new URL(window.location.href)
-    url.searchParams.set('q', e.target.value)
-    window.history.replaceState(undefined, '', url.href)
+    const url = new URL(window.location.href);
+    url.searchParams.set("q", e.target.value);
+    window.history.replaceState(undefined, "", url.href);
 
     debounce(async () => {
-      const { result } = await getProductsFromUrl(url.href)
+      const { result } = await getProductsFromUrl(url.href);
       products.value = result.products;
-    })
-  }
+
+      if (e.target.value) {
+        const searchValue = e.target.value;
+        window.umami.track(e.target.name, { searchValue });
+      }
+    });
+  };
 
   return (
     <div className={`flex w-3/4`}>
-      <FormControl className={'flex w-full'}>
-        <Input placeholder="Search products..." className={`rounded-r-none h-10`} onChange={onSearchChange} />
-        <Button className={`p-0 w-10 h-10 rounded-l-none flex items-center justify-center`}>
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+      <FormControl className={"flex w-full"}>
+        <Input
+          placeholder="Search products..."
+          className={`rounded-r-none h-10`}
+          onChange={onSearchChange}
+          name="search"
+        />
+        <Button
+          className={`p-0 w-10 h-10 rounded-l-none flex items-center justify-center`}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-6 h-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            />
           </svg>
         </Button>
       </FormControl>
     </div>
-  )
-}
+  );
+};
 
-export default SearchInput
+export default SearchInput;