Added queueName option for custom dataLayer

integrations/google-tag-manager/HISTORY.md

@@ -1,3 +1,7 @@
+2.6.0 / 2023-05-17
+==================
+  * Add support for queueName (custom dataLayer) option
+
 2.5.0 / 2017-04-27
 ==================
 

integrations/google-tag-manager/lib/index.js

@@ -5,26 +5,27 @@
  */
 
 var integration = require('@segment/analytics.js-integration');
-var push = require('global-queue')('dataLayer', { wrap: false });
+var globalQueue = require('global-queue');
+var push;
 
 /**
  * Expose `GTM`.
  */
 
 var GTM = (module.exports = integration('Google Tag Manager')
-  .global('dataLayer')
   .global('google_tag_manager')
+  .option('queueName', 'dataLayer')
   .option('containerId', '')
   .option('environment', '')
   .option('trackNamedPages', true)
   .option('trackCategorizedPages', true)
   .tag(
     'no-env',
-    '<script src="//www.googletagmanager.com/gtm.js?id={{ containerId }}&l=dataLayer">'
+    '<script src="//www.googletagmanager.com/gtm.js?id={{ containerId }}&l={{ queueName }}">'
   )
   .tag(
     'with-env',
-    '<script src="//www.googletagmanager.com/gtm.js?id={{ containerId }}&l=dataLayer&gtm_preview={{ environment }}">'
+    '<script src="//www.googletagmanager.com/gtm.js?id={{ containerId }}&l={{ queueName }}&gtm_preview={{ environment }}">'
   ));
 
 /**
@@ -36,6 +37,7 @@ var GTM = (module.exports = integration('Google Tag Manager')
  */
 
 GTM.prototype.initialize = function() {
+  push = globalQueue(this.options.queueName, { wrap: false });
   push({ 'gtm.start': Number(new Date()), event: 'gtm.js' });
 
   if (this.options.environment.length) {
@@ -53,7 +55,10 @@ GTM.prototype.initialize = function() {
  */
 
 GTM.prototype.loaded = function() {
-  return !!(window.dataLayer && Array.prototype.push !== window.dataLayer.push);
+  return !!(
+    window[this.options.queueName] &&
+    Array.prototype.push !== window[this.options.queueName].push
+  );
 };
 
 /**

integrations/google-tag-manager/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@segment/analytics.js-integration-google-tag-manager",
   "description": "The Google Tag Manager analytics.js integration.",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "keywords": [
     "analytics.js",
     "analytics.js-integration",

integrations/google-tag-manager/test/index.test.js

@@ -33,7 +33,7 @@ describe('Google Tag Manager', function() {
     analytics.compare(
       GTM,
       integration('Google Tag Manager')
-        .global('dataLayer')
+        .option('queueName', 'dataLayer')
         .option('containerId', '')
         .option('environment', '')
         .option('trackNamedPages', true)
@@ -42,38 +42,55 @@ describe('Google Tag Manager', function() {
   });
 
   describe('loading', function() {
+    afterEach(function() {
+      analytics.restore();
+      analytics.reset();
+      gtm.reset();
+      sandbox();
+    });
+
     it('should load', function(done) {
       analytics.load(gtm, done);
     });
+
+    it('should load with custom queue name', function(done) {
+      gtm.options = {
+        containerId: 'GTM-M8M29T',
+        environment: '',
+        queueName: 'myDataLayer'
+      };
+      analytics.load(gtm, done);
+    });
   });
 
   describe('after loading', function() {
     beforeEach(function(done) {
       options = {
         containerId: 'GTM-M8M29T',
-        environment: ''
+        environment: '',
+        queueName: 'myDataLayer'
       };
       analytics.once('ready', done);
       analytics.initialize();
       analytics.page();
     });
 
     it('should push initial gtm.start event', function() {
-      var dl = window.dataLayer;
+      var dl = window[gtm.options.queueName];
       analytics.assert(dl);
       analytics.assert(dl[0].event === 'gtm.js');
       analytics.assert(typeof dl[0]['gtm.start'] === 'number');
     });
 
     describe('#track', function() {
       beforeEach(function() {
-        analytics.stub(window.dataLayer, 'push');
+        analytics.stub(window[gtm.options.queueName], 'push');
       });
 
       it('should send event', function() {
         var anonId = analytics.user().anonymousId();
         analytics.track('some-event');
-        analytics.called(window.dataLayer.push, {
+        analytics.called(window[gtm.options.queueName].push, {
           segmentAnonymousId: anonId,
           event: 'some-event'
         });
@@ -83,7 +100,7 @@ describe('Google Tag Manager', function() {
         analytics.user().id('pablo');
         var anonId = analytics.user().anonymousId();
         analytics.track('some-event');
-        analytics.called(window.dataLayer.push, {
+        analytics.called(window[gtm.options.queueName].push, {
           segmentAnonymousId: anonId,
           userId: 'pablo',
           event: 'some-event'
@@ -93,7 +110,7 @@ describe('Google Tag Manager', function() {
       it('should send anonymousId if it exists', function() {
         analytics.user().anonymousId('el');
         analytics.track('stranger things');
-        analytics.called(window.dataLayer.push, {
+        analytics.called(window[gtm.options.queueName].push, {
           segmentAnonymousId: 'el',
           event: 'stranger things'
         });
@@ -102,7 +119,7 @@ describe('Google Tag Manager', function() {
       it('should send event with properties', function() {
         var anonId = analytics.user().anonymousId();
         analytics.track('event', { prop: true });
-        analytics.called(window.dataLayer.push, {
+        analytics.called(window[gtm.options.queueName].push, {
           segmentAnonymousId: anonId,
           event: 'event',
           prop: true
@@ -112,19 +129,19 @@ describe('Google Tag Manager', function() {
 
     describe('#page', function() {
       beforeEach(function() {
-        analytics.stub(window.dataLayer, 'push');
+        analytics.stub(window[gtm.options.queueName], 'push');
       });
 
       it('should not track unamed pages by default', function() {
         analytics.page();
-        analytics.didNotCall(window.dataLayer.push);
+        analytics.didNotCall(window[gtm.options.queueName].push);
       });
 
       it('should track unamed pages if enabled', function() {
         gtm.options.trackAllPages = true;
         var anonId = analytics.user().anonymousId();
         analytics.page();
-        analytics.called(window.dataLayer.push, {
+        analytics.called(window[gtm.options.queueName].push, {
           event: 'Loaded a Page',
           segmentAnonymousId: anonId,
           path: window.location.pathname,
@@ -143,7 +160,7 @@ describe('Google Tag Manager', function() {
       it('should track named pages by default', function() {
         var anonId = analytics.user().anonymousId();
         analytics.page('Name');
-        analytics.called(window.dataLayer.push, {
+        analytics.called(window[gtm.options.queueName].push, {
           event: 'Viewed Name Page',
           segmentAnonymousId: anonId,
           name: 'Name',
@@ -163,7 +180,7 @@ describe('Google Tag Manager', function() {
       it('should track named pages with a category added', function() {
         var anonId = analytics.user().anonymousId();
         analytics.page('Category', 'Name');
-        analytics.called(window.dataLayer.push, {
+        analytics.called(window[gtm.options.queueName].push, {
           event: 'Viewed Category Name Page',
           segmentAnonymousId: anonId,
           category: 'Category',
@@ -184,7 +201,7 @@ describe('Google Tag Manager', function() {
       it('should track categorized pages by default', function() {
         var anonId = analytics.user().anonymousId();
         analytics.page('Category', 'Name');
-        analytics.called(window.dataLayer.push, {
+        analytics.called(window[gtm.options.queueName].push, {
           event: 'Viewed Category Name Page',
           category: 'Category',
           segmentAnonymousId: anonId,
@@ -207,7 +224,7 @@ describe('Google Tag Manager', function() {
         gtm.options.trackCategorizedPages = false;
         analytics.page('Name');
         analytics.page('Category', 'Name');
-        analytics.didNotCall(window.dataLayer.push);
+        analytics.didNotCall(window[gtm.options.queueName].push);
       });
     });
   });
@@ -216,13 +233,16 @@ describe('Google Tag Manager', function() {
     it('should use the right tag if the environment option is set', function() {
       gtm.options = {
         containerId: 'GTM-M8M29T',
-        environment: 'test'
+        environment: 'test',
+        queueName: 'customDataLayer'
       };
 
       var tag =
         '<script src="http://www.googletagmanager.com/gtm.js?id=' +
         gtm.options.containerId +
-        '&l=dataLayer&gtm_preview=' +
+        '&l=' +
+        gtm.options.queueName +
+        '&gtm_preview=' +
         gtm.options.environment +
         '">';
       analytics.spy(gtm, 'load');