fleek-track-analytics 1.17.61 → 1.17.63

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/README.md CHANGED
@@ -6,7 +6,7 @@ with trace(session) management.
6
6
  ### Table of Contents
7
7
 
8
8
  - [fleek-track-analytics](#fleek-track-analytics)
9
- - [Table of Contents](#table-of-contents)
9
+ - [Table of Contents](#table-of-contents)
10
10
  - [How to Integrate](#how-to-integrate)
11
11
  - [How to setup for development](#how-to-setup-for-development)
12
12
  - [How to publish changes to npm](#how-to-publish-changes-to-npm)
@@ -17,7 +17,6 @@ with trace(session) management.
17
17
  # How to Integrate
18
18
 
19
19
  1. Install the package
20
-
21
20
  ```sh
22
21
  # npm
23
22
  npm install fleek-track-analytics
@@ -27,7 +26,6 @@ yarn add fleek-track-analytics
27
26
  ```
28
27
 
29
28
  2. Import based on platform
30
-
31
29
  ```ts
32
30
  # node
33
31
  import { TrackAnalytics } from "fleek-track-analytics/lib/node";
@@ -41,7 +39,7 @@ import { TrackAnalytics } from "fleek-track-analytics/lib/web";
41
39
 
42
40
  3. Initialise TrackAnalytics.
43
41
 
44
- ```ts
42
+ ```ts
45
43
  import { TrackAnalytics } from 'fleek-track-analytics/lib/__platform__';
46
44
 
47
45
  const analyticsException = (e: unknown) => {
@@ -64,21 +62,21 @@ const analyticsWrapper = new TrackAnalytics({
64
62
 
65
63
  analyticsWrapper.initAnalytics();
66
64
 
67
- export { analyticsWrapper };
65
+ export { analyticsWrapper }
68
66
  ```
69
67
 
70
68
  Parameter description for TrackAnalytics class constructor
71
69
 
72
- | property | value | description |
73
- | ------------ | :------------------------------------------: | ---------------------------------------------------------------------------------- |
74
- | platfrom | `REACT_NATIVE` , `WEB`, `NODE` | this is used for internal working of analytics to |
75
- | App | `CUSTOMER_APP`, `CUSTOMER_WEB`, `VENDOR_APP` | this property is send with all events as `fleek_platform` |
76
- | segment | boolean | enables segment integration |
77
- | segmentKey | string | writeKey for segment |
78
- | devMode | boolean | if enabled, only log the event do not trigger network calls |
79
- | debug | boolean | if enabled, triggers network calls for events when devMode is true. |
80
- | errorHandler | function | an error handler to manage any errors thrown while initialising and sending events |
81
- | rudderstack | object (optional) | RudderStack configuration for self-hosted migration (see RudderStack Setup below) |
70
+ | property | value | description |
71
+ | ------------- |:-------------:| ----- |
72
+ | platfrom | `REACT_NATIVE` , `WEB`, `NODE` | this is used for internal working of analytics to |
73
+ | App | `CUSTOMER_APP`, `CUSTOMER_WEB`, `VENDOR_APP` | this property is send with all events as `fleek_platform` |
74
+ | segment | boolean | enables segment integration |
75
+ | segmentKey | string | writeKey for segment |
76
+ | devMode | boolean | if enabled, only log the event do not trigger network calls |
77
+ | debug | boolean | if enabled, triggers network calls for events when devMode is true. |
78
+ | errorHandler | function | an error handler to manage any errors thrown while initialising and sending events |
79
+ | rudderstack | object (optional) | RudderStack configuration for self-hosted migration (see RudderStack Setup below) |
82
80
 
83
81
  ## RudderStack Setup (Self-Hosted Migration)
84
82
 
@@ -107,8 +105,7 @@ const analyticsWrapper = new TrackAnalytics({
107
105
 
108
106
  Event routing to RudderStack is controlled by an **internal library configuration** file (`src/web/analytics-tool/rudderstack-event-routing.ts`). This allows you to selectively send specific events to RudderStack during the PoC phase without requiring application changes.
109
107
 
110
- **Important**:
111
-
108
+ **Important**:
112
109
  - All events are **always sent to Segment** (unchanged behavior)
113
110
  - Events are **conditionally sent to RudderStack** based on the internal routing configuration
114
111
  - RudderStack failures do not affect Segment sending
@@ -126,8 +123,11 @@ To control which events are sent to RudderStack, modify the `rudderstackEventRou
126
123
  ```ts
127
124
  export const rudderstackEventRouting: IRudderstackEventRouting = {
128
125
  // Option 1: List specific event names
129
- sendToRudderstack: ['event_name_1', 'event_name_2'],
130
-
126
+ sendToRudderstack: [
127
+ 'event_name_1',
128
+ 'event_name_2',
129
+ ],
130
+
131
131
  // Option 2: Use regex patterns
132
132
  eventPatterns: ['^test_', '^poc_'], // Matches events starting with 'test_' or 'poc_'
133
133
  };
@@ -142,7 +142,6 @@ export const rudderstackEventRouting: IRudderstackEventRouting = {
142
142
  ### Documentation
143
143
 
144
144
  For more details on the migration, see:
145
-
146
145
  - SDK Comparison: `spec-files/rudderstack-migration/SEGMENT_VS_RUDDERSTACK_SDK_COMPARISON.md`
147
146
  - Self-Hosted Parameters: `spec-files/rudderstack-migration/RUDDERSTACK_SELF_HOSTED_PARAMETERS.md`
148
147
  - Architecture (HLD/LLD): `spec-files/rudderstack-migration/HLD_LLD.md`
@@ -151,12 +150,12 @@ For more details on the migration, see:
151
150
 
152
151
  ```ts
153
152
  import { analyticsWrapper } from '../utils/track-analytics';
154
- import { EVENT_NAMES } from 'fleek-track-analytics';
153
+ import { EVENT_NAMES } from 'fleek-track-analytics'
155
154
 
156
155
  analyticsWrapper.track(EVENT_NAMES.HOME_SCREEN_VIEWED, {
157
- customer_id: AuthInfo.getAuthData().user?.customerId,
158
- access_country: props?.responseHeaders?.resolvedCountryCode,
159
- });
156
+ customer_id: AuthInfo.getAuthData().user?.customerId,
157
+ access_country: props?.responseHeaders?.resolvedCountryCode,
158
+ })
160
159
  ```
161
160
 
162
161
  Note: Each event name is configured to have specify param type defination via `EVENT_MAP`. In the example above, if one more property is added in the parameters, the typescript will error.
@@ -165,10 +164,12 @@ How to declare events in the `EVENT_MAP` is explained here.
165
164
  You can also use the base events given by segment smillarly
166
165
 
167
166
  ```ts
168
- analytics.identify(id, traits);
169
167
 
170
- analyticsWrapper.page({ name: pageName }); // web
171
- analyticsWrapper.screen(name, options); // react-native
168
+ analytics.identify(id , traits)
169
+
170
+ analyticsWrapper.page({ name: pageName }) // web
171
+ analyticsWrapper.screen(name, options) // react-native
172
+
172
173
  ```
173
174
 
174
175
  # How to setup for development
@@ -176,7 +177,6 @@ analyticsWrapper.screen(name, options); // react-native
176
177
  1. Clone the repository
177
178
 
178
179
  2. Run
179
-
180
180
  ```sh
181
181
  yarn && yarn build
182
182
 
@@ -184,16 +184,15 @@ yarn && yarn build
184
184
 
185
185
  3. Login to npm with fleek credentials. (Acquire the credentials from the team members)
186
186
 
187
+
187
188
  # How to publish changes to npm
188
189
 
189
190
  1. After updating the code, change the package json to a new version based on following rules
190
-
191
191
  - If changes in library code upgrade as minor release patch. Example `1.1.20` to `1.2.20`
192
192
  - If changes in eventmap upgrade as patch. Example `1.2.20` to `1.2.21`
193
193
 
194
194
  2. Build and publish
195
-
196
- ````sh
195
+ ```sh
197
196
  yarn build && npm publish
198
197
  ``
199
198
 
@@ -203,7 +202,7 @@ In order to build reliability in event data consistency across platform, `.track
203
202
 
204
203
  ```ts
205
204
  type track = <T extends EVENT_NAMES>(eventName: T, eventParams: EVENT_MAP[T]) => Promise<void> | void
206
- ````
205
+ ```
207
206
 
208
207
  # How to change event map
209
208
 
@@ -211,18 +210,18 @@ type track = <T extends EVENT_NAMES>(eventName: T, eventParams: EVENT_MAP[T]) =>
211
210
 
212
211
  2. To add a new events, create a enum entry in EVENT_NAMES by updating `src/event-map/event-map.ts`
213
212
 
214
- ```ts
213
+ ```ts
215
214
  // src/event-map/event-map.ts
216
215
 
217
216
  export enum EVENT_NAMES {
218
- HOME_SCREEN_VIEWED = 'homescreen_viewed',
219
- PRODUCT_TILE_CLICKED = 'product_tile_clicked',
220
- PRODUCT_DETAIL_PAGE_VIEWED = 'product_detail_page_viewed',
221
- ADD_TO_CART = 'add_to_cart',
222
- CART_VIEWED = 'cart_viewed',
223
- CHECKOUT_CLICKED = 'checkout_clicked',
224
- // add a new event name
225
- MY_NEW_EVENT = 'my_new_event
217
+ HOME_SCREEN_VIEWED = 'homescreen_viewed',
218
+ PRODUCT_TILE_CLICKED = 'product_tile_clicked',
219
+ PRODUCT_DETAIL_PAGE_VIEWED = 'product_detail_page_viewed',
220
+ ADD_TO_CART = 'add_to_cart',
221
+ CART_VIEWED = 'cart_viewed',
222
+ CHECKOUT_CLICKED = 'checkout_clicked',
223
+ // add a new event name
224
+ MY_NEW_EVENT = 'my_new_event
226
225
  }
227
226
  ```
228
227
 
@@ -243,7 +242,7 @@ export interface IMyNewEvent {
243
242
  4. Add the mapping of event name and params in `src/event-map/event-map.ts`
244
243
 
245
244
  ```ts
246
- export interface EVENT_MAP {
245
+ export interface EVENT_MAP {
247
246
  [EVENT_NAMES.HOME_SCREEN_VIEWED]: IHomeScreenViewed;
248
247
  [EVENT_NAMES.PRODUCT_TILE_CLICKED]: IProductTileClicked;
249
248
  [EVENT_NAMES.PRODUCT_DETAIL_PAGE_VIEWED]: IProductDetailPageViewed;
@@ -251,17 +250,18 @@ export interface EVENT_MAP {
251
250
  [EVENT_NAMES.CART_VIEWED]: ICartViewed;
252
251
  [EVENT_NAMES.CHECKOUT_CLICKED]: ICheckoutClicked;
253
252
  // add mapping for MY_NEW_EVENT
254
- [EVENT_NAMES.MY_NEW_EVENT]: IMyNewEvent;
253
+ [EVENT_NAMES.MY_NEW_EVENT]: IMyNewEvent
255
254
  }
255
+
256
256
  ```
257
257
 
258
258
  5. Follow the step in Releasing a new version of fleek-track-analytic section to release these changes in a new package version
259
259
 
260
260
  6. Upgrade the package in your application by running
261
-
262
261
  ```sh
263
262
  yarn upgrade fleek-track-analytics --latest
264
263
  ```
265
-
266
264
  7. Post upgrade the `eventmap` will be updated and available to use (without rebuilding the app if it is already running)
267
265
  8. After adding an event here, you also need to update the mapping on [Segment website](https://app.segment.com/joinfleek/destinations/actions-mixpanel/sources/fleek-customer-app/instances/660fd99488053261afc7b686/actions/64o9zGEeDcJcAKXuxWdJFA)
266
+
267
+
@@ -0,0 +1,224 @@
1
+ body, html {
2
+ margin:0; padding: 0;
3
+ height: 100%;
4
+ }
5
+ body {
6
+ font-family: Helvetica Neue, Helvetica, Arial;
7
+ font-size: 14px;
8
+ color:#333;
9
+ }
10
+ .small { font-size: 12px; }
11
+ *, *:after, *:before {
12
+ -webkit-box-sizing:border-box;
13
+ -moz-box-sizing:border-box;
14
+ box-sizing:border-box;
15
+ }
16
+ h1 { font-size: 20px; margin: 0;}
17
+ h2 { font-size: 14px; }
18
+ pre {
19
+ font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
20
+ margin: 0;
21
+ padding: 0;
22
+ -moz-tab-size: 2;
23
+ -o-tab-size: 2;
24
+ tab-size: 2;
25
+ }
26
+ a { color:#0074D9; text-decoration:none; }
27
+ a:hover { text-decoration:underline; }
28
+ .strong { font-weight: bold; }
29
+ .space-top1 { padding: 10px 0 0 0; }
30
+ .pad2y { padding: 20px 0; }
31
+ .pad1y { padding: 10px 0; }
32
+ .pad2x { padding: 0 20px; }
33
+ .pad2 { padding: 20px; }
34
+ .pad1 { padding: 10px; }
35
+ .space-left2 { padding-left:55px; }
36
+ .space-right2 { padding-right:20px; }
37
+ .center { text-align:center; }
38
+ .clearfix { display:block; }
39
+ .clearfix:after {
40
+ content:'';
41
+ display:block;
42
+ height:0;
43
+ clear:both;
44
+ visibility:hidden;
45
+ }
46
+ .fl { float: left; }
47
+ @media only screen and (max-width:640px) {
48
+ .col3 { width:100%; max-width:100%; }
49
+ .hide-mobile { display:none!important; }
50
+ }
51
+
52
+ .quiet {
53
+ color: #7f7f7f;
54
+ color: rgba(0,0,0,0.5);
55
+ }
56
+ .quiet a { opacity: 0.7; }
57
+
58
+ .fraction {
59
+ font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
60
+ font-size: 10px;
61
+ color: #555;
62
+ background: #E8E8E8;
63
+ padding: 4px 5px;
64
+ border-radius: 3px;
65
+ vertical-align: middle;
66
+ }
67
+
68
+ div.path a:link, div.path a:visited { color: #333; }
69
+ table.coverage {
70
+ border-collapse: collapse;
71
+ margin: 10px 0 0 0;
72
+ padding: 0;
73
+ }
74
+
75
+ table.coverage td {
76
+ margin: 0;
77
+ padding: 0;
78
+ vertical-align: top;
79
+ }
80
+ table.coverage td.line-count {
81
+ text-align: right;
82
+ padding: 0 5px 0 20px;
83
+ }
84
+ table.coverage td.line-coverage {
85
+ text-align: right;
86
+ padding-right: 10px;
87
+ min-width:20px;
88
+ }
89
+
90
+ table.coverage td span.cline-any {
91
+ display: inline-block;
92
+ padding: 0 5px;
93
+ width: 100%;
94
+ }
95
+ .missing-if-branch {
96
+ display: inline-block;
97
+ margin-right: 5px;
98
+ border-radius: 3px;
99
+ position: relative;
100
+ padding: 0 4px;
101
+ background: #333;
102
+ color: yellow;
103
+ }
104
+
105
+ .skip-if-branch {
106
+ display: none;
107
+ margin-right: 10px;
108
+ position: relative;
109
+ padding: 0 4px;
110
+ background: #ccc;
111
+ color: white;
112
+ }
113
+ .missing-if-branch .typ, .skip-if-branch .typ {
114
+ color: inherit !important;
115
+ }
116
+ .coverage-summary {
117
+ border-collapse: collapse;
118
+ width: 100%;
119
+ }
120
+ .coverage-summary tr { border-bottom: 1px solid #bbb; }
121
+ .keyline-all { border: 1px solid #ddd; }
122
+ .coverage-summary td, .coverage-summary th { padding: 10px; }
123
+ .coverage-summary tbody { border: 1px solid #bbb; }
124
+ .coverage-summary td { border-right: 1px solid #bbb; }
125
+ .coverage-summary td:last-child { border-right: none; }
126
+ .coverage-summary th {
127
+ text-align: left;
128
+ font-weight: normal;
129
+ white-space: nowrap;
130
+ }
131
+ .coverage-summary th.file { border-right: none !important; }
132
+ .coverage-summary th.pct { }
133
+ .coverage-summary th.pic,
134
+ .coverage-summary th.abs,
135
+ .coverage-summary td.pct,
136
+ .coverage-summary td.abs { text-align: right; }
137
+ .coverage-summary td.file { white-space: nowrap; }
138
+ .coverage-summary td.pic { min-width: 120px !important; }
139
+ .coverage-summary tfoot td { }
140
+
141
+ .coverage-summary .sorter {
142
+ height: 10px;
143
+ width: 7px;
144
+ display: inline-block;
145
+ margin-left: 0.5em;
146
+ background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
147
+ }
148
+ .coverage-summary .sorted .sorter {
149
+ background-position: 0 -20px;
150
+ }
151
+ .coverage-summary .sorted-desc .sorter {
152
+ background-position: 0 -10px;
153
+ }
154
+ .status-line { height: 10px; }
155
+ /* yellow */
156
+ .cbranch-no { background: yellow !important; color: #111; }
157
+ /* dark red */
158
+ .red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
159
+ .low .chart { border:1px solid #C21F39 }
160
+ .highlighted,
161
+ .highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{
162
+ background: #C21F39 !important;
163
+ }
164
+ /* medium red */
165
+ .cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
166
+ /* light red */
167
+ .low, .cline-no { background:#FCE1E5 }
168
+ /* light green */
169
+ .high, .cline-yes { background:rgb(230,245,208) }
170
+ /* medium green */
171
+ .cstat-yes { background:rgb(161,215,106) }
172
+ /* dark green */
173
+ .status-line.high, .high .cover-fill { background:rgb(77,146,33) }
174
+ .high .chart { border:1px solid rgb(77,146,33) }
175
+ /* dark yellow (gold) */
176
+ .status-line.medium, .medium .cover-fill { background: #f9cd0b; }
177
+ .medium .chart { border:1px solid #f9cd0b; }
178
+ /* light yellow */
179
+ .medium { background: #fff4c2; }
180
+
181
+ .cstat-skip { background: #ddd; color: #111; }
182
+ .fstat-skip { background: #ddd; color: #111 !important; }
183
+ .cbranch-skip { background: #ddd !important; color: #111; }
184
+
185
+ span.cline-neutral { background: #eaeaea; }
186
+
187
+ .coverage-summary td.empty {
188
+ opacity: .5;
189
+ padding-top: 4px;
190
+ padding-bottom: 4px;
191
+ line-height: 1;
192
+ color: #888;
193
+ }
194
+
195
+ .cover-fill, .cover-empty {
196
+ display:inline-block;
197
+ height: 12px;
198
+ }
199
+ .chart {
200
+ line-height: 0;
201
+ }
202
+ .cover-empty {
203
+ background: white;
204
+ }
205
+ .cover-full {
206
+ border-right: none !important;
207
+ }
208
+ pre.prettyprint {
209
+ border: none !important;
210
+ padding: 0 !important;
211
+ margin: 0 !important;
212
+ }
213
+ .com { color: #999 !important; }
214
+ .ignore-none { color: #999; font-weight: normal; }
215
+
216
+ .wrapper {
217
+ min-height: 100%;
218
+ height: auto !important;
219
+ height: 100%;
220
+ margin: 0 auto -48px;
221
+ }
222
+ .footer, .push {
223
+ height: 48px;
224
+ }
@@ -0,0 +1,87 @@
1
+ /* eslint-disable */
2
+ var jumpToCode = (function init() {
3
+ // Classes of code we would like to highlight in the file view
4
+ var missingCoverageClasses = ['.cbranch-no', '.cstat-no', '.fstat-no'];
5
+
6
+ // Elements to highlight in the file listing view
7
+ var fileListingElements = ['td.pct.low'];
8
+
9
+ // We don't want to select elements that are direct descendants of another match
10
+ var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > `
11
+
12
+ // Selecter that finds elements on the page to which we can jump
13
+ var selector =
14
+ fileListingElements.join(', ') +
15
+ ', ' +
16
+ notSelector +
17
+ missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b`
18
+
19
+ // The NodeList of matching elements
20
+ var missingCoverageElements = document.querySelectorAll(selector);
21
+
22
+ var currentIndex;
23
+
24
+ function toggleClass(index) {
25
+ missingCoverageElements
26
+ .item(currentIndex)
27
+ .classList.remove('highlighted');
28
+ missingCoverageElements.item(index).classList.add('highlighted');
29
+ }
30
+
31
+ function makeCurrent(index) {
32
+ toggleClass(index);
33
+ currentIndex = index;
34
+ missingCoverageElements.item(index).scrollIntoView({
35
+ behavior: 'smooth',
36
+ block: 'center',
37
+ inline: 'center'
38
+ });
39
+ }
40
+
41
+ function goToPrevious() {
42
+ var nextIndex = 0;
43
+ if (typeof currentIndex !== 'number' || currentIndex === 0) {
44
+ nextIndex = missingCoverageElements.length - 1;
45
+ } else if (missingCoverageElements.length > 1) {
46
+ nextIndex = currentIndex - 1;
47
+ }
48
+
49
+ makeCurrent(nextIndex);
50
+ }
51
+
52
+ function goToNext() {
53
+ var nextIndex = 0;
54
+
55
+ if (
56
+ typeof currentIndex === 'number' &&
57
+ currentIndex < missingCoverageElements.length - 1
58
+ ) {
59
+ nextIndex = currentIndex + 1;
60
+ }
61
+
62
+ makeCurrent(nextIndex);
63
+ }
64
+
65
+ return function jump(event) {
66
+ if (
67
+ document.getElementById('fileSearch') === document.activeElement &&
68
+ document.activeElement != null
69
+ ) {
70
+ // if we're currently focused on the search input, we don't want to navigate
71
+ return;
72
+ }
73
+
74
+ switch (event.which) {
75
+ case 78: // n
76
+ case 74: // j
77
+ goToNext();
78
+ break;
79
+ case 66: // b
80
+ case 75: // k
81
+ case 80: // p
82
+ goToPrevious();
83
+ break;
84
+ }
85
+ };
86
+ })();
87
+ window.addEventListener('keydown', jumpToCode);
Binary file