Missing required field '"timingCategory"' and '"timingVar"' for hit of type '"timing"' - Google Analytics [redux-beacon]

Question

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 1

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.