🐛 (ga) Fix gtag not initializing properly

apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx

@@ -46,7 +46,8 @@ export const GoogleAnalyticsSettings = ({
   return (
     <Stack spacing={4}>
       <TextInput
-        label="Tracking ID:"
+        label="Measurement ID:"
+        moreInfoTooltip="Can be found by clicking on your data stream in Google Analytics dashboard"
         defaultValue={options?.trackingId ?? ''}
         placeholder="G-123456..."
         onChange={updateTrackingId}

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.69",
+  "version": "0.0.70",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

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

@@ -1,19 +1,21 @@
 import { isDefined, isEmpty } from '@typebot.io/lib/utils'
 import type { GoogleAnalyticsOptions } from '@typebot.io/schemas'
 
-declare const gtag: (
+declare const window: {
-  type: string,
+  gtag?: (
-  action: string | undefined,
+    type: string,
-  options: {
+    action: string | undefined,
-    event_category: string | undefined
+    options: {
-    event_label: string | undefined
+      event_category: string | undefined
-    value: number | undefined
+      event_label: string | undefined
-    send_to: string | undefined
+      value: number | undefined
-  }
+      send_to: string | undefined
-) => void
+    }
+  ) => void
+}
 
 export const initGoogleAnalytics = (id: string): Promise<void> => {
-  if (isDefined(gtag)) return Promise.resolve()
+  if (isDefined(window.gtag)) return Promise.resolve()
   return new Promise((resolve) => {
     const existingScript = document.getElementById('gtag')
     if (!existingScript) {
@@ -39,7 +41,11 @@ export const initGoogleAnalytics = (id: string): Promise<void> => {
 
 export const sendGaEvent = (options: GoogleAnalyticsOptions) => {
   if (!options) return
-  gtag('event', options.action, {
+  if (!window.gtag) {
+    console.error('Google Analytics was not properly initialized')
+    return
+  }
+  window.gtag('event', options.action, {
     event_category: isEmpty(options.category) ? undefined : options.category,
     event_label: isEmpty(options.label) ? undefined : options.label,
     value: options.value as number,

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

@@ -1,11 +1,13 @@
 import { PixelBlock } from '@typebot.io/schemas'
 
-declare const fbq: (
+declare const window: {
-  arg0: string,
+  fbq?: (
-  arg1: string,
+    arg0: string,
-  arg2: string,
+    arg1: string,
-  arg3: Record<string, string> | undefined
+    arg2: string,
-) => void
+    arg3: Record<string, string> | undefined
+  ) => void
+}
 
 export const initPixel = (pixelId: string) => {
   const script = document.createElement('script')
@@ -28,6 +30,10 @@ export const initPixel = (pixelId: string) => {
 
 export const trackPixelEvent = (options: PixelBlock['options']) => {
   if (!options.eventType || !options.pixelId) return
+  if (!window.fbq) {
+    console.error('Facebook Pixel was not properly initialized')
+    return
+  }
   const params = options.params?.length
     ? options.params.reduce<Record<string, string>>((obj, param) => {
         if (!param.key || !param.value) return obj
@@ -36,7 +42,7 @@ export const trackPixelEvent = (options: PixelBlock['options']) => {
     : undefined
   if (options.eventType === 'Custom') {
     if (!options.name) return
-    fbq('trackCustom', options.pixelId, options.name, params)
+    window.fbq('trackCustom', options.pixelId, options.name, params)
   }
-  fbq('track', options.pixelId, options.eventType, params)
+  window.fbq('track', options.pixelId, options.eventType, params)
 }

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.69",
+  "version": "0.0.70",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",