Question

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

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

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

我们有一种机制，用户可以通过该机制选择某些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中的条件模块加载

1 个答案: