✨ Add Meta Pixel block

Closes #582

packages/schemas/features/blocks/integrations/enums.ts

@@ -8,4 +8,5 @@ export enum IntegrationBlockType {
   MAKE_COM = 'Make.com',
   PABBLY_CONNECT = 'Pabbly',
   CHATWOOT = 'Chatwoot',
+  PIXEL = 'Pixel',
 }

packages/schemas/features/blocks/integrations/index.ts

@@ -7,3 +7,5 @@ export * from './pabblyConnect'
 export * from './sendEmail'
 export * from './webhook'
 export * from './zapier'
+export * from './pixel/schemas'
+export * from './pixel/constants'

packages/schemas/features/blocks/integrations/pixel/constants.ts

@@ -0,0 +1,134 @@
+// Reference: https://developers.facebook.com/docs/meta-pixel/reference#standard-events
+
+export const pixelEventTypes = [
+  'Lead',
+  'Contact',
+  'CompleteRegistration',
+  'Schedule',
+  'SubmitApplication',
+  'ViewContent',
+  'AddPaymentInfo',
+  'AddToCart',
+  'AddToWishlist',
+  'CustomizeProduct',
+  'Donate',
+  'FindLocation',
+  'InitiateCheckout',
+  'Purchase',
+  'Search',
+  'StartTrial',
+  'Subscribe',
+] as const
+
+export const allEventTypes = ['Custom', ...pixelEventTypes] as const
+
+export const pixelObjectProperties: {
+  key: string
+  type: 'text' | 'code'
+  associatedEvents: (typeof pixelEventTypes)[number][]
+}[] = [
+  {
+    key: 'content_category',
+    type: 'text',
+    associatedEvents: [
+      'AddPaymentInfo',
+      'AddToWishlist',
+      'InitiateCheckout',
+      'Lead',
+      'Search',
+      'ViewContent',
+    ],
+  },
+  {
+    key: 'content_ids',
+    type: 'code',
+    associatedEvents: [
+      'AddPaymentInfo',
+      'AddToCart',
+      'AddToWishlist',
+      'InitiateCheckout',
+      'Purchase',
+      'Search',
+      'ViewContent',
+    ],
+  },
+  {
+    key: 'content_name',
+    type: 'text',
+    associatedEvents: [
+      'AddToCart',
+      'AddToWishlist',
+      'CompleteRegistration',
+      'Lead',
+      'Purchase',
+      'ViewContent',
+    ],
+  },
+  {
+    key: 'contents',
+    type: 'code',
+    associatedEvents: [
+      'AddPaymentInfo',
+      'AddToCart',
+      'AddToWishlist',
+      'InitiateCheckout',
+      'Purchase',
+      'Search',
+      'ViewContent',
+    ],
+  },
+  {
+    key: 'currency',
+    type: 'text',
+    associatedEvents: [
+      'AddPaymentInfo',
+      'AddToCart',
+      'AddToWishlist',
+      'CompleteRegistration',
+      'InitiateCheckout',
+      'Lead',
+      'Purchase',
+      'Search',
+      'StartTrial',
+      'Subscribe',
+      'ViewContent',
+    ],
+  },
+  {
+    key: 'num_items',
+    type: 'text',
+    associatedEvents: ['InitiateCheckout', 'Purchase'],
+  },
+  {
+    key: 'predicted_ltv',
+    type: 'text',
+    associatedEvents: ['StartTrial', 'Subscribe'],
+  },
+  {
+    key: 'search_string',
+    type: 'text',
+    associatedEvents: ['Search'],
+  },
+  {
+    key: 'status',
+    type: 'text',
+    associatedEvents: ['CompleteRegistration'],
+  },
+  {
+    key: 'value',
+    type: 'text',
+    associatedEvents: [
+      'AddPaymentInfo',
+      'AddToCart',
+      'AddToWishlist',
+      'CompleteRegistration',
+      'InitiateCheckout',
+      'Lead',
+      'Purchase',
+      'Search',
+      'StartTrial',
+      'Subscribe',
+      'ViewContent',
+    ],
+  },
+]

packages/schemas/features/blocks/integrations/pixel/schemas.ts

@@ -0,0 +1,51 @@
+import { z } from 'zod'
+import { pixelEventTypes } from './constants'
+import { blockBaseSchema } from '../../baseSchemas'
+import { IntegrationBlockType } from '../enums'
+
+const basePixelOptionSchema = z.object({
+  pixelId: z.string().optional(),
+  params: z
+    .array(
+      z.object({
+        id: z.string(),
+        key: z.string().optional(),
+        value: z.any().optional(),
+      })
+    )
+    .optional(),
+})
+
+const initialPixelOptionSchema = basePixelOptionSchema.merge(
+  z.object({
+    eventType: z.undefined(),
+  })
+)
+
+const standardPixelEventOptionSchema = basePixelOptionSchema.merge(
+  z.object({
+    eventType: z.enum(pixelEventTypes),
+  })
+)
+
+const customPixelOptionSchema = basePixelOptionSchema.merge(
+  z.object({
+    eventType: z.enum(['Custom']),
+    name: z.string().optional(),
+  })
+)
+
+export const pixelOptionsSchema = z.discriminatedUnion('eventType', [
+  initialPixelOptionSchema,
+  standardPixelEventOptionSchema,
+  customPixelOptionSchema,
+])
+
+export const pixelBlockSchema = blockBaseSchema.merge(
+  z.object({
+    type: z.enum([IntegrationBlockType.PIXEL]),
+    options: pixelOptionsSchema,
+  })
+)
+
+export type PixelBlock = z.infer<typeof pixelBlockSchema>

packages/schemas/features/blocks/schemas.ts

@@ -1,9 +1,9 @@
-import { ZodDiscriminatedUnionOption, z } from 'zod'
+import { z } from 'zod'
 import { BubbleBlockType } from './bubbles/enums'
 import { choiceInputSchema } from './inputs/choice'
 import { InputBlockType } from './inputs/enums'
 import { IntegrationBlockType } from './integrations/enums'
-import { ConditionBlock, conditionBlockSchema } from './logic/condition'
+import { conditionBlockSchema } from './logic/condition'
 import { LogicBlockType } from './logic/enums'
 import { blockBaseSchema } from './baseSchemas'
 import { startBlockSchema } from './start/schemas'
@@ -31,6 +31,7 @@ import {
   googleSheetsBlockSchema,
   makeComBlockSchema,
   pabblyConnectBlockSchema,
+  pixelBlockSchema,
   sendEmailBlockSchema,
   webhookBlockSchema,
   zapierBlockSchema,
@@ -125,6 +126,7 @@ export const blockSchema = z.discriminatedUnion('type', [
   sendEmailBlockSchema,
   webhookBlockSchema,
   zapierBlockSchema,
+  pixelBlockSchema,
 ])
 
 export type Block = z.infer<typeof blockSchema>

packages/schemas/features/chat.ts

@@ -2,6 +2,7 @@ import { z } from 'zod'
 import {
   googleAnalyticsOptionsSchema,
   paymentInputRuntimeOptionsSchema,
+  pixelOptionsSchema,
   redirectOptionsSchema,
 } from './blocks'
 import { publicTypebotSchema } from './publicTypebot'
@@ -197,6 +198,13 @@ export const sendMessageInputSchema = z.object({
 
 const runtimeOptionsSchema = paymentInputRuntimeOptionsSchema.optional()
 
+const startPropsToInjectSchema = z.object({
+  googleAnalyticsId: z.string().optional(),
+  pixelId: z.string().optional(),
+  gtmId: z.string().optional(),
+  customHeadCode: z.string().optional(),
+})
+
 const clientSideActionSchema = z
   .object({
     lastBubbleBlockId: z.string().optional(),
@@ -247,6 +255,16 @@ const clientSideActionSchema = z
           webhookToExecute: executableWebhookSchema,
         })
       )
+      .or(
+        z.object({
+          startPropsToInject: startPropsToInjectSchema,
+        })
+      )
+      .or(
+        z.object({
+          pixel: pixelOptionsSchema,
+        })
+      )
   )
 
 export const chatReplySchema = z.object({
@@ -282,3 +300,4 @@ export type StartParams = z.infer<typeof startParamsSchema>
 export type RuntimeOptions = z.infer<typeof runtimeOptionsSchema>
 export type StartTypebot = z.infer<typeof startTypebotSchema>
 export type ReplyLog = z.infer<typeof replyLogSchema>
+export type StartPropsToInject = z.infer<typeof startPropsToInjectSchema>