如何将mixpanel与angular2整合

时间:2016-10-25 20:48:30

标签: javascript angular mixpanel

在index.html中,我添加了来自https://mixpanel.com/help/reference/javascript的mixpanel代码。

在我的

export class MixpanelService {

  constructor() {
    mixpanel.init("sdfsdf", '', "development");
  }

  public track() {
    mixpanel.track('click', {pageName:'login'})
  }
}

收到以下错误:

Cannot find name 'mixpanel'.
   mixpanel.init("sdfsdf", '', "development");

有人可以帮我解决这个问题。

5 个答案:

答案 0 :(得分:5)

  • 在全局级别安装Typings,这将有助于我们安装JS库的定义。 npm install -g typings
  • 安装mixpaneljs npm install mixpanel --save-dev
  • 运行以下命令,在typings.json中创建输入defincation typings安装dt~mixpanel --save --global

在mixpanelService.ts文件中

import * as Mixpanel from "mixpanel";

this.mixpanel = Mixpanel.default.init(token, properties);

答案 1 :(得分:4)

您必须在index.html中包含mixpanel脚本,但省略

mixpanel.init('token').

然后在main.ts o app.component.ts中,您可以将mixpanel库声明为变量:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
declare const mixpanel: any;

if (environment.production) {
  enableProdMode();
}

mixpanel.init(environment.mixpanel.apikey);
platformBrowserDynamic().bootstrapModule(AppModule);

我使用多个Mixpanel项目,以避免将dev数据与prod数据混淆。

答案 2 :(得分:4)

首先,为浏览器安装mixpanel 。这很重要。

npm install --save mixpanel-browser

安装相应的打字:

npm install --save @types/mixpanel

将您的trackingscript添加到index.html ,不用 mixpanel.init()

<!-- start Mixpanel -->
<script type="text/javascript">
    (function(e,b){if(!b.__SV){var a,f,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 time_event 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.union 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=e.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.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";f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);
</script>
<!-- end Mixpanel -->

我强烈建议您创建自己的服务,这可能非常简单:

import { Injectable } from '@angular/core';
import * as mixpanel from 'mixpanel-browser';

@Injectable({
  providedIn: 'root'
})
export class MixpanelService {

  /**
   * Initialize mixpanel.
   *
   * @param {string} userToken
   * @memberof MixpanelService
   */
  init(userToken: string): void {
    mixpanel.init('your-project-token');
    mixpanel.identify(userToken);
  }

  /**
   * Push new action to mixpanel.
   *
   * @param {string} id Name of the action to track.
   * @param {*} [action={}] Actions object with custom properties.
   * @memberof MixpanelService
   */
  track(id: string, action: any = {}): void {
    mixpanel.track(id, action);
  }
}

注意,我从userAuthService调用init()函数,但您可以执行任何操作。只需确保在开始跟踪之前调用init()

然后,从其余代码中,您可以使用:

constructor(private mixpanelService: MixpanelService) { }

someFunction() {
  this.mixpanelService.track('Some action', {
    customPropertyOne: 'customValueOne',
    customPropertyTwo: 'customValueTwo'
  });
}

答案 3 :(得分:0)

另一个好的选择是angulartics2。它支持MixPanel和其他跟踪服务。

答案 4 :(得分:-1)

希望这有效。

如果您按照Mixpanel.com页面提供的说明进行操作,则应将大代码段粘贴到“Head”标记之间的aplication的index.html中。

现在,仔细检查脚本的最后一部分mixpanel.init(“TOKEN”);被项目中的替换。 通过单击齿轮图标(在报告或Mixpanel的&lt;&gt;页面)确保这一点,然后单击“管理”选项卡并复制粘贴“令牌”代码,然后将其替换为您复制的代码index.html。如果您不是项目的所有者,可以在同一位置点击“邀请人”,然后按照相同的步骤进行操作。

现在,为了跟踪某些内容,让我们说,每当有人进入目标网页时,您都可以粘贴此代码:

gammaln

在“Body”标签之间。

保存所有更改,加载网络应用程序(npm start / npm run / ng serve if) 然后去(或重新加载)mixpanel.com页面,点击实时视图选项卡,应该发生魔术。

希望有效!