@capillarytech/cap-ui-utils 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/GA/index.js +44 -7
- package/GA/utils/routeTrackerWrapper.js +6 -26
- package/GA/utils/timeTracker.js +14 -7
- package/GA/utils/tracker.js +13 -4
- package/index.js +2 -1
- package/package.json +1 -1
package/GA/index.js
CHANGED
|
@@ -1,23 +1,53 @@
|
|
|
1
1
|
import ReactGA from 'react-ga';
|
|
2
|
-
import ttiPolyfill from 'tti-polyfill';
|
|
3
|
-
import
|
|
2
|
+
// import ttiPolyfill from 'tti-polyfill';
|
|
3
|
+
import timeTracker from './utils/timeTracker';
|
|
4
|
+
import tracker from './utils/tracker';
|
|
5
|
+
import routeTrackerWrapper from './utils/routeTrackerWrapper';
|
|
6
|
+
import isEmpty from '../utils/isEmpty';
|
|
7
|
+
|
|
8
|
+
import warn from '../utils/console/warn';
|
|
9
|
+
import log from '../utils/console/log';
|
|
4
10
|
import { trackException } from './utils/tracker';
|
|
5
11
|
|
|
6
|
-
|
|
12
|
+
function _initialize(GAConfigs) {
|
|
13
|
+
if (!GAConfigs.accessKey) {
|
|
14
|
+
warn("Cannot initialize GA without accessKey");
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
if(GAConfigs.accessKey) {
|
|
18
|
+
ReactGA.initialize(GAConfigs.accessKey,{debug: true,}); //UA-152081629-1
|
|
19
|
+
}
|
|
20
|
+
log("Cap GA initialized");
|
|
21
|
+
}
|
|
22
|
+
function initialize(GAConfigs) {
|
|
23
|
+
if (isEmpty(GAConfigs)) {
|
|
24
|
+
warn("Cannot initialize empty object");
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
for ( const config in GAConfigs) {
|
|
28
|
+
if (isEmpty(GAConfigs[config])) {
|
|
29
|
+
warn("Config is empty");
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
_initialize(GAConfigs);
|
|
34
|
+
return true;
|
|
35
|
+
}
|
|
7
36
|
|
|
8
37
|
//Track Error
|
|
9
38
|
window.addEventListener('error', function(e) {
|
|
10
|
-
trackException(`UI Error ${e.message}`);
|
|
39
|
+
tracker.trackException(`UI Error ${e.message}`);
|
|
11
40
|
});
|
|
12
41
|
|
|
13
42
|
//Track windo Active and inActive time.
|
|
14
43
|
window.addEventListener('visibilitychange', function() {
|
|
44
|
+
const { startTracking, stopTracking } = timeTracker;
|
|
15
45
|
document.hidden ? stopTracking() : startTracking();
|
|
16
46
|
});
|
|
17
47
|
|
|
18
|
-
ttiPolyfill.getFirstConsistentlyInteractive().then(tti => {
|
|
19
|
-
|
|
20
|
-
});
|
|
48
|
+
// ttiPolyfill.getFirstConsistentlyInteractive().then(tti => {
|
|
49
|
+
// console.log('performance tti', tti);
|
|
50
|
+
// });
|
|
21
51
|
|
|
22
52
|
const callback = list => {
|
|
23
53
|
list.getEntries().forEach(entry => {
|
|
@@ -42,3 +72,10 @@ observer.observe({ entryTypes: ['navigation'] });
|
|
|
42
72
|
var perfData = window.performance.timing;
|
|
43
73
|
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
|
|
44
74
|
console.log('Performance metrics', perfData, pageLoadTime);
|
|
75
|
+
|
|
76
|
+
export default{
|
|
77
|
+
initialize,
|
|
78
|
+
timeTracker,
|
|
79
|
+
tracker,
|
|
80
|
+
routeTrackerWrapper
|
|
81
|
+
}
|
|
@@ -1,39 +1,19 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
2
|
import ReactGA from 'react-ga';
|
|
3
|
-
// import path from '../config/path';
|
|
4
3
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
// const getPageUrl = (component, pageUrl) => {
|
|
8
|
-
// switch (component) {
|
|
9
|
-
// case 'createCampaign':
|
|
10
|
-
// return `${rootPath}/${pageUrl.split('/')[3]}`;
|
|
11
|
-
// case 'messageSummary':
|
|
12
|
-
// return `${rootPath}/campaign/message/view`;
|
|
13
|
-
// case 'campaignMessage':
|
|
14
|
-
// return `${rootPath}/campaign/message/${pageUrl.split('/')[6]}`;
|
|
15
|
-
// case 'campaignReports':
|
|
16
|
-
// return `${rootPath}/campaign/reports`;
|
|
17
|
-
// case 'CampaignDetails':
|
|
18
|
-
// return `${rootPath}/campaign`;
|
|
19
|
-
// default:
|
|
20
|
-
// return pageUrl;
|
|
21
|
-
// }
|
|
22
|
-
// };
|
|
23
|
-
// const withTracker = (WrappedComponent, options = {}, getPageUrl) => {
|
|
24
|
-
const trackPage = pageUrl => {
|
|
4
|
+
const routeTrackerWrapper = ({WrappedComponent, options = {}, url}) => {
|
|
5
|
+
const trackPage = (pageUrl,history) => {
|
|
25
6
|
const { component } = options;
|
|
26
|
-
const pageView = component ?
|
|
7
|
+
const pageView = component ? url : pageUrl;
|
|
27
8
|
ReactGA.pageview(pageView);
|
|
28
9
|
};
|
|
29
|
-
|
|
30
10
|
const HOC = props => {
|
|
31
|
-
useEffect(() => trackPage(props.location.pathname), [
|
|
32
|
-
props.location.pathname,
|
|
11
|
+
useEffect(() => trackPage(props.history.location.pathname,props.history), [
|
|
12
|
+
props.history.location.pathname,
|
|
33
13
|
]);
|
|
34
14
|
return <WrappedComponent {...props} />;
|
|
35
15
|
};
|
|
36
16
|
return HOC;
|
|
37
17
|
};
|
|
38
18
|
|
|
39
|
-
export default
|
|
19
|
+
export default routeTrackerWrapper;
|
package/GA/utils/timeTracker.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { trackEvent } from './reactGa';
|
|
2
1
|
|
|
2
|
+
// import ReactGA from 'react-ga';
|
|
3
|
+
import tracker from './tracker'
|
|
3
4
|
let trackableEvents = {};
|
|
4
5
|
let trackingStoppedAt = 0;
|
|
5
6
|
let windowWasInActive = false;
|
|
6
|
-
|
|
7
|
+
const {trackEvent}= tracker;
|
|
7
8
|
let addInactiveTimeToEvents = inActiveInterval => {
|
|
8
9
|
Object.keys(trackableEvents).map(function(key) {
|
|
9
10
|
console.log('tracker', 'adjusted timing for', key);
|
|
@@ -11,12 +12,11 @@ let addInactiveTimeToEvents = inActiveInterval => {
|
|
|
11
12
|
});
|
|
12
13
|
};
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
function startTimer(event) {
|
|
15
16
|
console.log('tracker', 'Started timer for ', event);
|
|
16
17
|
trackableEvents[event] = Date.now();
|
|
17
18
|
}
|
|
18
|
-
|
|
19
|
-
export function stopTimer(event, options) {
|
|
19
|
+
function stopTimer(event, options) {
|
|
20
20
|
const timeTaken = Date.now() - (trackableEvents[event] || 0);
|
|
21
21
|
delete trackableEvents[event];
|
|
22
22
|
console.log('tracker', 'stopped timer for ', event, timeTaken, options);
|
|
@@ -32,13 +32,13 @@ export function stopTimer(event, options) {
|
|
|
32
32
|
return timeTaken;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
function stopTracking() {
|
|
36
36
|
trackingStoppedAt = Date.now();
|
|
37
37
|
windowWasInActive = true;
|
|
38
38
|
console.log('tracker', 'window is inactive');
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
function startTracking() {
|
|
42
42
|
if (!windowWasInActive) {
|
|
43
43
|
return false;
|
|
44
44
|
}
|
|
@@ -48,3 +48,10 @@ export function startTracking() {
|
|
|
48
48
|
windowWasInActive = false;
|
|
49
49
|
addInactiveTimeToEvents(inActiveInterval);
|
|
50
50
|
}
|
|
51
|
+
|
|
52
|
+
export default {
|
|
53
|
+
startTimer,
|
|
54
|
+
stopTimer,
|
|
55
|
+
stopTracking,
|
|
56
|
+
startTracking,
|
|
57
|
+
}
|
package/GA/utils/tracker.js
CHANGED
|
@@ -1,14 +1,23 @@
|
|
|
1
1
|
import ReactGA from 'react-ga';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
function trackEvent(options) {
|
|
4
|
+
ReactGA.event(options);
|
|
5
|
+
}
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
function trackTiming() {}
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
function trackPageView() {}
|
|
8
10
|
|
|
9
|
-
|
|
11
|
+
function trackException(description, fatal = true) {
|
|
10
12
|
ReactGA.exception({
|
|
11
13
|
description,
|
|
12
14
|
fatal,
|
|
13
15
|
});
|
|
14
16
|
}
|
|
17
|
+
|
|
18
|
+
export default {
|
|
19
|
+
trackException,
|
|
20
|
+
trackPageView,
|
|
21
|
+
trackTiming,
|
|
22
|
+
trackEvent
|
|
23
|
+
}
|
package/index.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { default as Auth } from './auth';
|
|
1
|
+
export { default as Auth } from './auth';
|
|
2
|
+
export { default as GA } from './GA';
|