如何将Mixpanel与Angular2集成

Question

在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");

有人能帮我解决这个问题吗？

- sumanth

Answer 1

首先，在浏览器上安装Mixpanel。这一点非常重要。

npm install --save mixpanel-browser

安装相应的类型定义文件：

npm install --save @types/mixpanel

在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 userToken
   */
  init(userToken: string): void {
    mixpanel.init('your-project-token');
    mixpanel.identify(userToken);
  }

  /**
   * Push new action to mixpanel.
   *
   * @param id Name of the action to track.
   * @param [action={}] Actions object with custom properties.
   */
  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'
  });
}

- Jeffrey Roosendaal

---

谢谢你的示例。我遇到了以下问题：import * as mixpanel from 'mixpanel-browser';我收到了一个错误，指出：无法找到'mixpanel-browser'模块的声明文件。 我已经通过npm安装了mixpanel-browser和@types/mixpanel。另外，在您的最后一个函数中，您应该调用“push”而不是“track”，因为我没有看到“track”的定义？ - OHope

我刚刚检查过，我的答案中没有我忘记告诉/包含的内容。它应该是可行的。我正在使用Angular 6和typescript 2.7.2。对于“track”，是的，它确实应该是“track”。它可能没有被定义，但它绝对是有效的。 - Jeffrey Roosendaal

如果你安装了mixpanel-browser，为什么需要将跟踪代码片段添加到index.html中呢？我认为在你的服务中安装npm包并调用mixpanel.init()应该已经足够了。 - benjiman

@benjiman 我的回答已经有将近3年了，所以我真的记不清了。但是我确实记得如果没有它是无法正常工作的。也许事情已经改变了.. :) - Jeffrey Roosendaal

@JeffreyRoosendaal 没问题。作为参考：现在只需通过npm安装SDK即可使其正常工作，无需在index.js中添加跟踪代码片段。如果您愿意，可以更新您的答案。 - benjiman

Answer 2

• 全局安装Typings，它可以帮助我们安装JS库的定义。 npm install -g typings
• 安装mixpaneljs npm install mixpanel --save-dev
• 运行以下命令，将typing定义创建到typings.json文件中
  typings install dt~mixpanel --save --global

在您的mixpanelService.ts文件中

import * as Mixpanel from "mixpanel";

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

- sumanth

---

嗨@sumanth，我想知道你是如何实现这个的？我一直收到错误TS2307：找不到模块... 我按照你的指示操作了，但没有成功。我还在mixpanel lib（https://github.com/mixpanel/mixpanel-js/issues/114）上开了一个问题。希望你能指导我走向正确的方向。 谢谢！ - Agustin Haller

嗨@AgustinHaller - 你还在面对这个问题吗？ - sumanth

是的，我也遇到了相同的问题 /node_modules/@types/mixpanel/index.d.ts' 不是一个模块。 - comeback4you

Answer 3

您需要在index.html中包含mixpanel脚本，但要省略mixpanel.init('token')。

然后在main.ts或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项目来避免将开发数据与生产数据混淆。

- juancarloscruzd

Answer 4

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

- cylon-v

Answer 5

希望这个能够正常工作。

如果您正在按照Mixpanel.com页面提供的说明操作，您应该将大段代码片段粘贴到您的应用程序的index.html文件中，在“Head”标签之间。

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

现在，假设每次有人进入着陆页时，您想要跟踪某些内容，您可以粘贴此代码：

    <script type="text/javascript">
     mixpanel.track("Page Loaded", { "Page Name": "Landing Page"});
    </script>

在你的“Body”标签之间。

保存所有更改，加载Web应用程序（如果您愿意，可以使用npm start / npm run / ng serve），然后转到（或重新加载）mixpanel.com页面，单击实时视图选项卡，这里应该会发生魔法。

希望能够奏效！

- Anibal