Включить GA и другие трекеры только для производства, когда активы предварительно созданы с помощью webpack

Question

Я отправляю приложение frontend. Я хочу отслеживать статистику для (GA и других трекеров). Приложение предварительно создано с помощью webpack на CI, и я хотел бы, чтобы один и тот же комплект был отправлен как в промежуточную, так и в промежуточную среду. Но есть проблема с этим: если я включу трекеры во время сборки, они будут включены в обоих envs.

Один из способов, который я вижу, - это добавить флаг window.enableTrackers = true в index.html при отправке кода приложения с сервера, а затем решить, следует ли устанавливать трекеры или нет, но это кажется довольно уродливым решением.

Есть ли другой способ использования U? Возможно, проверьте доменное имя на клиенте? Что-то вроде:

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% и я могу изменить его во время тестовых компиляций делать утверждения.

Другой вариант - добавить filters в Google Analytics, который будет включать/исключать результаты в зависимости от имени хоста. Это не потребует от вас каких-либо дальнейших изменений в вашем коде.