feat: use mock version for nuxt dev

fixes #32

.eslintignore

@@ -5,4 +5,4 @@ dist
 coverage
 
 # Plugin
-lib/plugin.js
+lib/plugin*.js

README.md

@@ -40,10 +40,9 @@ Defaults:
 ```js
 export default {
   gtm: {
-    // Set to false to disable module in development mode
-    dev: true,
-
-    id: null,
+    enabled: undefined, /* see below */
+
+    id: undefined,
     layer: 'dataLayer',
     variables: {},
 
@@ -64,6 +63,21 @@ export default {
 }
 ```
 
+### Enabled
+
+GTM module uses a debug-only version of `$gtm` during development (`nuxt dev`).
+
+You can explicitly enable or disable it using `enabled` option:
+
+```js
+export default {
+  gtm: {
+    // Always send real GTM events (also when using `nuxt dev`)
+    enabled: true
+  }
+}
+```
+
 ### Manual GTM Initialization
 
 🚨 IMPORTANT 🚨

lib/defaults.js

@@ -1,7 +1,7 @@
 const defaults = {
-  dev: true,
+  enabled: undefined,
 
-  id: null,
+  id: undefined,
   layer: 'dataLayer',
   variables: {},
 

lib/module.js

@@ -12,8 +12,27 @@ module.exports = async function gtmModule (_options) {
     ...this.options.gtm
   }
 
-  // Don't include when run in dev mode unless dev: true is configured
-  if (this.options.dev && !options.dev) {
+  // By default enable only for non development
+  if (options.enabled === undefined) {
+    options.enabled = !this.options.dev
+  }
+
+  if (options.dev !== undefined) {
+    // eslint-disable-next-line no-console
+    console.warn('[gtm] `dev` option is deprecated! Please use `enabled`')
+    if (options.dev === true && this.options.dev) {
+      options.enabled = true
+    }
+    delete options.dev
+  }
+
+  if (!options.enabled) {
+    // Register mock plugin
+    this.addPlugin({
+      src: path.resolve(__dirname, 'plugin.mock.js'),
+      fileName: 'gtm.js',
+      options
+    })
     return
   }
 

lib/plugin.mock.js

@@ -0,0 +1,38 @@
+// This is a mock version because gtm module is disabled
+// You can explicitly enable module using `gtm.enabled: true` in nuxt.config
+
+const _layer = '<%= options.layer %>'
+const _id = '<%= options.id %>'
+
+function startPageTracking (ctx) {
+  ctx.app.router.afterEach((to) => {
+    setTimeout(() => {
+      ctx.$gtm.push(to.gtm || {
+        routeName: to.name,
+        pageType: 'PageView',
+        pageUrl: '<%= options.routerBase %>' + to.fullPath,
+        pageTitle: (typeof document !== 'undefined' && document.title) || '',
+        event: '<%= options.pageViewEventName %>'
+      })
+    }, 250)
+  })
+}
+
+export default function (ctx, inject) {
+  // eslint-disable-next-line no-console
+  const logSyle = 'background: #2E495E;border-radius: 0.5em;color: white;font-weight: bold;padding: 2px 0.5em;'
+  const log = (...args) => console.log('%cGTM', logSyle, ...args)
+
+  const gtm = {
+    init: (id) => {
+      log('init', id)
+    },
+    push: (event) => {
+      log('push', process.client ? event : JSON.stringify(event))
+    }
+  }
+
+  ctx.$gtm = gtm
+  inject('gtm', gtm)
+  <% if (options.pageTracking) { %>if (process.client) { startPageTracking(ctx); }<% } %>
+}