diff --git a/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx b/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx index b875240ae..8799dcaa1 100644 --- a/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx +++ b/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx @@ -46,7 +46,8 @@ export const GoogleAnalyticsSettings = ({ return ( void +declare const window: { + gtag?: ( + type: string, + action: string | undefined, + options: { + event_category: string | undefined + event_label: string | undefined + value: number | undefined + send_to: string | undefined + } + ) => void +} export const initGoogleAnalytics = (id: string): Promise => { - 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 => { 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, diff --git a/packages/embeds/js/src/lib/pixel.ts b/packages/embeds/js/src/lib/pixel.ts index 72aeaa827..86a650db6 100644 --- a/packages/embeds/js/src/lib/pixel.ts +++ b/packages/embeds/js/src/lib/pixel.ts @@ -1,11 +1,13 @@ import { PixelBlock } from '@typebot.io/schemas' -declare const fbq: ( - arg0: string, - arg1: string, - arg2: string, - arg3: Record | undefined -) => void +declare const window: { + fbq?: ( + arg0: string, + arg1: string, + arg2: string, + arg3: Record | 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>((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) } diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json index c05038e19..a6eefac3b 100644 --- a/packages/embeds/react/package.json +++ b/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",