pb-sxp-ui 1.16.12 → 1.16.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +71 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +71 -2
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +4 -4
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +4 -4
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +71 -2
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +4 -4
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/context/SxpDataSourceProvider.js +67 -2
- package/lib/core/context/SxpDataSourceProvider.js +67 -2
- package/package.json +1 -1
|
@@ -105,7 +105,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
105
105
|
var _a;
|
|
106
106
|
return ((_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']) + storeAndLoadFeUserId();
|
|
107
107
|
}, [bffDataSource]);
|
|
108
|
-
const bffFetch = useCallback((path, options) => {
|
|
108
|
+
const bffFetch = useCallback((path, options, isBota = true) => {
|
|
109
109
|
var _a;
|
|
110
110
|
if (!bffDataSource)
|
|
111
111
|
return;
|
|
@@ -122,7 +122,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
122
122
|
params[key] = value;
|
|
123
123
|
});
|
|
124
124
|
return window
|
|
125
|
-
.fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers), method: options.method, body: options.type === 'beacon'
|
|
125
|
+
.fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers), method: options.method, body: options.type === 'beacon' && isBota
|
|
126
126
|
? JSON.stringify({
|
|
127
127
|
body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
|
|
128
128
|
})
|
|
@@ -130,6 +130,53 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
130
130
|
.then((res) => res.json())
|
|
131
131
|
.catch((err) => Promise.reject(err));
|
|
132
132
|
}, [bffDataSource, fakeUserId]);
|
|
133
|
+
const bffCollectEvent = useCallback((params) => {
|
|
134
|
+
var _a;
|
|
135
|
+
const body = {
|
|
136
|
+
eventName: params === null || params === void 0 ? void 0 : params.eventName,
|
|
137
|
+
eventSource: params === null || params === void 0 ? void 0 : params.eventSource,
|
|
138
|
+
eventInfo: (params === null || params === void 0 ? void 0 : params.eventInfo) ? JSON.stringify(params === null || params === void 0 ? void 0 : params.eventInfo) : ''
|
|
139
|
+
};
|
|
140
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v1/data/collect/${(_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']}/${params === null || params === void 0 ? void 0 : params.eventName}`, {
|
|
141
|
+
method: 'POST',
|
|
142
|
+
body,
|
|
143
|
+
type: 'beacon'
|
|
144
|
+
}, false);
|
|
145
|
+
}, [bffFetch, bffDataSource]);
|
|
146
|
+
useEffect(() => {
|
|
147
|
+
if (typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
|
|
148
|
+
const OriginalImage = window.Image;
|
|
149
|
+
window.Image = function () {
|
|
150
|
+
const img = new OriginalImage();
|
|
151
|
+
const originalSrcDescriptor = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'src');
|
|
152
|
+
Object.defineProperty(img, 'src', {
|
|
153
|
+
set(value) {
|
|
154
|
+
originalSrcDescriptor.set.call(this, value);
|
|
155
|
+
img.onload = function () {
|
|
156
|
+
if (value.includes('https://www.facebook.com/privacy_sandbox/pixel/register/trigger/')) {
|
|
157
|
+
const url = new URL(value);
|
|
158
|
+
const params = Object.fromEntries(url.searchParams.entries());
|
|
159
|
+
bffCollectEvent({
|
|
160
|
+
eventName: params === null || params === void 0 ? void 0 : params.ev,
|
|
161
|
+
eventSource: 'Meta Pixel',
|
|
162
|
+
eventInfo: params
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
};
|
|
166
|
+
},
|
|
167
|
+
get() {
|
|
168
|
+
return originalSrcDescriptor.get.call(this);
|
|
169
|
+
}
|
|
170
|
+
});
|
|
171
|
+
return img;
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
}, [bffCollectEvent]);
|
|
175
|
+
useEffect(() => {
|
|
176
|
+
if (typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
|
|
177
|
+
window === null || window === void 0 ? void 0 : window.fbq('track', 'PageView');
|
|
178
|
+
}
|
|
179
|
+
}, []);
|
|
133
180
|
const bffFetchAdmin = useCallback((path, options) => {
|
|
134
181
|
if (!bffDataSource)
|
|
135
182
|
return;
|
|
@@ -378,6 +425,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
378
425
|
const newUrl = updateQueryStringParameter(currentUrl, 'timestamp', Date.now());
|
|
379
426
|
history.pushState({ path: newUrl }, '', newUrl);
|
|
380
427
|
isPushState = true;
|
|
428
|
+
bffCollectEvent({
|
|
429
|
+
eventName: 'page_view',
|
|
430
|
+
eventSource: 'Google Analytics'
|
|
431
|
+
});
|
|
381
432
|
}
|
|
382
433
|
}
|
|
383
434
|
else {
|
|
@@ -387,17 +438,31 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
387
438
|
if (!isPushState) {
|
|
388
439
|
if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
|
|
389
440
|
window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
|
|
441
|
+
bffCollectEvent({
|
|
442
|
+
eventName: 'page_view',
|
|
443
|
+
eventSource: 'Google Analytics'
|
|
444
|
+
});
|
|
390
445
|
}
|
|
391
446
|
const tiktokPixelEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.tiktokPixel) === null || _b === void 0 ? void 0 : _b[eventName];
|
|
392
447
|
if ((tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name) &&
|
|
393
448
|
typeof (window === null || window === void 0 ? void 0 : window.ttq) === 'object' &&
|
|
394
449
|
typeof ((_c = window === null || window === void 0 ? void 0 : window.ttq) === null || _c === void 0 ? void 0 : _c.track) === 'function') {
|
|
395
450
|
(_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));
|
|
451
|
+
bffCollectEvent({
|
|
452
|
+
eventName: tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name,
|
|
453
|
+
eventSource: 'TikTok Pixel',
|
|
454
|
+
eventInfo: getEventParamsByJson(tiktokPixelEventParamsJson, product)
|
|
455
|
+
});
|
|
396
456
|
}
|
|
397
457
|
}
|
|
398
458
|
const snapchatPixelEventParamsJson = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.snapchatPixel) === null || _e === void 0 ? void 0 : _e[eventName];
|
|
399
459
|
if ((snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.snaptr) === 'function') {
|
|
400
460
|
window === null || window === void 0 ? void 0 : window.snaptr('track', snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name, getEventParamsByJson(snapchatPixelEventParamsJson, product));
|
|
461
|
+
bffCollectEvent({
|
|
462
|
+
eventName: snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name,
|
|
463
|
+
eventSource: 'Snapchat Pixel',
|
|
464
|
+
eventInfo: getEventParamsByJson(snapchatPixelEventParamsJson, product)
|
|
465
|
+
});
|
|
401
466
|
}
|
|
402
467
|
const converApiEventParamsJson = (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _f === void 0 ? void 0 : _f[eventName];
|
|
403
468
|
if (enabledMetaConversionApi && converApiEventParamsJson) {
|
|
@@ -108,7 +108,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
108
108
|
var _a;
|
|
109
109
|
return ((_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']) + (0, localStore_1.storeAndLoadFeUserId)();
|
|
110
110
|
}, [bffDataSource]);
|
|
111
|
-
const bffFetch = (0, react_1.useCallback)((path, options) => {
|
|
111
|
+
const bffFetch = (0, react_1.useCallback)((path, options, isBota = true) => {
|
|
112
112
|
var _a;
|
|
113
113
|
if (!bffDataSource)
|
|
114
114
|
return;
|
|
@@ -125,7 +125,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
125
125
|
params[key] = value;
|
|
126
126
|
});
|
|
127
127
|
return window
|
|
128
|
-
.fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers), method: options.method, body: options.type === 'beacon'
|
|
128
|
+
.fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers), method: options.method, body: options.type === 'beacon' && isBota
|
|
129
129
|
? JSON.stringify({
|
|
130
130
|
body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
|
|
131
131
|
})
|
|
@@ -133,6 +133,53 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
133
133
|
.then((res) => res.json())
|
|
134
134
|
.catch((err) => Promise.reject(err));
|
|
135
135
|
}, [bffDataSource, fakeUserId]);
|
|
136
|
+
const bffCollectEvent = (0, react_1.useCallback)((params) => {
|
|
137
|
+
var _a;
|
|
138
|
+
const body = {
|
|
139
|
+
eventName: params === null || params === void 0 ? void 0 : params.eventName,
|
|
140
|
+
eventSource: params === null || params === void 0 ? void 0 : params.eventSource,
|
|
141
|
+
eventInfo: (params === null || params === void 0 ? void 0 : params.eventInfo) ? JSON.stringify(params === null || params === void 0 ? void 0 : params.eventInfo) : ''
|
|
142
|
+
};
|
|
143
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v1/data/collect/${(_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']}/${params === null || params === void 0 ? void 0 : params.eventName}`, {
|
|
144
|
+
method: 'POST',
|
|
145
|
+
body,
|
|
146
|
+
type: 'beacon'
|
|
147
|
+
}, false);
|
|
148
|
+
}, [bffFetch, bffDataSource]);
|
|
149
|
+
(0, react_1.useEffect)(() => {
|
|
150
|
+
if (typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
|
|
151
|
+
const OriginalImage = window.Image;
|
|
152
|
+
window.Image = function () {
|
|
153
|
+
const img = new OriginalImage();
|
|
154
|
+
const originalSrcDescriptor = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'src');
|
|
155
|
+
Object.defineProperty(img, 'src', {
|
|
156
|
+
set(value) {
|
|
157
|
+
originalSrcDescriptor.set.call(this, value);
|
|
158
|
+
img.onload = function () {
|
|
159
|
+
if (value.includes('https://www.facebook.com/privacy_sandbox/pixel/register/trigger/')) {
|
|
160
|
+
const url = new URL(value);
|
|
161
|
+
const params = Object.fromEntries(url.searchParams.entries());
|
|
162
|
+
bffCollectEvent({
|
|
163
|
+
eventName: params === null || params === void 0 ? void 0 : params.ev,
|
|
164
|
+
eventSource: 'Meta Pixel',
|
|
165
|
+
eventInfo: params
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
},
|
|
170
|
+
get() {
|
|
171
|
+
return originalSrcDescriptor.get.call(this);
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
return img;
|
|
175
|
+
};
|
|
176
|
+
}
|
|
177
|
+
}, [bffCollectEvent]);
|
|
178
|
+
(0, react_1.useEffect)(() => {
|
|
179
|
+
if (typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
|
|
180
|
+
window === null || window === void 0 ? void 0 : window.fbq('track', 'PageView');
|
|
181
|
+
}
|
|
182
|
+
}, []);
|
|
136
183
|
const bffFetchAdmin = (0, react_1.useCallback)((path, options) => {
|
|
137
184
|
if (!bffDataSource)
|
|
138
185
|
return;
|
|
@@ -381,6 +428,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
381
428
|
const newUrl = updateQueryStringParameter(currentUrl, 'timestamp', Date.now());
|
|
382
429
|
history.pushState({ path: newUrl }, '', newUrl);
|
|
383
430
|
isPushState = true;
|
|
431
|
+
bffCollectEvent({
|
|
432
|
+
eventName: 'page_view',
|
|
433
|
+
eventSource: 'Google Analytics'
|
|
434
|
+
});
|
|
384
435
|
}
|
|
385
436
|
}
|
|
386
437
|
else {
|
|
@@ -390,17 +441,31 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
390
441
|
if (!isPushState) {
|
|
391
442
|
if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
|
|
392
443
|
window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
|
|
444
|
+
bffCollectEvent({
|
|
445
|
+
eventName: 'page_view',
|
|
446
|
+
eventSource: 'Google Analytics'
|
|
447
|
+
});
|
|
393
448
|
}
|
|
394
449
|
const tiktokPixelEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.tiktokPixel) === null || _b === void 0 ? void 0 : _b[eventName];
|
|
395
450
|
if ((tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name) &&
|
|
396
451
|
typeof (window === null || window === void 0 ? void 0 : window.ttq) === 'object' &&
|
|
397
452
|
typeof ((_c = window === null || window === void 0 ? void 0 : window.ttq) === null || _c === void 0 ? void 0 : _c.track) === 'function') {
|
|
398
453
|
(_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));
|
|
454
|
+
bffCollectEvent({
|
|
455
|
+
eventName: tiktokPixelEventParamsJson === null || tiktokPixelEventParamsJson === void 0 ? void 0 : tiktokPixelEventParamsJson.event_name,
|
|
456
|
+
eventSource: 'TikTok Pixel',
|
|
457
|
+
eventInfo: getEventParamsByJson(tiktokPixelEventParamsJson, product)
|
|
458
|
+
});
|
|
399
459
|
}
|
|
400
460
|
}
|
|
401
461
|
const snapchatPixelEventParamsJson = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.snapchatPixel) === null || _e === void 0 ? void 0 : _e[eventName];
|
|
402
462
|
if ((snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.snaptr) === 'function') {
|
|
403
463
|
window === null || window === void 0 ? void 0 : window.snaptr('track', snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name, getEventParamsByJson(snapchatPixelEventParamsJson, product));
|
|
464
|
+
bffCollectEvent({
|
|
465
|
+
eventName: snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name,
|
|
466
|
+
eventSource: 'Snapchat Pixel',
|
|
467
|
+
eventInfo: getEventParamsByJson(snapchatPixelEventParamsJson, product)
|
|
468
|
+
});
|
|
404
469
|
}
|
|
405
470
|
const converApiEventParamsJson = (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _f === void 0 ? void 0 : _f[eventName];
|
|
406
471
|
if (enabledMetaConversionApi && converApiEventParamsJson) {
|