fix(use-gtm): ensure environment auth is present before injecting url (#719)

Author: chambo-e

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

@@ -15,6 +15,21 @@ exports[`GTM hook Provider should call onLoadError if script fail to load 1`] =
   })(window,document,'script','dataLayer','testId');</script>"
 `;
 
+exports[`GTM hook Provider should load env when environment auth is missing 1`] = `
+"<script src=\\"https://www.googletagmanager.com/gtm.js?id=testId\\"></script><script>window.dataLayer = window.dataLayer || [];</script><script>(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+'';
+
+    j.addEventListener('error', function() {
+        var _ge = new CustomEvent('gtm_loading_error', { bubbles: true });
+        d.dispatchEvent(_ge);
+    });
+
+    f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','testId');</script>"
+`;
+
 exports[`GTM hook Provider should load when id and environment is provided 1`] = `
 "<script src=\\"https://www.googletagmanager.com/gtm.js?id=testId&amp;gtm_auth=gtm&amp;gtm_preview=world&amp;gtm_cookies_win=x\\"></script><script>window.dataLayer = window.dataLayer || [];</script><script>(function(w,d,s,l,i){w[l]=w[l]||[];
     w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});

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

@@ -88,6 +88,20 @@ describe('GTM hook', () => {
     expect(document.head.innerHTML).toMatchSnapshot()
   })
 
+  it('Provider should load env when environment auth is missing', () => {
+    renderHook(() => useGTM<DefaultEvents>(), {
+      wrapper: wrapper({
+        // @ts-expect-error we test a failing case
+        environment: {
+          preview: 'world',
+        },
+        id: 'testId',
+      }),
+    })
+
+    expect(document.head.innerHTML).toMatchSnapshot()
+  })
+
   it('Provider should load with events when provided', () => {
     const { result } = renderHook(() => useGTM<DefaultEvents>(), {
       wrapper: wrapper({

packages/use-gtm/src/scripts.ts

@@ -4,11 +4,11 @@ export const DATALAYER_NAME = 'dataLayer'
 export const LOAD_ERROR_EVENT = 'gtm_loading_error'
 
 const flattenEnvironment = (environment?: GTMEnvironment) =>
-  environment
-    ? `&${Object.entries(environment)
+  environment && environment.auth
+    ? `&${Object.entries({ ...environment, cookies_win: 'x' })
         .filter(([, value]) => !!value)
         .map(([key, value]) => `gtm_${key}=${value}`, '')
-        .join('&')}&gtm_cookies_win=x`
+        .join('&')}`
     : ''
 
 const generateSnippets = (id: string, environment?: GTMEnvironment) => {