pb-sxp-ui 1.20.2 → 1.20.3

package/es/core/utils/tool.js

@@ -219,4 +219,18 @@ function setCookie(name, value, days = 0, path = '/', domain = '', secure = fals
     }
     document.cookie = cookieString;
 }
-export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, splitUrlParams, deleteCookie, setCookie };
+function getUrlParamByKey(key) {
+    var _a, _b;
+    const queryString = location.search.slice(1);
+    const params = {};
+    (_a = splitUrlParams(queryString.replace(/\+/g, '%2B'))) === null || _a === void 0 ? void 0 : _a.map((val) => {
+        const key = val.split('=')[0];
+        const value = val.split('=')[1];
+        params[key] = value;
+    });
+    for (const key in params) {
+        params[key] = params[key].replace(/%2B/g, '+');
+    }
+    return (_b = params[key]) !== null && _b !== void 0 ? _b : '';
+}
+export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader, splitUrlParams, deleteCookie, setCookie, getUrlParamByKey };

package/es/materials/sxp/cta/AniLink/index.js

@@ -1,10 +1,10 @@
 import { __rest } from "tslib";
 import { css } from '@emotion/css';
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 import { setFontForText } from '../../../../core/utils/tool';
-import styles from './index.module.less';
 import useOnScreen from '../../../../core/hooks/useOnScreen';
 const AniLink = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -19,17 +19,17 @@ const AniLink = (_a) => {
     const handleTo = (e) => {
         var _a, _b, _c, _d;
         const item = ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video);
+        const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, recData, item, index);
+        }, recData, item, index, (isExternalLink && !!link) ? 'open_external_link' : 'open_internal_popup', link);
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
         if (isExternalLink) {
-            const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
-            if (link) {
-                jumpToWeb(e, recData, product, cta, index);
-                window.location.href = window.getJointUtmLink(link);
-            }
+            if (!link)
+                return;
+            jumpToWeb(e, recData, product, cta, index);
+            window.location.href = window.getJointUtmLink(link);
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();

package/es/materials/sxp/cta/AniLinkPopup/index.js

@@ -1,11 +1,11 @@
 import { __rest } from "tslib";
 import { css } from '@emotion/css';
 import React, { memo, useEffect, useMemo, useState } from 'react';
+import Img from '../../template/components/Img';
+import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
-import Img from '../../template/components/Img';
 import { setFontForText } from '../../../../core/utils/tool';
-import styles from './index.module.less';
 const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
 const AniLinkPopup = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
@@ -19,17 +19,17 @@ const AniLinkPopup = (_a) => {
     const handleTo = (e) => {
         var _a, _b, _c, _d;
         const item = ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video);
+        const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, recData, item, index);
+        }, recData, item, index, (isExternalLink && !!link) ? 'open_external_link' : 'open_internal_popup', link);
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
         if (isExternalLink) {
-            const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
-            if (link) {
-                jumpToWeb(e, recData, product, cta, index);
-                window.location.href = window.getJointUtmLink(link);
-            }
+            if (!link)
+                return;
+            jumpToWeb(e, recData, product, cta, index);
+            window.location.href = window.getJointUtmLink(link);
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
@@ -63,8 +63,8 @@ const AniLinkPopup = (_a) => {
             height: '40px',
             lineHeight: '40px',
             paddingLeft: '6px'
-        } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${css(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${styles['aniLinkPopup']} ${aniNamStyle}  ${css(aniTimStyle)}`, onClick: handleTo }),
-        React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
+        } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${css(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${styles.aniLinkPopup} ${aniNamStyle}  ${css(aniTimStyle)}`, onClick: handleTo }),
+        React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style.padding) !== null && _s !== void 0 ? _s : 0 } },
             React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
         React.createElement(Img, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {

package/es/materials/sxp/popup/CommodityDetail/index.js

@@ -45,7 +45,7 @@ const CommodityDetail = (_a) => {
                 ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                     eventSubject: 'clickCta',
                     eventDescription: 'User clicked the CTA'
-                }, data, product, position);
+                }, data, product, position, 'open_external_link', product.link, 'product');
             }
             window.location.href = window.getJointUtmLink(product.link);
         }
@@ -55,11 +55,17 @@ const CommodityDetail = (_a) => {
             return;
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'ProductView',
-            product
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: data,
+            position
         });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'PageView',
-            product
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: data,
+            position
         });
     }, [isActive, bffFbReport]);
     useEffect(() => {

package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -49,7 +49,7 @@ const CommodityDetailDiroNew = (_a) => {
                 ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                     eventSubject: 'clickCta',
                     eventDescription: 'User clicked the CTA'
-                }, data, product, position);
+                }, data, product, position, 'open_external_link', product.link, 'product');
             }
             window.location.href = window.getJointUtmLink(product.link);
         }
@@ -59,11 +59,17 @@ const CommodityDetailDiroNew = (_a) => {
             return;
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'ProductView',
-            product
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: data,
+            position
         });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'PageView',
-            product
+            product: product ? [product] : undefined,
+            contentType: 'product',
+            rec: data,
+            position
         });
     }, [isActive, bffFbReport]);
     useEffect(() => {

package/es/materials/sxp/popup/CommodityList/index.js

@@ -30,13 +30,13 @@ const CommodityList = (_a) => {
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, recData, item, index);
+        }, recData, item, index, isExternalLink && !!(item === null || item === void 0 ? void 0 : item.link) ? 'open_external_link' : 'open_internal_popup', item.link, 'product');
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index, multiCheckIndex }));
         if (isExternalLink) {
-            if (item === null || item === void 0 ? void 0 : item.link) {
-                jumpToWeb(e, recData, item, item.bindCta, index);
-                window.location.href = window.getJointUtmLink(item.link);
-            }
+            if (!(item === null || item === void 0 ? void 0 : item.link))
+                return;
+            jumpToWeb(e, recData, item, item.bindCta, index);
+            window.location.href = window.getJointUtmLink(item.link);
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
@@ -44,7 +44,11 @@ const CommodityList = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     useEffect(() => {
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-            eventName: 'PageView'
+            eventName: 'PageView',
+            product: (product !== null && product !== void 0 ? product : []),
+            contentType: 'product',
+            rec: recData,
+            position: index
         });
     }, []);
     return (React.createElement("ul", { role: 'list', className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {

package/es/materials/sxp/template/components/EventProvider.js

@@ -13,22 +13,22 @@ const EventProvider = (_a) => {
     const handleClick = throttle((e) => {
         var _a, _b, _c, _d, _e, _f;
         e.preventDefault();
-        const item = multItem ? multItem : (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
+        const item = multItem || ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video);
+        const link = ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) || (multItem === null || multItem === void 0 ? void 0 : multItem.link);
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, rec, item, index);
+        }, rec, item, index, isExternalLink && (jumpLink || !!link) ? 'open_external_link' : 'open_internal_popup', link);
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(multItem && multiCheckIndex !== undefined && multiCheckIndex >= 0
             ? Object.assign(Object.assign({}, rec), { video: Object.assign(Object.assign({}, rec === null || rec === void 0 ? void 0 : rec.video), { bindProduct: multItem }), index, multiCheckIndex }) : Object.assign(Object.assign({}, rec), { index }));
         setElement(ref === null || ref === void 0 ? void 0 : ref.current);
         if (isExternalLink) {
-            const link = ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) || (multItem === null || multItem === void 0 ? void 0 : multItem.link);
-            if (jumpLink || link) {
-                const cta = ((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta) || (multItem === null || multItem === void 0 ? void 0 : multItem.bindCta);
-                const product = ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct) || multItem;
-                jumpToWeb(e, rec, product, cta, index);
-                window.location.href = window.getJointUtmLink(jumpLink || link || '');
-            }
+            if (!jumpLink && !link)
+                return;
+            const cta = ((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta) || (multItem === null || multItem === void 0 ? void 0 : multItem.bindCta);
+            const product = ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct) || multItem;
+            jumpToWeb(e, rec, product, cta, index);
+            window.location.href = window.getJointUtmLink(link);
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();

package/lib/core/components/SxpPageRender/LikeButton/index.js

@@ -10,12 +10,12 @@ const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
 const LikeButton = (_a) => {
     var _b;
     var { active, activeIcon, unActicveIcon, recData, position } = _a, props = tslib_1.__rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
-    const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = (0, hooks_1.useSxpDataSource)();
+    const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList, bffFbReport } = (0, hooks_1.useSxpDataSource)();
     const [state, setState] = (0, react_1.useState)((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
     const likeIcon = (0, useIconLink_1.useIconLink)(defaultLikeIconPath);
     const unlikeIcon = (0, useIconLink_1.useIconLink)(defaultUnLikeIconPath);
     const handleClick = (0, lodash_1.debounce)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+        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;
         if (state) {
             setState(false);
             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;
@@ -59,16 +59,24 @@ const LikeButton = (_a) => {
                     traceInfo: (_y = recData === null || recData === void 0 ? void 0 : recData.video) === null || _y === void 0 ? void 0 : _y.traceInfo
                 }
             });
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'Engagement',
+                product: (_z = recData === null || recData === void 0 ? void 0 : recData.video) === null || _z === void 0 ? void 0 : _z.bindProducts,
+                rec: recData,
+                position,
+                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 : '',
+                engagement_type: 'like'
+            });
             if (!result) {
                 setState(false);
             }
             else {
-                const nRtcList = (_z = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
+                const nRtcList = (_2 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
                     if (index === position) {
                         item.isCollected = true;
                     }
                     return item;
-                })) !== null && _z !== void 0 ? _z : [];
+                })) !== null && _2 !== void 0 ? _2 : [];
                 setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
             }
         }

package/lib/core/components/SxpPageRender/VideoWidget/index.js

@@ -287,11 +287,15 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
         if (isActive) {
             bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
                 eventName: 'ViewContent',
-                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.bindProduct
+                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,
+                rec: data === null || data === void 0 ? void 0 : data[index],
+                position: index
             });
             bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
                 eventName: 'PageView',
-                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.bindProduct
+                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,
+                rec: data === null || data === void 0 ? void 0 : data[index],
+                position: index
             });
             (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
         }

package/lib/core/components/SxpPageRender/WaterFall/List.js

@@ -122,26 +122,13 @@ const WaterfallFlowItem = (props) => {
 function WaterfallList(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     var { reportTagsView, showBanner } = _a, props = tslib_1.__rest(_a, ["reportTagsView", "showBanner"]);
-    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = (0, hooks_1.useSxpDataSource)();
+    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex, bffFbReport } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const [list, setList] = (0, react_1.useState)();
     const [data, setData] = (0, react_1.useState)();
     const [isLoadingData, setIsLoadingData] = (0, react_1.useState)(false);
     const containerRef = (0, react_1.useRef)(null);
     const [isLoadMore, setIsLoadMore] = (0, react_1.useState)(false);
-    const loadMoreData = (0, react_1.useCallback)(() => {
-        if (isLoadMore)
-            return;
-        setIsLoadMore(true);
-        waterFallData &&
-            (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
-                hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag
-            }).then((res) => {
-                var _a;
-                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 : []));
-                setIsLoadMore(false);
-            }));
-    }, [waterFallData, getRecommendVideos, list, isLoadMore]);
     (0, react_1.useEffect)(() => {
         var _a, _b;
         setIsLoadingData(true);
@@ -153,8 +140,20 @@ function WaterfallList(_a) {
             }).then((res) => {
                 var _a, _b;
                 setData(res);
-                setList((_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 : []);
+                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 : [];
+                setList(list);
                 setIsLoadingData(false);
+                const products = [];
+                list === null || list === void 0 ? void 0 : list.forEach((item) => {
+                    var _a, _b;
+                    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 : []));
+                });
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'PageView',
+                    product: products,
+                    rec: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec,
+                    position: cacheActiveIndex
+                });
             }));
         if (isOpenHashTag) {
             const res = preview_json_1.default;

package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js

@@ -114,7 +114,7 @@ const WaterfallFlowItem = (props) => {
 function WaterfallList(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     var { reportTagsView, showBanner } = _a, props = tslib_1.__rest(_a, ["reportTagsView", "showBanner"]);
-    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = (0, hooks_1.useSxpDataSource)();
+    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex, bffFbReport } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const scrollParent = (0, react_1.useRef)(null);
     const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
@@ -219,8 +219,20 @@ function WaterfallList(_a) {
             }).then((res) => {
                 var _a, _b;
                 setData(res);
-                setList((_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 : []);
+                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 : [];
+                setList(list);
                 setIsLoadingData(false);
+                const products = [];
+                list === null || list === void 0 ? void 0 : list.forEach((item) => {
+                    var _a, _b;
+                    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 : []));
+                });
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'PageView',
+                    product: products,
+                    rec: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec,
+                    position: cacheActiveIndex
+                });
             }));
         if (isOpenHashTag) {
             const res = preview_json_1.default;

package/lib/core/components/SxpPageRender/WaterFall/index.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import './index.less';
+import { RecItemType } from '../typing';
 import { IHashTagProps } from '../../../../materials/sxp/HashTag';
 interface IWaterFallProps {
+    rec?: RecItemType;
 }
 declare const _default: React.NamedExoticComponent<IWaterFallProps & IHashTagProps>;
 export default _default;

package/lib/core/components/SxpPageRender/WaterFall/index.js

@@ -80,11 +80,8 @@ const WaterFall = (props) => {
     (0, react_1.useEffect)(() => {
         if (openHashtag) {
             setViewTime(new Date());
-            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-                eventName: 'PageView'
-            });
         }
-    }, [openHashtag, bffFbReport]);
+    }, [openHashtag]);
     (0, react_1.useEffect)(() => {
         const initTime = () => {
             setViewTime(new Date());

package/lib/core/components/SxpPageRender/index.js

@@ -97,7 +97,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
             (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
     }, [data, ctaType, swiperRef]);
     const handleSessionCompleted = (0, react_1.useCallback)((fk) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        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;
         const item = data === null || data === void 0 ? void 0 : data[activeIndex];
         let fromKName = '';
         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))) {
@@ -132,7 +132,16 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
                 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 : ''
             }
         });
-    }, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
+        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);
+        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+            eventName: 'ExitFeed',
+            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] : [],
+            rec: item,
+            position: activeIndex,
+            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 : '',
+            view_time: new Date() - viewTime.current
+        });
+    }, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime, bffFbReport]);
     (0, react_1.useEffect)(() => {
         const item = data === null || data === void 0 ? void 0 : data[activeIndex];
         const visibleChange = () => {
@@ -432,48 +441,79 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
         }
     };
     const handleScrollEvent = (swiper) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        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;
         const item = data[swiper.previousIndex];
+        const activeItem = data[swiper.activeIndex];
         if (!item)
             return;
         let contentFormat = null;
-        if ((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) {
+        let previousContentType = 'post';
+        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 : '';
+        let previousProduct = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProducts;
+        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 : '';
+        let previousDirection = '';
+        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 : '';
+        if ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.url) {
             contentFormat = 'video';
         }
-        else if ((_c = (_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls) === null || _c === void 0 ? void 0 : _c.length) {
+        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) {
             contentFormat = 'image';
         }
+        else {
+            previousContentType = 'product';
+            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 : '';
+            previousProduct = (item === null || item === void 0 ? void 0 : item.product) ? [item === null || item === void 0 ? void 0 : item.product] : [];
+            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 : '';
+        }
+        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)) {
+            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 : '';
+        }
         if (swiper.previousIndex - swiper.activeIndex < 0) {
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'scrollDown',
                     eventDescription: 'User scroll down',
-                    contentId: (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.itemId) !== null && _e !== void 0 ? _e : '',
-                    productId: (_g = (_f = item === null || item === void 0 ? void 0 : item.product) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
+                    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 : '',
+                    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 : '',
                     requestId: null,
-                    traceInfo: (_l = (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.traceInfo) !== null && _j !== void 0 ? _j : (_k = item === null || item === void 0 ? void 0 : item.product) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : '',
+                    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 : '',
                     contentFormat,
-                    position: ((_m = swiper.previousIndex) !== null && _m !== void 0 ? _m : 0) + ''
+                    position: ((_3 = swiper.previousIndex) !== null && _3 !== void 0 ? _3 : 0) + ''
                 }
             });
             handleViewImageStartEnd(item);
             handleSlideSkip(item, swiper.previousIndex);
+            previousDirection = 'up';
         }
         else {
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'scrollUp',
                     eventDescription: 'User scroll up',
-                    contentId: (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.itemId) !== null && _p !== void 0 ? _p : '',
-                    productId: (_r = (_q = item.product) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
+                    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 : '',
+                    productId: (_7 = (_6 = item.product) === null || _6 === void 0 ? void 0 : _6.itemId) !== null && _7 !== void 0 ? _7 : '',
                     requestId: null,
-                    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 : '',
+                    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 : '',
                     contentFormat,
-                    position: ((_w = swiper.previousIndex) !== null && _w !== void 0 ? _w : 0) + ''
+                    position: ((_12 = swiper.previousIndex) !== null && _12 !== void 0 ? _12 : 0) + ''
                 }
             });
             handleViewImageStartEnd(item);
-        }
+            previousDirection = 'down';
+        }
+        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+            eventName: 'ContentSwipe',
+            product: previousProduct,
+            rec: activeItem,
+            position: swiper.activeIndex,
+            previous_content_id: previousContentId,
+            previous_content_type: previousContentType,
+            previous_contents_name: previousContentsName,
+            previosu_position: swiper.previousIndex,
+            swipe_direction: previousDirection,
+            view_time: new Date() - viewTime.current,
+            content_id: contentId
+        });
         handleReportProductView(item);
         viewTime.current = new Date();
     };
@@ -574,11 +614,15 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
             if (enableCapi) {
                 bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
                     eventName: 'ViewContent',
-                    product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
+                    product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProducts,
+                    rec: item,
+                    position: activeIndex
                 });
                 bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
                     eventName: 'PageView',
-                    product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
+                    product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProducts,
+                    rec: item,
+                    position: activeIndex
                 });
             }
         }
@@ -696,7 +740,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
                 renderView,
                 renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
                 renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
-            react_1.default.createElement(WaterFall_1.default, 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)),
+            react_1.default.createElement(WaterFall_1.default, 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] })),
             react_1.default.createElement(ConsentPopup_1.default, { resolver: resolver, globalConfig: globalConfig }),
             openMultiPosts && (react_1.default.createElement(MultiPosts_1.default, 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' } }))))),
         (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (react_1.default.createElement("div", { style: {

package/lib/core/context/SxpDataSourceProvider.d.ts

@@ -12,6 +12,7 @@ export interface IEventTimeType {
     time: Date;
     target: EventTarget;
 }
+export type ICapiEventNameType = 'PageView' | 'ProductView' | 'ViewContent' | 'ClickCTA' | 'ContentSwipe' | 'Engagement' | 'ExitFeed';
 export interface ISxpDataSourceContext {
     rtcList: RecItemType[];
     setRtcList?: React.Dispatch<React.SetStateAction<RecItemType[]>>;
@@ -51,7 +52,7 @@ export interface ISxpDataSourceContext {
     sxpParameter?: PageData['sxp_parameter'];
     waterFallData?: IWaterFallDataType;
     setWaterFallData?: React.Dispatch<React.SetStateAction<IWaterFallDataType | undefined>>;
-    ctaEvent?: (eventInfo: any, rec?: RecItemType, product?: ProductInfoType | VideoInfoType | null, number?: number) => void;
+    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;
     swiperRef?: any;
     openHashtag?: boolean;
     setOpenHashtag?: React.Dispatch<React.SetStateAction<boolean>>;
@@ -72,8 +73,12 @@ export interface ISxpDataSourceContext {
     videoRef?: any;
     setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
     bffFbReport?: (body: {
-        eventName: 'PageView' | 'ProductView' | 'ViewContent';
-        product?: any;
+        eventName: ICapiEventNameType;
+        product?: ProductInfoType[];
+        contentType?: 'product' | 'post';
+        rec?: RecItemType;
+        position?: number;
+        [key: string]: any;
     }) => void;
     curTime?: any;
     h5EnterLink?: () => void;