✨ Add Google Tag Manager (#185)

apps/builder/src/features/settings/components/MetadataForm.tsx

@@ -36,6 +36,8 @@ export const MetadataForm = ({
     onMetadataChange({ ...metadata, favIconUrl })
   const handleImageSubmit = (imageUrl: string) =>
     onMetadataChange({ ...metadata, imageUrl })
+  const handleGoogleTagManagerIdChange = (googleTagManagerId: string) =>
+    onMetadataChange({ ...metadata, googleTagManagerId })
   const handleHeadCodeChange = (customHeadCode: string) =>
     onMetadataChange({ ...metadata, customHeadCode })
 
@@ -92,26 +94,23 @@ export const MetadataForm = ({
           </PopoverContent>
         </Popover>
       </Stack>
-      <Stack>
-        <FormLabel mb="0" htmlFor="title">
-          Title:
-        </FormLabel>
-        <Input
-          id="title"
-          defaultValue={metadata.title ?? typebotName}
-          onChange={handleTitleChange}
-        />
-      </Stack>
-      <Stack>
-        <FormLabel mb="0" htmlFor="description">
-          Description:
-        </FormLabel>
-        <Textarea
-          id="description"
-          defaultValue={metadata.description}
-          onChange={handleDescriptionChange}
-        />
-      </Stack>
+      <Input
+        label="Title:"
+        defaultValue={metadata.title ?? typebotName}
+        onChange={handleTitleChange}
+      />
+      <Textarea
+        defaultValue={metadata.description}
+        onChange={handleDescriptionChange}
+        label="Description:"
+      />
+      <Input
+        defaultValue={metadata.googleTagManagerId}
+        placeholder="GTM-XXXXXX"
+        onChange={handleGoogleTagManagerIdChange}
+        label="Google Tag Manager ID:"
+        moreInfoTooltip="Do not include it if you are embedding your typebot in an existing website. GTM should be installed in the parent website instead."
+      />
       <Stack>
         <HStack as={FormLabel} mb="0" htmlFor="head">
           <Text>Custom head code:</Text>

apps/builder/src/features/settings/settings.spec.ts

@@ -101,13 +101,10 @@ test.describe.parallel('Settings page', () => {
       await page.fill('input[placeholder="Paste the image link..."]', imageUrl)
       await expect(websiteImg).toHaveAttribute('src', imageUrl)
 
-      // Title
-      await page.fill('input#title', 'Awesome typebot')
-
-      // Description
-      await page.fill('textarea#description', 'Lorem ipsum')
-
-      // Custom head code
+      await page.getByRole('textbox', { name: 'Title' }).fill('Awesome typebot')
+      await page
+        .getByRole('textbox', { name: 'Description' })
+        .fill('Lorem ipsum')
       await page.fill(
         'div[contenteditable=true]',
         '<script>Lorem ipsum</script>'