Directly check for existence of gtag script tag (#2339)

Author: hsubox76

packages/analytics/index.test.ts

@@ -27,10 +27,8 @@ import {
 import { getFakeApp } from './testing/get-fake-app';
 import { FirebaseApp } from '@firebase/app-types';
 import { GtagCommand, EventName } from './src/constants';
-import {
-  findGtagScriptOnPage,
-  removeGtagScript
-} from './testing/gtag-script-util';
+import { findGtagScriptOnPage } from './src/helpers';
+import { removeGtagScript } from './testing/gtag-script-util';
 
 let analyticsInstance: FirebaseAnalytics = {} as FirebaseAnalytics;
 const analyticsId = 'abcd-efgh';

packages/analytics/index.ts

@@ -33,7 +33,6 @@ declare global {
  * Type constant for Firebase Analytics.
  */
 const ANALYTICS_TYPE = 'analytics';
-
 export function registerAnalytics(instance: _FirebaseNamespace): void {
   instance.INTERNAL.registerService(
     ANALYTICS_TYPE,

packages/analytics/src/constants.ts

@@ -21,6 +21,8 @@ export const ANALYTICS_ID_FIELD = 'measurementId';
 export const GA_FID_KEY = 'firebase_id';
 export const ORIGIN_KEY = 'origin';
 
+export const GTAG_URL = 'https://www.googletagmanager.com/gtag/js';
+
 export enum GtagCommand {
   EVENT = 'event',
   SET = 'set',

packages/analytics/src/factory.ts

@@ -34,7 +34,7 @@ import {
   insertScriptTag,
   getOrCreateDataLayer,
   wrapOrCreateGtag,
-  hasDataLayer
+  findGtagScriptOnPage
 } from './helpers';
 import { ANALYTICS_ID_FIELD } from './constants';
 import { AnalyticsError, ERROR_FACTORY } from './errors';
@@ -122,9 +122,8 @@ export function factory(
     // Steps here should only be done once per page: creation or wrapping
     // of dataLayer and global gtag function.
 
-    // Presence of previously existing dataLayer used to detect if user has
-    // already put the gtag snippet on this page.
-    if (!hasDataLayer(dataLayerName)) {
+    // Detect if user has already put the gtag <script> tag on this page.
+    if (!findGtagScriptOnPage()) {
       insertScriptTag(dataLayerName);
     }
     getOrCreateDataLayer(dataLayerName);

packages/analytics/src/helpers.test.ts

@@ -21,13 +21,13 @@ import '../testing/setup';
 import { DataLayer, Gtag } from '@firebase/analytics-types';
 import {
   initializeGAId,
-  hasDataLayer,
+  getOrCreateDataLayer,
   insertScriptTag,
-  wrapOrCreateGtag
+  wrapOrCreateGtag,
+  findGtagScriptOnPage
 } from './helpers';
 import { getFakeApp } from '../testing/get-fake-app';
 import { GtagCommand } from './constants';
-import { findGtagScriptOnPage } from '../testing/gtag-script-util';
 import { Deferred } from '@firebase/util';
 
 const mockAnalyticsId = 'abcd-efgh-ijkl';
@@ -45,13 +45,14 @@ describe('FirebaseAnalytics methods', () => {
     });
   });
 
-  it('hasDataLayer is able to correctly identify an existing data layer', () => {
-    expect(hasDataLayer('dataLayer')).to.be.false;
-    window['dataLayer'] = [];
-    expect(hasDataLayer('dataLayer')).to.be.true;
-    window['dataLayer'] = 'hello';
-    expect(hasDataLayer('dataLayer')).to.be.false;
+  it('getOrCreateDataLayer is able to create a new data layer if none exists', () => {
     delete window['dataLayer'];
+    expect(getOrCreateDataLayer('dataLayer')).to.deep.equal([]);
+  });
+
+  it('getOrCreateDataLayer is able to correctly identify an existing data layer', () => {
+    const existingDataLayer = (window['dataLayer'] = []);
+    expect(getOrCreateDataLayer('dataLayer')).to.equal(existingDataLayer);
   });
 
   it('insertScriptIfNeeded inserts script tag', () => {
@@ -248,27 +249,6 @@ describe('FirebaseAnalytics methods', () => {
       existingGtagStub.reset();
     });
 
-    // it('wrapped window.gtag function waits for initialization promises before sending events', async () => {
-    //   const deferred = new Deferred<void>();
-    //   wrapOrCreateGtag(
-    //     { [mockAnalyticsId]: deferred.promise },
-    //     'dataLayer',
-    //     'gtag'
-    //   );
-    //   (window['gtag'] as Gtag)(GtagCommand.EVENT, 'purchase', {
-    //     'transaction_id': 'abcd123'
-    //   });
-    //   await Promise.resolve(); // Clear async event stack but not pending FID promise.
-    //   expect(existingGtagStub).to.not.be.called;
-    //   deferred.resolve(); // Resolves gaid initialization promise.
-    //   await Promise.resolve(); // wait for the next cycle
-    //   expect(existingGtagStub).to.be.calledWith(
-    //     GtagCommand.EVENT,
-    //     'purchase',
-    //     { 'transaction_id': 'abcd123' }
-    //   );
-    // });
-
     it('new window.gtag function waits for all initialization promises before sending group events', async () => {
       const deferred = new Deferred<void>();
       const deferred2 = new Deferred<void>();

packages/analytics/src/helpers.ts

@@ -27,7 +27,8 @@ import {
   GtagCommand,
   ANALYTICS_ID_FIELD,
   GA_FID_KEY,
-  ORIGIN_KEY
+  ORIGIN_KEY,
+  GTAG_URL
 } from './constants';
 import '@firebase/installations';
 
@@ -61,15 +62,11 @@ export async function initializeGAId(
   });
 }
 
-export function hasDataLayer(dataLayerName: string): boolean {
-  return Array.isArray(window[dataLayerName]);
-}
-
 export function insertScriptTag(dataLayerName: string): void {
   const script = document.createElement('script');
   // We are not providing an analyticsId in the URL because it would trigger a `page_view`
   // without fid. We will initialize ga-id using gtag (config) command together with fid.
-  script.src = `https://www.googletagmanager.com/gtag/js?l=${dataLayerName}`;
+  script.src = `${GTAG_URL}?l=${dataLayerName}`;
   script.async = true;
   document.head.appendChild(script);
 }
@@ -80,10 +77,10 @@ export function insertScriptTag(dataLayerName: string): void {
 export function getOrCreateDataLayer(dataLayerName: string): DataLayer {
   // Check for existing dataLayer and create if needed.
   let dataLayer: DataLayer = [];
-  if (hasDataLayer(dataLayerName)) {
+  if (Array.isArray(window[dataLayerName])) {
     dataLayer = window[dataLayerName] as DataLayer;
   } else {
-    dataLayer = window[dataLayerName] = [];
+    window[dataLayerName] = dataLayer;
   }
   return dataLayer;
 }
@@ -206,3 +203,16 @@ export function wrapOrCreateGtag(
     wrappedGtag: window[gtagFunctionName] as Gtag
   };
 }
+
+/**
+ * Returns first script tag in DOM matching our gtag url pattern.
+ */
+export function findGtagScriptOnPage(): HTMLScriptElement | null {
+  const scriptTags = window.document.getElementsByTagName('script');
+  for (const tag of Object.values(scriptTags)) {
+    if (tag.src && tag.src.includes(GTAG_URL)) {
+      return tag;
+    }
+  }
+  return null;
+}

packages/analytics/testing/gtag-script-util.ts

@@ -14,24 +14,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-export function findGtagScriptOnPage(): HTMLScriptElement | null {
-  const scriptTags = window.document.getElementsByTagName('script');
-  for (const tag of Object.values(scriptTags)) {
-    if (tag.src) {
-      if (tag.src.includes('googletagmanager')) {
-        return tag;
-      }
-    }
-  }
-  return null;
-}
+import { GTAG_URL } from '../src/constants';
 
 export function removeGtagScript(): void {
   const scriptTags = window.document.getElementsByTagName('script');
   for (const tag of Object.values(scriptTags)) {
     if (tag.src) {
-      if (tag.src.includes('googletagmanager') && tag.parentElement) {
+      if (tag.src.includes(GTAG_URL) && tag.parentElement) {
         tag.parentElement!.removeChild(tag);
       }
     }