From 9e8acd97aa4ffe2790d555dbed50323229605160 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Thu, 27 Apr 2023 13:23:10 +0200
Subject: [PATCH] :zap: (ga) Add send_to option

---
 .../components/GoogleAnalyticsSettings.tsx    | 50 +++++++++----------
 packages/embeds/js/package.json               |  2 +-
 packages/embeds/js/src/lib/gtag.ts            |  2 +
 packages/embeds/react/package.json            |  2 +-
 .../blocks/integrations/googleAnalytics.ts    |  1 +
 5 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx b/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx
index 39be503c0..bc1e6f166 100644
--- a/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx
+++ b/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx
@@ -6,9 +6,7 @@ import {
   AccordionItem,
   AccordionPanel,
   Box,
-  FormLabel,
   Stack,
-  Tag,
 } from '@chakra-ui/react'
 import { GoogleAnalyticsOptions } from '@typebot.io/schemas'
 import React from 'react'
@@ -22,43 +20,48 @@ export const GoogleAnalyticsSettings = ({
   options,
   onOptionsChange,
 }: Props) => {
-  const handleTrackingIdChange = (trackingId: string) =>
+  const updateTrackingId = (trackingId: string) =>
     onOptionsChange({ ...options, trackingId })
 
-  const handleCategoryChange = (category: string) =>
+  const updateCategory = (category: string) =>
     onOptionsChange({ ...options, category })
 
-  const handleActionChange = (action: string) =>
+  const updateAction = (action: string) =>
     onOptionsChange({ ...options, action })
 
-  const handleLabelChange = (label: string) =>
-    onOptionsChange({ ...options, label })
+  const updateLabel = (label: string) => onOptionsChange({ ...options, label })
 
-  const handleValueChange = (value?: string) =>
+  const updateValue = (value?: string) =>
     onOptionsChange({
       ...options,
       value: value ? parseFloat(value) : undefined,
     })
 
+  const updateSendTo = (sendTo?: string) =>
+    onOptionsChange({
+      ...options,
+      sendTo,
+    })
+
   return (
     <Stack spacing={4}>
       <TextInput
         label="Tracking ID:"
         defaultValue={options?.trackingId ?? ''}
         placeholder="G-123456..."
-        onChange={handleTrackingIdChange}
+        onChange={updateTrackingId}
       />
       <TextInput
         label="Event category:"
         defaultValue={options?.category ?? ''}
         placeholder="Example: Typebot"
-        onChange={handleCategoryChange}
+        onChange={updateCategory}
       />
       <TextInput
         label="Event action:"
         defaultValue={options?.action ?? ''}
         placeholder="Example: Submit email"
-        onChange={handleActionChange}
+        onChange={updateAction}
       />
       <Accordion allowToggle>
         <AccordionItem>
@@ -72,26 +75,23 @@ export const GoogleAnalyticsSettings = ({
           </h2>
           <AccordionPanel pb={4} as={Stack} spacing="6">
             <TextInput
-              label={
-                <>
-                  Event label <Tag>Optional</Tag>:
-                </>
-              }
+              label="Event label:"
               defaultValue={options?.label ?? ''}
               placeholder="Example: Campaign Z"
-              onChange={handleLabelChange}
+              onChange={updateLabel}
             />
             <TextInput
-              label={
-                <>
-                  <FormLabel mb="0" htmlFor="value">
-                    Event value <Tag>Optional</Tag>:
-                  </FormLabel>
-                </>
-              }
+              label="Event value:"
               defaultValue={options?.value?.toString() ?? ''}
               placeholder="Example: 0"
-              onChange={handleValueChange}
+              onChange={updateValue}
+            />
+            <TextInput
+              label="Send to:"
+              moreInfoTooltip="Useful to send a conversion event to Google Ads"
+              defaultValue={options?.value?.toString() ?? ''}
+              placeholder="Example: AW-123456789"
+              onChange={updateSendTo}
             />
           </AccordionPanel>
         </AccordionItem>
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index 03eb14755..5793d63d6 100644
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/embeds/js/src/lib/gtag.ts b/packages/embeds/js/src/lib/gtag.ts
index 92f9270d2..bbba19e93 100644
--- a/packages/embeds/js/src/lib/gtag.ts
+++ b/packages/embeds/js/src/lib/gtag.ts
@@ -7,6 +7,7 @@ declare const gtag: (
     event_category: string | undefined
     event_label: string | undefined
     value: number | undefined
+    send_to: string | undefined
   }
 ) => void
 
@@ -39,6 +40,7 @@ export const sendGaEvent = (options: GoogleAnalyticsOptions) => {
     event_category: options.category,
     event_label: options.label,
     value: options.value,
+    send_to: options.sendTo,
   })
 }
 
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index f9821b449..a5a3c5573 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/schemas/features/blocks/integrations/googleAnalytics.ts b/packages/schemas/features/blocks/integrations/googleAnalytics.ts
index f0e86e15e..958a9797a 100644
--- a/packages/schemas/features/blocks/integrations/googleAnalytics.ts
+++ b/packages/schemas/features/blocks/integrations/googleAnalytics.ts
@@ -8,6 +8,7 @@ export const googleAnalyticsOptionsSchema = z.object({
   action: z.string().optional(),
   label: z.string().optional(),
   value: z.number().optional(),
+  sendTo: z.string().optional(),
 })
 
 export const googleAnalyticsBlockSchema = blockBaseSchema.merge(