静态HTML与原生JavaScript集成Mixpanel遇初始化问题求助

我想在纯静态HTML+原生JS的页面里用Mixpanel，但找到的示例都是用bower或npm安装的，我的环境没有这些工具。试了下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"></script>
    <script>
        mixpanel.init('PROJECT TOKEN');
        mixpanel.track("PageView");
    </script>
</head>
<body></body>
</html>

结果报错：

Uncaught ReferenceError: mixpanel 未定义
Mixpanel错误："mixpanel"对象未初始化。请确保使用最新版Mixpanel JS库以及我们提供的代码片段。

出现这个问题是因为CDN的Mixpanel脚本还没加载完成，后面的自定义脚本就先执行了，导致找不到mixpanel对象。可以用以下几种方法解决：

• 方法一：把自定义脚本移到body末尾
  把Mixpanel的初始化和追踪代码放到</body>标签前，确保CDN脚本已经加载完毕：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <script src="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"></script>
  </head>
  <body>
      <!-- 页面内容 -->
      <script>
          mixpanel.init('你的项目TOKEN');
          mixpanel.track("PageView");
      </script>
  </body>
  </html>
  

• 方法二：给脚本添加onload事件
  在加载Mixpanel的script标签上添加onload事件，确保脚本加载完成后再执行代码：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <script src="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" onload="initMixpanel()"></script>
      <script>
          function initMixpanel() {
              mixpanel.init('你的项目TOKEN');
              mixpanel.track("PageView");
          }
      </script>
  </head>
  <body></body>
  </html>
  

• 方法三：使用Mixpanel官方嵌入代码片段
  官方提供的代码片段会自动处理异步加载问题，即使放在head里也能正常工作，直接替换成下面的代码（替换你的项目TOKEN）：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <script>
          (function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&(a=a[b[0]],d=b[1]);a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="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 start_batch_senders 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<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2])}}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===f.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";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]);
          mixpanel.init('你的项目TOKEN');
          mixpanel.track("PageView");
      </script>
  </head>
  <body></body>
  </html>
  

内容的提问来源于stack exchange，提问作者F Chopin