javascript - Mixpanel 与 async/await 函数冲突
问题描述
下面是带有 async/await 功能的示例 html 页面,它按预期工作,但如果我们添加 Mixpanel 默认代码异步部分失败。
混合面板默认代码
<!-- start Mixpanel --><script type="text/javascript">
(function(c,a){if(!a.__SV){var b=window;try{var d,m,j,k=b.location,f=k.hash;d=function(a,b){return(m=a.match(RegExp(b+"=([^&]*)")))?m[1]:null};f&&d(f,"state")&&(j=JSON.parse(decodeURIComponent(d(f,"state"))),"mpeditor"===j.action&&(b.sessionStorage.setItem("_mpcehash",f),history.replaceState(j.desiredHash||"",c.title,k.pathname+k.search)))}catch(n){}var l,h;window.mixpanel=a;a._i=[];a.init=function(b,d,g){function c(b,i){var a=i.split(".");2==a.length&&(b=b[a[0]],i=a[1]);b[i]=function(){b.push([i].concat(Array.prototype.slice.call(arguments,
0)))}}var e=a;"undefined"!==typeof g?e=a[g]=[]:g="mixpanel";e.people=e.people||[];e.toString=function(b){var a="mixpanel";"mixpanel"!==g&&(a+="."+g);b||(a+=" (stub)");return a};e.people.toString=function(){return e.toString(1)+".people (stub)"};l="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
for(h=0;h<l.length;h++)c(e,l[h]);var f="set set_once union unset remove delete".split(" ");e.get_group=function(){function a(c){b[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));e.push([d,call2])}}for(var b={},d=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<f.length;c++)a(f[c]);return b};a._i.push([b,d,g])};a.__SV=1.2;b=c.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
MIXPANEL_CUSTOM_LIB_URL:"file:"===c.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";d=c.getElementsByTagName("script")[0];d.parentNode.insertBefore(b,d)}})(document,window.mixpanel||[]);
mixpanel.init("MIXPANEL_ID", {loaded: function() {
let distinct_id = mixpanel.get_distinct_id();
}
});
</script><!-- end Mixpanel -->
*示例 Html 代码
<html>
<head>
<title>Test</title>
<!-- End Google Tag Manager (noscript) -->
</head>
<body>
<strong> Hope you are able to get 3 alerts. If no then please remove Mixpanel default code</strong>
<script type="text/javascript">
window.onload = async function () {
await loadResponse(" without await");
}
console.log("Start")
async function loadResponse(msg) {
console.log("Load Response"+msg)
}
console.log(" before await")
</script>
</body>
</html>
解决方案
在 mixpanel 默认代码中有两个小改动需要做
1> let distinct_id = false;
2> mixpanel.init("MIXPANEL_ID", {loaded: function(mixpanel) {
distinct_id = mixpanel.get_distinct_id();
}
}
必须在 onload 函数中进行另一项更改
1> setTimeout(
使用 mixpanel 更新代码
<html>
<head>
<title>Test</title>
<!-- End Google Tag Manager (noscript) -->
<!-- start Mixpanel --><script type="text/javascript">
let distinct_id = false;
(function(c,a){if(!a.__SV){var b=window;try{var d,m,j,k=b.location,f=k.hash;d=function(a,b){return(m=a.match(RegExp(b+"=([^&]*)")))?m[1]:null};f&&d(f,"state")&&(j=JSON.parse(decodeURIComponent(d(f,"state"))),"mpeditor"===j.action&&(b.sessionStorage.setItem("_mpcehash",f),history.replaceState(j.desiredHash||"",c.title,k.pathname+k.search)))}catch(n){}var l,h;window.mixpanel=a;a._i=[];a.init=function(b,d,g){function c(b,i){var a=i.split(".");2==a.length&&(b=b[a[0]],i=a[1]);b[i]=function(){b.push([i].concat(Array.prototype.slice.call(arguments,
0)))}}var e=a;"undefined"!==typeof g?e=a[g]=[]:g="mixpanel";e.people=e.people||[];e.toString=function(b){var a="mixpanel";"mixpanel"!==g&&(a+="."+g);b||(a+=" (stub)");return a};e.people.toString=function(){return e.toString(1)+".people (stub)"};l="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
for(h=0;h<l.length;h++)c(e,l[h]);var f="set set_once union unset remove delete".split(" ");e.get_group=function(){function a(c){b[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));e.push([d,call2])}}for(var b={},d=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<f.length;c++)a(f[c]);return b};a._i.push([b,d,g])};a.__SV=1.2;b=c.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
MIXPANEL_CUSTOM_LIB_URL:"file:"===c.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";d=c.getElementsByTagName("script")[0];d.parentNode.insertBefore(b,d)}})(document,window.mixpanel||[]);
mixpanel.init("MIXPANEL_ID", {loaded: function(mixpanel) {
distinct_id = mixpanel.get_distinct_id();
}
});
</script><!-- end Mixpanel -->
</head>
<body>
<strong> Hope you are able to get 3 alerts. If no then please remove Mixpanel default code</strong>
<script type="text/javascript">
setTimeout(
window.onload = async function () {
await loadResponse(" without await");
}, 300)
console.log("Start")
async function loadResponse(msg) {
console.log("Load Response"+msg)
}
console.log(" before await")
</script>
</body>
</html>
如果您有任何其他解决方案,请告诉我。
推荐阅读
- vue.js - vue3 中的多层深度 v-model 数据绑定
- rabbitmq - MassTransit 发布配置失败
- r - R:是否可以将 knitr::kable 转换为数据帧?
- bash - 在包含单引号和双引号的字符串上的 bash 脚本中换行
- javascript - Jquery For Google Map 中的变量
- android - 一组渲染脚本过滤器如何使用搜索栏进行调整
- c++ - 悬空指针:对局部变量的引用不会破坏
- excel - 以编程方式向 Excel 添加和删除组合框
- python - Reportlab 表格在几页上拆分
- python - 集成了 jupyter notebook 的 Python IDE?