Loading modules conditionally in Nuxt.js

Question

Loading modules conditionally in Nuxt.js

In my Nuxt.js configuration, I have included a module for Google Tag Manager like this:

modules: [
  [
    '@nuxtjs/google-tag-manager',
    {
      id: 'GTM-XXXXXXX'
    }
  ]
]

Everything is functioning properly, but I am curious about how to potentially load this module conditionally based on the value of a cookie that has been set by the website.

We offer users the ability to choose which cookies they want to accept or decline, including the option to block tracking scripts.

Is there a recommended approach for handling this situation with modules or scripts loaded through the configuration? It would be ideal if we could dynamically adjust this based on any changes in the cookie values in the future.

Any assistance or guidance on this matter would be greatly appreciated.

javascript vue.js nuxt.js

Answer 1

Answer №1

In order to conditionally execute GTM, you'll need to remove the @nuxtjs/google-tag-manager plugin and create your own implementation as a plugin. The NUXT documentation provides comprehensive guidelines on how to do this. I followed this resource to implement it, resulting in the following code:

// app/plugins/gtm.js

import Cookies from 'js-cookie'

const gtmKey = 'GTM-XXXXX' // <- insert your GTM key here

export default () => {
  /*
  ** Only run on client-side and only in production mode
  */
  if (process.env.NODE_ENV !== 'production') return
  /*
  ** Only run if it's not prevented by user
  */
  if (Cookies.get('disable-gtm')) return
  /*
  ** Include Google Tag Manager
  */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer', gtmKey)
}

The approach involves enabling the user to set a custom cookie (disable-gtm in my case) and then verifying its presence in the gtm.js plugin. If the cookie exists and is valid, all GTM-related actions are skipped.

Answer 2

In order to conditionally execute GTM, you'll need to remove the @nuxtjs/google-tag-manager plugin and create your own implementation as a plugin. The NUXT documentation provides comprehensive guidelines on how to do this. I followed this resource to implement it, resulting in the following code:

// app/plugins/gtm.js

import Cookies from 'js-cookie'

const gtmKey = 'GTM-XXXXX' // <- insert your GTM key here

export default () => {
  /*
  ** Only run on client-side and only in production mode
  */
  if (process.env.NODE_ENV !== 'production') return
  /*
  ** Only run if it's not prevented by user
  */
  if (Cookies.get('disable-gtm')) return
  /*
  ** Include Google Tag Manager
  */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer', gtmKey)
}

The approach involves enabling the user to set a custom cookie (disable-gtm in my case) and then verifying its presence in the gtm.js plugin. If the cookie exists and is valid, all GTM-related actions are skipped.

Loading modules conditionally in Nuxt.js

Answer №1

Similar questions

CORS Policy Blocking React and Express Access to Fetch Data from Origin

The term 'Buffer' is not recognized in the context of react-native

Once you address a block using jQuery

Tips for identifying modifications in an input text field and activating the save button

What is the maximum storage capacity for variables on a NodeJS/ExpressJS server when handling multiple users?

Perform a toggle action on the first row when clicking within the current row using Jquery

Vuejs error: Attempting to access properties of undefined

Is it possible to implement H-Screen in Tailwind without causing the page size to expand? My website has a fixed navbar at the top, and I

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

The mesmerizing world of parallax animations and the smooth scrolling experience

Tips for seamlessly incorporating React Epub Reader into your next js project

Error: The function sort cannot be applied to the result of calling the calendar method on the moment object

Having trouble passing an array from PHP to JavaScript

What is the best way to transfer a table row from one table to another in AngularJS?

Passing a JavaScript variable to a URL parameter can be achieved by

Ways to interact with similar dynamic controls in Javascript

Make sure link opens in the same window/tab

Upgrading from Sequelize V5 to V6: TypeScript bug - Property 'x' is not recognized in type 'y'

"Learn how to deactivate the submit button while the form is being processed and reactivate it once the process is

Encountered a permission denial error (101) while attempting to upload a file to an SFTP server using SSH2 in