core-outline 1.1.21 → 1.1.22
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 +52 -50
- package/dist/index.es.js +83 -29
- package/dist/index.js +83 -29
- package/package.json +1 -1
- package/src/components/CoreOutline/CoreOutline.js +69 -24
package/README.md
CHANGED
|
@@ -1,50 +1,52 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
A React component for integrating Core&Outline session recording and event tracking into your web application.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
Install the package using npm:
|
|
8
|
-
|
|
9
|
-
```sh
|
|
10
|
-
npm install core-outline
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
or using yarn:
|
|
14
|
-
|
|
15
|
-
```sh
|
|
16
|
-
yarn add core-outline
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
```sh
|
|
20
|
-
import React from 'react';
|
|
21
|
-
import CoreOutline from 'core-outline';
|
|
22
|
-
|
|
23
|
-
function App() {
|
|
24
|
-
return (
|
|
25
|
-
<CoreOutline
|
|
26
|
-
data_source_id={{ YOUR_DATA_SOURCE_ID }}
|
|
27
|
-
data_source_secret={{ YOUR_DATA_SOURCE_SECRET }}>
|
|
28
|
-
{/* Your app components */}
|
|
29
|
-
</CoreOutline>
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export default App;
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
To flag items clicked or purchased:
|
|
37
|
-
|
|
38
|
-
```sh
|
|
39
|
-
import { flag_item_clicked, flag_item_purchased } from 'core-outline;
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
```
|
|
1
|
+
# Core&Outline React Component
|
|
2
|
+
|
|
3
|
+
A React component for integrating Core&Outline session recording and event tracking into your web application.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
Install the package using npm:
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install core-outline
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
or using yarn:
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
yarn add core-outline
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```sh
|
|
20
|
+
import React from 'react';
|
|
21
|
+
import CoreOutline from 'core-outline';
|
|
22
|
+
|
|
23
|
+
function App() {
|
|
24
|
+
return (
|
|
25
|
+
<CoreOutline
|
|
26
|
+
data_source_id={{ YOUR_DATA_SOURCE_ID }}
|
|
27
|
+
data_source_secret={{ YOUR_DATA_SOURCE_SECRET }}>
|
|
28
|
+
{/* Your app components */}
|
|
29
|
+
</CoreOutline>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export default App;
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
To flag items clicked or purchased:
|
|
37
|
+
|
|
38
|
+
```sh
|
|
39
|
+
import { flag_item_clicked, flag_item_purchased } from 'core-outline;
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
To flag items clicked:
|
|
43
|
+
|
|
44
|
+
```sh
|
|
45
|
+
flag_item_clicked('ITEM_ID');
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
To flag items purchased:
|
|
49
|
+
|
|
50
|
+
```sh
|
|
51
|
+
flag_item_purchased('ITEM_ID');
|
|
52
|
+
```
|
package/dist/index.es.js
CHANGED
|
@@ -6380,11 +6380,34 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6380
6380
|
var _useState11 = useState(''),
|
|
6381
6381
|
_useState12 = _slicedToArray(_useState11, 2);
|
|
6382
6382
|
_useState12[0];
|
|
6383
|
-
|
|
6383
|
+
_useState12[1];
|
|
6384
6384
|
var _useState13 = useState(v4()),
|
|
6385
6385
|
_useState14 = _slicedToArray(_useState13, 2),
|
|
6386
6386
|
sessionId = _useState14[0];
|
|
6387
6387
|
_useState14[1];
|
|
6388
|
+
var _useState15 = useState(false),
|
|
6389
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
|
6390
|
+
trackingAuthorized = _useState16[0],
|
|
6391
|
+
setTrackingAuthorized = _useState16[1];
|
|
6392
|
+
var _useState17 = useState(null),
|
|
6393
|
+
_useState18 = _slicedToArray(_useState17, 2),
|
|
6394
|
+
organizationId = _useState18[0],
|
|
6395
|
+
setOrganizationId = _useState18[1];
|
|
6396
|
+
var _useState19 = useState(null),
|
|
6397
|
+
_useState20 = _slicedToArray(_useState19, 2);
|
|
6398
|
+
_useState20[0];
|
|
6399
|
+
var setDataSourceId = _useState20[1];
|
|
6400
|
+
var _useState21 = useState(document.referrer || 'direct'),
|
|
6401
|
+
_useState22 = _slicedToArray(_useState21, 2),
|
|
6402
|
+
referrer = _useState22[0];
|
|
6403
|
+
_useState22[1];
|
|
6404
|
+
// Helper to only send via socket when tracking is authorized
|
|
6405
|
+
var sendSocketIfAuthorized = function sendSocketIfAuthorized(payload) {
|
|
6406
|
+
var isAuthorized = trackingAuthorized || localStorage.getItem('coreOutlineTrackingAuthorized') === 'true';
|
|
6407
|
+
if (isAuthorized && socket && typeof socket.send === 'function') {
|
|
6408
|
+
socket.send(payload);
|
|
6409
|
+
}
|
|
6410
|
+
};
|
|
6388
6411
|
function authorizeApp(_x, _x2) {
|
|
6389
6412
|
return _authorizeApp.apply(this, arguments);
|
|
6390
6413
|
}
|
|
@@ -6407,10 +6430,20 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6407
6430
|
response = fetch("http://api.coreoutline.com/data-source/authorize", requestOptions).then(function (response) {
|
|
6408
6431
|
return response.json();
|
|
6409
6432
|
}).then(function (data) {
|
|
6410
|
-
|
|
6433
|
+
if ((data === null || data === void 0 ? void 0 : data.status) === 'authorized') {
|
|
6434
|
+
setTrackingAuthorized(true);
|
|
6435
|
+
localStorage.setItem('coreOutlineTrackingAuthorized', 'true');
|
|
6436
|
+
setOrganizationId(data.ORGANIZATION_ID);
|
|
6437
|
+
setDataSourceId(data.DATA_SOURCE_ID);
|
|
6438
|
+
} else {
|
|
6439
|
+
setTrackingAuthorized(false);
|
|
6440
|
+
localStorage.setItem('coreOutlineTrackingAuthorized', 'false');
|
|
6441
|
+
}
|
|
6411
6442
|
return data;
|
|
6412
6443
|
})["catch"](function (error) {
|
|
6413
6444
|
console.error('Error:', error);
|
|
6445
|
+
// ensure localStorage reflects no authorization on error
|
|
6446
|
+
localStorage.setItem('coreOutlineTrackingAuthorized', 'false');
|
|
6414
6447
|
return error;
|
|
6415
6448
|
});
|
|
6416
6449
|
return _context2.abrupt("return", response);
|
|
@@ -6431,15 +6464,19 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6431
6464
|
formatted_events: formattedEvents,
|
|
6432
6465
|
raw_events: rawEvents
|
|
6433
6466
|
});
|
|
6434
|
-
|
|
6467
|
+
|
|
6468
|
+
// only send session end via socket if tracking is authorized
|
|
6469
|
+
sendSocketIfAuthorized({
|
|
6435
6470
|
topic: 'session-data',
|
|
6436
6471
|
data_source_id: data_source_id,
|
|
6472
|
+
organization_id: organizationId,
|
|
6437
6473
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6438
6474
|
start_date: new Date().toLocaleString(),
|
|
6439
6475
|
latitude: location.latitude,
|
|
6440
6476
|
longitude: location.longitude,
|
|
6441
6477
|
browser: browser,
|
|
6442
|
-
event_id: 'SESSION_END'
|
|
6478
|
+
event_id: 'SESSION_END',
|
|
6479
|
+
referrer: referrer
|
|
6443
6480
|
});
|
|
6444
6481
|
if (navigator.sendBeacon) {
|
|
6445
6482
|
navigator.sendBeacon("http://data.coreoutline.com/upload-events", data);
|
|
@@ -6475,35 +6512,42 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6475
6512
|
_context.next = 6;
|
|
6476
6513
|
return authorizeApp(data_source_id, data_source_secret);
|
|
6477
6514
|
case 6:
|
|
6515
|
+
_context.sent;
|
|
6478
6516
|
localStorage.setItem('coreOutlineSessionId', sessionId);
|
|
6479
6517
|
localStorage.setItem('coreOutlineDataSourceIdId', data_source_id);
|
|
6480
6518
|
console.log('Session', sessionId);
|
|
6481
|
-
|
|
6519
|
+
|
|
6520
|
+
// use helper that checks authorization (authorizeApp already wrote to localStorage)
|
|
6521
|
+
sendSocketIfAuthorized({
|
|
6482
6522
|
topic: 'session-data',
|
|
6483
6523
|
data_source_id: data_source_id,
|
|
6524
|
+
organization_id: organizationId,
|
|
6484
6525
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6485
6526
|
start_date: new Date().toLocaleString(),
|
|
6486
6527
|
latitude: location.latitude,
|
|
6487
6528
|
longitude: location.longitude,
|
|
6488
6529
|
browser: browser,
|
|
6489
|
-
event_id: 'SESSION_START'
|
|
6530
|
+
event_id: 'SESSION_START',
|
|
6531
|
+
referrer: referrer
|
|
6490
6532
|
});
|
|
6491
6533
|
return _context.abrupt("return", function () {
|
|
6492
6534
|
offLoadFunctionality();
|
|
6493
6535
|
window.removeEventListener('beforeunload', handleBeforeUnload);
|
|
6494
6536
|
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
|
6495
|
-
|
|
6537
|
+
sendSocketIfAuthorized({
|
|
6496
6538
|
topic: 'session-data',
|
|
6497
6539
|
data_source_id: data_source_id,
|
|
6540
|
+
organization_id: organizationId,
|
|
6498
6541
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6499
6542
|
start_date: new Date().toLocaleString(),
|
|
6500
6543
|
latitude: location.latitude,
|
|
6501
6544
|
longitude: location.longitude,
|
|
6502
6545
|
browser: browser,
|
|
6503
|
-
event_id: 'SESSION_END'
|
|
6546
|
+
event_id: 'SESSION_END',
|
|
6547
|
+
referrer: referrer
|
|
6504
6548
|
});
|
|
6505
6549
|
});
|
|
6506
|
-
case
|
|
6550
|
+
case 12:
|
|
6507
6551
|
case "end":
|
|
6508
6552
|
return _context.stop();
|
|
6509
6553
|
}
|
|
@@ -6542,16 +6586,18 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6542
6586
|
}));
|
|
6543
6587
|
var handleNavigation = function handleNavigation() {
|
|
6544
6588
|
setCurrentPage(window.location.href);
|
|
6545
|
-
|
|
6589
|
+
sendSocketIfAuthorized({
|
|
6546
6590
|
topic: 'session-data',
|
|
6547
6591
|
data_source_id: data_source_id,
|
|
6592
|
+
organization_id: organizationId,
|
|
6548
6593
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6549
6594
|
start_date: new Date().toLocaleString(),
|
|
6550
6595
|
latitude: location.latitude,
|
|
6551
6596
|
longitude: location.longitude,
|
|
6552
6597
|
browser: browser,
|
|
6553
6598
|
page_name: window.location.href,
|
|
6554
|
-
event_id: 'PAGE_NAVIGATION'
|
|
6599
|
+
event_id: 'PAGE_NAVIGATION',
|
|
6600
|
+
referrer: referrer
|
|
6555
6601
|
});
|
|
6556
6602
|
};
|
|
6557
6603
|
window.addEventListener('popstate', handleNavigation);
|
|
@@ -6669,16 +6715,18 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6669
6715
|
localStorage.setItem('coreoutlineFormattedEvents', JSON.stringify(function (prevEvents) {
|
|
6670
6716
|
return [].concat(_toConsumableArray(prevEvents), [clickEvent]);
|
|
6671
6717
|
}));
|
|
6672
|
-
|
|
6718
|
+
sendSocketIfAuthorized({
|
|
6673
6719
|
topic: 'session-data',
|
|
6674
6720
|
data_source_id: data_source_id,
|
|
6721
|
+
organization_id: organizationId,
|
|
6675
6722
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6676
6723
|
start_date: new Date().toLocaleString(),
|
|
6677
6724
|
latitude: location.latitude,
|
|
6678
6725
|
longitude: location.longitude,
|
|
6679
6726
|
browser: browser,
|
|
6680
|
-
event_id: 'ITEM_CLICKED'
|
|
6727
|
+
event_id: 'ITEM_CLICKED',
|
|
6681
6728
|
// item_clicked: event.target,
|
|
6729
|
+
referrer: referrer
|
|
6682
6730
|
});
|
|
6683
6731
|
};
|
|
6684
6732
|
document.addEventListener('click', handleClick);
|
|
@@ -6745,16 +6793,19 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6745
6793
|
var flag_item_clicked = function flag_item_clicked(item_id) {
|
|
6746
6794
|
var sessionId = localStorage.getItem('coreOutlineSessionId');
|
|
6747
6795
|
var dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
|
|
6796
|
+
var isAuthorized = localStorage.getItem('coreOutlineTrackingAuthorized') === 'true';
|
|
6748
6797
|
console.log('Session', sessionId);
|
|
6749
6798
|
console.log('Data Source', dataSourceId);
|
|
6750
|
-
socket.send
|
|
6751
|
-
|
|
6752
|
-
|
|
6753
|
-
|
|
6754
|
-
|
|
6755
|
-
|
|
6756
|
-
|
|
6757
|
-
|
|
6799
|
+
if (isAuthorized && socket && typeof socket.send === 'function') {
|
|
6800
|
+
socket.send({
|
|
6801
|
+
topic: 'session-data',
|
|
6802
|
+
data_source_id: dataSourceId,
|
|
6803
|
+
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6804
|
+
start_date: new Date().toLocaleString(),
|
|
6805
|
+
event_id: 'PRODUCT_CLICKED',
|
|
6806
|
+
item_clicked: item_id
|
|
6807
|
+
});
|
|
6808
|
+
}
|
|
6758
6809
|
return {
|
|
6759
6810
|
status: 'success',
|
|
6760
6811
|
message: 'Item click flagged successfully.'
|
|
@@ -6763,16 +6814,19 @@ var flag_item_clicked = function flag_item_clicked(item_id) {
|
|
|
6763
6814
|
var flag_item_purchased = function flag_item_purchased(item_id) {
|
|
6764
6815
|
var sessionId = localStorage.getItem('coreOutlineSessionId');
|
|
6765
6816
|
var dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
|
|
6817
|
+
var isAuthorized = localStorage.getItem('coreOutlineTrackingAuthorized') === 'true';
|
|
6766
6818
|
console.log('Session', sessionId);
|
|
6767
6819
|
console.log('Data Source', dataSourceId);
|
|
6768
|
-
socket.send
|
|
6769
|
-
|
|
6770
|
-
|
|
6771
|
-
|
|
6772
|
-
|
|
6773
|
-
|
|
6774
|
-
|
|
6775
|
-
|
|
6820
|
+
if (isAuthorized && socket && typeof socket.send === 'function') {
|
|
6821
|
+
socket.send({
|
|
6822
|
+
topic: 'session-data',
|
|
6823
|
+
data_source_id: dataSourceId,
|
|
6824
|
+
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6825
|
+
start_date: new Date().toLocaleString(),
|
|
6826
|
+
event_id: 'PRODUCT_PURCHASED',
|
|
6827
|
+
item_clicked: item_id
|
|
6828
|
+
});
|
|
6829
|
+
}
|
|
6776
6830
|
return {
|
|
6777
6831
|
status: 'success',
|
|
6778
6832
|
message: 'Item purchase flagged successfully.'
|
package/dist/index.js
CHANGED
|
@@ -6388,11 +6388,34 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6388
6388
|
var _useState11 = React.useState(''),
|
|
6389
6389
|
_useState12 = _slicedToArray(_useState11, 2);
|
|
6390
6390
|
_useState12[0];
|
|
6391
|
-
|
|
6391
|
+
_useState12[1];
|
|
6392
6392
|
var _useState13 = React.useState(uuid.v4()),
|
|
6393
6393
|
_useState14 = _slicedToArray(_useState13, 2),
|
|
6394
6394
|
sessionId = _useState14[0];
|
|
6395
6395
|
_useState14[1];
|
|
6396
|
+
var _useState15 = React.useState(false),
|
|
6397
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
|
6398
|
+
trackingAuthorized = _useState16[0],
|
|
6399
|
+
setTrackingAuthorized = _useState16[1];
|
|
6400
|
+
var _useState17 = React.useState(null),
|
|
6401
|
+
_useState18 = _slicedToArray(_useState17, 2),
|
|
6402
|
+
organizationId = _useState18[0],
|
|
6403
|
+
setOrganizationId = _useState18[1];
|
|
6404
|
+
var _useState19 = React.useState(null),
|
|
6405
|
+
_useState20 = _slicedToArray(_useState19, 2);
|
|
6406
|
+
_useState20[0];
|
|
6407
|
+
var setDataSourceId = _useState20[1];
|
|
6408
|
+
var _useState21 = React.useState(document.referrer || 'direct'),
|
|
6409
|
+
_useState22 = _slicedToArray(_useState21, 2),
|
|
6410
|
+
referrer = _useState22[0];
|
|
6411
|
+
_useState22[1];
|
|
6412
|
+
// Helper to only send via socket when tracking is authorized
|
|
6413
|
+
var sendSocketIfAuthorized = function sendSocketIfAuthorized(payload) {
|
|
6414
|
+
var isAuthorized = trackingAuthorized || localStorage.getItem('coreOutlineTrackingAuthorized') === 'true';
|
|
6415
|
+
if (isAuthorized && socket && typeof socket.send === 'function') {
|
|
6416
|
+
socket.send(payload);
|
|
6417
|
+
}
|
|
6418
|
+
};
|
|
6396
6419
|
function authorizeApp(_x, _x2) {
|
|
6397
6420
|
return _authorizeApp.apply(this, arguments);
|
|
6398
6421
|
}
|
|
@@ -6415,10 +6438,20 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6415
6438
|
response = fetch("http://api.coreoutline.com/data-source/authorize", requestOptions).then(function (response) {
|
|
6416
6439
|
return response.json();
|
|
6417
6440
|
}).then(function (data) {
|
|
6418
|
-
|
|
6441
|
+
if ((data === null || data === void 0 ? void 0 : data.status) === 'authorized') {
|
|
6442
|
+
setTrackingAuthorized(true);
|
|
6443
|
+
localStorage.setItem('coreOutlineTrackingAuthorized', 'true');
|
|
6444
|
+
setOrganizationId(data.ORGANIZATION_ID);
|
|
6445
|
+
setDataSourceId(data.DATA_SOURCE_ID);
|
|
6446
|
+
} else {
|
|
6447
|
+
setTrackingAuthorized(false);
|
|
6448
|
+
localStorage.setItem('coreOutlineTrackingAuthorized', 'false');
|
|
6449
|
+
}
|
|
6419
6450
|
return data;
|
|
6420
6451
|
})["catch"](function (error) {
|
|
6421
6452
|
console.error('Error:', error);
|
|
6453
|
+
// ensure localStorage reflects no authorization on error
|
|
6454
|
+
localStorage.setItem('coreOutlineTrackingAuthorized', 'false');
|
|
6422
6455
|
return error;
|
|
6423
6456
|
});
|
|
6424
6457
|
return _context2.abrupt("return", response);
|
|
@@ -6439,15 +6472,19 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6439
6472
|
formatted_events: formattedEvents,
|
|
6440
6473
|
raw_events: rawEvents
|
|
6441
6474
|
});
|
|
6442
|
-
|
|
6475
|
+
|
|
6476
|
+
// only send session end via socket if tracking is authorized
|
|
6477
|
+
sendSocketIfAuthorized({
|
|
6443
6478
|
topic: 'session-data',
|
|
6444
6479
|
data_source_id: data_source_id,
|
|
6480
|
+
organization_id: organizationId,
|
|
6445
6481
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6446
6482
|
start_date: new Date().toLocaleString(),
|
|
6447
6483
|
latitude: location.latitude,
|
|
6448
6484
|
longitude: location.longitude,
|
|
6449
6485
|
browser: browser,
|
|
6450
|
-
event_id: 'SESSION_END'
|
|
6486
|
+
event_id: 'SESSION_END',
|
|
6487
|
+
referrer: referrer
|
|
6451
6488
|
});
|
|
6452
6489
|
if (navigator.sendBeacon) {
|
|
6453
6490
|
navigator.sendBeacon("http://data.coreoutline.com/upload-events", data);
|
|
@@ -6483,35 +6520,42 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6483
6520
|
_context.next = 6;
|
|
6484
6521
|
return authorizeApp(data_source_id, data_source_secret);
|
|
6485
6522
|
case 6:
|
|
6523
|
+
_context.sent;
|
|
6486
6524
|
localStorage.setItem('coreOutlineSessionId', sessionId);
|
|
6487
6525
|
localStorage.setItem('coreOutlineDataSourceIdId', data_source_id);
|
|
6488
6526
|
console.log('Session', sessionId);
|
|
6489
|
-
|
|
6527
|
+
|
|
6528
|
+
// use helper that checks authorization (authorizeApp already wrote to localStorage)
|
|
6529
|
+
sendSocketIfAuthorized({
|
|
6490
6530
|
topic: 'session-data',
|
|
6491
6531
|
data_source_id: data_source_id,
|
|
6532
|
+
organization_id: organizationId,
|
|
6492
6533
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6493
6534
|
start_date: new Date().toLocaleString(),
|
|
6494
6535
|
latitude: location.latitude,
|
|
6495
6536
|
longitude: location.longitude,
|
|
6496
6537
|
browser: browser,
|
|
6497
|
-
event_id: 'SESSION_START'
|
|
6538
|
+
event_id: 'SESSION_START',
|
|
6539
|
+
referrer: referrer
|
|
6498
6540
|
});
|
|
6499
6541
|
return _context.abrupt("return", function () {
|
|
6500
6542
|
offLoadFunctionality();
|
|
6501
6543
|
window.removeEventListener('beforeunload', handleBeforeUnload);
|
|
6502
6544
|
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
|
6503
|
-
|
|
6545
|
+
sendSocketIfAuthorized({
|
|
6504
6546
|
topic: 'session-data',
|
|
6505
6547
|
data_source_id: data_source_id,
|
|
6548
|
+
organization_id: organizationId,
|
|
6506
6549
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6507
6550
|
start_date: new Date().toLocaleString(),
|
|
6508
6551
|
latitude: location.latitude,
|
|
6509
6552
|
longitude: location.longitude,
|
|
6510
6553
|
browser: browser,
|
|
6511
|
-
event_id: 'SESSION_END'
|
|
6554
|
+
event_id: 'SESSION_END',
|
|
6555
|
+
referrer: referrer
|
|
6512
6556
|
});
|
|
6513
6557
|
});
|
|
6514
|
-
case
|
|
6558
|
+
case 12:
|
|
6515
6559
|
case "end":
|
|
6516
6560
|
return _context.stop();
|
|
6517
6561
|
}
|
|
@@ -6550,16 +6594,18 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6550
6594
|
}));
|
|
6551
6595
|
var handleNavigation = function handleNavigation() {
|
|
6552
6596
|
setCurrentPage(window.location.href);
|
|
6553
|
-
|
|
6597
|
+
sendSocketIfAuthorized({
|
|
6554
6598
|
topic: 'session-data',
|
|
6555
6599
|
data_source_id: data_source_id,
|
|
6600
|
+
organization_id: organizationId,
|
|
6556
6601
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6557
6602
|
start_date: new Date().toLocaleString(),
|
|
6558
6603
|
latitude: location.latitude,
|
|
6559
6604
|
longitude: location.longitude,
|
|
6560
6605
|
browser: browser,
|
|
6561
6606
|
page_name: window.location.href,
|
|
6562
|
-
event_id: 'PAGE_NAVIGATION'
|
|
6607
|
+
event_id: 'PAGE_NAVIGATION',
|
|
6608
|
+
referrer: referrer
|
|
6563
6609
|
});
|
|
6564
6610
|
};
|
|
6565
6611
|
window.addEventListener('popstate', handleNavigation);
|
|
@@ -6677,16 +6723,18 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6677
6723
|
localStorage.setItem('coreoutlineFormattedEvents', JSON.stringify(function (prevEvents) {
|
|
6678
6724
|
return [].concat(_toConsumableArray(prevEvents), [clickEvent]);
|
|
6679
6725
|
}));
|
|
6680
|
-
|
|
6726
|
+
sendSocketIfAuthorized({
|
|
6681
6727
|
topic: 'session-data',
|
|
6682
6728
|
data_source_id: data_source_id,
|
|
6729
|
+
organization_id: organizationId,
|
|
6683
6730
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6684
6731
|
start_date: new Date().toLocaleString(),
|
|
6685
6732
|
latitude: location.latitude,
|
|
6686
6733
|
longitude: location.longitude,
|
|
6687
6734
|
browser: browser,
|
|
6688
|
-
event_id: 'ITEM_CLICKED'
|
|
6735
|
+
event_id: 'ITEM_CLICKED',
|
|
6689
6736
|
// item_clicked: event.target,
|
|
6737
|
+
referrer: referrer
|
|
6690
6738
|
});
|
|
6691
6739
|
};
|
|
6692
6740
|
document.addEventListener('click', handleClick);
|
|
@@ -6753,16 +6801,19 @@ var CoreOutline = function CoreOutline(_ref) {
|
|
|
6753
6801
|
var flag_item_clicked = function flag_item_clicked(item_id) {
|
|
6754
6802
|
var sessionId = localStorage.getItem('coreOutlineSessionId');
|
|
6755
6803
|
var dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
|
|
6804
|
+
var isAuthorized = localStorage.getItem('coreOutlineTrackingAuthorized') === 'true';
|
|
6756
6805
|
console.log('Session', sessionId);
|
|
6757
6806
|
console.log('Data Source', dataSourceId);
|
|
6758
|
-
socket.send
|
|
6759
|
-
|
|
6760
|
-
|
|
6761
|
-
|
|
6762
|
-
|
|
6763
|
-
|
|
6764
|
-
|
|
6765
|
-
|
|
6807
|
+
if (isAuthorized && socket && typeof socket.send === 'function') {
|
|
6808
|
+
socket.send({
|
|
6809
|
+
topic: 'session-data',
|
|
6810
|
+
data_source_id: dataSourceId,
|
|
6811
|
+
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6812
|
+
start_date: new Date().toLocaleString(),
|
|
6813
|
+
event_id: 'PRODUCT_CLICKED',
|
|
6814
|
+
item_clicked: item_id
|
|
6815
|
+
});
|
|
6816
|
+
}
|
|
6766
6817
|
return {
|
|
6767
6818
|
status: 'success',
|
|
6768
6819
|
message: 'Item click flagged successfully.'
|
|
@@ -6771,16 +6822,19 @@ var flag_item_clicked = function flag_item_clicked(item_id) {
|
|
|
6771
6822
|
var flag_item_purchased = function flag_item_purchased(item_id) {
|
|
6772
6823
|
var sessionId = localStorage.getItem('coreOutlineSessionId');
|
|
6773
6824
|
var dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
|
|
6825
|
+
var isAuthorized = localStorage.getItem('coreOutlineTrackingAuthorized') === 'true';
|
|
6774
6826
|
console.log('Session', sessionId);
|
|
6775
6827
|
console.log('Data Source', dataSourceId);
|
|
6776
|
-
socket.send
|
|
6777
|
-
|
|
6778
|
-
|
|
6779
|
-
|
|
6780
|
-
|
|
6781
|
-
|
|
6782
|
-
|
|
6783
|
-
|
|
6828
|
+
if (isAuthorized && socket && typeof socket.send === 'function') {
|
|
6829
|
+
socket.send({
|
|
6830
|
+
topic: 'session-data',
|
|
6831
|
+
data_source_id: dataSourceId,
|
|
6832
|
+
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
6833
|
+
start_date: new Date().toLocaleString(),
|
|
6834
|
+
event_id: 'PRODUCT_PURCHASED',
|
|
6835
|
+
item_clicked: item_id
|
|
6836
|
+
});
|
|
6837
|
+
}
|
|
6784
6838
|
return {
|
|
6785
6839
|
status: 'success',
|
|
6786
6840
|
message: 'Item purchase flagged successfully.'
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
2
2
|
import { record } from 'rrweb';
|
|
3
3
|
import { v4 } from 'uuid';
|
|
4
4
|
import socket from './socket';
|
|
@@ -19,6 +19,19 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
|
|
|
19
19
|
const [browser, setBrowser] = useState(getBrowserInfo());
|
|
20
20
|
const [appToken, setAppToken] = useState('');
|
|
21
21
|
const [sessionId, setSessionId] = useState(v4());
|
|
22
|
+
const [trackingAuthorized, setTrackingAuthorized] = useState(false);
|
|
23
|
+
const [organizationId, setOrganizationId] = useState(null);
|
|
24
|
+
const [dataSourceId, setDataSourceId] = useState(null);
|
|
25
|
+
const [referrer, setReferrer] = useState(document.referrer || 'direct');
|
|
26
|
+
// Helper to only send via socket when tracking is authorized
|
|
27
|
+
const sendSocketIfAuthorized = (payload) => {
|
|
28
|
+
const isAuthorized =
|
|
29
|
+
trackingAuthorized ||
|
|
30
|
+
localStorage.getItem('coreOutlineTrackingAuthorized') === 'true';
|
|
31
|
+
if (isAuthorized && socket && typeof socket.send === 'function') {
|
|
32
|
+
socket.send(payload);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
22
35
|
|
|
23
36
|
async function authorizeApp(data_source_id, data_source_secret) {
|
|
24
37
|
const requestOptions = {
|
|
@@ -37,11 +50,21 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
|
|
|
37
50
|
)
|
|
38
51
|
.then((response) => response.json())
|
|
39
52
|
.then((data) => {
|
|
40
|
-
|
|
53
|
+
if (data?.status === 'authorized') {
|
|
54
|
+
setTrackingAuthorized(true);
|
|
55
|
+
localStorage.setItem('coreOutlineTrackingAuthorized', 'true');
|
|
56
|
+
setOrganizationId(data.ORGANIZATION_ID);
|
|
57
|
+
setDataSourceId(data.DATA_SOURCE_ID);
|
|
58
|
+
} else {
|
|
59
|
+
setTrackingAuthorized(false);
|
|
60
|
+
localStorage.setItem('coreOutlineTrackingAuthorized', 'false');
|
|
61
|
+
}
|
|
41
62
|
return data;
|
|
42
63
|
})
|
|
43
64
|
.catch((error) => {
|
|
44
65
|
console.error('Error:', error);
|
|
66
|
+
// ensure localStorage reflects no authorization on error
|
|
67
|
+
localStorage.setItem('coreOutlineTrackingAuthorized', 'false');
|
|
45
68
|
return error;
|
|
46
69
|
});
|
|
47
70
|
return response;
|
|
@@ -57,15 +80,18 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
|
|
|
57
80
|
raw_events: rawEvents,
|
|
58
81
|
});
|
|
59
82
|
|
|
60
|
-
socket
|
|
83
|
+
// only send session end via socket if tracking is authorized
|
|
84
|
+
sendSocketIfAuthorized({
|
|
61
85
|
topic: 'session-data',
|
|
62
86
|
data_source_id: data_source_id,
|
|
87
|
+
organization_id: organizationId,
|
|
63
88
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
64
89
|
start_date: new Date().toLocaleString(),
|
|
65
90
|
latitude: location.latitude,
|
|
66
91
|
longitude: location.longitude,
|
|
67
92
|
browser: browser,
|
|
68
93
|
event_id: 'SESSION_END',
|
|
94
|
+
referrer: referrer,
|
|
69
95
|
});
|
|
70
96
|
|
|
71
97
|
if (navigator.sendBeacon) {
|
|
@@ -95,34 +121,40 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
|
|
|
95
121
|
};
|
|
96
122
|
window.addEventListener('beforeunload', handleBeforeUnload);
|
|
97
123
|
document.addEventListener('visibilitychange', handleVisibilityChange);
|
|
98
|
-
await authorizeApp(data_source_id, data_source_secret);
|
|
124
|
+
const authResponse = await authorizeApp(data_source_id, data_source_secret);
|
|
99
125
|
localStorage.setItem('coreOutlineSessionId', sessionId);
|
|
100
126
|
localStorage.setItem('coreOutlineDataSourceIdId', data_source_id);
|
|
101
127
|
console.log('Session', sessionId);
|
|
102
|
-
|
|
128
|
+
|
|
129
|
+
// use helper that checks authorization (authorizeApp already wrote to localStorage)
|
|
130
|
+
sendSocketIfAuthorized({
|
|
103
131
|
topic: 'session-data',
|
|
104
132
|
data_source_id: data_source_id,
|
|
133
|
+
organization_id: organizationId,
|
|
105
134
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
106
135
|
start_date: new Date().toLocaleString(),
|
|
107
136
|
latitude: location.latitude,
|
|
108
137
|
longitude: location.longitude,
|
|
109
138
|
browser: browser,
|
|
110
139
|
event_id: 'SESSION_START',
|
|
140
|
+
referrer: referrer,
|
|
111
141
|
});
|
|
112
142
|
|
|
113
143
|
return () => {
|
|
114
144
|
offLoadFunctionality();
|
|
115
145
|
window.removeEventListener('beforeunload', handleBeforeUnload);
|
|
116
146
|
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
|
117
|
-
|
|
147
|
+
sendSocketIfAuthorized({
|
|
118
148
|
topic: 'session-data',
|
|
119
149
|
data_source_id: data_source_id,
|
|
150
|
+
organization_id: organizationId,
|
|
120
151
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
121
152
|
start_date: new Date().toLocaleString(),
|
|
122
153
|
latitude: location.latitude,
|
|
123
154
|
longitude: location.longitude,
|
|
124
155
|
browser: browser,
|
|
125
156
|
event_id: 'SESSION_END',
|
|
157
|
+
referrer: referrer,
|
|
126
158
|
});
|
|
127
159
|
};
|
|
128
160
|
}, []);
|
|
@@ -156,9 +188,10 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
|
|
|
156
188
|
);
|
|
157
189
|
const handleNavigation = () => {
|
|
158
190
|
setCurrentPage(window.location.href);
|
|
159
|
-
|
|
191
|
+
sendSocketIfAuthorized({
|
|
160
192
|
topic: 'session-data',
|
|
161
193
|
data_source_id: data_source_id,
|
|
194
|
+
organization_id: organizationId,
|
|
162
195
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
163
196
|
start_date: new Date().toLocaleString(),
|
|
164
197
|
latitude: location.latitude,
|
|
@@ -166,6 +199,7 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
|
|
|
166
199
|
browser: browser,
|
|
167
200
|
page_name: window.location.href,
|
|
168
201
|
event_id: 'PAGE_NAVIGATION',
|
|
202
|
+
referrer: referrer,
|
|
169
203
|
});
|
|
170
204
|
};
|
|
171
205
|
|
|
@@ -308,9 +342,11 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
|
|
|
308
342
|
'coreoutlineFormattedEvents',
|
|
309
343
|
JSON.stringify((prevEvents) => [...prevEvents, clickEvent])
|
|
310
344
|
);
|
|
311
|
-
|
|
345
|
+
|
|
346
|
+
sendSocketIfAuthorized({
|
|
312
347
|
topic: 'session-data',
|
|
313
348
|
data_source_id: data_source_id,
|
|
349
|
+
organization_id: organizationId,
|
|
314
350
|
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
315
351
|
start_date: new Date().toLocaleString(),
|
|
316
352
|
latitude: location.latitude,
|
|
@@ -318,6 +354,7 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
|
|
|
318
354
|
browser: browser,
|
|
319
355
|
event_id: 'ITEM_CLICKED',
|
|
320
356
|
// item_clicked: event.target,
|
|
357
|
+
referrer: referrer,
|
|
321
358
|
});
|
|
322
359
|
};
|
|
323
360
|
|
|
@@ -408,32 +445,40 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
|
|
|
408
445
|
export const flag_item_clicked = (item_id) => {
|
|
409
446
|
const sessionId = localStorage.getItem('coreOutlineSessionId');
|
|
410
447
|
const dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
|
|
448
|
+
const isAuthorized =
|
|
449
|
+
localStorage.getItem('coreOutlineTrackingAuthorized') === 'true';
|
|
411
450
|
console.log('Session', sessionId);
|
|
412
451
|
console.log('Data Source', dataSourceId);
|
|
413
|
-
socket.send
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
452
|
+
if (isAuthorized && socket && typeof socket.send === 'function') {
|
|
453
|
+
socket.send({
|
|
454
|
+
topic: 'session-data',
|
|
455
|
+
data_source_id: dataSourceId,
|
|
456
|
+
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
457
|
+
start_date: new Date().toLocaleString(),
|
|
458
|
+
event_id: 'PRODUCT_CLICKED',
|
|
459
|
+
item_clicked: item_id,
|
|
460
|
+
});
|
|
461
|
+
}
|
|
421
462
|
return { status: 'success', message: 'Item click flagged successfully.' };
|
|
422
463
|
};
|
|
423
464
|
|
|
424
465
|
export const flag_item_purchased = (item_id) => {
|
|
425
466
|
const sessionId = localStorage.getItem('coreOutlineSessionId');
|
|
426
467
|
const dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
|
|
468
|
+
const isAuthorized =
|
|
469
|
+
localStorage.getItem('coreOutlineTrackingAuthorized') === 'true';
|
|
427
470
|
console.log('Session', sessionId);
|
|
428
471
|
console.log('Data Source', dataSourceId);
|
|
429
|
-
socket.send
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
472
|
+
if (isAuthorized && socket && typeof socket.send === 'function') {
|
|
473
|
+
socket.send({
|
|
474
|
+
topic: 'session-data',
|
|
475
|
+
data_source_id: dataSourceId,
|
|
476
|
+
session_id: localStorage.getItem('coreOutlineSessionId'),
|
|
477
|
+
start_date: new Date().toLocaleString(),
|
|
478
|
+
event_id: 'PRODUCT_PURCHASED',
|
|
479
|
+
item_clicked: item_id,
|
|
480
|
+
});
|
|
481
|
+
}
|
|
437
482
|
return { status: 'success', message: 'Item purchase flagged successfully.' };
|
|
438
483
|
};
|
|
439
484
|
|