gatsby-plugin-google-tagmanager配置后报unexpected token '['错误

这个报错不是GTM官方脚本本身的问题，触发原因按出现概率从高到低排列：

• 你为解决rogue referral问题在GTM后台新增的自定义配置存在语法错误：这类解决方案通常需要在GTM中新建自定义JavaScript变量读取originalLocation字段重写referrer，或是新增自定义HTML标签做拦截逻辑。如果复制教程代码时带入了破损内容（比如多余的方括号[、未闭合的引号/括号、网页复制残留的转义字符），GTM会将这段错误代码打包进gtm.js，通过动态eval执行时就会抛出语法错误。
  之所以初始加载正常、仅部分链接场景报错，是因为初始阶段originalLocation刚推入dataLayer时，对应标签/变量的触发条件还未命中；只有特定路由跳转、触发规则满足时才会执行错误代码。同时因为GTM的自定义代码是在gtm.js上下文内动态执行的，报错栈只会显示gtm.js的内部行号，不会直接定位到你写的自定义代码段，很容易造成误导。
• 低版本gatsby-plugin-google-tagmanager（v3及更早版本）存在序列化缺陷：当defaultDataLayer传入函数类型值时，插件在SSR阶段生成内联脚本、客户端路由跳转重拼dataLayer推送代码的过程中，会错误转义函数体内的特殊字符（比如双引号、斜杠），导致生成的JS脚本结构破损，出现多余的方括号标记触发语法错误。你贴出的配置代码中出现的"就是典型的HTML转义残留，如果实际配置文件中直接写了这个转义字符而非JS标准的单/双引号，也会埋下解析隐患。

按顺序排查即可解决：

1. 首先修正本地gatsby-config.js的插件配置，移除所有HTML转义字符，优先用更稳妥的原生API代替手动拼接地址，避免拼接错误：

{
    resolve: 'gatsby-plugin-google-tagmanager',
    options: {
        id: process.env.GTM_ID,
        includeInDevelopment: true,
        defaultDataLayer: function() {
            return {
                originalLocation: window.location.href
            }
        }
    }
}

修改完成后执行`gatsby clean`清空构建缓存，再重启开发服务测试，排除旧缓存的干扰。

2. 如果修正配置后报错依然存在，前往GTM后台排查所有为解决rogue referral新增的配置：
   • 逐个检查新建的自定义JavaScript变量，将代码复制到本地JS语法校验工具中检查，重点排查是否存在多余的[符号、未闭合的语法结构、复制带入的隐形特殊字符
   • 检查新增的自定义HTML标签，做同样的语法校验
   • 开启GTM预览调试模式，复现报错场景，控制台会输出具体是哪个标签/变量执行时触发错误，定位到对应代码段修正语法即可
3. 如果当前使用的是v3及更早版本的gatsby-plugin-google-tagmanager，直接升级到最新稳定版，上述提到的序列化bug在v4之后的版本已经官方修复。

内容的提问来源于stack exchange，提问作者Ayan Mehta