pb-sxp-ui 1.20.3 → 1.20.5

package/dist/pb-ui.js

@@ -930,6 +930,30 @@
                 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 方法
@@ -997,7 +1021,7 @@
                     }
                 });
             };
-        }, [bffCollectEvent]);
+        }, []);
         React.useEffect(() => {
             const originalOpen = XMLHttpRequest.prototype.open;
             const originalSend = XMLHttpRequest.prototype.send;
@@ -1237,7 +1261,7 @@
                 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
@@ -1427,20 +1451,7 @@
             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();
@@ -10875,29 +10886,79 @@
                     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();
@@ -11788,29 +11849,79 @@
                     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)
@@ -12475,10 +12586,22 @@ Made in Italy` })));
             });
         }, [(_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))
@@ -13008,26 +13131,38 @@ Made in Italy` })));
         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);
             }
@@ -15514,7 +15649,7 @@ Made in Italy` })));
 
     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);
@@ -15527,6 +15662,7 @@ Made in Italy` })));
         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) {
@@ -15749,17 +15885,6 @@ Made in Italy` })));
                     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;
@@ -15847,7 +15972,7 @@ Made in Italy` })));
                 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',
@@ -15869,7 +15994,8 @@ Made in Italy` })));
 
     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);
@@ -16004,8 +16130,8 @@ Made in Italy` })));
         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
@@ -16015,19 +16141,9 @@ Made in Italy` })));
                     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 : []);
@@ -16075,7 +16191,7 @@ Made in Italy` })));
                         __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: {
@@ -16164,10 +16280,17 @@ Made in Italy` })));
             });
         }, [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());
@@ -16478,7 +16601,7 @@ Made in Italy` })));
     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);
@@ -16492,7 +16615,18 @@ Made in Italy` })));
             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)
@@ -16981,7 +17115,7 @@ Made in Italy` })));
         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);
@@ -16993,7 +17127,18 @@ Made in Italy` })));
             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)
@@ -19301,14 +19446,16 @@ Made in Italy` })));
                 }
             });
             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];
@@ -19612,7 +19759,7 @@ Made in Italy` })));
             }
         };
         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)
@@ -19634,22 +19781,22 @@ Made in Italy` })));
                 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) + ''
                     }
                 });
                 //  如果上一个商品是图片集，需上报 浏览图片集结结束 事件
@@ -19662,12 +19809,12 @@ Made in Italy` })));
                     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) + ''
                     }
                 });
                 //  如果上一个商品是图片集，需上报 浏览图片集结结束 事件
@@ -19917,7 +20064,7 @@ Made in Italy` })));
                     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: {