Nuxt.js 中的条件模块加载

Question

我的 Nuxt.js 配置中有一个用于 Google 跟踪代码管理器的模块，如下所示：

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

这工作正常，但我想知道如何根据站点设置的 cookie 值有条件地加载此模块？

我们有一种机制，用户可以通过该机制select 接受或拒绝某些 cookie，其中一部分是阻止跟踪脚本。

对于通过配置加载的模块或脚本，是否有任何推荐的方法来执行此操作？理想情况下，如果将来 cookie 中的值也发生变化，则可以加载这些内容。

非常感谢任何帮助或指点。

Answer 1

要有条件地执行 GTM，您必须删除 @nuxtjs/google-tag-manager 并将其作为插件自行实现。 NUXT 文档真的很棒，您也了解了这一点。我使用了 this resource 来实现并最终得到了这个代码：

// 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)
}

基本上您允许用户设置自定义 cookie（在我的例子中是 disable-gtm）并在 gtm.js 插件中检查这个 cookie。如果存在且有效，请跳过与 GTM 相关的所有内容。

Nuxt.js 中的条件模块加载

Conditional module loading in Nuxt.js

javascript

vue.js

nuxt.js