🐛 (pixel) Fix multiple Meta pixels tracking

Closes #846

packages/bot-engine/startSession.ts

@@ -333,21 +333,21 @@ const parseStartClientSideAction = (
           block.options.trackingId
       ) as GoogleAnalyticsBlock | undefined
     )?.options.trackingId,
-    pixelId: (
+    pixelIds: (
-      blocks.find(
+      blocks.filter(
         (block) =>
           block.type === IntegrationBlockType.PIXEL &&
-          block.options.pixelId &&
+          isNotEmpty(block.options.pixelId) &&
           block.options.isInitSkip !== true
-      ) as PixelBlock | undefined
+      ) as PixelBlock[]
-    )?.options.pixelId,
+    ).map((pixelBlock) => pixelBlock.options.pixelId as string),
   }
 
   if (
     !startPropsToInject.customHeadCode &&
     !startPropsToInject.gtmId &&
     !startPropsToInject.googleAnalyticsId &&
-    !startPropsToInject.pixelId
+    !startPropsToInject.pixelIds
   )
     return
 

packages/embeds/js/src/lib/pixel.ts

@@ -3,12 +3,13 @@ import { PixelBlock } from '@typebot.io/schemas'
 declare const window: {
   fbq?: (
     arg1: string,
+    arg4: string,
     arg2: string,
     arg3: Record<string, string> | undefined
   ) => void
 }
 
-export const initPixel = (pixelId: string) => {
+export const initPixel = (pixelIds: string[]) => {
   const script = document.createElement('script')
   script.innerHTML = `!function(f,b,e,v,n,t,s)
   {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
@@ -18,13 +19,9 @@ export const initPixel = (pixelId: string) => {
   t.src=v;s=b.getElementsByTagName(e)[0];
   s.parentNode.insertBefore(t,s)}(window, document,'script',
   'https://connect.facebook.net/en_US/fbevents.js');
-  fbq('init', '${pixelId}');
+  ${pixelIds.map((pixelId) => `fbq('init', '${pixelId}');`).join('\n')}
   fbq('track', 'PageView');`
   document.head.appendChild(script)
-
-  const noscript = document.createElement('noscript')
-  noscript.innerHTML = `<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=${pixelId}&ev=PageView&noscript=1"/>`
-  document.head.appendChild(noscript)
 }
 
 export const trackPixelEvent = (options: PixelBlock['options']) => {
@@ -41,7 +38,7 @@ export const trackPixelEvent = (options: PixelBlock['options']) => {
     : undefined
   if (options.eventType === 'Custom') {
     if (!options.name) return
-    window.fbq('trackCustom', options.name, params)
+    window.fbq('trackSingleCustom', options.pixelId, options.name, params)
   }
-  window.fbq('track', options.eventType, params)
+  window.fbq('trackSingle', options.pixelId, options.eventType, params)
 }

packages/embeds/js/src/utils/injectStartProps.ts

@@ -2,7 +2,11 @@
 import { initGoogleAnalytics } from '@/lib/gtag'
 import { gtmBodyElement } from '@/lib/gtm'
 import { initPixel } from '@/lib/pixel'
-import { injectCustomHeadCode, isNotEmpty } from '@typebot.io/lib/utils'
+import {
+  injectCustomHeadCode,
+  isDefined,
+  isNotEmpty,
+} from '@typebot.io/lib/utils'
 import { StartPropsToInject } from '@typebot.io/schemas'
 
 export const injectStartProps = async (
@@ -15,6 +19,8 @@ export const injectStartProps = async (
   const googleAnalyticsId = startPropsToInject.googleAnalyticsId
   if (isNotEmpty(googleAnalyticsId))
     await initGoogleAnalytics(googleAnalyticsId)
-  const pixelId = startPropsToInject.pixelId
+  const pixelIds = startPropsToInject.pixelId
-  if (isNotEmpty(pixelId)) initPixel(pixelId)
+    ? [startPropsToInject.pixelId]
+    : startPropsToInject.pixelIds
+  if (isDefined(pixelIds)) initPixel(pixelIds)
 }

packages/schemas/features/chat/schema.ts

@@ -169,7 +169,8 @@ const runtimeOptionsSchema = paymentInputRuntimeOptionsSchema.optional()
 
 const startPropsToInjectSchema = z.object({
   googleAnalyticsId: z.string().optional(),
-  pixelId: z.string().optional(),
+  pixelId: z.string().optional().describe('Deprecated'),
+  pixelIds: z.array(z.string()).optional(),
   gtmId: z.string().optional(),
   customHeadCode: z.string().optional(),
 })