pb-sxp-ui 1.20.3 → 1.20.5

package/dist/index.cjs

@@ -937,6 +937,30 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             navigatorWithBeacon.sendBeacon = originalSendBeacon;
         };
     }, [bffCollectEvent]);
+    React.useEffect(() => {
+        // 保存原始的 form.submit 方法
+        const originalFormSubmit = HTMLFormElement.prototype.submit;
+        // 重写 form.submit 方法
+        HTMLFormElement.prototype.submit = function () {
+            const form = this;
+            // 检查是否是 Facebook Pixel 请求
+            if (form.action.includes('facebook.com/tr')) {
+                // 收集所有表单数据
+                const formData = new FormData(form);
+                const params = {};
+                for (const [key, value] of formData.entries()) {
+                    params[key] = value;
+                }
+                bffCollectEvent({
+                    eventName: params === null || params === void 0 ? void 0 : params.ev,
+                    eventSource: 'Meta Pixel'
+                });
+                return originalFormSubmit.call(form);
+            }
+            // 非 Facebook 请求，正常提交
+            return originalFormSubmit.call(form);
+        };
+    }, []);
     React.useEffect(() => {
         const _originalFetch = window.fetch;
         // 覆盖 fetch 方法
@@ -1004,7 +1028,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                 }
             });
         };
-    }, [bffCollectEvent]);
+    }, []);
     React.useEffect(() => {
         const originalOpen = XMLHttpRequest.prototype.open;
         const originalSend = XMLHttpRequest.prototype.send;
@@ -1244,7 +1268,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             const productCustomData = {
                 content_ids: [product === null || product === void 0 ? void 0 : product.itemId],
                 content_type: 'product',
-                content_name: product === null || product === void 0 ? void 0 : product.title,
+                content_name: '',
                 contents: [{
                         item_id: product === null || product === void 0 ? void 0 : product.itemId,
                         item_price: product === null || product === void 0 ? void 0 : product.price
@@ -1434,20 +1458,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             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 })
         });
-        if ((eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject) === 'clickCta') {
-            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-                eventName: 'ClickCTA',
-                product: product ? [product] : undefined,
-                contentType: contentType !== null && contentType !== void 0 ? contentType : 'post',
-                rec,
-                position,
-                cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
-                cta_action_type: ctaActionType,
-                target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
-                target_url: targetUrl
-            });
-        }
-    }, [bffEventReport, isFromHashtag, bffFbReport]);
+    }, [bffEventReport, isFromHashtag]);
     const h5EnterLink = React.useCallback(() => {
         var _a, _b;
         const time = new Date();
@@ -10882,29 +10893,79 @@ const CommodityDetail$1 = (_a) => {
                 ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                     eventSubject: 'clickCta',
                     eventDescription: 'User clicked the CTA'
-                }, data, product, position, 'open_external_link', product.link, 'product');
+                }, data, product, position);
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'ClickCTA',
+                    product: product ? [product] : undefined,
+                    contentType: 'product',
+                    data,
+                    position,
+                    cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
+                    cta_action_type: 'open_external_link',
+                    target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
+                    target_url: product.link
+                });
             }
             window.location.href = window.getJointUtmLink(product.link);
         }
     };
     React.useEffect(() => {
+        var _a;
         if (!isActive)
             return;
+        const recData = Object.assign(Object.assign({}, data), { video: (data === null || data === void 0 ? void 0 : data.video) ? Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { title: '', imgUrls: !isPost ? product === null || product === void 0 ? void 0 : product.homePage : (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.imgUrls }) : null });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'ProductView',
             product: product ? [product] : undefined,
             contentType: 'product',
-            rec: data,
+            rec: recData,
             position
         });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'PageView',
             product: product ? [product] : undefined,
             contentType: 'product',
-            rec: data,
+            rec: recData,
             position
         });
     }, [isActive, bffFbReport]);
+    React.useEffect(() => {
+        if (!isActive || isPost)
+            return;
+        const onShow = () => {
+            curTimeRef.current = new Date();
+        };
+        const recData = Object.assign(Object.assign({}, data), { video: (data === null || data === void 0 ? void 0 : data.video) ? Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { title: '' }) : null });
+        const onHide = () => {
+            var _a;
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'ExitFeed',
+                product: product ? [product] : undefined,
+                contentType: 'product',
+                rec: recData,
+                position,
+                view_time: new Date() - curTimeRef.current,
+                content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : ''
+            });
+        };
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, () => onShow());
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, () => onHide());
+        return () => {
+            var _a;
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'Engagement',
+                product: product ? [product] : undefined,
+                rec: recData,
+                position,
+                content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : '',
+                engagement_type: 'close_popup',
+                contentType: 'product',
+                view_time: new Date() - curTimeRef.current
+            });
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW);
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE);
+        };
+    }, [isActive, isPost, bffFbReport, data, product, position, curTimeRef]);
     React.useEffect(() => {
         const initTime = () => {
             curTimeRef.current = new Date();
@@ -11795,29 +11856,79 @@ const CommodityDetailDiroNew$1 = (_a) => {
                 ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                     eventSubject: 'clickCta',
                     eventDescription: 'User clicked the CTA'
-                }, data, product, position, 'open_external_link', product.link, 'product');
+                }, data, product, position);
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'ClickCTA',
+                    product: product ? [product] : undefined,
+                    contentType: 'product',
+                    data,
+                    position,
+                    cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
+                    cta_action_type: 'open_external_link',
+                    target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
+                    target_url: product.link
+                });
             }
             window.location.href = window.getJointUtmLink(product.link);
         }
     };
     React.useEffect(() => {
+        var _a;
         if (!isActive)
             return;
+        const recData = Object.assign(Object.assign({}, data), { video: (data === null || data === void 0 ? void 0 : data.video) ? Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { title: '', imgUrls: !isPost ? product === null || product === void 0 ? void 0 : product.homePage : (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.imgUrls }) : null });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'ProductView',
             product: product ? [product] : undefined,
             contentType: 'product',
-            rec: data,
+            rec: recData,
             position
         });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'PageView',
             product: product ? [product] : undefined,
             contentType: 'product',
-            rec: data,
+            rec: recData,
             position
         });
-    }, [isActive, bffFbReport]);
+    }, [isActive, bffFbReport, isPost]);
+    React.useEffect(() => {
+        if (!isActive || isPost)
+            return;
+        const onShow = () => {
+            curTimeRef.current = new Date();
+        };
+        const recData = Object.assign(Object.assign({}, data), { video: (data === null || data === void 0 ? void 0 : data.video) ? Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.video), { title: '' }) : null });
+        const onHide = () => {
+            var _a;
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'ExitFeed',
+                product: product ? [product] : undefined,
+                contentType: 'product',
+                rec: recData,
+                position,
+                view_time: new Date() - curTimeRef.current,
+                content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : ''
+            });
+        };
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, () => onShow());
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, () => onHide());
+        return () => {
+            var _a;
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'Engagement',
+                product: product ? [product] : undefined,
+                rec: recData,
+                position,
+                content_id: (_a = product === null || product === void 0 ? void 0 : product.itemId) !== null && _a !== void 0 ? _a : '',
+                engagement_type: 'close_popup',
+                contentType: 'product',
+                view_time: new Date() - curTimeRef.current
+            });
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW);
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE);
+        };
+    }, [isActive, isPost, bffFbReport, data, product, position, curTimeRef]);
     React.useEffect(() => {
         const initTime = () => {
             if (!isActive)
@@ -12482,10 +12593,22 @@ const CommodityList$1 = (_a) => {
         });
     }, [(_d = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _d === void 0 ? void 0 : _d.enableFormattedPrice, globalConfig]);
     const handleClick = lodash.throttle((item, multiCheckIndex, e) => {
+        var _a;
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, recData, item, index, isExternalLink && !!(item === null || item === void 0 ? void 0 : item.link) ? 'open_external_link' : 'open_internal_popup', item.link, 'product');
+        }, recData, item, index);
+        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+            eventName: 'ClickCTA',
+            product: item ? [item] : undefined,
+            contentType: 'product',
+            recData,
+            index,
+            cta_text: (_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.enTitle,
+            cta_action_type: isExternalLink && !!(item === null || item === void 0 ? void 0 : item.link) ? 'open_external_link' : 'open_internal_popup',
+            target_content_id: item === null || item === void 0 ? void 0 : item.itemId,
+            target_url: item.link
+        });
         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))
@@ -13015,26 +13138,38 @@ const EventProvider = (_a) => {
     var { rec, children, className, onClick, style, isExternalLink = false, index, jumpLink, multItem, multiCheckIndex } = _a; __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index", "jumpLink", "multItem", "multiCheckIndex"]);
     const ref = React.useRef(null);
     const { popup } = useEditor();
-    const { setPopupDetailData, ctaEvent } = useSxpDataSource();
+    const { setPopupDetailData, ctaEvent, bffFbReport } = useSxpDataSource();
     const { jumpToWeb } = useEventReport();
     const [element, setElement] = React.useState(null);
     const handleClick = lodash.throttle((e) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         e.preventDefault();
         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);
+        const link = jumpLink || ((_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, isExternalLink && (jumpLink || !!link) ? 'open_external_link' : 'open_internal_popup', link);
+        }, rec, item, index);
+        const product = multItem || ((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindProduct);
+        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+            eventName: 'ClickCTA',
+            product: product ? [product] : undefined,
+            contentType: 'post',
+            rec,
+            index,
+            cta_text: (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle,
+            cta_action_type: isExternalLink && (!!link) ? 'open_external_link' : 'open_internal_popup',
+            target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
+            target_url: 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) {
-            if (!jumpLink && !link)
+            if (!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;
+            const cta = ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindCta) || (multItem === null || multItem === void 0 ? void 0 : multItem.bindCta);
+            const product = ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.bindProduct) || multItem;
             jumpToWeb(e, rec, product, cta, index);
             window.location.href = window.getJointUtmLink(link);
         }
@@ -15521,7 +15656,7 @@ var previewData = {
 
 const WaterfallFlowItem$1 = (props) => {
     var _a;
-    const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
+    const { listItem, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter, globalConfig } = useSxpDataSource();
     const [showVideo, setShowVideo] = React.useState(false);
     React.useState(false);
@@ -15534,6 +15669,7 @@ const WaterfallFlowItem$1 = (props) => {
     React.useRef(null);
     React.useRef(null);
     const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
+    const rec = listItem;
     const src = React.useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
@@ -15756,17 +15892,6 @@ function WaterfallList$1(_a) {
                 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 = previewData;
@@ -15854,7 +15979,7 @@ function WaterfallList$1(_a) {
             React.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
                 list.map((item, ind) => {
                     var _a;
-                    return (React.createElement(WaterfallFlowItem$1, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
+                    return (React.createElement(WaterfallFlowItem$1, Object.assign({ key: ind, index: ind, listItem: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
                 }),
                 React.createElement("div", { hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: {
                         position: 'absolute',
@@ -15876,7 +16001,8 @@ var img$6 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeA
 
 const WaterfallFlowItem = (props) => {
     var _a;
-    const { rec, index, list, reportTagsView, textStyles, space, openFixedSize, fixedSizeRatio } = props;
+    const { listItem, index, list, reportTagsView, textStyles, space, openFixedSize, fixedSizeRatio } = props;
+    const rec = listItem;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter, globalConfig } = useSxpDataSource();
     const [showVideo, setShowVideo] = React.useState(false);
     const imgDom = React.useRef(null);
@@ -16011,8 +16137,8 @@ function WaterfallList(_a) {
     React.useEffect(() => {
         var _a, _b;
         setIsLoadingData(true);
-        waterFallData &&
-            (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
+        if (waterFallData) {
+            getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
                 hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
                 defaultSize: hashTagSize,
                 maxSize: hashTagSize
@@ -16022,19 +16148,9 @@ function WaterfallList(_a) {
                 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) {
+            });
+        }
+        else if (isOpenHashTag) {
             const res = previewData;
             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 : []);
@@ -16082,7 +16198,7 @@ function WaterfallList(_a) {
                     __html: setFontForText(((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.linkTitle) || 'Shop the collection', (_k = props === null || props === void 0 ? void 0 : props.textStyles) === null || _k === void 0 ? void 0 : _k.hashTagLink)
                 } }),
             React.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
-                return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
+                return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, listItem: item, list: list, reportTagsView: reportTagsView }, props)));
             })),
             React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
             React.createElement("div", { hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: {
@@ -16171,10 +16287,17 @@ const WaterFall = (props) => {
         });
     }, [recData, bffEventReport, viewTime, isFromHashtag, cacheActiveIndex]);
     React.useEffect(() => {
+        var _a, _b;
         if (openHashtag) {
             setViewTime(new Date());
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'PageView',
+                product: (_b = (_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProducts,
+                rec: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec,
+                position: cacheActiveIndex
+            });
         }
-    }, [openHashtag]);
+    }, [openHashtag, bffFbReport, waterFallData, cacheActiveIndex]);
     React.useEffect(() => {
         const initTime = () => {
             setViewTime(new Date());
@@ -16485,7 +16608,7 @@ var styles$1 = {"animated-button":"index-module_animated-button__lqTbg","gradien
 const AniLink$1 = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false, isActive } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink", "isActive"]);
-    const { ctaEvent, setPopupDetailData } = useSxpDataSource();
+    const { ctaEvent, setPopupDetailData, bffFbReport } = useSxpDataSource();
     const { jumpToWeb } = useEventReport();
     const [visible, setVisible] = React.useState(false);
     const ref = React.useRef(null);
@@ -16499,7 +16622,18 @@ const AniLink$1 = (_a) => {
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, recData, item, index, (isExternalLink && !!link) ? 'open_external_link' : 'open_internal_popup', link);
+        }, recData, item, index);
+        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+            eventName: 'ClickCTA',
+            product: product ? [product] : undefined,
+            contentType: 'post',
+            recData,
+            index,
+            cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
+            cta_action_type: (isExternalLink && !!link) ? 'open_external_link' : 'open_internal_popup',
+            target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
+            target_url: link
+        });
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
         if (isExternalLink) {
             if (!link)
@@ -16988,7 +17122,7 @@ const AniLinkPopup$1 = (_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;
     var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false, isActive } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink", "isActive"]);
     style === null || style === void 0 ? true : delete style.transform;
-    const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = useSxpDataSource();
+    const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData, bffFbReport } = useSxpDataSource();
     const { jumpToWeb } = useEventReport();
     const [visible, setVisible] = React.useState(true);
     const cta = ((_d = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.bindCta) || ((_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta) || ((_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindCta);
@@ -17000,7 +17134,18 @@ const AniLinkPopup$1 = (_a) => {
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, recData, item, index, (isExternalLink && !!link) ? 'open_external_link' : 'open_internal_popup', link);
+        }, recData, item, index);
+        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+            eventName: 'ClickCTA',
+            product: product ? [product] : undefined,
+            contentType: 'post',
+            recData,
+            index,
+            cta_text: cta === null || cta === void 0 ? void 0 : cta.enTitle,
+            cta_action_type: (isExternalLink && !!link) ? 'open_external_link' : 'open_internal_popup',
+            target_content_id: product === null || product === void 0 ? void 0 : product.itemId,
+            target_url: link
+        });
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
         if (isExternalLink) {
             if (!link)
@@ -19308,14 +19453,16 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
             }
         });
         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
-        });
+        if (!popupDetailData) {
+            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]);
     React.useEffect(() => {
         const item = data === null || data === void 0 ? void 0 : data[activeIndex];
@@ -19619,7 +19766,7 @@ 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, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12;
+        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;
         const item = data[swiper.previousIndex];
         const activeItem = data[swiper.activeIndex];
         if (!item)
@@ -19641,22 +19788,22 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
             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 : '';
+            previousContentsName = '';
         }
-        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 (!((_o = activeItem === null || activeItem === void 0 ? void 0 : activeItem.video) === null || _o === void 0 ? void 0 : _o.url) && !((_q = (_p = activeItem === null || activeItem === void 0 ? void 0 : activeItem.video) === null || _p === void 0 ? void 0 : _p.imgUrls) === null || _q === void 0 ? void 0 : _q.length)) {
+            contentId = (_s = (_r = activeItem === null || activeItem === void 0 ? void 0 : activeItem.product) === null || _r === void 0 ? void 0 : _r.itemId) !== null && _s !== void 0 ? _s : '';
         }
         if (swiper.previousIndex - swiper.activeIndex < 0) {
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'scrollDown',
                     eventDescription: 'User scroll down',
-                    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 : '',
+                    contentId: (_u = (_t = item === null || item === void 0 ? void 0 : item.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '',
+                    productId: (_w = (_v = item === null || item === void 0 ? void 0 : item.product) === null || _v === void 0 ? void 0 : _v.itemId) !== null && _w !== void 0 ? _w : '',
                     requestId: null,
-                    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 : '',
+                    traceInfo: (_0 = (_y = (_x = item === null || item === void 0 ? void 0 : item.video) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_z = item === null || item === void 0 ? void 0 : item.product) === null || _z === void 0 ? void 0 : _z.traceInfo) !== null && _0 !== void 0 ? _0 : '',
                     contentFormat,
-                    position: ((_3 = swiper.previousIndex) !== null && _3 !== void 0 ? _3 : 0) + ''
+                    position: ((_1 = swiper.previousIndex) !== null && _1 !== void 0 ? _1 : 0) + ''
                 }
             });
             //  如果上一个商品是图片集，需上报 浏览图片集结结束 事件
@@ -19669,12 +19816,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
                 eventInfo: {
                     eventSubject: 'scrollUp',
                     eventDescription: 'User scroll up',
-                    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 : '',
+                    contentId: (_3 = (_2 = item === null || item === void 0 ? void 0 : item.video) === null || _2 === void 0 ? void 0 : _2.itemId) !== null && _3 !== void 0 ? _3 : '',
+                    productId: (_5 = (_4 = item.product) === null || _4 === void 0 ? void 0 : _4.itemId) !== null && _5 !== void 0 ? _5 : '',
                     requestId: null,
-                    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 : '',
+                    traceInfo: (_9 = (_7 = (_6 = item === null || item === void 0 ? void 0 : item.video) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_8 = item === null || item === void 0 ? void 0 : item.product) === null || _8 === void 0 ? void 0 : _8.traceInfo) !== null && _9 !== void 0 ? _9 : '',
                     contentFormat,
-                    position: ((_12 = swiper.previousIndex) !== null && _12 !== void 0 ? _12 : 0) + ''
+                    position: ((_10 = swiper.previousIndex) !== null && _10 !== void 0 ? _10 : 0) + ''
                 }
             });
             //  如果上一个商品是图片集，需上报 浏览图片集结结束 事件
@@ -19924,7 +20071,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.createElement(WaterFall$1, 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.createElement(WaterFall$1, 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.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
             openMultiPosts && (React.createElement(MultiPosts$2, 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.createElement("div", { style: {