add GA

package.json

@@ -48,6 +48,7 @@
     "prettier": "^3.2.2",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vite-plugin-radar": "^0.9.2"
   }
 }

src/components/petition.tsx

@@ -34,6 +34,12 @@ const PETITION_API_URL = "https://petitions-229503.appspot.com/api/sign";
 
 const CAMPAIGN_MAILER_API_URL = "https://helptheducks.dxe.io/message/create";
 
+declare global {
+  interface Window {
+    dataLayer?: any[];
+  }
+}
+
 export const Petition = () => {
   const form = useForm<PetitionForm>({
     resolver: zodResolver(PetitionFormSchema),
@@ -59,6 +65,9 @@ export const Petition = () => {
   const onSubmit = useMemo(
     () =>
       handleSubmit(async (data) => {
+        window.dataLayer?.push({
+          event: "form_submitted",
+        });
         // We purposefully do these one at a time. If the first one fails,
         // we don't want to submit the second one. This allows the user to
         // resubmit the form without causing duplicate emails to be sent.

src/data/petition.ts

@@ -40,6 +40,15 @@ export const PetitionFormSchema = z
     // If outside of US, throw away the zip code.
     if (data.outsideUS) {
       data.zip = undefined;
+    } else {
+      // If inside US, zip code is required.
+      if (!data.zip) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Zip code is required",
+          path: ["zip"],
+        });
+      }
     }
     const isInSonoma = !!(
       data.zip &&

vite.config.ts

@@ -2,10 +2,38 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
 import path from "path";
+import { VitePluginRadar } from "vite-plugin-radar";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), TanStackRouterVite()],
+  plugins: [
+    react(),
+    TanStackRouterVite(),
+    VitePluginRadar({
+      /**
+       * enable or disable scripts injection in development
+       * default: false
+       */
+      enableDev: true,
+      // Google Analytics (multiple tag can be set with an array)
+      analytics: [
+        {
+          id: "G-2WJVQ0EX4G",
+          disable: false,
+          config: {
+            cookie_domain: "auto",
+            cookie_expires: 63072000,
+            cookie_prefix: "none",
+            cookie_update: true,
+            cookie_flags: "",
+            send_page_view: true,
+            allow_google_signals: true,
+            allow_ad_personalization_signals: true,
+          },
+        },
+      ],
+    }),
+  ],
   resolve: {
     alias: {
       "~": path.resolve(__dirname, "./src"),