pb-sxp-ui 1.20.1 → 1.20.3

package/dist/pb-ui.js

@@ -300,6 +300,20 @@
         document.cookie = `${name}=; ${expiration}${pathPart}${domainPart}`;
         console.log(`已尝试删除Cookie: ${name}`);
     }
+    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 : '';
+    }
 
     function unzip(b64Data) {
         const strData = atob(b64Data);
@@ -1194,19 +1208,51 @@
             playbookType,
             bffDataSource
         ]);
-        const getEventParamsByJson = React.useCallback((json, product) => {
-            var _a, _b, _c;
+        const getEventParamsByJson = React.useCallback((_a) => {
+            var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+            var { json, product = [], rec, contentType = 'post', position, eventName } = _a, props = __rest(_a, ["json", "product", "rec", "contentType", "position", "eventName"]);
             const jsonParams = lodash.cloneDeep(json);
             const urlParams = new URLSearchParams(window.location.search);
             const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
             const fix_par = {
-                event_source_url: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href,
+                event_source_url: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href,
                 external_id: fakeUserId,
-                client_user_agent: (_c = (_b = window === null || window === void 0 ? void 0 : window.navigator) === null || _b === void 0 ? void 0 : _b.userAgent) !== null && _c !== void 0 ? _c : '',
+                client_user_agent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '',
                 fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
                 fbp: getCookie('_fbp') ? `${getCookie('_fbp')}` : '',
                 time: Math.floor(Date.now() / 1000)
             };
+            let customData = Object.assign({ 
+                // funnel_type
+                content_ids: [(_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.itemId, ...((_f = product === null || product === void 0 ? void 0 : product.map((item) => item === null || item === void 0 ? void 0 : item.itemId)) !== null && _f !== void 0 ? _f : [])], content_type: contentType, content_name: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.title, total_posts: rtcList === null || rtcList === void 0 ? void 0 : rtcList.length, position, 
+                // content_category
+                currency: (_h = product === null || product === void 0 ? void 0 : product[0]) === null || _h === void 0 ? void 0 : _h.currency, contents: (_j = product === null || product === void 0 ? void 0 : product.map((item) => ({
+                    item_id: item === null || item === void 0 ? void 0 : item.itemId,
+                    item_price: item === null || item === void 0 ? void 0 : item.price
+                }))) !== null && _j !== void 0 ? _j : [], image_urls: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) !== null && _l !== void 0 ? _l : [], video_urls: (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.url, 
+                // prompt
+                headline: getUrlParamByKey('headline'), scene: getUrlParamByKey('scene'), campaign_id: getUrlParamByKey('campaign_id'), ad_id: getUrlParamByKey('ad_id'), utm_source: getUrlParamByKey('utm_source'), utm_medium: getUrlParamByKey('utm_medium'), utm_campaign: getUrlParamByKey('utm_campaign'), utm_content: getUrlParamByKey('utm_content') }, props);
+            if (!((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.url) && !((_q = (_p = rec === null || rec === void 0 ? void 0 : rec.video) === null || _p === void 0 ? void 0 : _p.imgUrls) === null || _q === void 0 ? void 0 : _q.length) && (rec === null || rec === void 0 ? void 0 : rec.product) && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _r === void 0 ? void 0 : _r.length) > 0) {
+                const product = rec === null || rec === void 0 ? void 0 : rec.product;
+                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,
+                    contents: [{
+                            item_id: product === null || product === void 0 ? void 0 : product.itemId,
+                            item_price: product === null || product === void 0 ? void 0 : product.price
+                        }],
+                    image_urls: (_s = product.homePage) !== null && _s !== void 0 ? _s : []
+                };
+                customData = Object.assign(Object.assign({}, customData), productCustomData);
+            }
+            if (eventName === 'ContentSwipe' || eventName === 'Engagement' || eventName === 'ExitFeed') {
+                const deleteKeys = ['content_ids', 'content_category', 'currency', 'contents', 'image_urls', 'video_urls', 'prompt'];
+                deleteKeys.forEach(key => {
+                    if (customData === null || customData === void 0 ? void 0 : customData[key])
+                        delete customData[key];
+                });
+            }
             const regex = /\{\{(.*?)\}\}/g;
             const getEventParams = (obj) => {
                 if (!obj)
@@ -1219,6 +1265,9 @@
                         if (Object.prototype.hasOwnProperty.call(obj, key)) {
                             const value = obj === null || obj === void 0 ? void 0 : obj[key];
                             if (typeof value === 'object') {
+                                if (key === 'custom_data') {
+                                    obj[key] = customData !== null && customData !== void 0 ? customData : {};
+                                }
                                 getEventParams(value);
                             }
                             else if (typeof value === 'string') {
@@ -1228,7 +1277,7 @@
                                         var _a;
                                         const prop = match.substring(2, match.length - 2);
                                         try {
-                                            let replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
+                                            let replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product === null || product === void 0 ? void 0 : product[0]);
                                             if (replaceValue) {
                                                 if ((prop === null || prop === void 0 ? void 0 : prop.indexOf('currency')) !== -1 &&
                                                     (replaceValue === null || replaceValue === void 0 ? void 0 : replaceValue.indexOf('-')) !== -1 &&
@@ -1253,15 +1302,17 @@
                 }
             };
             getEventParams(jsonParams);
+            console.log('capi event params:', jsonParams);
             return jsonParams;
-        }, [fakeUserId]);
-        const bffFbReport = React.useCallback(({ eventName, product }) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        }, [fakeUserId, globalConfig, rtcList]);
+        const bffFbReport = React.useCallback((_a) => {
+            var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var { eventName } = _a, props = __rest(_a, ["eventName"]);
             if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) || getTargetingCookie()) {
                 return;
             }
             let isPushState = false;
-            const pixelEventParamsJson = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.pixel) === null || _a === void 0 ? void 0 : _a[eventName];
+            const pixelEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.pixel) === null || _b === void 0 ? void 0 : _b[eventName];
             if ((pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
                 function updateQueryStringParameter(uri, key, value) {
                     const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
@@ -1285,39 +1336,39 @@
                     }
                 }
                 else {
-                    window === null || window === void 0 ? void 0 : window.fbq('track', pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name, getEventParamsByJson(pixelEventParamsJson, product));
+                    window === null || window === void 0 ? void 0 : window.fbq('track', pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name, getEventParamsByJson(Object.assign({ json: pixelEventParamsJson, eventName }, props)));
                 }
             }
             if (!isPushState) {
                 if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
                     window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
                 }
-                const tiktokPixelEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.tiktokPixel) === null || _b === void 0 ? void 0 : _b[eventName];
+                const tiktokPixelEventParamsJson = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.tiktokPixel) === null || _c === void 0 ? void 0 : _c[eventName];
                 if ((tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name) &&
                     typeof (window === null || window === void 0 ? void 0 : window.ttq) === 'object' &&
-                    typeof ((_c = window === null || window === void 0 ? void 0 : window.ttq) === null || _c === void 0 ? void 0 : _c.track) === 'function') {
-                    (_d = window === null || window === void 0 ? void 0 : window.ttq) === null || _d === void 0 ? void 0 : _d.track(tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name, getEventParamsByJson(tiktokPixelEventParamsJson, product));
+                    typeof ((_d = window === null || window === void 0 ? void 0 : window.ttq) === null || _d === void 0 ? void 0 : _d.track) === 'function') {
+                    (_e = window === null || window === void 0 ? void 0 : window.ttq) === null || _e === void 0 ? void 0 : _e.track(tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name, getEventParamsByJson(Object.assign({ json: tiktokPixelEventParamsJson, eventName }, props)));
                 }
             }
-            const snapchatPixelEventParamsJson = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.snapchatPixel) === null || _e === void 0 ? void 0 : _e[eventName];
+            const snapchatPixelEventParamsJson = (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.snapchatPixel) === null || _f === void 0 ? void 0 : _f[eventName];
             if ((snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.snaptr) === 'function') {
-                window === null || window === void 0 ? void 0 : window.snaptr('track', snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name, getEventParamsByJson(snapchatPixelEventParamsJson, product));
+                window === null || window === void 0 ? void 0 : window.snaptr('track', snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name, getEventParamsByJson(Object.assign({ json: snapchatPixelEventParamsJson, eventName }, props)));
             }
-            if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.Northbeam) === 'object' && typeof ((_f = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _f === void 0 ? void 0 : _f.trackPageView) === 'function') {
-                (_g = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _g === void 0 ? void 0 : _g.trackPageView();
+            if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.Northbeam) === 'object' && typeof ((_g = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _g === void 0 ? void 0 : _g.trackPageView) === 'function') {
+                (_h = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _h === void 0 ? void 0 : _h.trackPageView();
             }
-            const converApiEventParamsJson = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _h === void 0 ? void 0 : _h[eventName];
+            const converApiEventParamsJson = (_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _j === void 0 ? void 0 : _j[eventName];
             if (enabledMetaConversionApi && converApiEventParamsJson) {
-                const body = getEventParamsByJson(converApiEventParamsJson, product);
+                const body = getEventParamsByJson(Object.assign({ json: converApiEventParamsJson, eventName }, props));
                 const params = {};
                 const queryString = location.search.slice(1);
-                (_j = splitUrlParams(queryString)) === null || _j === void 0 ? void 0 : _j.forEach((val) => {
+                (_k = splitUrlParams(queryString)) === null || _k === void 0 ? void 0 : _k.forEach((val) => {
                     const key = val.split('=')[0];
                     const value = val.split('=')[1];
                     params[key] = value;
                 });
                 const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
-                bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_k = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _k === void 0 ? void 0 : _k['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
+                bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_l = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _l === void 0 ? void 0 : _l['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
                     method: 'POST',
                     body,
                     type: 'beacon'
@@ -1355,7 +1406,7 @@
                 console.log('e', e);
             }
         }), [bffFetch, utmVal]);
-        const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
+        const ctaEvent = React.useCallback((eventInfo, rec, product, position, ctaActionType, targetUrl, contentType) => {
             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;
             const cta = product === null || product === void 0 ? void 0 : product.bindCta;
             const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
@@ -1376,34 +1427,36 @@
             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 })
             });
-        }, [bffEventReport, isFromHashtag]);
-        const h5EnterLink = React.useCallback(() => {
-            var _a, _b, _c;
-            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, '+');
+            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
+                });
             }
-            const getVal = (key) => { var _a; return (_a = params[key]) !== null && _a !== void 0 ? _a : ''; };
+        }, [bffEventReport, isFromHashtag, bffFbReport]);
+        const h5EnterLink = React.useCallback(() => {
+            var _a, _b;
             const time = new Date();
             curTime.current = time;
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'h5LinkEnterFeed',
                     eventDescription: 'User enter h5 link',
-                    utmSource: getVal('utm_source'),
-                    utmMedium: getVal('utm_medium'),
-                    utmCampaign: getVal('utm_campaign'),
-                    utmId: getVal('utm_id'),
-                    utmContent: getVal('utm_content'),
+                    utmSource: getUrlParamByKey('utm_source'),
+                    utmMedium: getUrlParamByKey('utm_medium'),
+                    utmCampaign: getUrlParamByKey('utm_campaign'),
+                    utmId: getUrlParamByKey('utm_id'),
+                    utmContent: getUrlParamByKey('utm_content'),
                     enterTime: Math.floor(time / 1000) + '',
                     requestId: null,
-                    enterUrl: (_c = (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href) !== null && _c !== void 0 ? _c : ''
+                    enterUrl: (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : ''
                 },
                 reportLayId: false
             });
@@ -10822,7 +10875,7 @@
                     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);
             }
@@ -10832,11 +10885,17 @@
                 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]);
         React.useEffect(() => {
@@ -11729,7 +11788,7 @@
                     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);
             }
@@ -11739,11 +11798,17 @@
                 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]);
         React.useEffect(() => {
@@ -12413,13 +12478,13 @@ Made in Italy` })));
             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();
@@ -12427,7 +12492,11 @@ Made in Italy` })));
         }, popup === null || popup === void 0 ? void 0 : popup.duration);
         React.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.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) => {
@@ -12945,22 +13014,22 @@ Made in Italy` })));
         const handleClick = lodash.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();
@@ -15550,7 +15619,7 @@ Made in Italy` })));
     function WaterfallList$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;
         var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
-        const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = useSxpDataSource();
+        const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex, bffFbReport } = useSxpDataSource();
         const { jumpToWeb } = useEventReport();
         /** 滚动的父元素 */
         const scrollParent = React.useRef(null);
@@ -15677,8 +15746,20 @@ Made in Italy` })));
                 }).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 = previewData;
@@ -15913,26 +15994,13 @@ Made in Italy` })));
     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 = __rest(_a, ["reportTagsView", "showBanner"]);
-        const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = useSxpDataSource();
+        const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex, bffFbReport } = useSxpDataSource();
         const { jumpToWeb } = useEventReport();
         const [list, setList] = React.useState();
         const [data, setData] = React.useState();
         const [isLoadingData, setIsLoadingData] = React.useState(false);
         const containerRef = React.useRef(null);
         const [isLoadMore, setIsLoadMore] = React.useState(false);
-        React.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]);
         React.useEffect(() => {
             var _a, _b;
             setIsLoadingData(true);
@@ -15944,8 +16012,20 @@ Made in Italy` })));
                 }).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 = previewData;
@@ -16086,11 +16166,8 @@ Made in Italy` })));
         React.useEffect(() => {
             if (openHashtag) {
                 setViewTime(new Date());
-                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-                    eventName: 'PageView'
-                });
             }
-        }, [openHashtag, bffFbReport]);
+        }, [openHashtag]);
         React.useEffect(() => {
             const initTime = () => {
                 setViewTime(new Date());
@@ -16411,17 +16488,17 @@ Made in Italy` })));
         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();
@@ -16912,17 +16989,17 @@ Made in Italy` })));
         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();
@@ -16956,8 +17033,8 @@ Made in Italy` })));
                 height: '40px',
                 lineHeight: '40px',
                 paddingLeft: '6px'
-            } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${css.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.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.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.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$1, { 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: {
@@ -18148,12 +18225,12 @@ Made in Italy` })));
     const LikeButton = (_a) => {
         var _b;
         var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
-        const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
+        const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList, bffFbReport } = useSxpDataSource();
         const [state, setState] = React.useState((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
         const likeIcon = useIconLink(defaultLikeIconPath$2);
         const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
         const handleClick = lodash.debounce(() => __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);
@@ -18199,16 +18276,24 @@ Made in Italy` })));
                         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);
                 }
             }
@@ -18520,11 +18605,15 @@ Made in Italy` })));
             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();
             }
@@ -19176,7 +19265,7 @@ Made in Italy` })));
                 (_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 = React.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))) {
@@ -19211,7 +19300,16 @@ Made in Italy` })));
                     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]);
         React.useEffect(() => {
             const item = data === null || data === void 0 ? void 0 : data[activeIndex];
             const visibleChange = () => {
@@ -19514,50 +19612,81 @@ 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;
+            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();
@@ -19661,11 +19790,15 @@ Made in Italy` })));
                 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
                     });
                 }
             }
@@ -19724,7 +19857,7 @@ Made in Italy` })));
             isReload,
             renderToggleButton
         ]);
-        return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { height } },
+        return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { height: height + minusHeight + tagHeight } },
             (data === null || data === void 0 ? void 0 : data.length) < 1 && loading ? (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
                 React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { style: Object.assign({}, ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) && { textUnderlineOffset: `${globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset}px` })) },
                 waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff', top: `${minusHeight}px` }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
@@ -19784,7 +19917,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)),
+                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(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: {