Question

我正在运送前端应用程序我想跟踪（GA和其他跟踪器）的统计信息。该应用程序预先构建了CI上的webpack，我希望将相同的捆绑包发送到staging和prod环境。但是存在一个问题：如果我在构建期间启用跟踪器，它们将在两个env上启用。

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

你还有其他方法吗？检查客户端上的域名可能吗？类似的东西：

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，其中包含/排除结果，具体取决于主机名。这不需要您在代码中进行任何进一步的更改。

只有在使用webpack预建资产时，才能将GA和其他跟踪器用于生产

1 个答案: