检查Mixpanel库是否已加载

Question

我们的网站正在使用Mixpanel进行追踪。

var mixPanelId = mixpanel.get_distinct_id();
$('#trial, #order').each(function () {
  $(this).append("<input type='hidden' value='"+mixPanelId+"' name='MixpanelId' />");
});

然而，如果Mixpanel没有被加载，主对象就没有get_distinct_id。应该如何处理这种情况？

到目前为止，我正在进行普通的js属性检查（但我想知道Mixpanel是否有更正确的方法）：

mixpanel.hasOwnProperty('get_distinct_id')

- Dmytro Pastovenskyi

Answer 1

正确的方法是使用init属性，该属性将在库加载后触发。欲了解更多信息，请阅读如何防止get_distinct_id和get_property返回未定义

mixpanel.init('token-id', {'loaded':function() {
    var distinct_id = mixpanel.get_distinct_id();
}})

检查属性并不是正确处理情况的方法。你可以在加载库之前进行此检查。

mixpanel.hasOwnProperty('get_distinct_id')

- Dmytro Pastovenskyi

---

只是想提一下，实现方式已更改，您需要执行以下操作： loaded: (mixpanel) => { const distinct_id = mixpanel.get_distinct_id(); } 全局的mixpanel在此回调函数中无法正常工作，我在找到问题之前一直很困扰。 - Dzmitry Vasilevsky

Answer 2

我不确定Mixpanel是否有onload（或类似的）回调（在参考文献中未看到），因此您可以定期检查变量是否设置。 < p >注意：< /em>这种方法有点不规范。

var _mixpanelcomplete = setInterval(function(){
    if(mixpanel.hasOwnProperty('get_distinct_id'))
    {
        clearInterval(_mixpanelcomplete);
        //init your stuff here
    }
},100);

- Roboroads

Answer 3

以下是我对于那些试图运行依赖于Mixpanel distinct_id的代码的建议：

function method1( var1, counter ) {
    if ( typeof counter == "undefined" || counter == null )
        var counter = 0;
    try {
        var mixpanel_distinct_id = mixpanel.get_distinct_id();
        // Code that is dependent on distinct_id goes here
    } catch(e) {
        var max_attempts = 40; // How long do you want it to try before letting it fail
        counter++;
        if ( counter < max_attempts )
            setTimeout( function(){ method1(var1, counter) }, 50);
    }
}

- zeusstl

Answer 4

只想分享我的解决方案

const sleep = (ms: number) => {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const waitForMixpanel = () => {
  return new Promise(async (resolve, reject) => {
    const maxRetries = 15;

    for (let i = 0; i < maxRetries; i++) {
      if (typeof window.mixpanel !== 'undefined' && window.mixpanel.__loaded) {
        return resolve(true);
      }

      await sleep(500);
    }

    return reject(false);
  })
}

然后你可以像在React中一样使用它。

useEffect(() => {
    if (consents.functionality) {

    }
    if (consents.performance) {
      waitForMixpanel()
        .then(() => {
          optInMixpanel()
        })
        .catch(_ => {
          console.log('Timed Out Waiting for Mixpanel')
        })
    }
    if (consents.targeting) {

    }
  }, [consents])

- JorgeeFG