2
0

(pixel) Add skip initialization option

This commit is contained in:
Baptiste Arnaud
2023-06-28 10:29:58 +02:00
parent 033f8f99dd
commit 50fcbfd95e
12 changed files with 822 additions and 276 deletions

View File

@ -5,6 +5,7 @@ import { TextLink } from '@/components/TextLink'
import { TextInput } from '@/components/inputs'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { Select } from '@/components/inputs/Select'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { Stack, Text } from '@chakra-ui/react'
import { isDefined, isEmpty } from '@typebot.io/lib'
import {
@ -25,6 +26,12 @@ type Props = {
type Item = NonNullable<PixelBlock['options']['params']>[number]
export const PixelSettings = ({ options, onOptionsChange }: Props) => {
const updateIsInitSkipped = (isChecked: boolean) =>
onOptionsChange({
...options,
isInitSkip: isChecked,
})
const updatePixelId = (pixelId: string) =>
onOptionsChange({
...options,
@ -77,6 +84,12 @@ export const PixelSettings = ({ options, onOptionsChange }: Props) => {
withVariableButton={false}
placeholder='Pixel ID (e.g. "123456789")'
/>
<SwitchWithLabel
label={'Skip initialization'}
moreInfoContent="Check this if the bot is embedded in your website and the pixel is already initialized."
initialValue={options?.isInitSkip ?? false}
onCheckChange={updateIsInitSkipped}
/>
<SwitchWithRelatedSettings
label={'Track event'}
initialValue={isDefined(options?.params)}

View File

@ -8,10 +8,6 @@ The Google Analytics integration block allows you to track a Google Analytics ev
alt="Google Analytics block"
/>
:::note
This block is not executed in Preview mode. To test it, you need to launch the published bot.
:::
When your flow contains a Google Analytics block, under the hood it:
- Initialize GA and track a "Page view" event on page load.

View File

@ -8,10 +8,6 @@ The Pixel integration block allows you to add a Meta pixel to your bot and track
alt="Pixel block"
/>
:::note
This block is not executed in Preview mode. To test it, you need to launch the published bot.
:::
When your flow contains a pixel block, under the hood it:
- Initialize the pixel and track "PageView" event on page load.

View File

@ -37,7 +37,7 @@ You can tweak `3000` (3s) to your liking.
In the Metadata section, you can customize how the preview card will look if you share your bot URL on social media for example.
You can also add some custom head code to add third-party scripts like a Facebook pixel for example.
You can also add some custom head code to add third-party scripts.
### Google Tag Manager

View File

@ -184,6 +184,28 @@ typebot-bubble::part(preview-message) {
}
```
## Callbacks
If you need to trigger events on your parent website when the user interact with the bot, you can use the following callbacks:
```js
Typebot.initStandard({
typebot: 'my-typebot',
onNewInputBlock: (inputBlock) => {
console.log('New input block displayed', inputBlock.id)
},
onAnswer: (answer) => {
console.log('Answer received', answer.message, answer.blockId)
},
onInit: () => {
console.log('Bot initialized')
},
onEnd: () => {
console.log('Bot ended')
},
})
```
## Additional configuration
You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:

View File

@ -3402,6 +3402,170 @@
"webhookId"
],
"additionalProperties": false
},
{
"type": "object",
"properties": {
"id": {
"type": "string"
},
"groupId": {
"type": "string"
},
"outgoingEdgeId": {
"type": "string"
},
"type": {
"type": "string",
"enum": [
"Pixel"
]
},
"options": {
"anyOf": [
{
"type": "object",
"properties": {
"pixelId": {
"type": "string"
},
"isInitSkip": {
"type": "boolean"
},
"params": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"key": {
"type": "string"
},
"value": {}
},
"required": [
"id"
],
"additionalProperties": false
}
},
"eventType": {
"not": {}
}
},
"additionalProperties": false
},
{
"type": "object",
"properties": {
"pixelId": {
"type": "string"
},
"isInitSkip": {
"type": "boolean"
},
"params": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"key": {
"type": "string"
},
"value": {}
},
"required": [
"id"
],
"additionalProperties": false
}
},
"eventType": {
"type": "string",
"enum": [
"Lead",
"Contact",
"CompleteRegistration",
"Schedule",
"SubmitApplication",
"ViewContent",
"AddPaymentInfo",
"AddToCart",
"AddToWishlist",
"CustomizeProduct",
"Donate",
"FindLocation",
"InitiateCheckout",
"Purchase",
"Search",
"StartTrial",
"Subscribe"
]
}
},
"required": [
"eventType"
],
"additionalProperties": false
},
{
"type": "object",
"properties": {
"pixelId": {
"type": "string"
},
"isInitSkip": {
"type": "boolean"
},
"params": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"key": {
"type": "string"
},
"value": {}
},
"required": [
"id"
],
"additionalProperties": false
}
},
"eventType": {
"type": "string",
"enum": [
"Custom"
]
},
"name": {
"type": "string"
}
},
"required": [
"eventType"
],
"additionalProperties": false
}
]
}
},
"required": [
"id",
"groupId",
"type",
"options"
],
"additionalProperties": false
}
]
}
@ -3568,6 +3732,9 @@
"schema": {
"type": "object",
"properties": {
"icon": {
"type": "string"
},
"name": {
"type": "string"
}

View File

@ -2996,6 +2996,170 @@
"webhookId"
],
"additionalProperties": false
},
{
"type": "object",
"properties": {
"id": {
"type": "string"
},
"groupId": {
"type": "string"
},
"outgoingEdgeId": {
"type": "string"
},
"type": {
"type": "string",
"enum": [
"Pixel"
]
},
"options": {
"anyOf": [
{
"type": "object",
"properties": {
"pixelId": {
"type": "string"
},
"isInitSkip": {
"type": "boolean"
},
"params": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"key": {
"type": "string"
},
"value": {}
},
"required": [
"id"
],
"additionalProperties": false
}
},
"eventType": {
"not": {}
}
},
"additionalProperties": false
},
{
"type": "object",
"properties": {
"pixelId": {
"type": "string"
},
"isInitSkip": {
"type": "boolean"
},
"params": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"key": {
"type": "string"
},
"value": {}
},
"required": [
"id"
],
"additionalProperties": false
}
},
"eventType": {
"type": "string",
"enum": [
"Lead",
"Contact",
"CompleteRegistration",
"Schedule",
"SubmitApplication",
"ViewContent",
"AddPaymentInfo",
"AddToCart",
"AddToWishlist",
"CustomizeProduct",
"Donate",
"FindLocation",
"InitiateCheckout",
"Purchase",
"Search",
"StartTrial",
"Subscribe"
]
}
},
"required": [
"eventType"
],
"additionalProperties": false
},
{
"type": "object",
"properties": {
"pixelId": {
"type": "string"
},
"isInitSkip": {
"type": "boolean"
},
"params": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"key": {
"type": "string"
},
"value": {}
},
"required": [
"id"
],
"additionalProperties": false
}
},
"eventType": {
"type": "string",
"enum": [
"Custom"
]
},
"name": {
"type": "string"
}
},
"required": [
"eventType"
],
"additionalProperties": false
}
]
}
},
"required": [
"id",
"groupId",
"type",
"options"
],
"additionalProperties": false
}
]
}
@ -4644,92 +4808,213 @@
{
"anyOf": [
{
"type": "object",
"properties": {
"scriptToExecute": {
"type": "object",
"properties": {
"content": {
"type": "string"
},
"args": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"value": {
"anyOf": [
{
"anyOf": [
{
"anyOf": [
{
"anyOf": [
{
"type": "object",
"properties": {
"scriptToExecute": {
"type": "object",
"properties": {
"content": {
"type": "string"
},
"args": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"value": {
"anyOf": [
{
"type": "string"
"anyOf": [
{
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
},
{
"type": "boolean"
}
]
},
{
"type": "number"
"type": "array",
"items": {
"type": "string",
"nullable": true
}
}
]
},
{
"type": "boolean"
],
"nullable": true
}
]
},
{
"type": "array",
"items": {
"type": "string",
"nullable": true
}
},
"required": [
"id"
],
"additionalProperties": false
}
],
"nullable": true
}
},
"required": [
"id"
],
"additionalProperties": false
}
}
},
"required": [
"content",
"args"
],
"additionalProperties": false
}
},
"required": [
"scriptToExecute"
],
"additionalProperties": false
},
{
"type": "object",
"properties": {
"redirect": {
"type": "object",
"properties": {
"url": {
"type": "string"
},
"isNewTab": {
"type": "boolean"
}
},
"required": [
"isNewTab"
],
"additionalProperties": false
}
},
"required": [
"redirect"
],
"additionalProperties": false
}
]
},
{
"type": "object",
"properties": {
"chatwoot": {
"type": "object",
"properties": {
"scriptToExecute": {
"type": "object",
"properties": {
"content": {
"type": "string"
},
"args": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"value": {
"anyOf": [
{
"anyOf": [
{
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
},
{
"type": "boolean"
}
]
},
{
"type": "array",
"items": {
"type": "string",
"nullable": true
}
}
],
"nullable": true
}
},
"required": [
"id"
],
"additionalProperties": false
}
}
},
"required": [
"content",
"args"
],
"additionalProperties": false
}
},
"required": [
"scriptToExecute"
],
"additionalProperties": false
}
},
"required": [
"content",
"args"
"chatwoot"
],
"additionalProperties": false
}
},
"required": [
"scriptToExecute"
],
"additionalProperties": false
]
},
{
"type": "object",
"properties": {
"redirect": {
"googleAnalytics": {
"type": "object",
"properties": {
"url": {
"trackingId": {
"type": "string"
},
"isNewTab": {
"type": "boolean"
"category": {
"type": "string"
},
"action": {
"type": "string"
},
"label": {
"type": "string"
},
"value": {
"anyOf": [
{
"type": "number"
},
{}
]
},
"sendTo": {
"type": "string"
}
},
"required": [
"isNewTab"
],
"additionalProperties": false
}
},
"required": [
"redirect"
"googleAnalytics"
],
"additionalProperties": false
}
@ -4738,75 +5023,21 @@
{
"type": "object",
"properties": {
"chatwoot": {
"wait": {
"type": "object",
"properties": {
"scriptToExecute": {
"type": "object",
"properties": {
"content": {
"type": "string"
},
"args": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"value": {
"anyOf": [
{
"anyOf": [
{
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
},
{
"type": "boolean"
}
]
},
{
"type": "array",
"items": {
"type": "string",
"nullable": true
}
}
],
"nullable": true
}
},
"required": [
"id"
],
"additionalProperties": false
}
}
},
"required": [
"content",
"args"
],
"additionalProperties": false
"secondsToWaitFor": {
"type": "number"
}
},
"required": [
"scriptToExecute"
"secondsToWaitFor"
],
"additionalProperties": false
}
},
"required": [
"chatwoot"
"wait"
],
"additionalProperties": false
}
@ -4815,38 +5046,75 @@
{
"type": "object",
"properties": {
"googleAnalytics": {
"setVariable": {
"type": "object",
"properties": {
"trackingId": {
"type": "string"
},
"category": {
"type": "string"
},
"action": {
"type": "string"
},
"label": {
"type": "string"
},
"value": {
"anyOf": [
{
"type": "number"
"scriptToExecute": {
"type": "object",
"properties": {
"content": {
"type": "string"
},
{}
]
},
"sendTo": {
"type": "string"
"args": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"value": {
"anyOf": [
{
"anyOf": [
{
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
},
{
"type": "boolean"
}
]
},
{
"type": "array",
"items": {
"type": "string",
"nullable": true
}
}
],
"nullable": true
}
},
"required": [
"id"
],
"additionalProperties": false
}
}
},
"required": [
"content",
"args"
],
"additionalProperties": false
}
},
"required": [
"scriptToExecute"
],
"additionalProperties": false
}
},
"required": [
"googleAnalytics"
"setVariable"
],
"additionalProperties": false
}
@ -4855,21 +5123,38 @@
{
"type": "object",
"properties": {
"wait": {
"streamOpenAiChatCompletion": {
"type": "object",
"properties": {
"secondsToWaitFor": {
"type": "number"
"messages": {
"type": "array",
"items": {
"type": "object",
"properties": {
"content": {
"type": "string"
},
"role": {
"type": "string",
"enum": [
"system",
"user",
"assistant"
]
}
},
"additionalProperties": false
}
}
},
"required": [
"secondsToWaitFor"
"messages"
],
"additionalProperties": false
}
},
"required": [
"wait"
"streamOpenAiChatCompletion"
],
"additionalProperties": false
}
@ -4878,75 +5163,42 @@
{
"type": "object",
"properties": {
"setVariable": {
"webhookToExecute": {
"type": "object",
"properties": {
"scriptToExecute": {
"url": {
"type": "string"
},
"headers": {
"type": "object",
"properties": {
"content": {
"type": "string"
},
"args": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"value": {
"anyOf": [
{
"anyOf": [
{
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
},
{
"type": "boolean"
}
]
},
{
"type": "array",
"items": {
"type": "string",
"nullable": true
}
}
],
"nullable": true
}
},
"required": [
"id"
],
"additionalProperties": false
}
}
},
"required": [
"content",
"args"
],
"additionalProperties": false
"additionalProperties": {
"type": "string"
}
},
"body": {},
"method": {
"type": "string",
"enum": [
"POST",
"GET",
"PUT",
"DELETE",
"PATCH",
"HEAD",
"CONNECT",
"OPTIONS",
"TRACE"
]
}
},
"required": [
"scriptToExecute"
"url"
],
"additionalProperties": false
}
},
"required": [
"setVariable"
"webhookToExecute"
],
"additionalProperties": false
}
@ -4955,38 +5207,27 @@
{
"type": "object",
"properties": {
"streamOpenAiChatCompletion": {
"startPropsToInject": {
"type": "object",
"properties": {
"messages": {
"type": "array",
"items": {
"type": "object",
"properties": {
"content": {
"type": "string"
},
"role": {
"type": "string",
"enum": [
"system",
"user",
"assistant"
]
}
},
"additionalProperties": false
}
"googleAnalyticsId": {
"type": "string"
},
"pixelId": {
"type": "string"
},
"gtmId": {
"type": "string"
},
"customHeadCode": {
"type": "string"
}
},
"required": [
"messages"
],
"additionalProperties": false
}
},
"required": [
"streamOpenAiChatCompletion"
"startPropsToInject"
],
"additionalProperties": false
}
@ -4995,42 +5236,146 @@
{
"type": "object",
"properties": {
"webhookToExecute": {
"type": "object",
"properties": {
"url": {
"type": "string"
},
"headers": {
"pixel": {
"anyOf": [
{
"type": "object",
"additionalProperties": {
"type": "string"
}
"properties": {
"pixelId": {
"type": "string"
},
"isInitSkip": {
"type": "boolean"
},
"params": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"key": {
"type": "string"
},
"value": {}
},
"required": [
"id"
],
"additionalProperties": false
}
},
"eventType": {
"not": {}
}
},
"additionalProperties": false
},
"body": {},
"method": {
"type": "string",
"enum": [
"POST",
"GET",
"PUT",
"DELETE",
"PATCH",
"HEAD",
"CONNECT",
"OPTIONS",
"TRACE"
]
{
"type": "object",
"properties": {
"pixelId": {
"type": "string"
},
"isInitSkip": {
"type": "boolean"
},
"params": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"key": {
"type": "string"
},
"value": {}
},
"required": [
"id"
],
"additionalProperties": false
}
},
"eventType": {
"type": "string",
"enum": [
"Lead",
"Contact",
"CompleteRegistration",
"Schedule",
"SubmitApplication",
"ViewContent",
"AddPaymentInfo",
"AddToCart",
"AddToWishlist",
"CustomizeProduct",
"Donate",
"FindLocation",
"InitiateCheckout",
"Purchase",
"Search",
"StartTrial",
"Subscribe"
]
}
},
"required": [
"eventType"
],
"additionalProperties": false
},
{
"type": "object",
"properties": {
"pixelId": {
"type": "string"
},
"isInitSkip": {
"type": "boolean"
},
"params": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"key": {
"type": "string"
},
"value": {}
},
"required": [
"id"
],
"additionalProperties": false
}
},
"eventType": {
"type": "string",
"enum": [
"Custom"
]
},
"name": {
"type": "string"
}
},
"required": [
"eventType"
],
"additionalProperties": false
}
},
"required": [
"url"
],
"additionalProperties": false
]
}
},
"required": [
"webhookToExecute"
"pixel"
],
"additionalProperties": false
}

View File

@ -6,7 +6,8 @@ export const executePixelBlock = (
{ typebot: { variables }, result }: SessionState,
block: PixelBlock
): ExecuteIntegrationResponse => {
if (!result) return { outgoingEdgeId: block.outgoingEdgeId }
if (!result || !block.options.pixelId || !block.options.eventType)
return { outgoingEdgeId: block.outgoingEdgeId }
const pixel = deepParseVariables(variables, {
guessCorrectTypes: true,
removeEmptyStrings: true,

View File

@ -455,7 +455,9 @@ const parseStartClientSideAction = (
pixelId: (
blocks.find(
(block) =>
block.type === IntegrationBlockType.PIXEL && block.options.pixelId
block.type === IntegrationBlockType.PIXEL &&
block.options.pixelId &&
block.options.isInitSkip !== true
) as PixelBlock | undefined
)?.options.pixelId,
}

View File

@ -1,4 +1,4 @@
import { isEmpty } from '@typebot.io/lib/utils'
import { isDefined, isEmpty } from '@typebot.io/lib/utils'
import type { GoogleAnalyticsOptions } from '@typebot.io/schemas'
declare const gtag: (
@ -12,8 +12,9 @@ declare const gtag: (
}
) => void
export const initGoogleAnalytics = (id: string): Promise<void> =>
new Promise((resolve) => {
export const initGoogleAnalytics = (id: string): Promise<void> => {
if (isDefined(gtag)) return Promise.resolve()
return new Promise((resolve) => {
const existingScript = document.getElementById('gtag')
if (!existingScript) {
const script = document.createElement('script')
@ -34,6 +35,7 @@ export const initGoogleAnalytics = (id: string): Promise<void> =>
}
if (existingScript) resolve()
})
}
export const sendGaEvent = (options: GoogleAnalyticsOptions) => {
if (!options) return

View File

@ -3,7 +3,8 @@ import { PixelBlock } from '@typebot.io/schemas'
declare const fbq: (
arg0: string,
arg1: string,
arg2: Record<string, string> | undefined
arg2: string,
arg3: Record<string, string> | undefined
) => void
export const initPixel = (pixelId: string) => {
@ -26,7 +27,7 @@ export const initPixel = (pixelId: string) => {
}
export const trackPixelEvent = (options: PixelBlock['options']) => {
if (!options.eventType) return
if (!options.eventType || !options.pixelId) return
const params = options.params?.length
? options.params.reduce<Record<string, string>>((obj, param) => {
if (!param.key || !param.value) return obj
@ -35,7 +36,7 @@ export const trackPixelEvent = (options: PixelBlock['options']) => {
: undefined
if (options.eventType === 'Custom') {
if (!options.name) return
fbq('trackCustom', options.name, params)
fbq('trackCustom', options.pixelId, options.name, params)
}
fbq('track', options.eventType, params)
fbq('track', options.pixelId, options.eventType, params)
}

View File

@ -5,6 +5,7 @@ import { IntegrationBlockType } from '../enums'
const basePixelOptionSchema = z.object({
pixelId: z.string().optional(),
isInitSkip: z.boolean().optional(),
params: z
.array(
z.object({