Nuxt.js中的条件模块加载

Question

我在Nuxt.js配置中为提供了一个模块，如下所示：

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

这很好，但我想知道如何根据网站设置的cookie值有条件地加载这个模块？

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

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

任何帮助或指示都是非常感谢的。

Answer 1

要有条件地执行GTM，您必须放弃@nuxtjs/google-tag-manager并将其实现为插件。NUXT文档是非常棒的，您也在这方面进行了介绍。我使用这一资源来实现，最后得到了以下代码：

// 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相关的内容。