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

Comparing version 0.2.1 to 0.2.2

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [0.2.2](https://github.com/DavidWells/analytics/compare/@analytics/google-tag-manager@0.2.1...@analytics/google-tag-manager@0.2.2) (2020-03-07)
+
+**Note:** Version bump only for package @analytics/google-tag-manager
+
+
+
+
+
 ## [0.2.1](https://github.com/DavidWells/analytics/compare/@analytics/google-tag-manager@0.2.0...@analytics/google-tag-manager@0.2.1) (2019-10-14)
@@ -8,0 +16,0 @@

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

@@ -63,3 +63,3 @@ var analyticsGtagManager = (function () {
     return {
-      NAMESPACE: 'google-tag-manager',
+      name: 'google-tag-manager',
       config: _objectSpread({}, config, pluginConfig),
@@ -74,3 +74,3 @@ initialize: function initialize(_ref) {
 
-        if (!scriptLoaded()) {
+        if (!scriptLoaded(containerId)) {
           /* eslint-disable */
@@ -140,12 +140,23 @@ (function (w, d, s, l, i) {
         var hasDataLayer = !!(window.dataLayer && Array.prototype.push !== window.dataLayer.push);
-        return scriptLoaded() && hasDataLayer;
+        return scriptLoaded(pluginConfig.containerId) && hasDataLayer;
       }
     };
   }
+  var regexCache = {};
+  /*
+  TODO add logic to make it impossible to load 2 plugins with the same container ID
+  [containerID]: pluginName
+  */
 
-  function scriptLoaded() {
-    var scripts = document.getElementsByTagName('script');
+  function scriptLoaded(containerId) {
+    var regex = regexCache[containerId];
+
+    if (!regex) {
+      regex = new RegExp('googletagmanager\\.com\\/gtm\\.js.*[?&]id=' + containerId);
+      regexCache[containerId] = regex;
+    }
+
+    var scripts = document.querySelectorAll('script[src]');
     return !!Object.keys(scripts).filter(function (key) {
-      var src = scripts[key].src;
-      return src.match(/googletagmanager\.com\/gtm\.js/);
+      return scripts[key].src.match(regex);
     }).length;
@@ -152,0 +163,0 @@ }

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

@@ -1,1 +0,1 @@
-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,n,a;t=r,a=o[n=e],n in t?Object.defineProperty(t,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[n]=a})}return r}var t={debug:!1,containerId:null};function n(){var t=document.getElementsByTagName("script");return!!Object.keys(t).filter(function(e){return t[e].src.match(/googletagmanager\.com\/gtm\.js/)}).length}return function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};return{NAMESPACE:"google-tag-manager",config:g({},t,e),initialize:function(e){var t=e.config.containerId;if(!t)throw new Error("No google tag manager containerId defined");n()||function(e,t,n,a,r){e[a]=e[a]||[],e[a].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="+r,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 a=t.anonymousId,r=t.userId,o=t.properties,i=t.category,c=o;r&&(c.userId=r),a&&(c.anonymousId=a),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()&&e}}}}();
+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}}}}();

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

@@ -62,3 +62,3 @@ 'use strict';
   return {
-    NAMESPACE: 'google-tag-manager',
+    name: 'google-tag-manager',
     config: _objectSpread({}, config, pluginConfig),
@@ -73,3 +73,3 @@ initialize: function initialize(_ref) {
 
-      if (!scriptLoaded()) {
+      if (!scriptLoaded(containerId)) {
         /* eslint-disable */
@@ -139,12 +139,23 @@ (function (w, d, s, l, i) {
       var hasDataLayer = !!(window.dataLayer && Array.prototype.push !== window.dataLayer.push);
-      return scriptLoaded() && hasDataLayer;
+      return scriptLoaded(pluginConfig.containerId) && hasDataLayer;
     }
   };
 }
+var regexCache = {};
+/*
+TODO add logic to make it impossible to load 2 plugins with the same container ID
+[containerID]: pluginName
+*/
 
-function scriptLoaded() {
-  var scripts = document.getElementsByTagName('script');
+function scriptLoaded(containerId) {
+  var regex = regexCache[containerId];
+
+  if (!regex) {
+    regex = new RegExp('googletagmanager\\.com\\/gtm\\.js.*[?&]id=' + containerId);
+    regexCache[containerId] = regex;
+  }
+
+  var scripts = document.querySelectorAll('script[src]');
   return !!Object.keys(scripts).filter(function (key) {
-    var src = scripts[key].src;
-    return src.match(/googletagmanager\.com\/gtm\.js/);
+    return scripts[key].src.match(regex);
   }).length;
@@ -151,0 +162,0 @@ }

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

@@ -60,3 +60,3 @@ function _defineProperty(obj, key, value) {
   return {
-    NAMESPACE: 'google-tag-manager',
+    name: 'google-tag-manager',
     config: _objectSpread({}, config, pluginConfig),
@@ -71,3 +71,3 @@ initialize: function initialize(_ref) {
 
-      if (!scriptLoaded()) {
+      if (!scriptLoaded(containerId)) {
         /* eslint-disable */
@@ -137,12 +137,23 @@ (function (w, d, s, l, i) {
       var hasDataLayer = !!(window.dataLayer && Array.prototype.push !== window.dataLayer.push);
-      return scriptLoaded() && hasDataLayer;
+      return scriptLoaded(pluginConfig.containerId) && hasDataLayer;
     }
   };
 }
+var regexCache = {};
+/*
+TODO add logic to make it impossible to load 2 plugins with the same container ID
+[containerID]: pluginName
+*/
 
-function scriptLoaded() {
-  var scripts = document.getElementsByTagName('script');
+function scriptLoaded(containerId) {
+  var regex = regexCache[containerId];
+
+  if (!regex) {
+    regex = new RegExp('googletagmanager\\.com\\/gtm\\.js.*[?&]id=' + containerId);
+    regexCache[containerId] = regex;
+  }
+
+  var scripts = document.querySelectorAll('script[src]');
   return !!Object.keys(scripts).filter(function (key) {
-    var src = scripts[key].src;
-    return src.match(/googletagmanager\.com\/gtm\.js/);
+    return scripts[key].src.match(regex);
   }).length;
@@ -149,0 +160,0 @@ }

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

@@ -6,3 +6,3 @@ 'use strict';
   return {
-    NAMESPACE: 'google-tag-manager'
+    name: 'google-tag-manager'
   };
@@ -9,0 +9,0 @@ }

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

 function googleTagManager() {
   /* returns noOp because no server side implementation exists */
   return {
-    NAMESPACE: 'google-tag-manager'
+    name: 'google-tag-manager'
   };
@@ -6,0 +6,0 @@ }

package.json

 {
   "name": "@analytics/google-tag-manager",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Google tag manager plugin for 'analytics' module",
@@ -55,3 +55,3 @@ "projectMeta": {
   },
-  "gitHead": "159c0f42b5af886af963a0a65e1f5c3c33f023f2"
+  "gitHead": "46bb5c10dc2ecec53b88815dc45c23fc834e14aa"
 }

README.md

@@ -77,4 +77,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
 
@@ -212,1 +212,48 @@ ### Browser API
 See the [full list of analytics provider plugins](https://getanalytics.io/plugins/) in the main repo.
+
+## Using multiple instances of GTM
+
+As noted in the [GTM docs](https://developers.google.com/tag-manager/devguide#multiple-containers), it's possible to load multiple instances of google tag manager on the page. This method is [not exactly recommended](https://www.simoahava.com/gtm-tips/multiple-gtm-containers-on-the-page/) by analytics experts if you can avoid it by using a single container. But if you must! You can!
+
+```js
+import Analytics from 'analytics'
+import googleTagManager from '@analytics/google-tag-manager'
+
+const GTMOne = googleTagManager({ containerId: 'GTM-123xyz' })
+// For instance 2, override the plugin 'name' and provide the 2nd GTM container ID
+const GTMTwo = Object.assign({}, googleTagManager({ containerId: 'GTM-456abc'}), {
+  name: 'google-tag-manager-two'
+})
+
+// Load up analytics
+const analytics = Analytics({
+  app: 'awesome-app',
+  plugins: [
+    GTMOne,
+    GTMTwo
+  ]
+})
+
+// Both instances will be loaded into the page
+```
+
+This functionality has been [added](https://github.com/DavidWells/analytics/pull/30) by the wonderful [@zobzn](https://github.com/zobzn)!
+
+## Tracking if JS is disabled
+
+The [analytics library](https://github.com/DavidWells/analytics/) will load the Google Tag manager javascript onto the page. This will work for every web site visitor that has javascript enabled.
+
+For the small number of people who might have javascript disabled you will want to add the following `<noscript>` tags to the HTML of your site as outlined in [GTM install docs](https://developers.google.com/tag-manager/quickstart)
+
+Add the following HTML to your site & replace `GTM-XXXX` with your container ID.
+
+```html
+<!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!-- End Google Tag Manager (noscript) -->
+```
+
+If you are using multiple containers, you will want to add one `<noscript>` tag for each.
+
+These days, apps typically don't even work without JS enabled & users must turn in on to use a site. So it's up to you & your use case if you want to add the additional `<noscript>` tags.

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

27829

increased by13.99%

Lines of code

437

increased by6.59%

Number of lines in readme file

258

increased by22.27%

No dependency changes