Migration Guide (v1 to v2)
For the most part most of your existing setup shouldn't have to change. There are breaking changes to the way targets, utils, and extensions are imported (and installed), and some breaking changes to the way targets are registered with
createMiddleware and createMetaReducer. But, once that's sorted, you can enjoy all other enhancements incrementally at your own pace.Everything's a Package
Redux Beacon has been split up into thirteen different npm packages! Each package is self contained and versioned in isolation.
Before
1
import { createMiddleware, createMetaReducer } from 'redux-beacon';
2
​
3
import { GoogleAnalytics } from 'redux-beacon/targets/google-analytics';
4
import { GoogleTagManager } from 'redux-beacon/targets/google-tag-manager';
5
import { Segment } from 'redux-beacon/targets/segment';
6
import { GoogleAnalytics, GoogleTagManager } from 'redux-beacon/targets/react-native';
7
import { CordovaGoogleAnalytics } from 'redux-beacon/targets/cordova-google-analytics';
8
​
9
import { logger } from 'redux-beacon/extensions/logger';
10
import { offlineWeb } from 'redux-beacon/extensions/offline-web';
11
import { offlineReactNative } from 'redux-beacon/extensions/offline-react-native';
12
import { ensure } from 'redux-beaocn/utils';
Copied!
Now
1
import { createMiddleware, createMetaReducer } from 'redux-beacon';
2
​
3
import Amplitude from '@redux-beacon/amplitude';
4
import GoogleAnalytics from '@redux-beacon/google-analytics';
5
import GoogleAnalyticsGtag from '@redux-beacon/google-analytics-gtag';
6
import GoogleTagManager from '@redux-beacon/google-tag-manager';
7
import RnGoogleAnalytics from '@redux-beacon/react-native-google-analytics';
8
import RnGoogleTagManager from '@redux-beacon/react-native-google-tag-manager';
9
import Segment from '@redux-beacon/segment';
10
​
11
import logger from '@redux-beacon/logger';
12
import OfflineReactNative from '@redux-beacon/offline-react-native';
13
import OfflineWeb from '@redux-beacon/offline-web';
14
​
15
import combineEvents from '@redux-beacon/combine-events';
16
import ensure from '@redux-beacon/ensure';
Copied!
Before, a breaking change to a single target, extension, or util would result in a major version bump for the entire package. Since most users stick to one target this could lead to confusion as there might be many version bumps without any real impact to a user.
Another hope for this change is continuous frequent releases. Going forward, the goal is to have an npm release with each new commit to
master. Contributors should no longer have to wait for weeks or months for another major release to see their changes.All Targets Must Be Invoked
You now have to invoke each target before passing them to
createMiddleware or createMetaReducer. Some targets already behaved this way but now it's standard across all targets.Before
1
import { MyTarget } from 'redux-beacon/targets/my-target';
2
​
3
const middleware = createMiddleware(eventsMap, MyTarget);
4
const metaReducer = createMetaReducer(eventsMap, MyTarget);
Copied!
Now
1
import MyTarget from '@redux-beacon/my-target';
2
​
3
const middleware = createMiddleware(eventsMap, MyTarget());
4
const metaReducer = createMetaReducer(eventsMap, MyTarget());
Copied!
This allows for targets to introduce settings or options without the need for a major version bump.
New Docs Site
Event Helpers
In v1 it wasn't always clear what you could and couldn't track. Now, each target's docs has an
Event Definitions section that lists out all the events you can track.Each time you want to track something, you:
- 1.Find the event definition for the thing you want to track.
- 2.Match the event definition to an action then fill in the eventdefinition.
Before
1
const event = action => ({
2
hitType: 'event',
3
customTrackerId: 'MY_CUSTOM_ID',
4
eventCategory: 'Videos',
5
eventAction: action.type,
6
}),
Copied!
Now
1
import { trackEvent } from '@redux-beacon/google-analytics';
2
​
3
const event = trackEvent((action) => ({
4
category: 'Videos',
5
action: action.type,
6
}), 'MY_CUSTOM_ID');
Copied!
Async Event Definitions
You can now return a Promise from an event definition. Here's an example of one way you could use this feature with the new
debounceEvent util:1
const videoSearched = debounceEvent(300,
2
trackEvent(action => ({
3
category: 'Videos',
4
action: 'search',
5
label: action.payload.searchTerm,
6
}))
7
);
Copied!
Events Mapper
Now you have the option to pass
createMiddleware and createMetaReducer a function instead of an object to map action types to event definitions. Here's an example:1
const pageView = trackPageView(action => ({
2
page: action.payload.routerState.url,
3
}));
4
​
5
const videoLoadTime = trackTiming(action => ({
6
category: 'Videos',
7
action: 'load',
8
value: action.payload.loadTime,
9
}));
10
​
11
const videoPlayed = trackEvent(() => ({
12
category: 'Videos',
13
action: 'play'
14
}));
15
​
16
const eventsMapper = (action) => {
17
switch(action.type) {
18
case 'ROUTE_CHANGED':
19
return pageView;
20
case 'VIDEO_PLAYED':
21
return [videoLoadTime, videoPlayed]
22
default:
23
return [];
24
}
25
}
Copied!
And More...
Last modified 3yr ago