使用 EmberJS 的混合面板答案

【问题标题】：Mixpanel with EmberJS使用 EmberJS 的混合面板
【发布时间】：2014-01-09 01:31:40
【问题描述】：

注意：我开始写这个问题，写下来最终解决了这个问题。我会把它留在这里，希望它可以帮助其他人。

我已经为此苦苦挣扎了一段时间，并且不断得到不一致的结果。

尝试 1（来自 here）

App.ApplicationController = Ember.Controller.extend({ 
    routeChanged: function (){
        mixpanel.track("pageview", {"url": window.location.href });
    }.observes('currentPath')
});

我不得不偏离这个例子，因为 mixpanel.track_pageview() 已被弃用。这导致位置记录不正确，因为一旦转换重写 URL，我无法找到获取新哈希路径的方法，并且此时 URL 尚未更新。

尝试 2

$(window).on('hashchange', function(){
    mixpanel.track("pageview", {"url": window.location.href });
});

这在 URL 哈希更改时有效，但现在我在第一次加载网站时没有得到任何跟踪。

【问题讨论】：

标签： ember.js transitions mixpanel

【解决方案1】：

使用 EmberJS 跟踪 Mixpanel 或 Google Analytics 等服务的路由更改，重新打开路由器并覆盖 didTransition 方法，在下一个 Ember 运行循环中调用 mixpanel/analytics api。

Ember.Router.reopen({
  didTransition: function(paths){
    this._super(paths);
    Ember.run.next(function(){
      path = window.location.href;
      mixpanel.track("pageview", {"url": path });
    });
  }
});

这是jsbin

【讨论】：

我比外部 jQuery 更喜欢这个解决方案。这个函数第一次进入时会被命中吗？

【解决方案2】：

最终解决方案

$(window).on('hashchange', function(){
    mixpanel.track("pageview", {"url": window.location.href });
});

Ember.Application.initializer({
    initialize: function(container, application) {
        mixpanel.track("pageview", {"url": window.location.href });
    }
});

现在我可以跟踪初始页面加载以及应用程序内的转换。

【讨论】：