将 Mixpanel 与 chrome 扩展集成（无浏览器操作）
Integrating Mixpanel with a chrome extension (no browser action)
我构建了一个 chrome 扩展程序，可以将内容注入特定页面。它没有浏览器操作，因此没有稳定的地方来保存像混合面板这样的内容，但我不确定这是否是问题的一部分。
我根据之前的 SO 问题设置了 CSP，
Content Security Policy: cannot load Mixpanel in Chrome extension
(function(f,b){if(!b.__SV){var a,e,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");
for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=f.createElement("script");a.type="text/javascript";a.async=!0;a.src="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";e=f.getElementsByTagName("script")[0];e.parentNode.insertBefore(a,e)}})(document,window.mixpanel||[]);
mixpanel.init("[mixpanel_id]");
但我仍然得到这个错误："Mixpanel error: 'mixpanel' object not initialized. Ensure you are using the latest version of the Mixpanel JS Library along with the snippet we provide."
然后我发现这个博客建议使用 HTTP API 来解决这个问题。
http://beletsky.net/2014/05/using-mixpanel-analytics-from-chrome-extensions.html
最终，我正在寻找更好的解决方法，这样我就不必使用 HTTP API。我目前正在努力获得该设置，但为什么 mixpanel 不能用于开箱即用的注入扩展并且它可以纠正吗？
目前，我坚持使用 HTTP API，这是我基于上述博客使用的代码。我希望这只是一个临时解决方案，直到我找到解决错误的方法。
var api = 'https://api.mixpanel.com';
var analytics = window.app = window.app || {};
var mixpanel = {};
analytics.init = function init(token, user) {
mixpanel.token = token;
mixpanel.distinct_id = user.email;
}
analytics.track = function track(event) {
console.log(event, mixpanel);
var payload = {
event: event,
properties: {
distinct_id: mixpanel.distinct_id,
token: mixpanel.token
}
};
var data = window.btoa(JSON.stringify(payload));
var url = api + '/track?data=' + data;
$.get(url);
}
一旦收到来自 chrome 的用户电子邮件，我就会对其进行初始化。
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (typeof request.user != 'undefined'){
analytics.init('[my_id]', user.email);
sendResponse({farewell: "userId"});
}
}
});
最后我从我的应用程序中调用事件。
analytics.track("Checked" + panel);
----编辑----
我还在跟踪使用与上述类似代码的客户。使用此调用：analytics.engage()
analytics.engage = function engage() {
var timestamp = Date.now();
var payload = [
{
$token: mixpanel.token,
$distinct_id: user.email,
$ip: user.location.ip,
$set_once: {
"First login date": timestamp
}
},
{
$token: mixpanel.token,
$distinct_id: user.email,
$ip: user.location.ip,
$set: {
"Last login date": timestamp,
$email: user.email,
gender: user.gender,
given_name: user.given_name,
family_name: user.family_name,
ip: user.location.ip,
}
}
];
var data = window.btoa(JSON.stringify(payload));
var url = api + '/engage/?data=' + data;
$.get(url);
}
我构建了一个 chrome 扩展程序，可以将内容注入特定页面。它没有浏览器操作，因此没有稳定的地方来保存像混合面板这样的内容，但我不确定这是否是问题的一部分。 我根据之前的 SO 问题设置了 CSP，
Content Security Policy: cannot load Mixpanel in Chrome extension
(function(f,b){if(!b.__SV){var a,e,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");
for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=f.createElement("script");a.type="text/javascript";a.async=!0;a.src="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";e=f.getElementsByTagName("script")[0];e.parentNode.insertBefore(a,e)}})(document,window.mixpanel||[]);
mixpanel.init("[mixpanel_id]");
但我仍然得到这个错误："Mixpanel error: 'mixpanel' object not initialized. Ensure you are using the latest version of the Mixpanel JS Library along with the snippet we provide."
然后我发现这个博客建议使用 HTTP API 来解决这个问题。
http://beletsky.net/2014/05/using-mixpanel-analytics-from-chrome-extensions.html
最终，我正在寻找更好的解决方法，这样我就不必使用 HTTP API。我目前正在努力获得该设置，但为什么 mixpanel 不能用于开箱即用的注入扩展并且它可以纠正吗？
目前，我坚持使用 HTTP API，这是我基于上述博客使用的代码。我希望这只是一个临时解决方案，直到我找到解决错误的方法。
var api = 'https://api.mixpanel.com';
var analytics = window.app = window.app || {};
var mixpanel = {};
analytics.init = function init(token, user) {
mixpanel.token = token;
mixpanel.distinct_id = user.email;
}
analytics.track = function track(event) {
console.log(event, mixpanel);
var payload = {
event: event,
properties: {
distinct_id: mixpanel.distinct_id,
token: mixpanel.token
}
};
var data = window.btoa(JSON.stringify(payload));
var url = api + '/track?data=' + data;
$.get(url);
}
一旦收到来自 chrome 的用户电子邮件，我就会对其进行初始化。
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (typeof request.user != 'undefined'){
analytics.init('[my_id]', user.email);
sendResponse({farewell: "userId"});
}
}
});
最后我从我的应用程序中调用事件。
analytics.track("Checked" + panel);
----编辑----
我还在跟踪使用与上述类似代码的客户。使用此调用：analytics.engage()
analytics.engage = function engage() {
var timestamp = Date.now();
var payload = [
{
$token: mixpanel.token,
$distinct_id: user.email,
$ip: user.location.ip,
$set_once: {
"First login date": timestamp
}
},
{
$token: mixpanel.token,
$distinct_id: user.email,
$ip: user.location.ip,
$set: {
"Last login date": timestamp,
$email: user.email,
gender: user.gender,
given_name: user.given_name,
family_name: user.family_name,
ip: user.location.ip,
}
}
];
var data = window.btoa(JSON.stringify(payload));
var url = api + '/engage/?data=' + data;
$.get(url);
}