Missing Required Field '"timingCategory"' And '"timingVar"' For Hit Of Type '"timing"' - Google Analytics [redux-beacon]
I'm using redux-beacon
to send Google Analytics Hits. It is working fine with Event Tracking
but failed with User Timings
. As I can read on doc for User Timing, it requires timingCategory
, timingVar
, and timingValue
but redux-beacon
is sending it without timing
prefix.
The following code produces a valid event in the redux-beacon logs for the trackEvent
and failed for the trackTiming
.
import {trackTiming, trackEvent} from '@redux-beacon/google-analytics';
const userTiming = trackTiming(action => {
return {
category: 'Test category',
var: 'load',
value: 3549,
label: action.type
};
});
const event = trackEvent(action => {
return {
category: 'Test category',
action: action.type,
label: 'Test label',
value: 45
};
});
export const eventsMap = {
USER_TIMING_ACTION: userTiming,
EVENT_ACTION: event
};
It gives me following error:
Running command: ga("send", {hitType: "timing", customTrackerId: undefined, category: "Test category", var: "load", value: 3549, label: "USER_TIMING_ACTION"})
Set called on unknown field: "customTrackerId".
Set called on unknown field: "category".
Set called on unknown field: "var".
Set called on unknown field: "value".
Set called on unknown field: "label".
Missing required field '"timingCategory"' for hit of type '"timing"'
Missing required field '"timingVar"' for hit of type '"timing"'
This is what redux-beacon
print in console for userTracking
:
hitType: "timing", customTrackerId: undefined, category: "Test category", var: "load", value: 3549, var: "load"}
I'm doing something wrong or is it a bug with redux-beacon
for tracking timing?
Versions I'm using:
"@redux-beacon/google-analytics": "1.0.2",
"@redux-beacon/logger": "1.0.0",
"redux-beacon": "2.0.3"
Answer
This was a bug with the event helper. It's fixed now. Please upgrade to the latest version of the GA target:
npm install --save @redux-beacon/[email protected]
As an added tip. If there's ever an issue with an event helper you can easily do without them If you need a quick fix.
For example, in your situation you could write:
const userTiming = action => ({
hitType: 'timing',
timingCategory: 'Test category',
timingVar: 'load',
timingLabel: action.type,
});
export const eventsMap = {
USER_TIMING_ACTION: userTiming,
};
Here are the docs on writing event definitions: https://rangle.gitbook.io/redux-beacon/index-1/event-definition
Thanks for taking the time to write up, ask a question, and highlight the issue you had. With so many different targets and event helpers bug reports like these are super helpful.
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?