blsmedia/bot
2
0
Fork 0
Code Issues Activity

✨ Add Google Tag Manager (#185)

Browse Source
This commit is contained in:
Jorgelig
2022-12-20 09:59:18 -06:00
committed by GitHub
parent 3394fa5e0a
commit a898a7aa41
8 changed files with 129 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
apps/viewer/src/components/Seo.tsx
View File

@@ -1,6 +1,9 @@
import { gtmHeadSnippet } from '@/lib/google-tag-manager'
import { Metadata } from 'models'
import Head from 'next/head'
import Script from 'next/script'
import React from 'react'
import { isNotEmpty } from 'utils'
type SEOProps = {
url: string
@@ -11,55 +14,62 @@ type SEOProps = {
export const SEO = ({
url,
typebotName,
metadata: { title, description, favIconUrl, imageUrl },
metadata: { title, description, favIconUrl, imageUrl, googleTagManagerId },
}: SEOProps) => (
<Head>
<title>{title ?? typebotName}</title>
<meta name="robots" content="noindex" />
<link
rel="icon"
type="image/png"
href={favIconUrl ?? 'https://bot.typebot.io/favicon.png'}
/>
<meta name="title" content={title ?? typebotName} />
<meta
name="description"
content={
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.'
}
/>
<>
<Head key="seo">
<title>{title ?? typebotName}</title>
<meta name="robots" content="noindex" />
<link
rel="icon"
type="image/png"
href={favIconUrl ?? 'https://bot.typebot.io/favicon.png'}
/>
<meta name="title" content={title ?? typebotName} />
<meta
name="description"
content={
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.'
}
/>
<meta property="og:type" content="website" />
<meta property="og:url" content={url ?? 'https://bot.typebot.io'} />
<meta property="og:title" content={title ?? typebotName} />
<meta property="og:site_name" content={title ?? typebotName} />
<meta
property="og:description"
content={
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.'
}
/>
<meta
property="og:image"
itemProp="image"
content={imageUrl ?? 'https://bot.typebot.io/site-preview.png'}
/>
<meta property="og:type" content="website" />
<meta property="og:url" content={url ?? 'https://bot.typebot.io'} />
<meta property="og:title" content={title ?? typebotName} />
<meta property="og:site_name" content={title ?? typebotName} />
<meta
property="og:description"
content={
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.'
}
/>
<meta
property="og:image"
itemProp="image"
content={imageUrl ?? 'https://bot.typebot.io/site-preview.png'}
/>
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={url ?? 'https://bot.typebot.io'} />
<meta property="twitter:title" content={title ?? typebotName} />
<meta
property="twitter:description"
content={
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.'
}
/>
<meta
property="twitter:image"
content={imageUrl ?? 'https://bot.typebot.io/site-preview.png'}
/>
</Head>
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={url ?? 'https://bot.typebot.io'} />
<meta property="twitter:title" content={title ?? typebotName} />
<meta
property="twitter:description"
content={
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.'
}
/>
<meta
property="twitter:image"
content={imageUrl ?? 'https://bot.typebot.io/site-preview.png'}
/>
</Head>
{isNotEmpty(googleTagManagerId) && (
<Script id="google-tag-manager">
{gtmHeadSnippet(googleTagManagerId)}
</Script>
)}
</>
)

5
apps/viewer/src/components/TypebotPage.tsx
View File

@@ -2,11 +2,12 @@ import { TypebotViewer } from 'bot-engine'
import { AnswerInput, PublicTypebot, Typebot, VariableWithValue } from 'models'
import { useRouter } from 'next/router'
import React, { useEffect, useState } from 'react'
import { isDefined, isNotDefined } from 'utils'
import { isDefined, isNotDefined, isNotEmpty } from 'utils'
import { SEO } from './Seo'
import { ErrorPage } from './ErrorPage'
import { createResultQuery, updateResultQuery } from '@/features/results'
import { upsertAnswerQuery } from '@/features/answers'
import { gtmBodyElement } from '@/lib/google-tag-manager'
export type TypebotPageProps = {
publishedTypebot: Omit<PublicTypebot, 'createdAt' | 'updatedAt'> & {
@@ -51,6 +52,8 @@ export const TypebotPage = ({
initializeResult().then()
if (isDefined(customHeadCode))
document.head.innerHTML = document.head.innerHTML + customHeadCode
const gtmId = publishedTypebot.settings.metadata.googleTagManagerId
if (isNotEmpty(gtmId)) document.body.prepend(gtmBodyElement(gtmId))
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])