diff --git a/README.md b/README.md index e58ead6..40f35c0 100755 --- a/README.md +++ b/README.md @@ -55,6 +55,9 @@ yarn add @nuxtjs/google-gtag # or npm install @nuxtjs/google-gtag } }, debug: true, // enable to track in dev mode + runtimeDisable: function (app) { // cookie based logic for disabling gtag runtime + return app.$cookies.get('disable_ga') // set $cookie.set('disable_ga', true) somewhere to disable + }, disableAutoPageTrack: false, // disable if you don't want to track each page route with router.afterEach(...). additionalAccounts: [{ id: 'AW-XXXX-XX', // required if you are adding additional accounts @@ -96,6 +99,13 @@ Disable if you don't want to track each page route with router.afterEach(...). You can add more configuration like [AdWords](https://developers.google.com/adwords-remarketing-tag/#configuring_the_global_site_tag_for_multiple_accounts) +### `disableRuntime` + +- Default `undefined` + +You can define that gtag injection will be checked on every page load. Define a function that takes `app` as parameter and return boolean. You can, for example, create a cookie +that disables loading of gtag (see example above). + ## Usage This module inlcudes Google gtag in your NuxtJs project and enables every page tracking by default. diff --git a/lib/module.js b/lib/module.js index 99e3281..97e3408 100644 --- a/lib/module.js +++ b/lib/module.js @@ -19,6 +19,15 @@ module.exports = function (moduleOptions) { return } + if (options.runtimeDisable) { + options.runtimeDisable = options.runtimeDisable.toString() + } + + const headScript = { + src: `https://www.googletagmanager.com/gtag/js?id=${options.id}`, + async: true + } + // need to render even in skipAll to generate noop $gtag function this.addPlugin({ src: resolve(__dirname, 'plugin.js'), @@ -26,6 +35,7 @@ module.exports = function (moduleOptions) { ssr: false, options: { skipAll, + headScript, ...options } }) @@ -35,10 +45,9 @@ module.exports = function (moduleOptions) { return } - this.options.head.script.push({ - src: `https://www.googletagmanager.com/gtag/js?id=${options.id}`, - async: true - }) + if (!options.runtimeDisable) { // head injection will be done in runtime + this.options.head.script.push(headScript) + } } module.exports.meta = require('../package.json') diff --git a/lib/plugin.js b/lib/plugin.js index c576017..cd17dec 100644 --- a/lib/plugin.js +++ b/lib/plugin.js @@ -1,10 +1,21 @@ -export default function ({ app: { router }}, inject) { +export default function ({ app }, inject) { + + <% if (options.runtimeDisable) { %> + const runtimeDisable = <%= options.runtimeDisable %> + + if (<%= options.skipAll %> || runtimeDisable(app)) { + <% } else { %> if (<%= options.skipAll %>) { + <% } %> // inject empty gtag function for disabled mode inject('gtag', () => {}) return } + <% if (options.runtimeDisable) { %> + app.head.script.push(<%= JSON.stringify(options.headScript) %>) + <% } %> + window.dataLayer = window.dataLayer || [] function gtag () { @@ -20,7 +31,7 @@ export default function ({ app: { router }}, inject) { gtag('config', '<%= options.id %>', <%= JSON.stringify(options.config, null, 2) %>) if (!<%= options.disableAutoPageTrack %>) { - router.afterEach((to) => { + app.router.afterEach((to) => { gtag('config', '<%= options.id %>', { 'page_path': to.fullPath, 'location_path': window.location.origin + to.fullPath }) }) }