TrackJS 和 GDPR 和 SPA
TrackJS and GDPR and SPA
我在 SPA 中使用 TrackJS,我有与 GDPR 相关的逻辑,所以在获得同意之前我不能发送任何数据。
我发现 onError
配置选项可以帮助解决这个问题。
但我仍然有 https://usage.trackjs.com/usage.gif
的外部请求。我可以通过一些技巧禁用它,但它看起来不正确。
那么如何防止使用调用呢?
实现示例:
import { TrackJS } from 'trackjs';
let GLOBAL_VARIABLE_IS_CONSENT_GIVEN = false;
TrackJS.install({
usageURL: '#', // disable usage call
onError: function() {
if (!GLOBAL_VARIABLE_IS_CONSENT_GIVEN) {
return false;
}
// other logic
return true;
},
});
我还发现 SPA 中的用法调用存在问题。它不会显示实际的页面查看结果。所以支持手动调用使用请求就好了,可以解决上面两个问题。
发现它的已知限制:https://docs.trackjs.com/data-management/pageviews/
Todd 来自 TrackJS front end error monitoring 这里。我认为您不需要缩短对 GDPR 用法的调用,因为它不包含任何特定于用户的数据。它只是一个给定应用程序已加载次数的计数器。
用法仅发送:
- 帐户令牌
- 我会申请
- 生成的唯一标识符
None 这些跟踪回用户,所以你应该能够继续并允许使用调用发生,并使用你描述的方法来阻止在 [=10 中发送错误=].
或者,我建议您推迟对 TrackJS.install
的呼叫,直到获得同意。这种方法的缺点是不会捕获在同意之前发生的错误。但我猜这就是用户想要的?
目前我只找到一种解决方法。
我写了 helper class,它应用猴子补丁来防止发送使用调用和错误跟踪,直到它允许。当您需要阻止加载外部脚本时,通常会使用 Monkey 补丁,例如我们已经在使用的 iubenda。
助手class:
class TrackJSUtil {
static URL_PATTERN = /usage\.trackjs\.com/;
/**
* Keep usage url
*
* @private
* @type {null|string}
*/
usageUrl = null;
/**
* Is requests allowed
*
* @private
* @type {boolean}
*/
isRequestsAllowed = false;
/**
* Apply monkey patch
*/
install() {
if (this.isRequestsAllowed) {
return;
}
const setUsageUrl = (value) => {
this.usageUrl = value;
};
const ignore = () => this.isRequestsAllowed || this.usageUrl != null;
const createElementOriginal = document.createElement.bind(document);
document.createElement = function createElementForTrackJS(...args) {
const element = createElementOriginal(...args);
if (ignore() || element.tagName.toUpperCase() !== 'IMG') {
return element;
}
Object.defineProperty(element, 'src', {
get() {
return this.getAttribute('src');
},
set(value) {
if (TrackJSUtil.URL_PATTERN.test(value)) {
setUsageUrl(value);
} else {
this.setAttribute('src', value);
}
},
});
return element;
};
}
/**
* Callback for onError in TrackJS
* @return {boolean}
*/
onTrackJSError() {
return this.isRequestsAllowed;
}
/**
* Call it when requests are allowed
*/
allow() {
if (this.isRequestsAllowed) {
return;
}
this.isRequestsAllowed = true;
if (this.usageUrl == null) {
return;
}
document.createElement('img').src = this.usageUrl;
}
}
用法:
import { TrackJS } from 'trackjs';
const util = new TrackJSUtil();
if (IS_CONSENT_GIVEN) {
util.allow()
} else {
callItWhenConsentGiven(() => {
util.allow();
});
}
util.install();
TrackJS.install({
onError: () => util.onTrackJSError(),
});
我在 SPA 中使用 TrackJS,我有与 GDPR 相关的逻辑,所以在获得同意之前我不能发送任何数据。
我发现 onError
配置选项可以帮助解决这个问题。
但我仍然有 https://usage.trackjs.com/usage.gif
的外部请求。我可以通过一些技巧禁用它,但它看起来不正确。
那么如何防止使用调用呢?
实现示例:
import { TrackJS } from 'trackjs';
let GLOBAL_VARIABLE_IS_CONSENT_GIVEN = false;
TrackJS.install({
usageURL: '#', // disable usage call
onError: function() {
if (!GLOBAL_VARIABLE_IS_CONSENT_GIVEN) {
return false;
}
// other logic
return true;
},
});
我还发现 SPA 中的用法调用存在问题。它不会显示实际的页面查看结果。所以支持手动调用使用请求就好了,可以解决上面两个问题。 发现它的已知限制:https://docs.trackjs.com/data-management/pageviews/
Todd 来自 TrackJS front end error monitoring 这里。我认为您不需要缩短对 GDPR 用法的调用,因为它不包含任何特定于用户的数据。它只是一个给定应用程序已加载次数的计数器。
用法仅发送:
- 帐户令牌
- 我会申请
- 生成的唯一标识符
None 这些跟踪回用户,所以你应该能够继续并允许使用调用发生,并使用你描述的方法来阻止在 [=10 中发送错误=].
或者,我建议您推迟对 TrackJS.install
的呼叫,直到获得同意。这种方法的缺点是不会捕获在同意之前发生的错误。但我猜这就是用户想要的?
目前我只找到一种解决方法。 我写了 helper class,它应用猴子补丁来防止发送使用调用和错误跟踪,直到它允许。当您需要阻止加载外部脚本时,通常会使用 Monkey 补丁,例如我们已经在使用的 iubenda。
助手class:
class TrackJSUtil {
static URL_PATTERN = /usage\.trackjs\.com/;
/**
* Keep usage url
*
* @private
* @type {null|string}
*/
usageUrl = null;
/**
* Is requests allowed
*
* @private
* @type {boolean}
*/
isRequestsAllowed = false;
/**
* Apply monkey patch
*/
install() {
if (this.isRequestsAllowed) {
return;
}
const setUsageUrl = (value) => {
this.usageUrl = value;
};
const ignore = () => this.isRequestsAllowed || this.usageUrl != null;
const createElementOriginal = document.createElement.bind(document);
document.createElement = function createElementForTrackJS(...args) {
const element = createElementOriginal(...args);
if (ignore() || element.tagName.toUpperCase() !== 'IMG') {
return element;
}
Object.defineProperty(element, 'src', {
get() {
return this.getAttribute('src');
},
set(value) {
if (TrackJSUtil.URL_PATTERN.test(value)) {
setUsageUrl(value);
} else {
this.setAttribute('src', value);
}
},
});
return element;
};
}
/**
* Callback for onError in TrackJS
* @return {boolean}
*/
onTrackJSError() {
return this.isRequestsAllowed;
}
/**
* Call it when requests are allowed
*/
allow() {
if (this.isRequestsAllowed) {
return;
}
this.isRequestsAllowed = true;
if (this.usageUrl == null) {
return;
}
document.createElement('img').src = this.usageUrl;
}
}
用法:
import { TrackJS } from 'trackjs';
const util = new TrackJSUtil();
if (IS_CONSENT_GIVEN) {
util.allow()
} else {
callItWhenConsentGiven(() => {
util.allow();
});
}
util.install();
TrackJS.install({
onError: () => util.onTrackJSError(),
});