feat(plugin): add debug option and disable by default

README.md

@@ -41,6 +41,7 @@ Defaults:
 export default {
   gtm: {
     enabled: undefined, /* see below */
+    debug: false,
 
     id: undefined,
     layer: 'dataLayer',
@@ -78,6 +79,10 @@ export default {
 }
 ```
 
+### `debug`
+
+Whether `$gtm` API calls like `init` and `push` are logged to the console.
+
 ### Manual GTM Initialization
 
 There are several use cases that you may need more control over initialization:

lib/defaults.js

@@ -1,5 +1,6 @@
 const defaults = {
   enabled: undefined,
+  debug: false,
 
   id: undefined,
   layer: 'dataLayer',

lib/module.js

@@ -29,6 +29,12 @@ module.exports = async function gtmModule (_options) {
     delete options.dev
   }
 
+  this.addTemplate({
+    src: path.resolve(__dirname, 'plugin.utils.js'),
+    fileName: 'gtm.utils.js',
+    options
+  })
+
   if (!options.enabled) {
     // Register mock plugin
     this.addPlugin({

lib/plugin.js

@@ -1,3 +1,5 @@
+import { log } from './gtm.utils'
+
 const _layer = '<%= options.layer %>'
 const _id = '<%= options.id %>'
 
@@ -9,12 +11,14 @@ function gtmClient(ctx, initialized) {
       }
       window._gtm_inject(id)
       initialized[id] = true
+      log('init', id)
     },
     push(obj) {
       if (!window[_layer]) {
         window[_layer] = []
       }
       window[_layer].push(obj)
+      log('push', obj)
     }
   }
 }
@@ -50,9 +54,11 @@ function gtmServer(ctx, initialized) {
       }
       inits.push(id)
       initialized[id] = true
+      log('init', id)
     },
     push(obj) {
       events.push(obj)
+      log('push', JSON.stringify(obj))
     }
   }
 }

lib/plugin.mock.js

@@ -1,5 +1,6 @@
 // This is a mock version because gtm module is disabled
 // You can explicitly enable module using `gtm.enabled: true` in nuxt.config
+import { log } from './gtm.utils'
 
 const _layer = '<%= options.layer %>'
 const _id = '<%= options.id %>'
@@ -19,10 +20,7 @@ function startPageTracking (ctx) {
 }
 
 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)
-
+  log('Using mocked API. Real GTM events will not be reported.')
   const gtm = {
     init: (id) => {
       log('init', id)

lib/plugin.utils.js

@@ -0,0 +1,6 @@
+const logSyle = 'background: #2E495E;border-radius: 0.5em;color: white;font-weight: bold;padding: 2px 0.5em;'
+
+export function log(...args) {
+  // eslint-disable-next-line no-console
+  <% if (options.debug) { %>console.log('%cGTM', logSyle, ...args)<% } %>
+}