Ability to change window.dataLayer name

.gitignore

@@ -1,2 +1 @@
 node_modules
-dist

dist/format.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = format;
+var smallWords = /^(a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|vs?\.?|via)$/i;
+function toTitleCase(string) {
+  return string.toString().trim().replace(/[A-Za-z0-9\u00C0-\u00FF]+[^\s-]*/g, function (match, index, title) {
+    if (index > 0 && index + match.length !== title.length && match.search(smallWords) > -1 && title.charAt(index - 2) !== ":" && (title.charAt(index + match.length) !== "-" || title.charAt(index - 1) === "-") && title.charAt(index - 1).search(/[^\s-]/) < 0) {
+      return match.toLowerCase();
+    }
+    if (match.substr(1).search(/[A-Z]|\../) > -1) {
+      return match;
+    }
+    return match.charAt(0).toUpperCase() + match.substr(1);
+  });
+}
+
+// See if s could be an email address. We don't want to send personal data like email.
+// https://support.google.com/analytics/answer/2795983?hl=en
+function mightBeEmail(s) {
+  // There's no point trying to validate rfc822 fully, just look for ...@...
+  return typeof s === "string" && s.indexOf("@") !== -1;
+}
+var redacted = "REDACTED (Potential Email Address)";
+function redactEmail(string) {
+  if (mightBeEmail(string)) {
+    console.warn("This arg looks like an email address, redacting.");
+    return redacted;
+  }
+  return string;
+}
+function format() {
+  var s = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var titleCase = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var redactingEmail = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var _str = s || "";
+  if (titleCase) {
+    _str = toTitleCase(s);
+  }
+  if (redactingEmail) {
+    _str = redactEmail(_str);
+  }
+  return _str;
+}

dist/gtag.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var gtag = function gtag(dataLayerName) {
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+  if (typeof window !== "undefined") {
+    var _window;
+    if (typeof window.gtag === "undefined") {
+      window[dataLayerName] = window[dataLayerName] || [];
+      window.gtag = function gtag() {
+        window[dataLayerName].push(arguments);
+      };
+    }
+    (_window = window).gtag.apply(_window, args);
+  }
+};
+var _default = gtag;
+exports["default"] = _default;

src/ga4.js

@@ -60,14 +60,15 @@ export class GA4 {
     this._hasLoadedGA = false;
     this._isQueuing = false;
     this._queueGtag = [];
+    this._dataLayerName = "dataLayer";
   };
 
   _gtag = (...args) => {
     if (!this._testMode) {
       if (this._isQueuing) {
         this._queueGtag.push(args);
       } else {
-        gtag(...args);
+        gtag(this._dataLayerName, ...args);
       }
     } else {
       this._queueGtag.push(args);
@@ -81,7 +82,8 @@ export class GA4 {
   _loadGA = (
     GA_MEASUREMENT_ID,
     nonce,
-    gtagUrl = "https://www.googletagmanager.com/gtag/js"
+    gtagUrl = "https://www.googletagmanager.com/gtag/js",
+    dataLayerName = "dataLayer"
   ) => {
     if (typeof window === "undefined" || typeof document === "undefined") {
       return;
@@ -91,17 +93,18 @@ export class GA4 {
       // Global Site Tag (gtag.js) - Google Analytics
       const script = document.createElement("script");
       script.async = true;
-      script.src = `${gtagUrl}?id=${GA_MEASUREMENT_ID}`;
+      script.src = `${gtagUrl}?id=${GA_MEASUREMENT_ID}&l=${dataLayerName}`;
       if (nonce) {
         script.setAttribute("nonce", nonce);
       }
       document.body.appendChild(script);
 
-      window.dataLayer = window.dataLayer || [];
+      window[dataLayerName] = window[dataLayerName] || [];
       window.gtag = function gtag() {
-        window.dataLayer.push(arguments);
+        window[dataLayerName].push(arguments);
       };
 
+      this._dataLayerName = dataLayerName;
       this._hasLoadedGA = true;
     }
   };
@@ -158,6 +161,7 @@ export class GA4 {
    * @param {string} [options.nonce]
    * @param {boolean} [options.testMode=false]
    * @param {string} [options.gtagUrl=https://www.googletagmanager.com/gtag/js]
+   * @param {string} [options.dataLayerName=dataLayer]
    * @param {GaOptions|any} [options.gaOptions]
    * @param {Object} [options.gtagOptions] New parameter
    */
@@ -178,11 +182,12 @@ export class GA4 {
       nonce,
       testMode = false,
       gtagUrl,
+      dataLayerName,
     } = options;
     this._testMode = testMode;
 
     if (!testMode) {
-      this._loadGA(this._currentMeasurementId, nonce, gtagUrl);
+      this._loadGA(this._currentMeasurementId, nonce, gtagUrl, dataLayerName);
     }
     if (!this.isInitialized) {
       this._gtag("js", new Date());

src/gtag.js

@@ -1,9 +1,9 @@
-const gtag = (...args) => {
+const gtag = (dataLayerName, ...args) => {
   if (typeof window !== "undefined") {
     if (typeof window.gtag === "undefined") {
-      window.dataLayer = window.dataLayer || [];
+      window[dataLayerName] = window[dataLayerName] || [];
       window.gtag = function gtag() {
-        window.dataLayer.push(arguments);
+        window[dataLayerName].push(arguments);
       };
     }
 

types/ga4.d.ts

@@ -42,9 +42,10 @@ export class GA4 {
     _hasLoadedGA: boolean;
     _isQueuing: boolean;
     _queueGtag: any[];
+    _dataLayerName: string;
     _gtag: (...args: any[]) => void;
     gtag(...args: any[]): void;
-    _loadGA: (GA_MEASUREMENT_ID: any, nonce: any, gtagUrl?: string) => void;
+    _loadGA: (GA_MEASUREMENT_ID: any, nonce: any, gtagUrl?: string, dataLayerName?: string) => void;
     _toGtagOptions: (gaOptions: any) => {};
     /**
      *
@@ -53,13 +54,15 @@ export class GA4 {
      * @param {string} [options.nonce]
      * @param {boolean} [options.testMode=false]
      * @param {string} [options.gtagUrl=https://www.googletagmanager.com/gtag/js]
+     * @param {string} [options.dataLayerName=dataLayer]
      * @param {GaOptions|any} [options.gaOptions]
      * @param {Object} [options.gtagOptions] New parameter
      */
     initialize: (GA_MEASUREMENT_ID: InitOptions[] | string, options?: {
         nonce?: string;
         testMode?: boolean;
         gtagUrl?: string;
+        dataLayerName?: string;
         gaOptions?: GaOptions | any;
         gtagOptions?: any;
     }) => void;

types/gtag.d.ts

@@ -1,2 +1,2 @@
 export default gtag;
-declare function gtag(...args: any[]): void;
+declare function gtag(dataLayerName: any, ...args: any[]): void;