feat: do not load snippets if settings not provided (#731)

Author: chambo-e

packages/use-gtm/src/__tests__/__snapshots__/index.tsx.snap

@@ -72,3 +72,5 @@ Array [
   },
 ]
 `;
+
+exports[`GTM hook Provider should not load when no id is provided 1`] = `""`;

packages/use-gtm/src/__tests__/index.tsx

@@ -64,6 +64,14 @@ describe('GTM hook', () => {
     expect(document.head.innerHTML).toMatchSnapshot()
   })
 
+  it('Provider should not load when no id is provided', () => {
+    renderHook(() => useGTM<DefaultEvents>(), {
+      wrapper: wrapper({}),
+    })
+
+    expect(document.head.innerHTML).toMatchSnapshot()
+  })
+
   it('Provider should load when id is provided', () => {
     renderHook(() => useGTM<DefaultEvents>(), {
       wrapper: wrapper({

packages/use-gtm/src/useGTM.tsx

@@ -31,7 +31,7 @@ export function useGTM<T extends Events>(): GTMContextInterface<T> {
 }
 
 export type GTMProviderProps<T> = {
-  id: string
+  id?: string
   environment?: GTMEnvironment
   children: ReactNode
   onLoadError?: () => void
@@ -45,20 +45,29 @@ function GTMProvider<T extends Events>({
   onLoadError,
   events,
 }: GTMProviderProps<T>) {
+  const shouldLoad = !!id
+
   useEffect(() => {
-    const { noScript, script, dataLayerInit } = generateScripts(id, environment)
+    if (shouldLoad) {
+      const { noScript, script, dataLayerInit } = generateScripts(
+        id,
+        environment,
+      )
 
-    document.head.insertBefore(dataLayerInit, document.head.childNodes[0])
-    document.head.insertBefore(script, document.head.childNodes[1])
-    document.body.insertBefore(noScript, document.body.childNodes[0])
+      document.head.insertBefore(dataLayerInit, document.head.childNodes[0])
+      document.head.insertBefore(script, document.head.childNodes[1])
+      document.body.insertBefore(noScript, document.body.childNodes[0])
 
-    if (onLoadError) document.addEventListener(LOAD_ERROR_EVENT, onLoadError)
+      if (onLoadError) document.addEventListener(LOAD_ERROR_EVENT, onLoadError)
 
-    return () => {
-      if (onLoadError)
-        document.removeEventListener(LOAD_ERROR_EVENT, onLoadError)
+      return () => {
+        if (onLoadError)
+          document.removeEventListener(LOAD_ERROR_EVENT, onLoadError)
+      }
     }
-  }, [environment, id, onLoadError])
+
+    return () => {}
+  }, [environment, id, onLoadError, shouldLoad])
 
   const value = useMemo<GTMContextInterface<T>>(() => {
     const curiedEvents = Object.entries(events || {}).reduce(

packages/use-segment/src/__tests__/index.tsx

@@ -80,7 +80,62 @@ describe('segment hook', () => {
         settings: undefined,
       }),
     })
-    expect(result.current.analytics).not.toBeNull()
+    expect(result.current.analytics).toBe(undefined)
+  })
+
+  it('useSegment should not load when All integrations disabled', () => {
+    const { result } = renderHook(() => useSegment<DefaultEvents>(), {
+      wrapper: wrapper({
+        events: defaultEvents,
+        initOptions: { integrations: { All: false } },
+        settings: { writeKey: 'sample ' },
+      }),
+    })
+    expect(result.current.analytics).toBe(undefined)
+  })
+
+  it('useSegment should not load when all of integrations disabled', () => {
+    const { result } = renderHook(() => useSegment<DefaultEvents>(), {
+      wrapper: wrapper({
+        events: defaultEvents,
+        initOptions: {
+          integrations: {
+            testInteg: false,
+            testInteg2: false,
+            testInteg3: false,
+          },
+        },
+        settings: { writeKey: 'sample ' },
+      }),
+    })
+    expect(result.current.analytics).toBe(undefined)
+  })
+
+  it('useSegment should load when at least one integrations enabled', async () => {
+    const mock = jest
+      .spyOn(AnalyticsBrowser, 'load')
+      .mockResolvedValue([{} as Analytics, {} as Context])
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useSegment<DefaultEvents>(),
+      {
+        wrapper: wrapper({
+          events: defaultEvents,
+          initOptions: {
+            integrations: {
+              testInteg: false,
+              testInteg2: true,
+              testInteg3: false,
+            },
+          },
+          settings: { writeKey: 'sample ' },
+        }),
+      },
+    )
+
+    await waitForNextUpdate()
+    expect(mock).toHaveBeenCalledTimes(1)
+    expect(result.current.analytics).toStrictEqual({})
   })
 
   it('Provider should load with key', async () => {

packages/use-segment/src/useSegment.tsx

@@ -63,15 +63,28 @@ function SegmentProvider<T extends Events>({
     undefined,
   )
 
+  const shouldLoad = useMemo(() => {
+    const hasNoIntegrationsSettings = !initOptions?.integrations
+    const isAllEnabled = !!initOptions?.integrations?.All
+    const isAnyIntegrationEnabled = Object.values(
+      initOptions?.integrations ?? {},
+    ).reduce<boolean>((acc, integration) => !!acc || !!integration, false)
+
+    return (
+      !!settings?.writeKey &&
+      (hasNoIntegrationsSettings || isAllEnabled || isAnyIntegrationEnabled)
+    )
+  }, [initOptions?.integrations, settings?.writeKey])
+
   useEffect(() => {
-    if (settings?.writeKey) {
+    if (shouldLoad && settings) {
       AnalyticsBrowser.load(settings, initOptions)
         .then(([res]) => setAnalytics(res))
         .catch((err: Error) => {
           onError?.(err)
         })
     }
-  }, [onError, settings, initOptions])
+  }, [onError, settings, initOptions, shouldLoad])
 
   const value = useMemo<SegmentContextInterface<T>>(() => {
     const curiedEvents = Object.entries(events).reduce(