From d318e71f63e9778b2748ed18358899e113764f4c Mon Sep 17 00:00:00 2001 From: Jorgelig Date: Wed, 14 Dec 2022 01:35:01 -0600 Subject: [PATCH 1/2] feat: add Google Tag Manager --- .../settings/components/MetadataForm.tsx | 14 ++ apps/viewer/src/components/Seo.tsx | 121 ++++++++++-------- .../models/src/features/typebot/settings.ts | 2 + 3 files changed, 86 insertions(+), 51 deletions(-) diff --git a/apps/builder/src/features/settings/components/MetadataForm.tsx b/apps/builder/src/features/settings/components/MetadataForm.tsx index 62f1ae3fba..e3a9828f2d 100644 --- a/apps/builder/src/features/settings/components/MetadataForm.tsx +++ b/apps/builder/src/features/settings/components/MetadataForm.tsx @@ -30,6 +30,8 @@ export const MetadataForm = ({ }: Props) => { const handleTitleChange = (title: string) => onMetadataChange({ ...metadata, title }) + const handleGoogleTagManagerChange = (googleTagManagerId: string) => + onMetadataChange({...metadata, googleTagManagerId }) const handleDescriptionChange = (description: string) => onMetadataChange({ ...metadata, description }) const handleFavIconSubmit = (favIconUrl: string) => @@ -112,6 +114,18 @@ export const MetadataForm = ({ onChange={handleDescriptionChange} /> + + + Google Tag Manager Id: + + + + Custom head code: diff --git a/apps/viewer/src/components/Seo.tsx b/apps/viewer/src/components/Seo.tsx index 5b3fe59b73..01b2e03b3c 100644 --- a/apps/viewer/src/components/Seo.tsx +++ b/apps/viewer/src/components/Seo.tsx @@ -1,6 +1,7 @@ import { Metadata } from 'models' import Head from 'next/head' -import React from 'react' +import Script from 'next/script' +import React, { useState } from 'react' type SEOProps = { url: string @@ -11,55 +12,73 @@ type SEOProps = { export const SEO = ({ url, typebotName, - metadata: { title, description, favIconUrl, imageUrl }, -}: SEOProps) => ( - - {title ?? typebotName} - - - - + metadata: { title, description, favIconUrl, imageUrl, googleTagManagerId }, +}: SEOProps) => { + const [isGTMDeclared, setIsGTMDeclared] = useState(googleTagManagerId) - - - - - - + return ( + <> + + {title ?? typebotName} + + + + - - - - - - -) + + + + + + + + + + + + + + + + ) +} diff --git a/packages/models/src/features/typebot/settings.ts b/packages/models/src/features/typebot/settings.ts index d46352fe6b..ae8093f137 100644 --- a/packages/models/src/features/typebot/settings.ts +++ b/packages/models/src/features/typebot/settings.ts @@ -21,6 +21,7 @@ const metadataSchema = z.object({ imageUrl: z.string().optional(), favIconUrl: z.string().optional(), customHeadCode: z.string().optional(), + googleTagManagerId: z.string().optional(), }) export const settingsSchema = z.object({ @@ -41,6 +42,7 @@ export const defaultSettings: Settings = { metadata: { description: 'Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form.', + googleTagManagerId: '', }, } From 5863660c3980f63992e0ba974c323c692d562288 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Tue, 20 Dec 2022 08:23:07 +0100 Subject: [PATCH 2/2] :art: (gtm) Add noscript element injection in body --- .../settings/components/MetadataForm.tsx | 53 +++----- .../src/features/settings/settings.spec.ts | 11 +- apps/docs/docs/editor/settings.mdx | 6 + apps/viewer/src/components/Seo.tsx | 125 ++++++++---------- apps/viewer/src/components/TypebotPage.tsx | 5 +- .../src/features/settings/settings.spec.ts | 18 ++- apps/viewer/src/lib/google-tag-manager.ts | 23 ++++ .../models/src/features/typebot/settings.ts | 1 - 8 files changed, 128 insertions(+), 114 deletions(-) create mode 100644 apps/viewer/src/lib/google-tag-manager.ts diff --git a/apps/builder/src/features/settings/components/MetadataForm.tsx b/apps/builder/src/features/settings/components/MetadataForm.tsx index e3a9828f2d..bcb9ac503b 100644 --- a/apps/builder/src/features/settings/components/MetadataForm.tsx +++ b/apps/builder/src/features/settings/components/MetadataForm.tsx @@ -30,14 +30,14 @@ export const MetadataForm = ({ }: Props) => { const handleTitleChange = (title: string) => onMetadataChange({ ...metadata, title }) - const handleGoogleTagManagerChange = (googleTagManagerId: string) => - onMetadataChange({...metadata, googleTagManagerId }) const handleDescriptionChange = (description: string) => onMetadataChange({ ...metadata, description }) const handleFavIconSubmit = (favIconUrl: string) => onMetadataChange({ ...metadata, favIconUrl }) const handleImageSubmit = (imageUrl: string) => onMetadataChange({ ...metadata, imageUrl }) + const handleGoogleTagManagerIdChange = (googleTagManagerId: string) => + onMetadataChange({ ...metadata, googleTagManagerId }) const handleHeadCodeChange = (customHeadCode: string) => onMetadataChange({ ...metadata, customHeadCode }) @@ -94,38 +94,23 @@ export const MetadataForm = ({ - - - Title: - - - - - - Description: - -