@financial-times/cmp-client 3.0.1 → 3.1.2
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 +230 -16
- package/dist/index.js +230 -16
- package/dist/src/client.d.ts +1 -1
- package/dist/src/client.d.ts.map +1 -1
- package/dist/src/tracking/__tests__/state.test.d.ts +2 -0
- package/dist/src/tracking/__tests__/state.test.d.ts.map +1 -0
- package/dist/src/tracking/constants.d.ts +3 -0
- package/dist/src/tracking/constants.d.ts.map +1 -0
- package/dist/src/tracking/index.d.ts +3 -0
- package/dist/src/tracking/index.d.ts.map +1 -0
- package/dist/src/tracking/state.d.ts +9 -0
- package/dist/src/tracking/state.d.ts.map +1 -0
- package/package.json +4 -2
- package/typings/types.d.ts +37 -1
package/dist/index.cjs
CHANGED
|
@@ -7,7 +7,7 @@ var __publicField = (obj, key, value) => {
|
|
|
7
7
|
};
|
|
8
8
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
|
|
9
9
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
10
|
-
const version = "3.
|
|
10
|
+
const version = "3.1.2";
|
|
11
11
|
const events = {
|
|
12
12
|
onMessageChoiceSelect: (...args) => {
|
|
13
13
|
console.log("[debug] onMessageChoiceSelect", args);
|
|
@@ -2929,6 +2929,212 @@ function consentReadyHandlerFn(props) {
|
|
|
2929
2929
|
document.dispatchEvent(new CustomEvent("oCookieMessage.act", { bubbles: true }));
|
|
2930
2930
|
};
|
|
2931
2931
|
}
|
|
2932
|
+
let getRandomValues;
|
|
2933
|
+
const rnds8 = new Uint8Array(16);
|
|
2934
|
+
function rng() {
|
|
2935
|
+
if (!getRandomValues) {
|
|
2936
|
+
getRandomValues = typeof crypto !== "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
|
|
2937
|
+
if (!getRandomValues) {
|
|
2938
|
+
throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
|
|
2939
|
+
}
|
|
2940
|
+
}
|
|
2941
|
+
return getRandomValues(rnds8);
|
|
2942
|
+
}
|
|
2943
|
+
const byteToHex = [];
|
|
2944
|
+
for (let i = 0; i < 256; ++i) {
|
|
2945
|
+
byteToHex.push((i + 256).toString(16).slice(1));
|
|
2946
|
+
}
|
|
2947
|
+
function unsafeStringify(arr, offset = 0) {
|
|
2948
|
+
return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
|
|
2949
|
+
}
|
|
2950
|
+
const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
|
|
2951
|
+
const native = {
|
|
2952
|
+
randomUUID
|
|
2953
|
+
};
|
|
2954
|
+
function v4(options, buf, offset) {
|
|
2955
|
+
if (native.randomUUID && !buf && !options) {
|
|
2956
|
+
return native.randomUUID();
|
|
2957
|
+
}
|
|
2958
|
+
options = options || {};
|
|
2959
|
+
const rnds = options.random || (options.rng || rng)();
|
|
2960
|
+
rnds[6] = rnds[6] & 15 | 64;
|
|
2961
|
+
rnds[8] = rnds[8] & 63 | 128;
|
|
2962
|
+
if (buf) {
|
|
2963
|
+
offset = offset || 0;
|
|
2964
|
+
for (let i = 0; i < 16; ++i) {
|
|
2965
|
+
buf[offset + i] = rnds[i];
|
|
2966
|
+
}
|
|
2967
|
+
return buf;
|
|
2968
|
+
}
|
|
2969
|
+
return unsafeStringify(rnds);
|
|
2970
|
+
}
|
|
2971
|
+
const COOKIE_MESSAGE = "cookie-message";
|
|
2972
|
+
const PRIVACY_MANAGER = "manage-cookies";
|
|
2973
|
+
const INITIAL_STATE = Object.freeze({
|
|
2974
|
+
activeComponent: COOKIE_MESSAGE
|
|
2975
|
+
});
|
|
2976
|
+
let privateState = INITIAL_STATE;
|
|
2977
|
+
function isPlainObject(obj) {
|
|
2978
|
+
return typeof obj === "object" && obj !== null && obj.constructor === Object && Object.prototype.toString.call(obj) === "[object Object]";
|
|
2979
|
+
}
|
|
2980
|
+
const getState = () => ({ ...privateState });
|
|
2981
|
+
const setState = (newState) => {
|
|
2982
|
+
if (!isPlainObject(newState)) {
|
|
2983
|
+
console.error("Invalid state changes");
|
|
2984
|
+
return;
|
|
2985
|
+
}
|
|
2986
|
+
privateState = { ...privateState, ...newState };
|
|
2987
|
+
};
|
|
2988
|
+
const ACCEPT_ALL_CHOICE = 11;
|
|
2989
|
+
const MANAGE_PREFS_CHOICE = 12;
|
|
2990
|
+
const REJECT_ALL_CHOICE = 13;
|
|
2991
|
+
const cookieToggleFlags = ["adsDisableInternalCMP", "pwm.cmp", "messageSlotBottom"];
|
|
2992
|
+
function initTracking(context) {
|
|
2993
|
+
const componentId = v4();
|
|
2994
|
+
const flags = extractRelevantFlags(context.flags);
|
|
2995
|
+
window._sp_queue = window._sp_queue ?? [];
|
|
2996
|
+
window._sp_queue.push(() => {
|
|
2997
|
+
var _a2, _b2;
|
|
2998
|
+
for (const [eventId, eventHandler] of Object.entries(trackingEventHandlers)) {
|
|
2999
|
+
(_b2 = (_a2 = window._sp_).addEventListener) == null ? void 0 : _b2.call(_a2, eventId, eventHandler({ ...context, flags, componentId }));
|
|
3000
|
+
}
|
|
3001
|
+
});
|
|
3002
|
+
}
|
|
3003
|
+
function extractRelevantFlags(flags) {
|
|
3004
|
+
const output = {};
|
|
3005
|
+
if (typeof flags === "object") {
|
|
3006
|
+
cookieToggleFlags.forEach((flagName) => {
|
|
3007
|
+
if (Object.prototype.hasOwnProperty.call(flags, flagName)) {
|
|
3008
|
+
output[flagName] = flags[flagName];
|
|
3009
|
+
}
|
|
3010
|
+
});
|
|
3011
|
+
}
|
|
3012
|
+
return output;
|
|
3013
|
+
}
|
|
3014
|
+
function track(payload) {
|
|
3015
|
+
if (!payload)
|
|
3016
|
+
return;
|
|
3017
|
+
const rootEl = document.body;
|
|
3018
|
+
const event = new CustomEvent("oTracking.event", {
|
|
3019
|
+
bubbles: true,
|
|
3020
|
+
cancelable: true,
|
|
3021
|
+
detail: payload.detail
|
|
3022
|
+
});
|
|
3023
|
+
rootEl.dispatchEvent(event);
|
|
3024
|
+
}
|
|
3025
|
+
function dispatchComponentEvent({
|
|
3026
|
+
trackingProps,
|
|
3027
|
+
action,
|
|
3028
|
+
triggerAction,
|
|
3029
|
+
messageType
|
|
3030
|
+
}) {
|
|
3031
|
+
const state = getState();
|
|
3032
|
+
const { componentId, product, app, flags } = trackingProps;
|
|
3033
|
+
const event = {
|
|
3034
|
+
detail: {
|
|
3035
|
+
component: {
|
|
3036
|
+
id: componentId,
|
|
3037
|
+
name: state.activeComponent,
|
|
3038
|
+
type: "overlay",
|
|
3039
|
+
subtype: "cmp",
|
|
3040
|
+
componentContentId: state[messageType]
|
|
3041
|
+
},
|
|
3042
|
+
category: "component",
|
|
3043
|
+
action,
|
|
3044
|
+
...triggerAction && { trigger_action: triggerAction },
|
|
3045
|
+
...product && { product },
|
|
3046
|
+
...app && { app },
|
|
3047
|
+
custom: [
|
|
3048
|
+
{
|
|
3049
|
+
cookie_toggle_flag: flags
|
|
3050
|
+
}
|
|
3051
|
+
]
|
|
3052
|
+
}
|
|
3053
|
+
};
|
|
3054
|
+
track(event);
|
|
3055
|
+
}
|
|
3056
|
+
const trackingEventHandlers = {
|
|
3057
|
+
onMessageChoiceSelect: (trackingProps) => (messageType, _choiceId, choiceTypeId) => {
|
|
3058
|
+
if (choiceTypeId === ACCEPT_ALL_CHOICE) {
|
|
3059
|
+
dispatchComponentEvent({
|
|
3060
|
+
trackingProps,
|
|
3061
|
+
action: "click",
|
|
3062
|
+
triggerAction: "accept_all",
|
|
3063
|
+
messageType
|
|
3064
|
+
});
|
|
3065
|
+
}
|
|
3066
|
+
if (choiceTypeId === MANAGE_PREFS_CHOICE) {
|
|
3067
|
+
dispatchComponentEvent({
|
|
3068
|
+
trackingProps,
|
|
3069
|
+
action: "click",
|
|
3070
|
+
triggerAction: "manage_cookies",
|
|
3071
|
+
messageType
|
|
3072
|
+
});
|
|
3073
|
+
setState({
|
|
3074
|
+
activeComponent: PRIVACY_MANAGER
|
|
3075
|
+
});
|
|
3076
|
+
}
|
|
3077
|
+
if (choiceTypeId === REJECT_ALL_CHOICE) {
|
|
3078
|
+
dispatchComponentEvent({
|
|
3079
|
+
trackingProps,
|
|
3080
|
+
action: "click",
|
|
3081
|
+
triggerAction: "reject_all",
|
|
3082
|
+
messageType
|
|
3083
|
+
});
|
|
3084
|
+
}
|
|
3085
|
+
},
|
|
3086
|
+
onMessageReady: (trackingProps) => (messageType) => {
|
|
3087
|
+
dispatchComponentEvent({
|
|
3088
|
+
trackingProps,
|
|
3089
|
+
action: "view",
|
|
3090
|
+
messageType
|
|
3091
|
+
});
|
|
3092
|
+
},
|
|
3093
|
+
onPrivacyManagerAction: (trackingProps) => (messageType, pmData) => {
|
|
3094
|
+
const { purposeConsent, vendorConsent } = pmData;
|
|
3095
|
+
const isAcceptAll = purposeConsent === "all" && vendorConsent === "all";
|
|
3096
|
+
const isRejectAll = purposeConsent === "none" && vendorConsent === "none";
|
|
3097
|
+
setState({
|
|
3098
|
+
activeComponent: PRIVACY_MANAGER
|
|
3099
|
+
});
|
|
3100
|
+
if (isAcceptAll) {
|
|
3101
|
+
dispatchComponentEvent({
|
|
3102
|
+
trackingProps,
|
|
3103
|
+
action: "click",
|
|
3104
|
+
triggerAction: "accept_all",
|
|
3105
|
+
messageType
|
|
3106
|
+
});
|
|
3107
|
+
} else if (isRejectAll) {
|
|
3108
|
+
dispatchComponentEvent({
|
|
3109
|
+
trackingProps,
|
|
3110
|
+
action: "click",
|
|
3111
|
+
triggerAction: "reject_all",
|
|
3112
|
+
messageType
|
|
3113
|
+
});
|
|
3114
|
+
} else {
|
|
3115
|
+
dispatchComponentEvent({
|
|
3116
|
+
trackingProps,
|
|
3117
|
+
action: "click",
|
|
3118
|
+
triggerAction: "save_and_close",
|
|
3119
|
+
messageType
|
|
3120
|
+
});
|
|
3121
|
+
}
|
|
3122
|
+
},
|
|
3123
|
+
onMessageReceiveData: () => (messageType, data) => {
|
|
3124
|
+
const { messageId } = data;
|
|
3125
|
+
setState({
|
|
3126
|
+
[messageType]: messageId
|
|
3127
|
+
});
|
|
3128
|
+
},
|
|
3129
|
+
onError: (trackingProps) => (messageType, errorCode) => {
|
|
3130
|
+
dispatchComponentEvent({
|
|
3131
|
+
trackingProps,
|
|
3132
|
+
action: "error",
|
|
3133
|
+
triggerAction: errorCode,
|
|
3134
|
+
messageType
|
|
3135
|
+
});
|
|
3136
|
+
}
|
|
3137
|
+
};
|
|
2932
3138
|
async function initSourcepointCmp({
|
|
2933
3139
|
propertyConfig = FT_DOTCOM_PROD,
|
|
2934
3140
|
userId,
|
|
@@ -2936,9 +3142,9 @@ async function initSourcepointCmp({
|
|
|
2936
3142
|
consentProxyHost = FT_CONSENT_PROXY_HOST,
|
|
2937
3143
|
cookieDomain = FT_COOKIE_DOMAIN,
|
|
2938
3144
|
formOfWordsId = SOURCEPOINT_FOW_ID,
|
|
2939
|
-
useConsentStore = true
|
|
3145
|
+
useConsentStore = true,
|
|
3146
|
+
trackingContext = {}
|
|
2940
3147
|
} = {}) {
|
|
2941
|
-
var _a2;
|
|
2942
3148
|
if (!userId && useFTSession) {
|
|
2943
3149
|
try {
|
|
2944
3150
|
const response = await getUuid();
|
|
@@ -2953,20 +3159,28 @@ async function initSourcepointCmp({
|
|
|
2953
3159
|
if (userId) {
|
|
2954
3160
|
propertyConfig.authId = userId;
|
|
2955
3161
|
}
|
|
2956
|
-
if (
|
|
2957
|
-
console.warn(
|
|
3162
|
+
if (propertyConfig.events) {
|
|
3163
|
+
console.warn(
|
|
3164
|
+
"[cmp-client] Passing an events map in the config is not supported and will be ignored. Please use window._sp_.addEventListener() to listen for events"
|
|
3165
|
+
);
|
|
3166
|
+
delete propertyConfig.events;
|
|
2958
3167
|
}
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
|
|
2966
|
-
|
|
2967
|
-
|
|
2968
|
-
|
|
2969
|
-
|
|
3168
|
+
bootstrapCmp(propertyConfig);
|
|
3169
|
+
window._sp_queue.push(() => {
|
|
3170
|
+
var _a2, _b2;
|
|
3171
|
+
(_b2 = (_a2 = window._sp_) == null ? void 0 : _a2.addEventListener) == null ? void 0 : _b2.call(
|
|
3172
|
+
_a2,
|
|
3173
|
+
"onConsentReady",
|
|
3174
|
+
consentReadyHandlerFn({
|
|
3175
|
+
userId,
|
|
3176
|
+
consentProxyHost,
|
|
3177
|
+
cookieDomain,
|
|
3178
|
+
formOfWordsId,
|
|
3179
|
+
useConsentStore
|
|
3180
|
+
})
|
|
3181
|
+
);
|
|
3182
|
+
});
|
|
3183
|
+
initTracking(trackingContext);
|
|
2970
3184
|
}
|
|
2971
3185
|
window.FT_CMP_CLIENT_VERSION = version;
|
|
2972
3186
|
exports.debug = debug;
|
package/dist/index.js
CHANGED
|
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
|
|
8
|
-
const version = "3.
|
|
8
|
+
const version = "3.1.2";
|
|
9
9
|
const events = {
|
|
10
10
|
onMessageChoiceSelect: (...args) => {
|
|
11
11
|
console.log("[debug] onMessageChoiceSelect", args);
|
|
@@ -2927,6 +2927,212 @@ function consentReadyHandlerFn(props) {
|
|
|
2927
2927
|
document.dispatchEvent(new CustomEvent("oCookieMessage.act", { bubbles: true }));
|
|
2928
2928
|
};
|
|
2929
2929
|
}
|
|
2930
|
+
let getRandomValues;
|
|
2931
|
+
const rnds8 = new Uint8Array(16);
|
|
2932
|
+
function rng() {
|
|
2933
|
+
if (!getRandomValues) {
|
|
2934
|
+
getRandomValues = typeof crypto !== "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
|
|
2935
|
+
if (!getRandomValues) {
|
|
2936
|
+
throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
|
|
2937
|
+
}
|
|
2938
|
+
}
|
|
2939
|
+
return getRandomValues(rnds8);
|
|
2940
|
+
}
|
|
2941
|
+
const byteToHex = [];
|
|
2942
|
+
for (let i = 0; i < 256; ++i) {
|
|
2943
|
+
byteToHex.push((i + 256).toString(16).slice(1));
|
|
2944
|
+
}
|
|
2945
|
+
function unsafeStringify(arr, offset = 0) {
|
|
2946
|
+
return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
|
|
2947
|
+
}
|
|
2948
|
+
const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
|
|
2949
|
+
const native = {
|
|
2950
|
+
randomUUID
|
|
2951
|
+
};
|
|
2952
|
+
function v4(options, buf, offset) {
|
|
2953
|
+
if (native.randomUUID && !buf && !options) {
|
|
2954
|
+
return native.randomUUID();
|
|
2955
|
+
}
|
|
2956
|
+
options = options || {};
|
|
2957
|
+
const rnds = options.random || (options.rng || rng)();
|
|
2958
|
+
rnds[6] = rnds[6] & 15 | 64;
|
|
2959
|
+
rnds[8] = rnds[8] & 63 | 128;
|
|
2960
|
+
if (buf) {
|
|
2961
|
+
offset = offset || 0;
|
|
2962
|
+
for (let i = 0; i < 16; ++i) {
|
|
2963
|
+
buf[offset + i] = rnds[i];
|
|
2964
|
+
}
|
|
2965
|
+
return buf;
|
|
2966
|
+
}
|
|
2967
|
+
return unsafeStringify(rnds);
|
|
2968
|
+
}
|
|
2969
|
+
const COOKIE_MESSAGE = "cookie-message";
|
|
2970
|
+
const PRIVACY_MANAGER = "manage-cookies";
|
|
2971
|
+
const INITIAL_STATE = Object.freeze({
|
|
2972
|
+
activeComponent: COOKIE_MESSAGE
|
|
2973
|
+
});
|
|
2974
|
+
let privateState = INITIAL_STATE;
|
|
2975
|
+
function isPlainObject(obj) {
|
|
2976
|
+
return typeof obj === "object" && obj !== null && obj.constructor === Object && Object.prototype.toString.call(obj) === "[object Object]";
|
|
2977
|
+
}
|
|
2978
|
+
const getState = () => ({ ...privateState });
|
|
2979
|
+
const setState = (newState) => {
|
|
2980
|
+
if (!isPlainObject(newState)) {
|
|
2981
|
+
console.error("Invalid state changes");
|
|
2982
|
+
return;
|
|
2983
|
+
}
|
|
2984
|
+
privateState = { ...privateState, ...newState };
|
|
2985
|
+
};
|
|
2986
|
+
const ACCEPT_ALL_CHOICE = 11;
|
|
2987
|
+
const MANAGE_PREFS_CHOICE = 12;
|
|
2988
|
+
const REJECT_ALL_CHOICE = 13;
|
|
2989
|
+
const cookieToggleFlags = ["adsDisableInternalCMP", "pwm.cmp", "messageSlotBottom"];
|
|
2990
|
+
function initTracking(context) {
|
|
2991
|
+
const componentId = v4();
|
|
2992
|
+
const flags = extractRelevantFlags(context.flags);
|
|
2993
|
+
window._sp_queue = window._sp_queue ?? [];
|
|
2994
|
+
window._sp_queue.push(() => {
|
|
2995
|
+
var _a2, _b2;
|
|
2996
|
+
for (const [eventId, eventHandler] of Object.entries(trackingEventHandlers)) {
|
|
2997
|
+
(_b2 = (_a2 = window._sp_).addEventListener) == null ? void 0 : _b2.call(_a2, eventId, eventHandler({ ...context, flags, componentId }));
|
|
2998
|
+
}
|
|
2999
|
+
});
|
|
3000
|
+
}
|
|
3001
|
+
function extractRelevantFlags(flags) {
|
|
3002
|
+
const output = {};
|
|
3003
|
+
if (typeof flags === "object") {
|
|
3004
|
+
cookieToggleFlags.forEach((flagName) => {
|
|
3005
|
+
if (Object.prototype.hasOwnProperty.call(flags, flagName)) {
|
|
3006
|
+
output[flagName] = flags[flagName];
|
|
3007
|
+
}
|
|
3008
|
+
});
|
|
3009
|
+
}
|
|
3010
|
+
return output;
|
|
3011
|
+
}
|
|
3012
|
+
function track(payload) {
|
|
3013
|
+
if (!payload)
|
|
3014
|
+
return;
|
|
3015
|
+
const rootEl = document.body;
|
|
3016
|
+
const event = new CustomEvent("oTracking.event", {
|
|
3017
|
+
bubbles: true,
|
|
3018
|
+
cancelable: true,
|
|
3019
|
+
detail: payload.detail
|
|
3020
|
+
});
|
|
3021
|
+
rootEl.dispatchEvent(event);
|
|
3022
|
+
}
|
|
3023
|
+
function dispatchComponentEvent({
|
|
3024
|
+
trackingProps,
|
|
3025
|
+
action,
|
|
3026
|
+
triggerAction,
|
|
3027
|
+
messageType
|
|
3028
|
+
}) {
|
|
3029
|
+
const state = getState();
|
|
3030
|
+
const { componentId, product, app, flags } = trackingProps;
|
|
3031
|
+
const event = {
|
|
3032
|
+
detail: {
|
|
3033
|
+
component: {
|
|
3034
|
+
id: componentId,
|
|
3035
|
+
name: state.activeComponent,
|
|
3036
|
+
type: "overlay",
|
|
3037
|
+
subtype: "cmp",
|
|
3038
|
+
componentContentId: state[messageType]
|
|
3039
|
+
},
|
|
3040
|
+
category: "component",
|
|
3041
|
+
action,
|
|
3042
|
+
...triggerAction && { trigger_action: triggerAction },
|
|
3043
|
+
...product && { product },
|
|
3044
|
+
...app && { app },
|
|
3045
|
+
custom: [
|
|
3046
|
+
{
|
|
3047
|
+
cookie_toggle_flag: flags
|
|
3048
|
+
}
|
|
3049
|
+
]
|
|
3050
|
+
}
|
|
3051
|
+
};
|
|
3052
|
+
track(event);
|
|
3053
|
+
}
|
|
3054
|
+
const trackingEventHandlers = {
|
|
3055
|
+
onMessageChoiceSelect: (trackingProps) => (messageType, _choiceId, choiceTypeId) => {
|
|
3056
|
+
if (choiceTypeId === ACCEPT_ALL_CHOICE) {
|
|
3057
|
+
dispatchComponentEvent({
|
|
3058
|
+
trackingProps,
|
|
3059
|
+
action: "click",
|
|
3060
|
+
triggerAction: "accept_all",
|
|
3061
|
+
messageType
|
|
3062
|
+
});
|
|
3063
|
+
}
|
|
3064
|
+
if (choiceTypeId === MANAGE_PREFS_CHOICE) {
|
|
3065
|
+
dispatchComponentEvent({
|
|
3066
|
+
trackingProps,
|
|
3067
|
+
action: "click",
|
|
3068
|
+
triggerAction: "manage_cookies",
|
|
3069
|
+
messageType
|
|
3070
|
+
});
|
|
3071
|
+
setState({
|
|
3072
|
+
activeComponent: PRIVACY_MANAGER
|
|
3073
|
+
});
|
|
3074
|
+
}
|
|
3075
|
+
if (choiceTypeId === REJECT_ALL_CHOICE) {
|
|
3076
|
+
dispatchComponentEvent({
|
|
3077
|
+
trackingProps,
|
|
3078
|
+
action: "click",
|
|
3079
|
+
triggerAction: "reject_all",
|
|
3080
|
+
messageType
|
|
3081
|
+
});
|
|
3082
|
+
}
|
|
3083
|
+
},
|
|
3084
|
+
onMessageReady: (trackingProps) => (messageType) => {
|
|
3085
|
+
dispatchComponentEvent({
|
|
3086
|
+
trackingProps,
|
|
3087
|
+
action: "view",
|
|
3088
|
+
messageType
|
|
3089
|
+
});
|
|
3090
|
+
},
|
|
3091
|
+
onPrivacyManagerAction: (trackingProps) => (messageType, pmData) => {
|
|
3092
|
+
const { purposeConsent, vendorConsent } = pmData;
|
|
3093
|
+
const isAcceptAll = purposeConsent === "all" && vendorConsent === "all";
|
|
3094
|
+
const isRejectAll = purposeConsent === "none" && vendorConsent === "none";
|
|
3095
|
+
setState({
|
|
3096
|
+
activeComponent: PRIVACY_MANAGER
|
|
3097
|
+
});
|
|
3098
|
+
if (isAcceptAll) {
|
|
3099
|
+
dispatchComponentEvent({
|
|
3100
|
+
trackingProps,
|
|
3101
|
+
action: "click",
|
|
3102
|
+
triggerAction: "accept_all",
|
|
3103
|
+
messageType
|
|
3104
|
+
});
|
|
3105
|
+
} else if (isRejectAll) {
|
|
3106
|
+
dispatchComponentEvent({
|
|
3107
|
+
trackingProps,
|
|
3108
|
+
action: "click",
|
|
3109
|
+
triggerAction: "reject_all",
|
|
3110
|
+
messageType
|
|
3111
|
+
});
|
|
3112
|
+
} else {
|
|
3113
|
+
dispatchComponentEvent({
|
|
3114
|
+
trackingProps,
|
|
3115
|
+
action: "click",
|
|
3116
|
+
triggerAction: "save_and_close",
|
|
3117
|
+
messageType
|
|
3118
|
+
});
|
|
3119
|
+
}
|
|
3120
|
+
},
|
|
3121
|
+
onMessageReceiveData: () => (messageType, data) => {
|
|
3122
|
+
const { messageId } = data;
|
|
3123
|
+
setState({
|
|
3124
|
+
[messageType]: messageId
|
|
3125
|
+
});
|
|
3126
|
+
},
|
|
3127
|
+
onError: (trackingProps) => (messageType, errorCode) => {
|
|
3128
|
+
dispatchComponentEvent({
|
|
3129
|
+
trackingProps,
|
|
3130
|
+
action: "error",
|
|
3131
|
+
triggerAction: errorCode,
|
|
3132
|
+
messageType
|
|
3133
|
+
});
|
|
3134
|
+
}
|
|
3135
|
+
};
|
|
2930
3136
|
async function initSourcepointCmp({
|
|
2931
3137
|
propertyConfig = FT_DOTCOM_PROD,
|
|
2932
3138
|
userId,
|
|
@@ -2934,9 +3140,9 @@ async function initSourcepointCmp({
|
|
|
2934
3140
|
consentProxyHost = FT_CONSENT_PROXY_HOST,
|
|
2935
3141
|
cookieDomain = FT_COOKIE_DOMAIN,
|
|
2936
3142
|
formOfWordsId = SOURCEPOINT_FOW_ID,
|
|
2937
|
-
useConsentStore = true
|
|
3143
|
+
useConsentStore = true,
|
|
3144
|
+
trackingContext = {}
|
|
2938
3145
|
} = {}) {
|
|
2939
|
-
var _a2;
|
|
2940
3146
|
if (!userId && useFTSession) {
|
|
2941
3147
|
try {
|
|
2942
3148
|
const response = await getUuid();
|
|
@@ -2951,20 +3157,28 @@ async function initSourcepointCmp({
|
|
|
2951
3157
|
if (userId) {
|
|
2952
3158
|
propertyConfig.authId = userId;
|
|
2953
3159
|
}
|
|
2954
|
-
if (
|
|
2955
|
-
console.warn(
|
|
3160
|
+
if (propertyConfig.events) {
|
|
3161
|
+
console.warn(
|
|
3162
|
+
"[cmp-client] Passing an events map in the config is not supported and will be ignored. Please use window._sp_.addEventListener() to listen for events"
|
|
3163
|
+
);
|
|
3164
|
+
delete propertyConfig.events;
|
|
2956
3165
|
}
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
|
|
2966
|
-
|
|
2967
|
-
|
|
3166
|
+
bootstrapCmp(propertyConfig);
|
|
3167
|
+
window._sp_queue.push(() => {
|
|
3168
|
+
var _a2, _b2;
|
|
3169
|
+
(_b2 = (_a2 = window._sp_) == null ? void 0 : _a2.addEventListener) == null ? void 0 : _b2.call(
|
|
3170
|
+
_a2,
|
|
3171
|
+
"onConsentReady",
|
|
3172
|
+
consentReadyHandlerFn({
|
|
3173
|
+
userId,
|
|
3174
|
+
consentProxyHost,
|
|
3175
|
+
cookieDomain,
|
|
3176
|
+
formOfWordsId,
|
|
3177
|
+
useConsentStore
|
|
3178
|
+
})
|
|
3179
|
+
);
|
|
3180
|
+
});
|
|
3181
|
+
initTracking(trackingContext);
|
|
2968
3182
|
}
|
|
2969
3183
|
window.FT_CMP_CLIENT_VERSION = version;
|
|
2970
3184
|
export {
|
package/dist/src/client.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { CMPInitOptions } from "../typings/types.d.ts";
|
|
2
|
-
export declare function initSourcepointCmp({ propertyConfig, userId, useFTSession, consentProxyHost, cookieDomain, formOfWordsId, useConsentStore, }?: CMPInitOptions): Promise<void>;
|
|
2
|
+
export declare function initSourcepointCmp({ propertyConfig, userId, useFTSession, consentProxyHost, cookieDomain, formOfWordsId, useConsentStore, trackingContext, }?: CMPInitOptions): Promise<void>;
|
|
3
3
|
//# sourceMappingURL=client.d.ts.map
|
package/dist/src/client.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAU5D,wBAAsB,kBAAkB,CAAC,EACvC,cAA+B,EAC/B,MAAM,EACN,YAAmB,EACnB,gBAAwC,EACxC,YAA+B,EAC/B,aAAkC,EAClC,eAAsB,EACtB,eAAoB,GACrB,GAAE,cAAmB,iBAyCrB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"state.test.d.ts","sourceRoot":"","sources":["../../../../src/tracking/__tests__/state.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/tracking/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,mBAAmB,CAAC;AAC/C,eAAO,MAAM,eAAe,mBAAmB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tracking/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAKV,eAAe,EAEhB,MAAM,0BAA0B,CAAC;AAUlC,wBAAgB,YAAY,CAAC,OAAO,EAAE,eAAe,QASpD"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare const INITIAL_STATE: Readonly<{
|
|
2
|
+
activeComponent: "cookie-message";
|
|
3
|
+
}>;
|
|
4
|
+
export declare function isPlainObject(obj: unknown): obj is object;
|
|
5
|
+
export declare const getState: () => {
|
|
6
|
+
[x: string]: string | number | boolean | null | undefined;
|
|
7
|
+
};
|
|
8
|
+
export declare const setState: (newState: unknown) => void;
|
|
9
|
+
//# sourceMappingURL=state.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../src/tracking/state.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa;;EAExB,CAAC;AAIH,wBAAgB,aAAa,CAAC,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,MAAM,CAOzD;AAGD,eAAO,MAAM,QAAQ;;CAA8B,CAAC;AAEpD,eAAO,MAAM,QAAQ,aAAc,OAAO,SAOzC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/cmp-client",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.1.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -17,9 +17,11 @@
|
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@iabtechlabtcf/core": "^1.5.10",
|
|
20
|
-
"next-session-client": "^5.0.0"
|
|
20
|
+
"next-session-client": "^5.0.0",
|
|
21
|
+
"uuid": "^9.0.1"
|
|
21
22
|
},
|
|
22
23
|
"devDependencies": {
|
|
24
|
+
"@types/uuid": "^9.0.7",
|
|
23
25
|
"eslint": "^8.53.0",
|
|
24
26
|
"npm-run-all": "^4.1.5",
|
|
25
27
|
"typescript": "^5.2.2",
|
package/typings/types.d.ts
CHANGED
|
@@ -33,7 +33,7 @@ export type CMPInitOptions = Partial<{
|
|
|
33
33
|
cookieDomain: string;
|
|
34
34
|
formOfWordsId: string;
|
|
35
35
|
useConsentStore: boolean;
|
|
36
|
-
|
|
36
|
+
trackingContext?: TrackingContext;
|
|
37
37
|
}>;
|
|
38
38
|
|
|
39
39
|
export interface ConsentPayloadOptions {
|
|
@@ -96,3 +96,39 @@ export interface ConsentState {
|
|
|
96
96
|
raw: RawConsentState;
|
|
97
97
|
parsed: ParsedConsentState;
|
|
98
98
|
}
|
|
99
|
+
|
|
100
|
+
export type TrackingProps = {
|
|
101
|
+
product?: string;
|
|
102
|
+
app?: string;
|
|
103
|
+
flags: FlagsObject;
|
|
104
|
+
componentId: string;
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
export type TrackingContext = {
|
|
108
|
+
product?: string;
|
|
109
|
+
app?: string;
|
|
110
|
+
flags?: FlagsObject;
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
export type TrackingEvent = {
|
|
114
|
+
detail: {
|
|
115
|
+
component: {
|
|
116
|
+
id: string;
|
|
117
|
+
name: string;
|
|
118
|
+
type: string;
|
|
119
|
+
subtype: string;
|
|
120
|
+
componentContentId: string | number;
|
|
121
|
+
};
|
|
122
|
+
category: string;
|
|
123
|
+
action: string;
|
|
124
|
+
custom?: Array<Record<string, unknown>>;
|
|
125
|
+
};
|
|
126
|
+
};
|
|
127
|
+
export type SPMessageType = "gdpr" | "ccpa" | "ios14" | "custom";
|
|
128
|
+
|
|
129
|
+
export type SPPMData = {
|
|
130
|
+
purposeConsent: "all" | "none" | "some";
|
|
131
|
+
vendorConsent: "all" | "none" | "some";
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
export type FlagsObject = Record<string, string | boolean>;
|