仅在使用webpack预构建资产时为生产启用GA和其他跟踪器

我正在发布我想要跟踪统计数据的前端应用程序（GA和其他跟踪器）。该应用程序是用CI上的webpack预构建的，我希望将相同的捆绑包同时发送到登台和产品环境。 但这有一个问题：如果我在构建期间启用跟踪程序，它们将在两个环境上都启用

我看到的一种方法是在从服务器发送应用程序代码时，在

index.html

中添加set

window.enableTrackers=true

标志，然后决定是否安装跟踪器，但这似乎是一个非常丑陋的解决方案

你还有别的方法吗？可能正在客户端上检查域名？比如：

if(document.location.hostname === 'prod.example.com') {
  // enable trackers
}

---

在编译时，最好通过为生产包和阶段包配置不同的Webpack来解决这一问题，您可以使用CLI或显式启用跟踪

如果在编译过程中没有解决包含跟踪的问题，那么您将不得不求助于其他方法。一个选项是在运行时评估GA脚本是否应加载到文档中。下面是一个Rect元素的示例，该元素仅在主机名与可配置正则表达式匹配时才会加载脚本：

import React, {Component, PropTypes} from 'react'

const production = new RegExp(RE_PRODUCTION_HOST) 

export const ga = window.ga = window.ga || function () {
  (ga.q = ga.q || []).push(arguments)
}

export class Analytics extends Component {
  static propTypes = {
    id: PropTypes.string.isRequired
  };

  componentDidMount () {
    // Runtime evaluation for loading the GA script
    if (!self.location.hostname.match(production)) {
      return
    }

    const script = document.createElement('script')
    script.src = 'https://www.google-analytics.com/analytics.js'
    script.async = true

    document.body.appendChild(script)
  }

  render () {
    ga.l = +new Date()

    ga('create', this.props.id, 'auto')
    ga('send', 'pageview')

    return null
  }
}

在这里，我仍然可以安全地定义

RE\u PRODUCTION\u HOST

以配置为

PRODUCTION.com

甚至

^（www.）？PRODUCTION.com%

，并且我可以在测试编译期间更改它以进行断言

---

另一个选择是添加Google Analytics，根据主机名包括/排除结果。这将不需要您对代码进行任何进一步的更改。

关键是我不想为不同的环境进行不同的构建/编译，因此webpack define在这里没有多大帮助。我用它来定义追踪器ID，但仅此而已。我最终得到的是进一步使用webpack的define来定义跟踪的_域，比如

production.com

。然后，当页面打开时，我检查

document.location.hostname

是否与任何被跟踪的\u域匹配，如果匹配，我执行trackers安装代码。这看起来和你上面贴的很像