pb-sxp-ui 1.20.2 → 1.20.3
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/dist/index.cjs +252 -119
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +252 -119
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +6 -6
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +6 -6
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +252 -119
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +6 -6
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/LikeButton/index.js +12 -4
- package/es/core/components/SxpPageRender/VideoWidget/index.js +6 -2
- package/es/core/components/SxpPageRender/WaterFall/List.js +15 -16
- package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js +14 -2
- package/es/core/components/SxpPageRender/WaterFall/index.d.ts +2 -0
- package/es/core/components/SxpPageRender/WaterFall/index.js +1 -4
- package/es/core/components/SxpPageRender/index.js +61 -17
- package/es/core/context/SxpDataSourceProvider.d.ts +8 -3
- package/es/core/context/SxpDataSourceProvider.js +76 -43
- package/es/core/utils/tool.d.ts +2 -1
- package/es/core/utils/tool.js +15 -1
- package/es/materials/sxp/cta/AniLink/index.js +7 -7
- package/es/materials/sxp/cta/AniLinkPopup/index.js +10 -10
- package/es/materials/sxp/popup/CommodityDetail/index.js +9 -3
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -3
- package/es/materials/sxp/popup/CommodityList/index.js +10 -6
- package/es/materials/sxp/template/components/EventProvider.js +9 -9
- package/lib/core/components/SxpPageRender/LikeButton/index.js +12 -4
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +6 -2
- package/lib/core/components/SxpPageRender/WaterFall/List.js +14 -15
- package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js +14 -2
- package/lib/core/components/SxpPageRender/WaterFall/index.d.ts +2 -0
- package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -4
- package/lib/core/components/SxpPageRender/index.js +61 -17
- package/lib/core/context/SxpDataSourceProvider.d.ts +8 -3
- package/lib/core/context/SxpDataSourceProvider.js +74 -41
- package/lib/core/utils/tool.d.ts +2 -1
- package/lib/core/utils/tool.js +16 -1
- package/lib/materials/sxp/cta/AniLink/index.js +7 -7
- package/lib/materials/sxp/cta/AniLinkPopup/index.js +10 -10
- package/lib/materials/sxp/popup/CommodityDetail/index.js +9 -3
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -3
- package/lib/materials/sxp/popup/CommodityList/index.js +10 -6
- package/lib/materials/sxp/template/components/EventProvider.js +9 -9
- package/package.json +1 -1
|
@@ -8,12 +8,12 @@ const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
|
|
8
8
|
const LikeButton = (_a) => {
|
|
9
9
|
var _b;
|
|
10
10
|
var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
|
|
11
|
-
const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
|
|
11
|
+
const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList, bffFbReport } = useSxpDataSource();
|
|
12
12
|
const [state, setState] = useState((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
|
|
13
13
|
const likeIcon = useIconLink(defaultLikeIconPath);
|
|
14
14
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath);
|
|
15
15
|
const handleClick = debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
16
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
16
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
|
|
17
17
|
if (state) {
|
|
18
18
|
setState(false);
|
|
19
19
|
const result = (_e = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '' })))) !== null && _e !== void 0 ? _e : false;
|
|
@@ -57,16 +57,24 @@ const LikeButton = (_a) => {
|
|
|
57
57
|
traceInfo: (_y = recData === null || recData === void 0 ? void 0 : recData.video) === null || _y === void 0 ? void 0 : _y.traceInfo
|
|
58
58
|
}
|
|
59
59
|
});
|
|
60
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
61
|
+
eventName: 'Engagement',
|
|
62
|
+
product: (_z = recData === null || recData === void 0 ? void 0 : recData.video) === null || _z === void 0 ? void 0 : _z.bindProducts,
|
|
63
|
+
rec: recData,
|
|
64
|
+
position,
|
|
65
|
+
content_id: (_1 = (_0 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _0 === void 0 ? void 0 : _0.itemId) !== null && _1 !== void 0 ? _1 : '',
|
|
66
|
+
engagement_type: 'like'
|
|
67
|
+
});
|
|
60
68
|
if (!result) {
|
|
61
69
|
setState(false);
|
|
62
70
|
}
|
|
63
71
|
else {
|
|
64
|
-
const nRtcList = (
|
|
72
|
+
const nRtcList = (_2 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
|
65
73
|
if (index === position) {
|
|
66
74
|
item.isCollected = true;
|
|
67
75
|
}
|
|
68
76
|
return item;
|
|
69
|
-
})) !== null &&
|
|
77
|
+
})) !== null && _2 !== void 0 ? _2 : [];
|
|
70
78
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
|
71
79
|
}
|
|
72
80
|
}
|
|
@@ -285,11 +285,15 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
|
|
|
285
285
|
if (isActive) {
|
|
286
286
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
287
287
|
eventName: 'ViewContent',
|
|
288
|
-
product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.
|
|
288
|
+
product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProducts,
|
|
289
|
+
rec: data === null || data === void 0 ? void 0 : data[index],
|
|
290
|
+
position: index
|
|
289
291
|
});
|
|
290
292
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
291
293
|
eventName: 'PageView',
|
|
292
|
-
product: (_d = (_c = data === null || data === void 0 ? void 0 : data[index]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.
|
|
294
|
+
product: (_d = (_c = data === null || data === void 0 ? void 0 : data[index]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.bindProducts,
|
|
295
|
+
rec: data === null || data === void 0 ? void 0 : data[index],
|
|
296
|
+
position: index
|
|
293
297
|
});
|
|
294
298
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
|
295
299
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
|
-
import React, { useState, useEffect, useMemo, useRef
|
|
2
|
+
import React, { useState, useEffect, useMemo, useRef } from 'react';
|
|
3
3
|
import './List.less';
|
|
4
4
|
import FormatImage from '../FormatImage';
|
|
5
5
|
import previewData from './preview.json';
|
|
@@ -120,26 +120,13 @@ const WaterfallFlowItem = (props) => {
|
|
|
120
120
|
export default function WaterfallList(_a) {
|
|
121
121
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
122
122
|
var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
|
|
123
|
-
const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = useSxpDataSource();
|
|
123
|
+
const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex, bffFbReport } = useSxpDataSource();
|
|
124
124
|
const { jumpToWeb } = useEventReport();
|
|
125
125
|
const [list, setList] = useState();
|
|
126
126
|
const [data, setData] = useState();
|
|
127
127
|
const [isLoadingData, setIsLoadingData] = useState(false);
|
|
128
128
|
const containerRef = useRef(null);
|
|
129
129
|
const [isLoadMore, setIsLoadMore] = useState(false);
|
|
130
|
-
const loadMoreData = useCallback(() => {
|
|
131
|
-
if (isLoadMore)
|
|
132
|
-
return;
|
|
133
|
-
setIsLoadMore(true);
|
|
134
|
-
waterFallData &&
|
|
135
|
-
(getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
|
|
136
|
-
hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag
|
|
137
|
-
}).then((res) => {
|
|
138
|
-
var _a;
|
|
139
|
-
setList(list === null || list === void 0 ? void 0 : list.concat((_a = res === null || res === void 0 ? void 0 : res.recList) !== null && _a !== void 0 ? _a : []));
|
|
140
|
-
setIsLoadMore(false);
|
|
141
|
-
}));
|
|
142
|
-
}, [waterFallData, getRecommendVideos, list, isLoadMore]);
|
|
143
130
|
useEffect(() => {
|
|
144
131
|
var _a, _b;
|
|
145
132
|
setIsLoadingData(true);
|
|
@@ -151,8 +138,20 @@ export default function WaterfallList(_a) {
|
|
|
151
138
|
}).then((res) => {
|
|
152
139
|
var _a, _b;
|
|
153
140
|
setData(res);
|
|
154
|
-
|
|
141
|
+
const list = (_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : [];
|
|
142
|
+
setList(list);
|
|
155
143
|
setIsLoadingData(false);
|
|
144
|
+
const products = [];
|
|
145
|
+
list === null || list === void 0 ? void 0 : list.forEach((item) => {
|
|
146
|
+
var _a, _b;
|
|
147
|
+
products.push(...((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) !== null && _b !== void 0 ? _b : []));
|
|
148
|
+
});
|
|
149
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
150
|
+
eventName: 'PageView',
|
|
151
|
+
product: products,
|
|
152
|
+
rec: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec,
|
|
153
|
+
position: cacheActiveIndex
|
|
154
|
+
});
|
|
156
155
|
}));
|
|
157
156
|
if (isOpenHashTag) {
|
|
158
157
|
const res = previewData;
|
|
@@ -112,7 +112,7 @@ const WaterfallFlowItem = (props) => {
|
|
|
112
112
|
export default function WaterfallList(_a) {
|
|
113
113
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
|
114
114
|
var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
|
|
115
|
-
const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = useSxpDataSource();
|
|
115
|
+
const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex, bffFbReport } = useSxpDataSource();
|
|
116
116
|
const { jumpToWeb } = useEventReport();
|
|
117
117
|
const scrollParent = useRef(null);
|
|
118
118
|
const [scrollTop, setScrollTop] = useState(0);
|
|
@@ -217,8 +217,20 @@ export default function WaterfallList(_a) {
|
|
|
217
217
|
}).then((res) => {
|
|
218
218
|
var _a, _b;
|
|
219
219
|
setData(res);
|
|
220
|
-
|
|
220
|
+
const list = (_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : [];
|
|
221
|
+
setList(list);
|
|
221
222
|
setIsLoadingData(false);
|
|
223
|
+
const products = [];
|
|
224
|
+
list === null || list === void 0 ? void 0 : list.forEach((item) => {
|
|
225
|
+
var _a, _b;
|
|
226
|
+
products.push(...((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) !== null && _b !== void 0 ? _b : []));
|
|
227
|
+
});
|
|
228
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
229
|
+
eventName: 'PageView',
|
|
230
|
+
product: products,
|
|
231
|
+
rec: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec,
|
|
232
|
+
position: cacheActiveIndex
|
|
233
|
+
});
|
|
222
234
|
}));
|
|
223
235
|
if (isOpenHashTag) {
|
|
224
236
|
const res = previewData;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './index.less';
|
|
3
|
+
import { RecItemType } from '../typing';
|
|
3
4
|
import { IHashTagProps } from '../../../../materials/sxp/HashTag';
|
|
4
5
|
interface IWaterFallProps {
|
|
6
|
+
rec?: RecItemType;
|
|
5
7
|
}
|
|
6
8
|
declare const _default: React.NamedExoticComponent<IWaterFallProps & IHashTagProps>;
|
|
7
9
|
export default _default;
|
|
@@ -77,11 +77,8 @@ const WaterFall = (props) => {
|
|
|
77
77
|
useEffect(() => {
|
|
78
78
|
if (openHashtag) {
|
|
79
79
|
setViewTime(new Date());
|
|
80
|
-
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
81
|
-
eventName: 'PageView'
|
|
82
|
-
});
|
|
83
80
|
}
|
|
84
|
-
}, [openHashtag
|
|
81
|
+
}, [openHashtag]);
|
|
85
82
|
useEffect(() => {
|
|
86
83
|
const initTime = () => {
|
|
87
84
|
setViewTime(new Date());
|
|
@@ -94,7 +94,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
|
|
|
94
94
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
|
95
95
|
}, [data, ctaType, swiperRef]);
|
|
96
96
|
const handleSessionCompleted = useCallback((fk) => {
|
|
97
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
97
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
|
|
98
98
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
|
99
99
|
let fromKName = '';
|
|
100
100
|
if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
|
|
@@ -129,7 +129,16 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
|
|
|
129
129
|
traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : ''
|
|
130
130
|
}
|
|
131
131
|
});
|
|
132
|
-
|
|
132
|
+
const isPostType = ((_w = item === null || item === void 0 ? void 0 : item.video) === null || _w === void 0 ? void 0 : _w.url) || ((_y = (_x = item === null || item === void 0 ? void 0 : item.video) === null || _x === void 0 ? void 0 : _x.imgUrls) === null || _y === void 0 ? void 0 : _y.length);
|
|
133
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
134
|
+
eventName: 'ExitFeed',
|
|
135
|
+
product: isPostType ? (_z = item === null || item === void 0 ? void 0 : item.video) === null || _z === void 0 ? void 0 : _z.bindProducts : (item === null || item === void 0 ? void 0 : item.product) ? [item === null || item === void 0 ? void 0 : item.product] : [],
|
|
136
|
+
rec: item,
|
|
137
|
+
position: activeIndex,
|
|
138
|
+
content_id: isPostType ? (_1 = (_0 = item === null || item === void 0 ? void 0 : item.video) === null || _0 === void 0 ? void 0 : _0.itemId) !== null && _1 !== void 0 ? _1 : '' : (_3 = (_2 = item === null || item === void 0 ? void 0 : item.product) === null || _2 === void 0 ? void 0 : _2.itemId) !== null && _3 !== void 0 ? _3 : '',
|
|
139
|
+
view_time: new Date() - viewTime.current
|
|
140
|
+
});
|
|
141
|
+
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime, bffFbReport]);
|
|
133
142
|
useEffect(() => {
|
|
134
143
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
|
135
144
|
const visibleChange = () => {
|
|
@@ -429,48 +438,79 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
|
|
|
429
438
|
}
|
|
430
439
|
};
|
|
431
440
|
const handleScrollEvent = (swiper) => {
|
|
432
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
441
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12;
|
|
433
442
|
const item = data[swiper.previousIndex];
|
|
443
|
+
const activeItem = data[swiper.activeIndex];
|
|
434
444
|
if (!item)
|
|
435
445
|
return;
|
|
436
446
|
let contentFormat = null;
|
|
437
|
-
|
|
447
|
+
let previousContentType = 'post';
|
|
448
|
+
let previousContentId = (_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '';
|
|
449
|
+
let previousProduct = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProducts;
|
|
450
|
+
let previousContentsName = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.title) !== null && _e !== void 0 ? _e : '';
|
|
451
|
+
let previousDirection = '';
|
|
452
|
+
let contentId = (_g = (_f = activeItem === null || activeItem === void 0 ? void 0 : activeItem.video) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '';
|
|
453
|
+
if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
|
|
438
454
|
contentFormat = 'video';
|
|
439
455
|
}
|
|
440
|
-
else if ((
|
|
456
|
+
else if ((_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.imgUrls) === null || _k === void 0 ? void 0 : _k.length) {
|
|
441
457
|
contentFormat = 'image';
|
|
442
458
|
}
|
|
459
|
+
else {
|
|
460
|
+
previousContentType = 'product';
|
|
461
|
+
previousContentId = (_m = (_l = item === null || item === void 0 ? void 0 : item.product) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '';
|
|
462
|
+
previousProduct = (item === null || item === void 0 ? void 0 : item.product) ? [item === null || item === void 0 ? void 0 : item.product] : [];
|
|
463
|
+
previousContentsName = (_p = (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.title) !== null && _p !== void 0 ? _p : '';
|
|
464
|
+
}
|
|
465
|
+
if (!((_q = activeItem === null || activeItem === void 0 ? void 0 : activeItem.video) === null || _q === void 0 ? void 0 : _q.url) && !((_s = (_r = activeItem === null || activeItem === void 0 ? void 0 : activeItem.video) === null || _r === void 0 ? void 0 : _r.imgUrls) === null || _s === void 0 ? void 0 : _s.length)) {
|
|
466
|
+
contentId = (_u = (_t = activeItem === null || activeItem === void 0 ? void 0 : activeItem.product) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '';
|
|
467
|
+
}
|
|
443
468
|
if (swiper.previousIndex - swiper.activeIndex < 0) {
|
|
444
469
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
445
470
|
eventInfo: {
|
|
446
471
|
eventSubject: 'scrollDown',
|
|
447
472
|
eventDescription: 'User scroll down',
|
|
448
|
-
contentId: (
|
|
449
|
-
productId: (
|
|
473
|
+
contentId: (_w = (_v = item === null || item === void 0 ? void 0 : item.video) === null || _v === void 0 ? void 0 : _v.itemId) !== null && _w !== void 0 ? _w : '',
|
|
474
|
+
productId: (_y = (_x = item === null || item === void 0 ? void 0 : item.product) === null || _x === void 0 ? void 0 : _x.itemId) !== null && _y !== void 0 ? _y : '',
|
|
450
475
|
requestId: null,
|
|
451
|
-
traceInfo: (
|
|
476
|
+
traceInfo: (_2 = (_0 = (_z = item === null || item === void 0 ? void 0 : item.video) === null || _z === void 0 ? void 0 : _z.traceInfo) !== null && _0 !== void 0 ? _0 : (_1 = item === null || item === void 0 ? void 0 : item.product) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : '',
|
|
452
477
|
contentFormat,
|
|
453
|
-
position: ((
|
|
478
|
+
position: ((_3 = swiper.previousIndex) !== null && _3 !== void 0 ? _3 : 0) + ''
|
|
454
479
|
}
|
|
455
480
|
});
|
|
456
481
|
handleViewImageStartEnd(item);
|
|
457
482
|
handleSlideSkip(item, swiper.previousIndex);
|
|
483
|
+
previousDirection = 'up';
|
|
458
484
|
}
|
|
459
485
|
else {
|
|
460
486
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
461
487
|
eventInfo: {
|
|
462
488
|
eventSubject: 'scrollUp',
|
|
463
489
|
eventDescription: 'User scroll up',
|
|
464
|
-
contentId: (
|
|
465
|
-
productId: (
|
|
490
|
+
contentId: (_5 = (_4 = item === null || item === void 0 ? void 0 : item.video) === null || _4 === void 0 ? void 0 : _4.itemId) !== null && _5 !== void 0 ? _5 : '',
|
|
491
|
+
productId: (_7 = (_6 = item.product) === null || _6 === void 0 ? void 0 : _6.itemId) !== null && _7 !== void 0 ? _7 : '',
|
|
466
492
|
requestId: null,
|
|
467
|
-
traceInfo: (
|
|
493
|
+
traceInfo: (_11 = (_9 = (_8 = item === null || item === void 0 ? void 0 : item.video) === null || _8 === void 0 ? void 0 : _8.traceInfo) !== null && _9 !== void 0 ? _9 : (_10 = item === null || item === void 0 ? void 0 : item.product) === null || _10 === void 0 ? void 0 : _10.traceInfo) !== null && _11 !== void 0 ? _11 : '',
|
|
468
494
|
contentFormat,
|
|
469
|
-
position: ((
|
|
495
|
+
position: ((_12 = swiper.previousIndex) !== null && _12 !== void 0 ? _12 : 0) + ''
|
|
470
496
|
}
|
|
471
497
|
});
|
|
472
498
|
handleViewImageStartEnd(item);
|
|
473
|
-
|
|
499
|
+
previousDirection = 'down';
|
|
500
|
+
}
|
|
501
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
502
|
+
eventName: 'ContentSwipe',
|
|
503
|
+
product: previousProduct,
|
|
504
|
+
rec: activeItem,
|
|
505
|
+
position: swiper.activeIndex,
|
|
506
|
+
previous_content_id: previousContentId,
|
|
507
|
+
previous_content_type: previousContentType,
|
|
508
|
+
previous_contents_name: previousContentsName,
|
|
509
|
+
previosu_position: swiper.previousIndex,
|
|
510
|
+
swipe_direction: previousDirection,
|
|
511
|
+
view_time: new Date() - viewTime.current,
|
|
512
|
+
content_id: contentId
|
|
513
|
+
});
|
|
474
514
|
handleReportProductView(item);
|
|
475
515
|
viewTime.current = new Date();
|
|
476
516
|
};
|
|
@@ -571,11 +611,15 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
|
|
|
571
611
|
if (enableCapi) {
|
|
572
612
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
573
613
|
eventName: 'ViewContent',
|
|
574
|
-
product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.
|
|
614
|
+
product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProducts,
|
|
615
|
+
rec: item,
|
|
616
|
+
position: activeIndex
|
|
575
617
|
});
|
|
576
618
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
577
619
|
eventName: 'PageView',
|
|
578
|
-
product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.
|
|
620
|
+
product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProducts,
|
|
621
|
+
rec: item,
|
|
622
|
+
position: activeIndex
|
|
579
623
|
});
|
|
580
624
|
}
|
|
581
625
|
}
|
|
@@ -693,7 +737,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
|
|
|
693
737
|
renderView,
|
|
694
738
|
renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
|
|
695
739
|
renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
|
|
696
|
-
React.createElement(WaterFall, Object.assign({}, (_u = (_t = (_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _s === void 0 ? void 0 : _s[0]) === null || _t === void 0 ? void 0 : _t.item) === null || _u === void 0 ? void 0 : _u.props)),
|
|
740
|
+
React.createElement(WaterFall, Object.assign({}, (_u = (_t = (_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _s === void 0 ? void 0 : _s[0]) === null || _t === void 0 ? void 0 : _t.item) === null || _u === void 0 ? void 0 : _u.props, { rec: visList[activeIndex] })),
|
|
697
741
|
React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
|
|
698
742
|
openMultiPosts && (React.createElement(MultiPosts, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: bottomHeight + 'px' } }))))),
|
|
699
743
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
|
|
@@ -12,6 +12,7 @@ export interface IEventTimeType {
|
|
|
12
12
|
time: Date;
|
|
13
13
|
target: EventTarget;
|
|
14
14
|
}
|
|
15
|
+
export type ICapiEventNameType = 'PageView' | 'ProductView' | 'ViewContent' | 'ClickCTA' | 'ContentSwipe' | 'Engagement' | 'ExitFeed';
|
|
15
16
|
export interface ISxpDataSourceContext {
|
|
16
17
|
rtcList: RecItemType[];
|
|
17
18
|
setRtcList?: React.Dispatch<React.SetStateAction<RecItemType[]>>;
|
|
@@ -51,7 +52,7 @@ export interface ISxpDataSourceContext {
|
|
|
51
52
|
sxpParameter?: PageData['sxp_parameter'];
|
|
52
53
|
waterFallData?: IWaterFallDataType;
|
|
53
54
|
setWaterFallData?: React.Dispatch<React.SetStateAction<IWaterFallDataType | undefined>>;
|
|
54
|
-
ctaEvent?: (eventInfo: any, rec?: RecItemType, product?: ProductInfoType | VideoInfoType | null, number?: number) => void;
|
|
55
|
+
ctaEvent?: (eventInfo: any, rec?: RecItemType, product?: ProductInfoType | VideoInfoType | null, number?: number, ctaActionType?: 'open_internal_popup' | 'open_external_link', targetUrl?: string | null, contentType?: 'product' | 'post') => void;
|
|
55
56
|
swiperRef?: any;
|
|
56
57
|
openHashtag?: boolean;
|
|
57
58
|
setOpenHashtag?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
@@ -72,8 +73,12 @@ export interface ISxpDataSourceContext {
|
|
|
72
73
|
videoRef?: any;
|
|
73
74
|
setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
|
|
74
75
|
bffFbReport?: (body: {
|
|
75
|
-
eventName:
|
|
76
|
-
product?:
|
|
76
|
+
eventName: ICapiEventNameType;
|
|
77
|
+
product?: ProductInfoType[];
|
|
78
|
+
contentType?: 'product' | 'post';
|
|
79
|
+
rec?: RecItemType;
|
|
80
|
+
position?: number;
|
|
81
|
+
[key: string]: any;
|
|
77
82
|
}) => void;
|
|
78
83
|
curTime?: any;
|
|
79
84
|
h5EnterLink?: () => void;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __awaiter } from "tslib";
|
|
1
|
+
import { __awaiter, __rest } from "tslib";
|
|
2
2
|
import React, { createContext, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import qs from 'qs';
|
|
4
4
|
import { cloneDeep } from 'lodash';
|
|
@@ -7,7 +7,7 @@ import { storeAndLoadFeUserId, AGREE_POLICY } from '../utils/localStore';
|
|
|
7
7
|
import { useIconLink } from '../components/SxpPageRender/useIconLink';
|
|
8
8
|
import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../utils/event';
|
|
9
9
|
import Consent from '../components/Consent';
|
|
10
|
-
import { getCookie, splitUrlParams } from '../utils/tool';
|
|
10
|
+
import { getCookie, getUrlParamByKey, splitUrlParams } from '../utils/tool';
|
|
11
11
|
export const SxpDataSourceContext = createContext({
|
|
12
12
|
rtcList: [],
|
|
13
13
|
tagList: []
|
|
@@ -532,19 +532,45 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
532
532
|
playbookType,
|
|
533
533
|
bffDataSource
|
|
534
534
|
]);
|
|
535
|
-
const getEventParamsByJson = useCallback((
|
|
536
|
-
var
|
|
535
|
+
const getEventParamsByJson = useCallback((_a) => {
|
|
536
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
537
|
+
var { json, product = [], rec, contentType = 'post', position, eventName } = _a, props = __rest(_a, ["json", "product", "rec", "contentType", "position", "eventName"]);
|
|
537
538
|
const jsonParams = cloneDeep(json);
|
|
538
539
|
const urlParams = new URLSearchParams(window.location.search);
|
|
539
540
|
const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
|
|
540
541
|
const fix_par = {
|
|
541
|
-
event_source_url: (
|
|
542
|
+
event_source_url: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href,
|
|
542
543
|
external_id: fakeUserId,
|
|
543
|
-
client_user_agent: (
|
|
544
|
+
client_user_agent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '',
|
|
544
545
|
fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
|
|
545
546
|
fbp: getCookie('_fbp') ? `${getCookie('_fbp')}` : '',
|
|
546
547
|
time: Math.floor(Date.now() / 1000)
|
|
547
548
|
};
|
|
549
|
+
let customData = Object.assign({ content_ids: [(_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.itemId, ...((_f = product === null || product === void 0 ? void 0 : product.map((item) => item === null || item === void 0 ? void 0 : item.itemId)) !== null && _f !== void 0 ? _f : [])], content_type: contentType, content_name: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.title, total_posts: rtcList === null || rtcList === void 0 ? void 0 : rtcList.length, position, currency: (_h = product === null || product === void 0 ? void 0 : product[0]) === null || _h === void 0 ? void 0 : _h.currency, contents: (_j = product === null || product === void 0 ? void 0 : product.map((item) => ({
|
|
550
|
+
item_id: item === null || item === void 0 ? void 0 : item.itemId,
|
|
551
|
+
item_price: item === null || item === void 0 ? void 0 : item.price
|
|
552
|
+
}))) !== null && _j !== void 0 ? _j : [], image_urls: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) !== null && _l !== void 0 ? _l : [], video_urls: (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.url, headline: getUrlParamByKey('headline'), scene: getUrlParamByKey('scene'), campaign_id: getUrlParamByKey('campaign_id'), ad_id: getUrlParamByKey('ad_id'), utm_source: getUrlParamByKey('utm_source'), utm_medium: getUrlParamByKey('utm_medium'), utm_campaign: getUrlParamByKey('utm_campaign'), utm_content: getUrlParamByKey('utm_content') }, props);
|
|
553
|
+
if (!((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.url) && !((_q = (_p = rec === null || rec === void 0 ? void 0 : rec.video) === null || _p === void 0 ? void 0 : _p.imgUrls) === null || _q === void 0 ? void 0 : _q.length) && (rec === null || rec === void 0 ? void 0 : rec.product) && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _r === void 0 ? void 0 : _r.length) > 0) {
|
|
554
|
+
const product = rec === null || rec === void 0 ? void 0 : rec.product;
|
|
555
|
+
const productCustomData = {
|
|
556
|
+
content_ids: [product === null || product === void 0 ? void 0 : product.itemId],
|
|
557
|
+
content_type: 'product',
|
|
558
|
+
content_name: product === null || product === void 0 ? void 0 : product.title,
|
|
559
|
+
contents: [{
|
|
560
|
+
item_id: product === null || product === void 0 ? void 0 : product.itemId,
|
|
561
|
+
item_price: product === null || product === void 0 ? void 0 : product.price
|
|
562
|
+
}],
|
|
563
|
+
image_urls: (_s = product.homePage) !== null && _s !== void 0 ? _s : []
|
|
564
|
+
};
|
|
565
|
+
customData = Object.assign(Object.assign({}, customData), productCustomData);
|
|
566
|
+
}
|
|
567
|
+
if (eventName === 'ContentSwipe' || eventName === 'Engagement' || eventName === 'ExitFeed') {
|
|
568
|
+
const deleteKeys = ['content_ids', 'content_category', 'currency', 'contents', 'image_urls', 'video_urls', 'prompt'];
|
|
569
|
+
deleteKeys.forEach(key => {
|
|
570
|
+
if (customData === null || customData === void 0 ? void 0 : customData[key])
|
|
571
|
+
delete customData[key];
|
|
572
|
+
});
|
|
573
|
+
}
|
|
548
574
|
const regex = /\{\{(.*?)\}\}/g;
|
|
549
575
|
const getEventParams = (obj) => {
|
|
550
576
|
if (!obj)
|
|
@@ -557,6 +583,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
557
583
|
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
558
584
|
const value = obj === null || obj === void 0 ? void 0 : obj[key];
|
|
559
585
|
if (typeof value === 'object') {
|
|
586
|
+
if (key === 'custom_data') {
|
|
587
|
+
obj[key] = customData !== null && customData !== void 0 ? customData : {};
|
|
588
|
+
}
|
|
560
589
|
getEventParams(value);
|
|
561
590
|
}
|
|
562
591
|
else if (typeof value === 'string') {
|
|
@@ -566,7 +595,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
566
595
|
var _a;
|
|
567
596
|
const prop = match.substring(2, match.length - 2);
|
|
568
597
|
try {
|
|
569
|
-
let replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
|
|
598
|
+
let replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product === null || product === void 0 ? void 0 : product[0]);
|
|
570
599
|
if (replaceValue) {
|
|
571
600
|
if ((prop === null || prop === void 0 ? void 0 : prop.indexOf('currency')) !== -1 &&
|
|
572
601
|
(replaceValue === null || replaceValue === void 0 ? void 0 : replaceValue.indexOf('-')) !== -1 &&
|
|
@@ -591,15 +620,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
591
620
|
}
|
|
592
621
|
};
|
|
593
622
|
getEventParams(jsonParams);
|
|
623
|
+
console.log('capi event params:', jsonParams);
|
|
594
624
|
return jsonParams;
|
|
595
|
-
}, [fakeUserId]);
|
|
596
|
-
const bffFbReport = useCallback((
|
|
597
|
-
var
|
|
625
|
+
}, [fakeUserId, globalConfig, rtcList]);
|
|
626
|
+
const bffFbReport = useCallback((_a) => {
|
|
627
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
628
|
+
var { eventName } = _a, props = __rest(_a, ["eventName"]);
|
|
598
629
|
if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) || getTargetingCookie()) {
|
|
599
630
|
return;
|
|
600
631
|
}
|
|
601
632
|
let isPushState = false;
|
|
602
|
-
const pixelEventParamsJson = (
|
|
633
|
+
const pixelEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.pixel) === null || _b === void 0 ? void 0 : _b[eventName];
|
|
603
634
|
if ((pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
|
|
604
635
|
function updateQueryStringParameter(uri, key, value) {
|
|
605
636
|
const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
|
|
@@ -623,39 +654,39 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
623
654
|
}
|
|
624
655
|
}
|
|
625
656
|
else {
|
|
626
|
-
window === null || window === void 0 ? void 0 : window.fbq('track', pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name, getEventParamsByJson(pixelEventParamsJson,
|
|
657
|
+
window === null || window === void 0 ? void 0 : window.fbq('track', pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name, getEventParamsByJson(Object.assign({ json: pixelEventParamsJson, eventName }, props)));
|
|
627
658
|
}
|
|
628
659
|
}
|
|
629
660
|
if (!isPushState) {
|
|
630
661
|
if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
|
|
631
662
|
window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
|
|
632
663
|
}
|
|
633
|
-
const tiktokPixelEventParamsJson = (
|
|
664
|
+
const tiktokPixelEventParamsJson = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.tiktokPixel) === null || _c === void 0 ? void 0 : _c[eventName];
|
|
634
665
|
if ((tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name) &&
|
|
635
666
|
typeof (window === null || window === void 0 ? void 0 : window.ttq) === 'object' &&
|
|
636
|
-
typeof ((
|
|
637
|
-
(
|
|
667
|
+
typeof ((_d = window === null || window === void 0 ? void 0 : window.ttq) === null || _d === void 0 ? void 0 : _d.track) === 'function') {
|
|
668
|
+
(_e = window === null || window === void 0 ? void 0 : window.ttq) === null || _e === void 0 ? void 0 : _e.track(tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name, getEventParamsByJson(Object.assign({ json: tiktokPixelEventParamsJson, eventName }, props)));
|
|
638
669
|
}
|
|
639
670
|
}
|
|
640
|
-
const snapchatPixelEventParamsJson = (
|
|
671
|
+
const snapchatPixelEventParamsJson = (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.snapchatPixel) === null || _f === void 0 ? void 0 : _f[eventName];
|
|
641
672
|
if ((snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.snaptr) === 'function') {
|
|
642
|
-
window === null || window === void 0 ? void 0 : window.snaptr('track', snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name, getEventParamsByJson(snapchatPixelEventParamsJson,
|
|
673
|
+
window === null || window === void 0 ? void 0 : window.snaptr('track', snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name, getEventParamsByJson(Object.assign({ json: snapchatPixelEventParamsJson, eventName }, props)));
|
|
643
674
|
}
|
|
644
|
-
if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.Northbeam) === 'object' && typeof ((
|
|
645
|
-
(
|
|
675
|
+
if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.Northbeam) === 'object' && typeof ((_g = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _g === void 0 ? void 0 : _g.trackPageView) === 'function') {
|
|
676
|
+
(_h = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _h === void 0 ? void 0 : _h.trackPageView();
|
|
646
677
|
}
|
|
647
|
-
const converApiEventParamsJson = (
|
|
678
|
+
const converApiEventParamsJson = (_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _j === void 0 ? void 0 : _j[eventName];
|
|
648
679
|
if (enabledMetaConversionApi && converApiEventParamsJson) {
|
|
649
|
-
const body = getEventParamsByJson(converApiEventParamsJson,
|
|
680
|
+
const body = getEventParamsByJson(Object.assign({ json: converApiEventParamsJson, eventName }, props));
|
|
650
681
|
const params = {};
|
|
651
682
|
const queryString = location.search.slice(1);
|
|
652
|
-
(
|
|
683
|
+
(_k = splitUrlParams(queryString)) === null || _k === void 0 ? void 0 : _k.forEach((val) => {
|
|
653
684
|
const key = val.split('=')[0];
|
|
654
685
|
const value = val.split('=')[1];
|
|
655
686
|
params[key] = value;
|
|
656
687
|
});
|
|
657
688
|
const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
|
|
658
|
-
bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(
|
|
689
|
+
bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_l = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _l === void 0 ? void 0 : _l['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
|
|
659
690
|
method: 'POST',
|
|
660
691
|
body,
|
|
661
692
|
type: 'beacon'
|
|
@@ -692,7 +723,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
692
723
|
console.log('e', e);
|
|
693
724
|
}
|
|
694
725
|
}), [bffFetch, utmVal]);
|
|
695
|
-
const ctaEvent = useCallback((eventInfo, rec, product, position) => {
|
|
726
|
+
const ctaEvent = useCallback((eventInfo, rec, product, position, ctaActionType, targetUrl, contentType) => {
|
|
696
727
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
|
|
697
728
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
|
698
729
|
const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
|
|
@@ -713,34 +744,36 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
713
744
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
714
745
|
eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_10 = (_7 = (_2 = (_y = (_v = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _v !== void 0 ? _v : (_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindCta) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_1 = (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindProduct) === null || _0 === void 0 ? void 0 : _0.bindCta) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : (_6 = (_5 = (_4 = (_3 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _3 === void 0 ? void 0 : _3.bindProducts) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.bindCta) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : '', fromKName, fromKPage: (_11 = location === null || location === void 0 ? void 0 : location.href) !== null && _11 !== void 0 ? _11 : '', contentFormat })
|
|
715
746
|
});
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
747
|
+
if ((eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject) === 'clickCta') {
|
|
748
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
749
|
+
eventName: 'ClickCTA',
|
|
750
|
+
product: product ? [product] : undefined,
|
|
751
|
+
contentType: contentType !== null && contentType !== void 0 ? contentType : 'post',
|
|
752
|
+
rec,
|
|
753
|
+
position,
|
|
754
|
+
cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
|
|
755
|
+
cta_action_type: ctaActionType,
|
|
756
|
+
target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
|
|
757
|
+
target_url: targetUrl
|
|
758
|
+
});
|
|
728
759
|
}
|
|
729
|
-
|
|
760
|
+
}, [bffEventReport, isFromHashtag, bffFbReport]);
|
|
761
|
+
const h5EnterLink = useCallback(() => {
|
|
762
|
+
var _a, _b;
|
|
730
763
|
const time = new Date();
|
|
731
764
|
curTime.current = time;
|
|
732
765
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
733
766
|
eventInfo: {
|
|
734
767
|
eventSubject: 'h5LinkEnterFeed',
|
|
735
768
|
eventDescription: 'User enter h5 link',
|
|
736
|
-
utmSource:
|
|
737
|
-
utmMedium:
|
|
738
|
-
utmCampaign:
|
|
739
|
-
utmId:
|
|
740
|
-
utmContent:
|
|
769
|
+
utmSource: getUrlParamByKey('utm_source'),
|
|
770
|
+
utmMedium: getUrlParamByKey('utm_medium'),
|
|
771
|
+
utmCampaign: getUrlParamByKey('utm_campaign'),
|
|
772
|
+
utmId: getUrlParamByKey('utm_id'),
|
|
773
|
+
utmContent: getUrlParamByKey('utm_content'),
|
|
741
774
|
enterTime: Math.floor(time / 1000) + '',
|
|
742
775
|
requestId: null,
|
|
743
|
-
enterUrl: (
|
|
776
|
+
enterUrl: (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : ''
|
|
744
777
|
},
|
|
745
778
|
reportLayId: false
|
|
746
779
|
});
|
package/es/core/utils/tool.d.ts
CHANGED
|
@@ -15,4 +15,5 @@ declare function getScreenReader(): boolean;
|
|
|
15
15
|
declare function splitUrlParams(urlParams: string): string[] | undefined;
|
|
16
16
|
declare function deleteCookie(name: string, path?: string, domain?: string): void;
|
|
17
17
|
declare function setCookie(name: string, value: string, days?: number, path?: string, domain?: string, secure?: boolean, sameSite?: string): void;
|
|
18
|
-
|
|
18
|
+
declare function getUrlParamByKey(key: string): any;
|
|
19
|
+
export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, splitUrlParams, deleteCookie, setCookie, getUrlParamByKey };
|