diff --git a/browser/components/newtab/content-src/asrouter/templates/StartupOverlay/StartupOverlay.jsx b/browser/components/newtab/content-src/asrouter/templates/StartupOverlay/StartupOverlay.jsx index 11d2e91db309..87129fa4bbb5 100644 --- a/browser/components/newtab/content-src/asrouter/templates/StartupOverlay/StartupOverlay.jsx +++ b/browser/components/newtab/content-src/asrouter/templates/StartupOverlay/StartupOverlay.jsx @@ -18,6 +18,7 @@ export class _StartupOverlay extends React.PureComponent { this.state = { emailInput: "", overlayRemoved: false, + deviceId: "", flowId: "", flowBeginTime: 0, }; @@ -31,8 +32,8 @@ export class _StartupOverlay extends React.PureComponent { const fxaParams = "entrypoint=activity-stream-firstrun&form_type=email"; const response = await fetch(`${this.props.fxa_endpoint}/metrics-flow?${fxaParams}&${this.utmParams}`, {credentials: "omit"}); if (response.status === 200) { - const {flowId, flowBeginTime} = await response.json(); - this.setState({flowId, flowBeginTime}); + const {deviceId, flowId, flowBeginTime} = await response.json(); + this.setState({deviceId, flowId, flowBeginTime}); } else { this.props.dispatch(ac.OnlyToMain({type: at.TELEMETRY_UNDESIRED_EVENT, data: {event: "FXA_METRICS_FETCH_ERROR", value: response.status}})); } @@ -132,6 +133,7 @@ export class _StartupOverlay extends React.PureComponent { + {this.props.intl.formatMessage({id: "firstrun_invalid_input"})} diff --git a/browser/components/newtab/content-src/asrouter/templates/Trailhead/Trailhead.jsx b/browser/components/newtab/content-src/asrouter/templates/Trailhead/Trailhead.jsx index 211c42a1fe77..1ed643b8a659 100644 --- a/browser/components/newtab/content-src/asrouter/templates/Trailhead/Trailhead.jsx +++ b/browser/components/newtab/content-src/asrouter/templates/Trailhead/Trailhead.jsx @@ -38,10 +38,12 @@ export class _Trailhead extends React.PureComponent { isModalOpen: true, showCardPanel: true, showCards: false, + // The params below are for FxA metrics + deviceId: "", flowId: "", flowBeginTime: 0, }; - this.didFetch = false; + this.fxaMetricsInitialized = false; } get dialog() { @@ -55,15 +57,15 @@ export class _Trailhead extends React.PureComponent { link.rel = "localization"; }); - if (this.props.fxaEndpoint && !this.didFetch) { + if (this.props.fxaEndpoint && !this.fxaMetricsInitialized) { try { - this.didFetch = true; + this.fxaMetricsInitialized = true; const url = new URL(`${this.props.fxaEndpoint}/metrics-flow?entrypoint=activity-stream-firstrun&form_type=email`); this.addUtmParams(url); const response = await fetch(url, {credentials: "omit"}); if (response.status === 200) { - const {flowId, flowBeginTime} = await response.json(); - this.setState({flowId, flowBeginTime}); + const {deviceId, flowId, flowBeginTime} = await response.json(); + this.setState({deviceId, flowId, flowBeginTime}); } else { this.props.dispatch(ac.OnlyToMain({type: at.TELEMETRY_UNDESIRED_EVENT, data: {event: "FXA_METRICS_FETCH_ERROR", value: response.status}})); } @@ -194,6 +196,7 @@ export class _Trailhead extends React.PureComponent { this.addUtmParams(url, true); if (action.addFlowParams) { + url.searchParams.append("device_id", this.state.deviceId); url.searchParams.append("flow_id", this.state.flowId); url.searchParams.append("flow_begin_time", this.state.flowBeginTime); } @@ -232,9 +235,9 @@ export class _Trailhead extends React.PureComponent { {this.getStringValue(content.learn.text)} -
{this.getStringValue(content.form.text)}
+{this.getStringValue(content.form.text)}