vue-gtm - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/vue-gtm.min.js

@@ -1,1 +0,1 @@
-module.exports=function(e){function t(a){if(n[a])return n[a].exports;var r=n[a]={i:a,l:!1,exports:{}};return e[a].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,a){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:a})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={enabled:!0,debug:!1,trackOnNextTick:!1}},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.hasScript=t.loadScript=t.logDebug=void 0;var r=n(0),o=a(r);t.logDebug=function(e){if(o.default.debug){var t;(t=console).log.apply(t,["VueGtm :"].concat(Array.prototype.slice.call(arguments)))}},t.loadScript=function(e){var t=window,n=document,a=n.createElement("script"),r="dataLayer";t[r]=t[r]||[],t[r].push({event:"gtm.js","gtm.start":(new Date).getTime()}),a.async=!0,a.src="https://www.googletagmanager.com/gtm.js?id="+e,n.body.appendChild(a)},t.hasScript=function(){return Array.from(document.getElementsByName("script")).some(function(e){return e.src.includes("googletagmanager")})}},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},o=n(1),u=n(0),i=a(u),l=n(3),c=a(l),d=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};t=r({},i.default,t),i.default.id=t.id,i.default.debug=t.debug,i.default.enabled=t.enabled,t.vueRouter&&f(e,t),e.prototype.$gtm=e.gtm=new c.default,i.default.enabled&&(0,o.loadScript)(t.id)},f=function(e,t){var n=t.vueRouter,a=t.ignoredViews,r=t.trackOnNextTick;return a&&(a=a.map(function(e){return e.toLowerCase()})),n.afterEach(function(t){if(!a||a.indexOf(t.name.toLowerCase())===-1){var n=t.meta.gtm||t.name;r?e.nextTick(function(){e.gtm.trackView(n,t.fullPath)}):e.gtm.trackView(n,t.fullPath)}}),a};t.default={install:d}},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}function r(e,t){var n={};for(var a in e)t.indexOf(a)>=0||Object.prototype.hasOwnProperty.call(e,a)&&(n[a]=e[a]);return n}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),l=n(1),c=n(0),d=a(c),f="undefined"!=typeof window,s=function(){function e(){o(this,e)}return i(e,[{key:"enabled",value:function(){return d.default.enabled}},{key:"enable",value:function(e){d.default.enabled=e,f&&e&&!(0,l.hasScript)()&&(0,l.loadScript)(d.default.id)}},{key:"debugEnabled",value:function(){return d.default.debug}},{key:"debug",value:function(e){d.default.debug=e}},{key:"trackView",value:function(e,t){if(f&&d.default.enabled){(0,l.logDebug)("Dispatching TrackView",{screenName:e,path:t});var n=window.dataLayer=window.dataLayer||[];n.push({event:"content-view","content-name":t})}}},{key:"trackEvent",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.event,n=void 0===t?null:t,a=e.category,o=void 0===a?null:a,i=e.action,c=void 0===i?null:i,s=e.label,v=void 0===s?null:s,p=e.value,g=void 0===p?null:p,b=e.noninteraction,y=void 0!==b&&b,w=r(e,["event","category","action","label","value","noninteraction"]);if(f&&d.default.enabled){(0,l.logDebug)("Dispatching event",u({event:n,category:o,action:c,label:v,value:g},w));var m=window.dataLayer=window.dataLayer||[];m.push(u({event:n||"interaction",target:o,action:c,"target-properties":v,value:g,"interaction-type":y},w))}}}]),e}();t.default=s},function(e,t,n){e.exports=n(2)}]);
+module.exports=function(e){function t(a){if(n[a])return n[a].exports;var r=n[a]={i:a,l:!1,exports:{}};return e[a].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,a){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:a})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={enabled:!0,debug:!1,trackOnNextTick:!1,queryParams:{},loadScript:!0}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.hasScript=t.loadScript=t.logDebug=void 0;var a=n(0),r=function(e){return e&&e.__esModule?e:{default:e}}(a);t.logDebug=function(e){if(r.default.debug){var t;(t=console).log.apply(t,["VueGtm :"].concat(Array.prototype.slice.call(arguments)))}},t.loadScript=function(e){var t=window,n=document,a=n.createElement("script"),r="dataLayer";t[r]=t[r]||[],t[r].push({event:"gtm.js","gtm.start":(new Date).getTime()}),e&&(a.async=!0,a.src="https://www.googletagmanager.com/gtm.js?id="+e,n.body.appendChild(a))},t.hasScript=function(){return Array.from(document.getElementsByTagName("script")).some(function(e){return e.src.includes("googletagmanager")})}},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},o=n(1),u=n(0),i=a(u),l=n(3),c=a(l),d=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};t=r({},i.default,t),i.default.id=t.id,i.default.debug=t.debug,i.default.enabled=t.enabled,t.vueRouter&&f(e,t),e.prototype.$gtm=e.gtm=new c.default,i.default.enabled&&(Array.isArray(t.id)?t.id.forEach(function(e){(0,o.loadScript)(e,t.queryParams)}):(0,o.loadScript)(t.id,t.queryParams))},f=function(e,t){var n=t.vueRouter,a=t.ignoredViews,r=t.trackOnNextTick;return a&&(a=a.map(function(e){return e.toLowerCase()})),n.afterEach(function(t){if(t.name&&(!a||-1===a.indexOf(t.name.toLowerCase()))){var o=t.meta.gtm||t.name,u=n.options.base||"";r?e.nextTick(function(){e.gtm.trackView(o,""+u+t.fullPath)}):e.gtm.trackView(o,""+u+t.fullPath)}}),a};t.default={install:d}},function(e,t,n){"use strict";function a(e,t){var n={};for(var a in e)t.indexOf(a)>=0||Object.prototype.hasOwnProperty.call(e,a)&&(n[a]=e[a]);return n}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},u=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),i=n(1),l=n(0),c=function(e){return e&&e.__esModule?e:{default:e}}(l),d="undefined"!=typeof window,f=function(){function e(){r(this,e)}return u(e,[{key:"enabled",value:function(){return c.default.enabled}},{key:"enable",value:function(e){c.default.enabled=e,d&&e&&!(0,i.hasScript)()&&c.default.loadScript&&(0,i.loadScript)(c.default.id)}},{key:"debugEnabled",value:function(){return c.default.debug}},{key:"debug",value:function(e){c.default.debug=e}},{key:"dataLayer",value:function(){return!(!d||!c.default.enabled)&&(window.dataLayer=window.dataLayer||[])}},{key:"trackView",value:function(e,t){if(d&&c.default.enabled){(0,i.logDebug)("Dispatching TrackView",{screenName:e,path:t});(window.dataLayer=window.dataLayer||[]).push({event:"content-view","content-name":t,"content-view-name":e})}}},{key:"trackEvent",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.event,n=void 0===t?null:t,r=e.category,u=void 0===r?null:r,l=e.action,f=void 0===l?null:l,s=e.label,p=void 0===s?null:s,v=e.value,g=void 0===v?null:v,y=e.noninteraction,b=void 0!==y&&y,w=a(e,["event","category","action","label","value","noninteraction"]);if(d&&c.default.enabled){(0,i.logDebug)("Dispatching event",o({event:n,category:u,action:f,label:p,value:g},w));(window.dataLayer=window.dataLayer||[]).push(o({event:n||"interaction",target:u,action:f,"target-properties":p,value:g,"interaction-type":b},w))}}}]),e}();t.default=f},function(e,t,n){e.exports=n(2)}]);

package.json

 {
   "name": "vue-gtm",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Google Tag Manager implementation in Vue application",
@@ -43,8 +43,8 @@ "main": "./dist/vue-gtm.min.js",
   "devDependencies": {
-    "babel-core": "^6.21.0",
+    "babel-core": "^6.26.3",
     "babel-loader": "^6.2.10",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-stage-2": "^6.18.0",
-    "webpack": "2.2.0-rc.3"
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "webpack": "^2.7.0"
   }
 }

README.md

@@ -39,5 +39,11 @@ <h1 align="center">
 Vue.use(VueGtm, {
-  id: 'GTM-xxxxxxx', // Your GTM ID
+  id: 'GTM-xxxxxxx' or ['GTM-xxxxxxx', 'GTM-xxxxxxx'], // Your GTM single container ID or array of container ids ['GTM-xxxxxxx', 'GTM-yyyyyyy']
+  queryParams: { // Add url query string when load gtm.js with GTM ID (optional)
+    gtm_auth:'AB7cDEf3GHIjkl-MnOP8qr',
+    gtm_preview:'env-4',
+    gtm_cookies_win:'x'
+  },
   enabled: true, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
   debug: true, // Whether or not display console logs debugs (optional)
+  loadScript: true, // Whether or not to load the GTM Script (Helpful if you are including GTM manually, but need the dataLayer functionality in your components) (optional) 
   vueRouter: router, // Pass the router instance to automatically sync with router (optional)
@@ -48,5 +54,7 @@ ignoredViews: ['homepage'] // If router, you can exclude some routes name (case insensitive) (optional)
 
-This injects the tag manager script in the page, except when `enabled` is set to `false`. 
+This injects the tag manager script in the page, except when `enabled` is set to `false`.
 In that case it will be injected when calling `this.$gtm.enable(true)` for the first time.
 
+Remember to enable the History Change Trigger for router changes to be sent through GTM.
+
 # Documentation
@@ -53,0 +61,0 @@

src/config.js

 export default {
   enabled: true,
   debug: false,
-  trackOnNextTick: false
+  trackOnNextTick: false,
+  queryParams: {},
+  loadScript: true,
 }

src/GtmPlugin.js

@@ -16,3 +16,3 @@ import { logDebug, loadScript, hasScript } from './utils'
 
-    if (inBrowser && !!val && !hasScript()) {
+    if (inBrowser && !!val && !hasScript() && pluginConfig.loadScript) {
       loadScript(pluginConfig.id)
@@ -30,2 +30,9 @@ }
 
+  dataLayer() {
+    if (inBrowser && pluginConfig.enabled) {
+      return (window.dataLayer = window.dataLayer || []);
+    }
+    return false;
+  }
+
   trackView(screenName, path) {
@@ -38,3 +45,4 @@ if (inBrowser && pluginConfig.enabled) {
         event: 'content-view',
-        'content-name': path
+        'content-name': path,
+        'content-view-name': screenName
       })
@@ -41,0 +49,0 @@ }

src/index.js

@@ -29,3 +29,9 @@ import { loadScript } from './utils'
   if (pluginConfig.enabled) {
-    loadScript(initConf.id);
+    if (Array.isArray(initConf.id)) {
+      initConf.id.forEach((id) => {
+        loadScript(id, initConf.queryParams);
+      });
+    } else {
+      loadScript(initConf.id, initConf.queryParams);
+    }
   }
@@ -52,3 +58,3 @@ }
     // Ignore some routes
-    if (ignoredViews && ignoredViews.indexOf(to.name.toLowerCase()) !== -1) {
+    if (!to.name || (ignoredViews && ignoredViews.indexOf(to.name.toLowerCase()) !== -1)) {
       return
@@ -59,8 +65,9 @@ }
     const name = to.meta.gtm || to.name
+    const baseUrl = vueRouter.options.base || '';
     if (trackOnNextTick) {
       Vue.nextTick(() => {
-        Vue.gtm.trackView(name, to.fullPath)
+        Vue.gtm.trackView(name, `${baseUrl}${to.fullPath}`)
       })
     } else {
-      Vue.gtm.trackView(name, to.fullPath)
+      Vue.gtm.trackView(name, `${baseUrl}${to.fullPath}`)
     }
@@ -67,0 +74,0 @@ })

src/utils.js

@@ -30,2 +30,6 @@ import pluginConfig from './config'
 
+  if (!id) {
+    return
+  }
+
   script.async = true;
@@ -43,4 +47,4 @@ script.src   = `https://www.googletagmanager.com/gtm.js?id=${id}`
   return Array
-    .from(document.getElementsByName('script'))
+    .from(document.getElementsByTagName('script'))
     .some(script => script.src.includes('googletagmanager'))
 }

No alert changes

Improved metrics

Lines of code

217

9.6%

Number of lines in readme file

175

4.79%

Worsened metrics

Total package byte prevSize

27372

-76.26%

No dependency changes