feat(google-tag-manager): warn instead of throw err

Author: Itrulia

packages/google-tag-manager/src/__tests__/__snapshots__/google-tag-manager.test.ts.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GoogleTagManager({...options})(events) When default dataLayer is not defined logs an error informing the developer that no events are being tracked 1`] = `
+"
+WARN 
+    [@redux-beacon/google-tag-manager] Events are not being tracked, window.dataLayer
+    is not a function. Please include the Google Tag Manager snippet:
+    https://developers.google.com/tag-manager/quickstart
+    "
+`;
+
+exports[`GoogleTagManager({...options})(events) When iAmADataLayer custom named dataLayer is not defined should log a warning to console informing the user. 1`] = `""`;

packages/google-tag-manager/src/__tests__/google-tag-manager.test.ts

@@ -1,10 +1,20 @@
+import * as makeConsoleMock from 'consolemock';
 import GoogleTagManager from '../';
 
+beforeAll(() => {
+  console = makeConsoleMock(console);
+});
+
 beforeEach(() => {
   window.dataLayer = undefined;
   window.iAmADataLayer = undefined;
 });
 
+/* tslint:disable: no-console */
+afterEach(() => {
+  console.clearHistory();
+});
+
 describe('GoogleTagManager({...options})(events)', () => {
   describe('When given an array of events', () => {
     it('pushes those events to the data layer', () => {
@@ -70,23 +80,36 @@ describe('GoogleTagManager({...options})(events)', () => {
   });
 
   describe('When default dataLayer is not defined', () => {
-    it('should throw an error informing the user.', () => {
+    it('does not throw an error', () => {
+      window.dataLayer = undefined;
+
+      expect(() => GoogleTagManager()).not.toThrow();
+    });
+    it('does nothing when events are pushed to the target', () => {
+      window.dataLayer = undefined;
+
       const events = [{ hitType: 'pageview' }];
-      expect(() => GoogleTagManager()(events)).toThrow(
-        'window.dataLayer is not defined. Have you forgotten to include Google Tag Manager and dataLayer?'
-      );
+      const target = GoogleTagManager();
+
+      expect(() => target(events)).not.toThrow();
+    });
+    it('logs an error informing the developer that no events are being tracked', () => {
+      window.dataLayer = undefined;
+
+      const events = [{ hitType: 'pageview' }];
+      GoogleTagManager()(events);
+
+      expect(console.printHistory()).toMatchSnapshot();
     });
   });
 
   describe('When iAmADataLayer custom named dataLayer is not defined', () => {
-    it('should throw an error informing the user.', () => {
+    it('should log a warning to console informing the user.', () => {
       const options = {
         dataLayerName: 'iAmADataLayer',
       };
       const events = [{ hitType: 'pageview' }];
-      expect(() => GoogleTagManager(options)(events)).toThrow(
-        'window.iAmADataLayer is not defined. Have you forgotten to include Google Tag Manager and dataLayer?'
-      );
+      expect(console.printHistory()).toMatchSnapshot();
     });
   });
 });

packages/google-tag-manager/src/google-tag-manager.ts

@@ -13,9 +13,14 @@ const GoogleTagManager = ({
     !(window as any)[dataLayerName] ||
     typeof (window as any)[dataLayerName].push !== 'function'
   ) {
-    throw new Error(
-      `redux-beacon error: window.${dataLayerName} is not defined. Have you forgotten to include Google Tag Manager and dataLayer?`
-    );
+    /* tslint:disable: no-console */
+    console.warn(`
+    [@redux-beacon/google-tag-manager] Events are not being tracked, window.${dataLayerName}
+    is not a function. Please include the Google Tag Manager snippet:
+    https://developers.google.com/tag-manager/quickstart
+    `);
+
+    return;
   }
 
   events.forEach(event => {