⚡ (pixel) Add skip initialization option
This commit is contained in:
Baptiste Arnaud
@ -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)}
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -4639,6 +4803,10 @@
|
||||
"anyOf": [
|
||||
{
|
||||
"anyOf": [
|
||||
{
|
||||
"anyOf": [
|
||||
{
|
||||
"anyOf": [
|
||||
{
|
||||
"anyOf": [
|
||||
{
|
||||
@ -5035,6 +5203,183 @@
|
||||
"additionalProperties": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"startPropsToInject": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"googleAnalyticsId": {
|
||||
"type": "string"
|
||||
},
|
||||
"pixelId": {
|
||||
"type": "string"
|
||||
},
|
||||
"gtmId": {
|
||||
"type": "string"
|
||||
},
|
||||
"customHeadCode": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"additionalProperties": false
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
"startPropsToInject"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"pixel": {
|
||||
"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": [
|
||||
"pixel"
|
||||
],
|
||||
"additionalProperties": false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -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({
|
||||
|
||||
Reference in New Issue
Block a user