@analytics/google-tag-manager - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.3.0](https://github.com/DavidWells/analytics/compare/@analytics/google-tag-manager@0.2.3...@analytics/google-tag-manager@0.3.0) (2020-09-25)
+
+
+### Features
+
+* allow gtm to use custom dataLayer ([27240ae](https://github.com/DavidWells/analytics/commit/27240ae))
+
+
+
+
+
 ## [0.2.3](https://github.com/DavidWells/analytics/compare/@analytics/google-tag-manager@0.2.2...@analytics/google-tag-manager@0.2.3) (2020-03-13)
@@ -8,0 +19,0 @@

dist/@analytics/google-tag-manager.js

@@ -38,22 +38,24 @@ var analyticsGtagManager = (function () {
 
-  /* global dataLayer */
   var config = {
     debug: false,
-    containerId: null // assumesPageview: true,
+    containerId: null,
+    dataLayerName: 'dataLayer',
+    dataLayer: undefined // assumesPageview: true,
 
-    /**
-     * Google tag manager plugin
-     * @link https://getanalytics.io/plugins/google-tag-manager
-     * @link https://developers.google.com/tag-manager/
-     * @param {object} pluginConfig - Plugin settings
-     * @param {string} pluginConfig.containerId - The Container ID uniquely identifies the GTM Container.
-     * @return {object} Analytics plugin
-     * @example
-     *
-     * googleTagManager({
-     *   containerId: 'GTM-123xyz'
-     * })
-     */
-
   };
+  var initializedDataLayerName;
+  /**
+   * Google tag manager plugin
+   * @link https://getanalytics.io/plugins/google-tag-manager
+   * @link https://developers.google.com/tag-manager/
+   * @param {object} pluginConfig - Plugin settings
+   * @param {string} pluginConfig.containerId - The Container ID uniquely identifies the GTM Container.
+   * @param {string} [pluginConfig.dataLayerName=dataLayer] - The optional name for dataLayer-object. Defaults to dataLayer.
+   * @return {object} Analytics plugin
+   * @example
+   *
+   * googleTagManager({
+   *   containerId: 'GTM-123xyz'
+   * })
+   */
 
@@ -68,3 +70,4 @@ function googleTagManager$1() {
         var config = _ref.config;
-        var containerId = config.containerId;
+        var containerId = config.containerId,
+            dataLayerName = config.dataLayerName;
 
@@ -89,5 +92,8 @@ if (!containerId) {
             f.parentNode.insertBefore(j, f);
-          })(window, document, 'script', 'dataLayer', containerId);
+          })(window, document, 'script', dataLayerName, containerId);
           /* eslint-enable */
 
+
+          initializedDataLayerName = dataLayerName;
+          config.dataLayer = window[dataLayerName];
         }
@@ -98,6 +104,7 @@ },
             options = _ref2.options,
-            instance = _ref2.instance;
+            instance = _ref2.instance,
+            config = _ref2.config;
 
-        if (typeof dataLayer !== 'undefined') {
-          dataLayer.push(payload.properties);
+        if (typeof config.dataLayer !== 'undefined') {
+          config.dataLayer.push(payload.properties);
         }
@@ -110,3 +117,3 @@ },
 
-        if (typeof dataLayer !== 'undefined') {
+        if (typeof config.dataLayer !== 'undefined') {
           var anonymousId = payload.anonymousId,
@@ -136,3 +143,3 @@ userId = payload.userId,
 
-          dataLayer.push(_objectSpread({
+          config.dataLayer.push(_objectSpread({
             event: payload.event
@@ -143,3 +150,3 @@ }, formattedPayload));
       loaded: function loaded() {
-        var hasDataLayer = !!(window.dataLayer && Array.prototype.push !== window.dataLayer.push);
+        var hasDataLayer = !!initializedDataLayerName && !!(window[initializedDataLayerName] && Array.prototype.push !== window[initializedDataLayerName].push);
         return scriptLoaded(pluginConfig.containerId) && hasDataLayer;
@@ -146,0 +153,0 @@ }

dist/@analytics/google-tag-manager.min.js

@@ -1,1 +0,1 @@
-var analyticsGtagManager=function(){"use strict";function g(a){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{},t=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(o).filter(function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable}))),t.forEach(function(e){var t,n,r;t=a,r=o[n=e],n in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r})}return a}var e={debug:!1,containerId:null};var r={};function n(e){var t=r[e];t||(t=new RegExp("googletagmanager\\.com\\/gtm\\.js.*[?&]id="+e),r[e]=t);var n=document.querySelectorAll("script[src]");return!!Object.keys(n).filter(function(e){return(n[e].src||"").match(t)}).length}return function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};return{name:"google-tag-manager",config:g({},e,t),initialize:function(e){var t=e.config.containerId;if(!t)throw new Error("No google tag manager containerId defined");n(t)||function(e,t,n,r,a){e[r]=e[r]||[],e[r].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var o=t.getElementsByTagName(n)[0],i=t.createElement(n);i.async=!0,i.src="https://www.googletagmanager.com/gtm.js?id="+a,o.parentNode.insertBefore(i,o)}(window,document,"script","dataLayer",t)},page:function(e){var t=e.payload;e.options,e.instance,"undefined"!=typeof dataLayer&&dataLayer.push(t.properties)},track:function(e){var t=e.payload,n=(e.options,e.config);if("undefined"!=typeof dataLayer){var r=t.anonymousId,a=t.userId,o=t.properties,i=t.category,c=o;a&&(c.userId=a),r&&(c.anonymousId=r),i||(c.category="All"),n.debug&&console.log("gtag push",g({event:t.event},c)),dataLayer.push(g({event:t.event},c))}},loaded:function(){var e=!(!window.dataLayer||Array.prototype.push===window.dataLayer.push);return n(t.containerId)&&e}}}}();
+var analyticsGtagManager=function(){"use strict";function g(r){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{},t=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(o).filter(function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable}))),t.forEach(function(e){var t,a,n;t=r,n=o[a=e],a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n})}return r}var r,e={debug:!1,containerId:null,dataLayerName:"dataLayer",dataLayer:void 0};var n={};function o(e){var t=n[e];t||(t=new RegExp("googletagmanager\\.com\\/gtm\\.js.*[?&]id="+e),n[e]=t);var a=document.querySelectorAll("script[src]");return!!Object.keys(a).filter(function(e){return(a[e].src||"").match(t)}).length}return function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};return{name:"google-tag-manager",config:g({},e,t),initialize:function(e){var t=e.config,a=t.containerId,n=t.dataLayerName;if(!a)throw new Error("No google tag manager containerId defined");o(a)||(function(e,t,a,n,r){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var o=t.getElementsByTagName(a)[0],i=t.createElement(a),c="dataLayer"!=n?"&l="+n:"";i.async=!0,i.src="https://www.googletagmanager.com/gtm.js?id="+r+c,o.parentNode.insertBefore(i,o)}(window,document,"script",n,a),r=n,t.dataLayer=window[n])},page:function(e){var t=e.payload,a=(e.options,e.instance,e.config);void 0!==a.dataLayer&&a.dataLayer.push(t.properties)},track:function(e){var t=e.payload,a=(e.options,e.config);if(void 0!==a.dataLayer){var n=t.anonymousId,r=t.userId,o=t.properties,i=t.category,c=o;r&&(c.userId=r),n&&(c.anonymousId=n),i||(c.category="All"),a.debug&&console.log("gtag push",g({event:t.event},c)),a.dataLayer.push(g({event:t.event},c))}},loaded:function(){var e=!!r&&!(!window[r]||Array.prototype.push===window[r].push);return o(t.containerId)&&e}}}}();

lib/analytics-plugin-google-tag-manager.browser.cjs.js

@@ -37,22 +37,24 @@ 'use strict';
 
-/* global dataLayer */
 var config = {
   debug: false,
-  containerId: null // assumesPageview: true,
+  containerId: null,
+  dataLayerName: 'dataLayer',
+  dataLayer: undefined // assumesPageview: true,
 
-  /**
-   * Google tag manager plugin
-   * @link https://getanalytics.io/plugins/google-tag-manager
-   * @link https://developers.google.com/tag-manager/
-   * @param {object} pluginConfig - Plugin settings
-   * @param {string} pluginConfig.containerId - The Container ID uniquely identifies the GTM Container.
-   * @return {object} Analytics plugin
-   * @example
-   *
-   * googleTagManager({
-   *   containerId: 'GTM-123xyz'
-   * })
-   */
-
 };
+var initializedDataLayerName;
+/**
+ * Google tag manager plugin
+ * @link https://getanalytics.io/plugins/google-tag-manager
+ * @link https://developers.google.com/tag-manager/
+ * @param {object} pluginConfig - Plugin settings
+ * @param {string} pluginConfig.containerId - The Container ID uniquely identifies the GTM Container.
+ * @param {string} [pluginConfig.dataLayerName=dataLayer] - The optional name for dataLayer-object. Defaults to dataLayer.
+ * @return {object} Analytics plugin
+ * @example
+ *
+ * googleTagManager({
+ *   containerId: 'GTM-123xyz'
+ * })
+ */
 
@@ -67,3 +69,4 @@ function googleTagManager$1() {
       var config = _ref.config;
-      var containerId = config.containerId;
+      var containerId = config.containerId,
+          dataLayerName = config.dataLayerName;
 
@@ -88,5 +91,8 @@ if (!containerId) {
           f.parentNode.insertBefore(j, f);
-        })(window, document, 'script', 'dataLayer', containerId);
+        })(window, document, 'script', dataLayerName, containerId);
         /* eslint-enable */
 
+
+        initializedDataLayerName = dataLayerName;
+        config.dataLayer = window[dataLayerName];
       }
@@ -97,6 +103,7 @@ },
           options = _ref2.options,
-          instance = _ref2.instance;
+          instance = _ref2.instance,
+          config = _ref2.config;
 
-      if (typeof dataLayer !== 'undefined') {
-        dataLayer.push(payload.properties);
+      if (typeof config.dataLayer !== 'undefined') {
+        config.dataLayer.push(payload.properties);
       }
@@ -109,3 +116,3 @@ },
 
-      if (typeof dataLayer !== 'undefined') {
+      if (typeof config.dataLayer !== 'undefined') {
         var anonymousId = payload.anonymousId,
@@ -135,3 +142,3 @@ userId = payload.userId,
 
-        dataLayer.push(_objectSpread({
+        config.dataLayer.push(_objectSpread({
           event: payload.event
@@ -142,3 +149,3 @@ }, formattedPayload));
     loaded: function loaded() {
-      var hasDataLayer = !!(window.dataLayer && Array.prototype.push !== window.dataLayer.push);
+      var hasDataLayer = !!initializedDataLayerName && !!(window[initializedDataLayerName] && Array.prototype.push !== window[initializedDataLayerName].push);
       return scriptLoaded(pluginConfig.containerId) && hasDataLayer;
@@ -145,0 +152,0 @@ }

lib/analytics-plugin-google-tag-manager.browser.es.js

@@ -35,22 +35,24 @@ function _defineProperty(obj, key, value) {
 
-/* global dataLayer */
 var config = {
   debug: false,
-  containerId: null // assumesPageview: true,
+  containerId: null,
+  dataLayerName: 'dataLayer',
+  dataLayer: undefined // assumesPageview: true,
 
-  /**
-   * Google tag manager plugin
-   * @link https://getanalytics.io/plugins/google-tag-manager
-   * @link https://developers.google.com/tag-manager/
-   * @param {object} pluginConfig - Plugin settings
-   * @param {string} pluginConfig.containerId - The Container ID uniquely identifies the GTM Container.
-   * @return {object} Analytics plugin
-   * @example
-   *
-   * googleTagManager({
-   *   containerId: 'GTM-123xyz'
-   * })
-   */
-
 };
+var initializedDataLayerName;
+/**
+ * Google tag manager plugin
+ * @link https://getanalytics.io/plugins/google-tag-manager
+ * @link https://developers.google.com/tag-manager/
+ * @param {object} pluginConfig - Plugin settings
+ * @param {string} pluginConfig.containerId - The Container ID uniquely identifies the GTM Container.
+ * @param {string} [pluginConfig.dataLayerName=dataLayer] - The optional name for dataLayer-object. Defaults to dataLayer.
+ * @return {object} Analytics plugin
+ * @example
+ *
+ * googleTagManager({
+ *   containerId: 'GTM-123xyz'
+ * })
+ */
 
@@ -65,3 +67,4 @@ function googleTagManager$1() {
       var config = _ref.config;
-      var containerId = config.containerId;
+      var containerId = config.containerId,
+          dataLayerName = config.dataLayerName;
 
@@ -86,5 +89,8 @@ if (!containerId) {
           f.parentNode.insertBefore(j, f);
-        })(window, document, 'script', 'dataLayer', containerId);
+        })(window, document, 'script', dataLayerName, containerId);
         /* eslint-enable */
 
+
+        initializedDataLayerName = dataLayerName;
+        config.dataLayer = window[dataLayerName];
       }
@@ -95,6 +101,7 @@ },
           options = _ref2.options,
-          instance = _ref2.instance;
+          instance = _ref2.instance,
+          config = _ref2.config;
 
-      if (typeof dataLayer !== 'undefined') {
-        dataLayer.push(payload.properties);
+      if (typeof config.dataLayer !== 'undefined') {
+        config.dataLayer.push(payload.properties);
       }
@@ -107,3 +114,3 @@ },
 
-      if (typeof dataLayer !== 'undefined') {
+      if (typeof config.dataLayer !== 'undefined') {
         var anonymousId = payload.anonymousId,
@@ -133,3 +140,3 @@ userId = payload.userId,
 
-        dataLayer.push(_objectSpread({
+        config.dataLayer.push(_objectSpread({
           event: payload.event
@@ -140,3 +147,3 @@ }, formattedPayload));
     loaded: function loaded() {
-      var hasDataLayer = !!(window.dataLayer && Array.prototype.push !== window.dataLayer.push);
+      var hasDataLayer = !!initializedDataLayerName && !!(window[initializedDataLayerName] && Array.prototype.push !== window[initializedDataLayerName].push);
       return scriptLoaded(pluginConfig.containerId) && hasDataLayer;
@@ -143,0 +150,0 @@ }

package.json

 {
   "name": "@analytics/google-tag-manager",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Google tag manager plugin for 'analytics' module",
@@ -55,3 +55,3 @@ "projectMeta": {
   },
-  "gitHead": "743f6269487e90de8ab57fbae1cc6efe3dd1051a"
+  "gitHead": "219b20141960cf1074476b9b6ba3fff520dddfc5"
 }

README.md

@@ -19,7 +19,10 @@ <!--
 - [How to use](#how-to-use)
+- [Platforms Supported](#platforms-supported)
 - [Browser usage](#browser-usage)
   * [Browser API](#browser-api)
-- [Platforms Supported](#platforms-supported)
+  * [Configuration options for browser](#configuration-options-for-browser)
 - [Additional examples](#additional-examples)
 - [Configuring GTM](#configuring-gtm)
+- [Using multiple instances of GTM](#using-multiple-instances-of-gtm)
+- [Tracking if JS is disabled](#tracking-if-js-is-disabled)
 
@@ -74,2 +77,6 @@ </details>
 
+## Platforms Supported
+
+The `@analytics/google-tag-manager` package works in [the browser](#browser-usage)
+
 ## Browser usage
@@ -79,4 +86,4 @@
 
-- **[analytics.page](https://getanalytics.io/api/#analyticspage)** - Sends page views into Google Tag Manager
-- **[analytics.track](https://getanalytics.io/api/#analyticstrack)** - Track custom events and send to Google Tag Manager
+- **[analytics.page](https://getanalytics.io/api/#analyticspage)** - Sends page views into Google Tag Manager 
+- **[analytics.track](https://getanalytics.io/api/#analyticstrack)** - Track custom events and send to Google Tag Manager 
 
@@ -86,2 +93,5 @@ ### Browser API
 ```js
+import Analytics from 'analytics'
+import googleTagManager from '@analytics/google-tag-manager'
+
 const analytics = Analytics({
@@ -98,12 +108,9 @@ app: 'awesome-app',
 
-**Initialization arguments**
+### Configuration options for browser
 
-- **pluginConfig** `object` Plugin settings
-- **pluginConfig.containerId** `string` The Container ID uniquely identifies the GTM Container.
+| Option | description |
+|:---------------------------|:-----------|
+| `containerId` <br/>**required** - string| The Container ID uniquely identifies the GTM Container. |
 
 
-## Platforms Supported
-
-The `@analytics/google-tag-manager` package works in [the browser](#browser-usage)
-
 ## Additional examples
@@ -245,2 +252,22 @@
 
+## Custom name for dataLayer-object
+
+The dataLayer is by default set to window.dataLayer. This can be changed by setting dataLayerName in plugin configuration.
+
+```js
+import Analytics from 'analytics'
+import googleTagManager from '@analytics/google-tag-manager'
+
+const analytics = Analytics({
+  app: 'awesome-app',
+  plugins: [
+    googleTagManager({
+      containerId: 'GTM-123xyz',
+      dataLayerName: 'customDataLayer',
+    })
+  ]
+})
+// dataLayer is initialized to window.customDataLayer
+```
+
 ## Tracking if JS is disabled
@@ -247,0 +274,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31739

increased by12.86%

Number of package files

10

increased by11.11%

Lines of code

458

increased by4.81%

Number of lines in readme file

285

increased by10.47%

No dependency changes