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

Question

我正在交付我想要跟踪（GA 和其他跟踪器）统计信息的前端应用程序。该应用程序是在 CI 上使用 webpack 预构建的，我希望将相同的捆绑包运送到登台和生产环境。 但是有一个问题：如果我在构建期间启用跟踪器，它们将在两个环境中启用。

我看到的一种方法是在从服务器发送应用程序代码时在index.html 中添加设置window.enableTrackers = true 标志，然后决定是否安装跟踪器，但这似乎是一个非常丑陋的解决方案。

你还有其他方法吗？在客户端检查域名可能吗？比如：

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

Answer 1

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

如果您在编译过程中没有解决包含跟踪的问题，那么您将不得不求助于其他方式。一种选择是在运行时评估是否应该在文档中加载 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_PRODUCTION_HOST 定义为production.com 甚至^(www.)?production.com%，并且我可以在测试编译期间对其进行更改以进行断言。

另一种选择是在 Google Analytics（分析）中添加 filters，这将根据主机名包含/排除结果。这不需要您对代码进行任何进一步的更改。