@financial-times/cp-content-pipeline-ui 7.1.2 → 7.1.4
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/CHANGELOG.md +14 -0
- package/lib/components/Body/index.test.js +1 -0
- package/lib/components/Body/index.test.js.map +1 -1
- package/lib/components/CustomCodeComponent/client/tracking.d.ts +2 -3
- package/lib/components/CustomCodeComponent/client/tracking.js +18 -19
- package/lib/components/CustomCodeComponent/client/tracking.js.map +1 -1
- package/package.json +1 -2
- package/src/components/Body/index.test.tsx +1 -0
- package/src/components/CustomCodeComponent/client/tracking.ts +18 -24
- package/src/stories/Message.stories.scss +1 -3
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -574,6 +574,20 @@
|
|
|
574
574
|
* @financial-times/cp-content-pipeline-client bumped from ^3.7.2 to ^3.7.3
|
|
575
575
|
* @financial-times/cp-content-pipeline-schema bumped from ^2.10.1 to ^2.10.2
|
|
576
576
|
|
|
577
|
+
## [7.1.4](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.1.3...cp-content-pipeline-ui-v7.1.4) (2024-09-30)
|
|
578
|
+
|
|
579
|
+
|
|
580
|
+
### Bug Fixes
|
|
581
|
+
|
|
582
|
+
* import o-message in the styles package ([2ba2d58](https://github.com/Financial-Times/cp-content-pipeline/commit/2ba2d58ea5d6633244596c76ee72bdefb03f6d1a))
|
|
583
|
+
|
|
584
|
+
## [7.1.3](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.1.2...cp-content-pipeline-ui-v7.1.3) (2024-09-27)
|
|
585
|
+
|
|
586
|
+
|
|
587
|
+
### Bug Fixes
|
|
588
|
+
|
|
589
|
+
* use standard component tracking ([f0ff492](https://github.com/Financial-Times/cp-content-pipeline/commit/f0ff492851625dcf95a58f752ee4c7d3e1321122))
|
|
590
|
+
|
|
577
591
|
## [7.1.2](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.1.1...cp-content-pipeline-ui-v7.1.2) (2024-09-24)
|
|
578
592
|
|
|
579
593
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../src/components/Body/index.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,kDAA+C;AAC/C,yCAAgD;AAGhD,MAAM,WAAW,GAA4B;IAC3C,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,OAAO;IACd,EAAE,EAAE,sCAAsC;IAC1C,GAAG,EAAE,iEAAiE;IACtE,aAAa,EAAE,0BAA0B;IACzC,kBAAkB,EAAE,aAAa;IACjC,iBAAiB,EAAE,aAAa;IAChC,gBAAgB,EAAE,WAAW;IAC7B,kBAAkB,EAAE,0BAA0B;IAC9C,WAAW,EAAE,EAAE;IACf,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,IAAI,EAAE;gBACJ,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,CAAC;gBACV,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,WAAW;wBACjB,QAAQ,EAAE;4BACR;gCACE,IAAI,EAAE,MAAM;gCACZ,KAAK,EAAE,4BAA4B;6BACpC;yBACF;qBACF;iBACF;aACF;YACD,UAAU,EAAE,EAAE;SACf;KACF;CACF,CAAA;AAED,gFAAgF;AAChF,MAAM,WAAW,GAAG;IAClB,SAAS;IACT,OAAO;IACP,OAAO;IACP,iBAAiB;IACjB,gBAAgB;CACiC,CAAA;AAEnD,MAAM,mBAAmB,GAAG;IAC1B,OAAO,EAAE,EAAE;IACX,KAAK,EAAE;QACL,UAAU,EAAE,OAAO;QACnB,KAAK,EAAE;YACL;gBACE,SAAS,EAAE,YAAY;gBACvB,GAAG,EAAE,iFAAiF;aACvF;SACF;KACF;IACD,cAAc,EAAE;QACd,UAAU,EAAE,gBAAgB;QAC5B,QAAQ,EAAE;YACR;gBACE,EAAE,EAAE,sCAAsC;gBAC1C,GAAG,EAAE,iEAAiE;gBACtE,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,QAAQ;gBACf,aAAa,EAAE,sBAAsB;gBACrC,kBAAkB,EAAE,sBAAsB;gBAC1C,cAAc,EAAE,UAAU;gBAC1B,UAAU,EAAE;oBACV,WAAW,EAAE,YAAY;iBAC1B;gBACD,WAAW,EAAE,+CAA+C;aAC7D;SACF;KACF;IACD,eAAe,EAAE;QACf,UAAU,EAAE,iBAAiB;QAC7B,aAAa,EAAE;YACb;gBACE,GAAG,WAAW;gBACd,UAAU,EAAE,cAAc;gBAC1B,KAAK,EAAE,aAAa;gBACpB,OAAO,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../src/components/Body/index.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,15 +16,14 @@ type TrackingData = {
|
|
|
16
16
|
declare class CustomCodeComponentTracker {
|
|
17
17
|
private component;
|
|
18
18
|
private trackingData;
|
|
19
|
-
private startTime;
|
|
20
|
-
private totalVisibleTime;
|
|
21
|
-
private timeElapsedSeconds;
|
|
22
19
|
private observer;
|
|
23
20
|
private viewing;
|
|
24
21
|
constructor(component: Element, trackingData: TrackingData);
|
|
25
22
|
private init;
|
|
26
23
|
private onCccConnected;
|
|
27
24
|
private onCccError;
|
|
25
|
+
private onView;
|
|
26
|
+
private onExitView;
|
|
28
27
|
private dispatchEvent;
|
|
29
28
|
private onChange;
|
|
30
29
|
destroy(): void;
|
|
@@ -11,9 +11,6 @@ class CustomCodeComponentTracker {
|
|
|
11
11
|
constructor(component, trackingData) {
|
|
12
12
|
this.component = component;
|
|
13
13
|
this.trackingData = trackingData;
|
|
14
|
-
this.startTime = 0;
|
|
15
|
-
this.totalVisibleTime = 0;
|
|
16
|
-
this.timeElapsedSeconds = null;
|
|
17
14
|
this.component = component;
|
|
18
15
|
this.trackingData = trackingData;
|
|
19
16
|
this.observer = null;
|
|
@@ -26,7 +23,7 @@ class CustomCodeComponentTracker {
|
|
|
26
23
|
this.component.addEventListener('ccc-connected', this.onCccConnected.bind(this));
|
|
27
24
|
}
|
|
28
25
|
onCccConnected() {
|
|
29
|
-
this.dispatchEvent('success');
|
|
26
|
+
this.dispatchEvent('act', { trigger_action: 'success' });
|
|
30
27
|
this.observer = new IntersectionObserver(this.onChange.bind(this), {
|
|
31
28
|
rootMargin: `0px 0px -300px 0px`,
|
|
32
29
|
threshold: 0,
|
|
@@ -34,18 +31,23 @@ class CustomCodeComponentTracker {
|
|
|
34
31
|
this.observer.observe(this.component);
|
|
35
32
|
}
|
|
36
33
|
onCccError() {
|
|
37
|
-
this.dispatchEvent('error');
|
|
34
|
+
this.dispatchEvent('act', { trigger_action: 'error' });
|
|
38
35
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
36
|
+
onView() {
|
|
37
|
+
this.dispatchEvent('view');
|
|
38
|
+
this.viewing = true;
|
|
39
|
+
}
|
|
40
|
+
onExitView() {
|
|
41
|
+
this.dispatchEvent('act', { trigger_action: 'exit-view' });
|
|
42
|
+
this.viewing = false;
|
|
43
|
+
}
|
|
44
|
+
dispatchEvent(action, extraDetail = {}) {
|
|
44
45
|
const event = new CustomEvent('oTracking.event', {
|
|
45
46
|
detail: {
|
|
46
47
|
category: 'component',
|
|
47
48
|
action,
|
|
48
|
-
...
|
|
49
|
+
...this.trackingData,
|
|
50
|
+
...extraDetail,
|
|
49
51
|
},
|
|
50
52
|
bubbles: true,
|
|
51
53
|
});
|
|
@@ -58,17 +60,11 @@ class CustomCodeComponentTracker {
|
|
|
58
60
|
}
|
|
59
61
|
if (change.boundingClientRect.height > 0 &&
|
|
60
62
|
(change.isIntersecting || change.intersectionRatio >= 1)) {
|
|
61
|
-
this.
|
|
62
|
-
this.startTime = performance.now();
|
|
63
|
-
this.viewing = true;
|
|
63
|
+
this.onView();
|
|
64
64
|
}
|
|
65
65
|
if (this.viewing &&
|
|
66
66
|
(!change.isIntersecting || change.intersectionRatio === 0)) {
|
|
67
|
-
this.
|
|
68
|
-
this.timeElapsedSeconds = parseFloat((this.totalVisibleTime / 1000).toFixed(2));
|
|
69
|
-
this.dispatchEvent('stop-view');
|
|
70
|
-
this.totalVisibleTime = 0;
|
|
71
|
-
this.timeElapsedSeconds = null;
|
|
67
|
+
this.onExitView();
|
|
72
68
|
}
|
|
73
69
|
});
|
|
74
70
|
}
|
|
@@ -78,6 +74,9 @@ class CustomCodeComponentTracker {
|
|
|
78
74
|
this.observer.disconnect();
|
|
79
75
|
this.component.removeEventListener('ccc-connected', this.onCccConnected.bind(this));
|
|
80
76
|
this.component.removeEventListener('error', this.onCccError.bind(this));
|
|
77
|
+
if (this.viewing) {
|
|
78
|
+
this.onExitView();
|
|
79
|
+
}
|
|
81
80
|
}
|
|
82
81
|
}
|
|
83
82
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tracking.js","sourceRoot":"","sources":["../../../../src/components/CustomCodeComponent/client/tracking.ts"],"names":[],"mappings":";;;AAWA;;;;;GAKG;AACH,MAAM,0BAA0B;
|
|
1
|
+
{"version":3,"file":"tracking.js","sourceRoot":"","sources":["../../../../src/components/CustomCodeComponent/client/tracking.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/cp-content-pipeline-ui",
|
|
3
|
-
"version": "7.1.
|
|
3
|
+
"version": "7.1.4",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -21,7 +21,6 @@
|
|
|
21
21
|
"@financial-times/o-colors": "^6.6.2",
|
|
22
22
|
"@financial-times/o-grid": "^6.1.5",
|
|
23
23
|
"@financial-times/o-icons": "^7.7.0",
|
|
24
|
-
"@financial-times/o-message": "^5.4.4",
|
|
25
24
|
"@financial-times/o-share": "^10.0.1",
|
|
26
25
|
"@financial-times/o-spacing": "^3.2.3",
|
|
27
26
|
"@financial-times/o-tracking": "^4.5.0",
|
|
@@ -16,16 +16,10 @@ type TrackingData = {
|
|
|
16
16
|
* @param {TrackingData} trackingData - The specific component data
|
|
17
17
|
*/
|
|
18
18
|
class CustomCodeComponentTracker {
|
|
19
|
-
private startTime: number
|
|
20
|
-
private totalVisibleTime: number
|
|
21
|
-
private timeElapsedSeconds: number | null
|
|
22
19
|
private observer: IntersectionObserver | null
|
|
23
20
|
private viewing: boolean
|
|
24
21
|
|
|
25
22
|
constructor(private component: Element, private trackingData: TrackingData) {
|
|
26
|
-
this.startTime = 0
|
|
27
|
-
this.totalVisibleTime = 0
|
|
28
|
-
this.timeElapsedSeconds = null
|
|
29
23
|
this.component = component
|
|
30
24
|
this.trackingData = trackingData
|
|
31
25
|
this.observer = null
|
|
@@ -43,7 +37,7 @@ class CustomCodeComponentTracker {
|
|
|
43
37
|
}
|
|
44
38
|
|
|
45
39
|
private onCccConnected(): void {
|
|
46
|
-
this.dispatchEvent('success')
|
|
40
|
+
this.dispatchEvent('act', { trigger_action: 'success' })
|
|
47
41
|
this.observer = new IntersectionObserver(this.onChange.bind(this), {
|
|
48
42
|
rootMargin: `0px 0px -300px 0px`,
|
|
49
43
|
threshold: 0,
|
|
@@ -52,21 +46,26 @@ class CustomCodeComponentTracker {
|
|
|
52
46
|
}
|
|
53
47
|
|
|
54
48
|
private onCccError(): void {
|
|
55
|
-
this.dispatchEvent('error')
|
|
49
|
+
this.dispatchEvent('act', { trigger_action: 'error' })
|
|
56
50
|
}
|
|
57
51
|
|
|
58
|
-
private
|
|
59
|
-
|
|
52
|
+
private onView(): void {
|
|
53
|
+
this.dispatchEvent('view')
|
|
54
|
+
this.viewing = true
|
|
55
|
+
}
|
|
60
56
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
57
|
+
private onExitView(): void {
|
|
58
|
+
this.dispatchEvent('act', { trigger_action: 'exit-view' })
|
|
59
|
+
this.viewing = false
|
|
60
|
+
}
|
|
64
61
|
|
|
62
|
+
private dispatchEvent(action: string, extraDetail = {}): void {
|
|
65
63
|
const event = new CustomEvent('oTracking.event', {
|
|
66
64
|
detail: {
|
|
67
65
|
category: 'component',
|
|
68
66
|
action,
|
|
69
|
-
...
|
|
67
|
+
...this.trackingData,
|
|
68
|
+
...extraDetail,
|
|
70
69
|
},
|
|
71
70
|
bubbles: true,
|
|
72
71
|
})
|
|
@@ -82,21 +81,13 @@ class CustomCodeComponentTracker {
|
|
|
82
81
|
change.boundingClientRect.height > 0 &&
|
|
83
82
|
(change.isIntersecting || change.intersectionRatio >= 1)
|
|
84
83
|
) {
|
|
85
|
-
this.
|
|
86
|
-
this.startTime = performance.now()
|
|
87
|
-
this.viewing = true
|
|
84
|
+
this.onView()
|
|
88
85
|
}
|
|
89
86
|
if (
|
|
90
87
|
this.viewing &&
|
|
91
88
|
(!change.isIntersecting || change.intersectionRatio === 0)
|
|
92
89
|
) {
|
|
93
|
-
this.
|
|
94
|
-
this.timeElapsedSeconds = parseFloat(
|
|
95
|
-
(this.totalVisibleTime / 1000).toFixed(2)
|
|
96
|
-
)
|
|
97
|
-
this.dispatchEvent('stop-view')
|
|
98
|
-
this.totalVisibleTime = 0
|
|
99
|
-
this.timeElapsedSeconds = null
|
|
90
|
+
this.onExitView()
|
|
100
91
|
}
|
|
101
92
|
})
|
|
102
93
|
}
|
|
@@ -110,6 +101,9 @@ class CustomCodeComponentTracker {
|
|
|
110
101
|
this.onCccConnected.bind(this)
|
|
111
102
|
)
|
|
112
103
|
this.component.removeEventListener('error', this.onCccError.bind(this))
|
|
104
|
+
if (this.viewing) {
|
|
105
|
+
this.onExitView()
|
|
106
|
+
}
|
|
113
107
|
}
|
|
114
108
|
}
|
|
115
109
|
}
|