✨ Add Meta Pixel block

Closes #582

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

@@ -1,3 +1,4 @@
+import { isEmpty } from '@typebot.io/lib/utils'
 import type { GoogleAnalyticsOptions } from '@typebot.io/schemas'
 
 declare const gtag: (
@@ -11,7 +12,7 @@ declare const gtag: (
   }
 ) => void
 
-const initGoogleAnalytics = (id: string): Promise<void> =>
+export const initGoogleAnalytics = (id: string): Promise<void> =>
   new Promise((resolve) => {
     const existingScript = document.getElementById('gtag')
     if (!existingScript) {
@@ -37,11 +38,9 @@ const initGoogleAnalytics = (id: string): Promise<void> =>
 export const sendGaEvent = (options: GoogleAnalyticsOptions) => {
   if (!options) return
   gtag('event', options.action, {
-    event_category: options.label?.length ? options.category : undefined,
-    event_label: options.label?.length ? options.label : undefined,
+    event_category: isEmpty(options.category) ? undefined : options.category,
+    event_label: isEmpty(options.label) ? undefined : options.label,
     value: options.value as number,
-    send_to: options.sendTo?.length ? options.sendTo : undefined,
+    send_to: isEmpty(options.sendTo) ? undefined : options.sendTo,
   })
 }
-
-export default initGoogleAnalytics

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

@@ -0,0 +1,23 @@
+export const gtmHeadSnippet = (
+  googleTagManagerId: string
+) => `<!-- Google Tag Manager -->
+(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','${googleTagManagerId}');
+<!-- End Google Tag Manager -->`
+
+export const gtmBodyElement = (googleTagManagerId: string) => {
+  if (document.getElementById('gtm-noscript')) return ''
+  const noScriptElement = document.createElement('noscript')
+  noScriptElement.id = 'gtm-noscript'
+  const iframeElement = document.createElement('iframe')
+  iframeElement.src = `https://www.googletagmanager.com/ns.html?id=${googleTagManagerId}`
+  iframeElement.height = '0'
+  iframeElement.width = '0'
+  iframeElement.style.display = 'none'
+  iframeElement.style.visibility = 'hidden'
+  noScriptElement.appendChild(iframeElement)
+  return noScriptElement
+}

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

@@ -0,0 +1,41 @@
+import { PixelBlock } from '@typebot.io/schemas'
+
+declare const fbq: (
+  arg0: string,
+  arg1: string,
+  arg2: Record<string, string> | undefined
+) => void
+
+export const initPixel = (pixelId: 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?
+  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+  n.queue=[];t=b.createElement(e);t.async=!0;
+  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}');
+  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']) => {
+  if (!options.eventType) return
+  const params = options.params?.length
+    ? options.params.reduce<Record<string, string>>((obj, param) => {
+        if (!param.key || !param.value) return obj
+        return { ...obj, [param.key]: param.value }
+      }, {})
+    : undefined
+  if (options.eventType === 'Custom') {
+    if (!options.name) return
+    fbq('trackCustom', options.name, params)
+  }
+  fbq('track', options.eventType, params)
+}