如何将mixpanel与angular2整合

Question

In index.html I have added mixpanel code from https://mixpanel.com/help/reference/javascript .

In my

export class MixpanelService {

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

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

Getting the following error:

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

Can somebody help me on this.

Answer 1

• Install the Typings at global level which will help us to install the definations of the JS library. npm install -g typings
• Install the mixpaneljs npm install mixpanel --save-dev
• run the below command to create the typing defincation into typings.json
  typings install dt~mixpanel --save --global

In your mixpanelService.ts file

import * as Mixpanel from "mixpanel";

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

Answer 2

First, install mixpanel for browser . This is important.

npm install --save mixpanel-browser

Install the corresponding typings:

npm install --save @types/mixpanel

And add your trackingscript to index.html without 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 -->

---

I highly Recommend creating your own service, which can be very simple:

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);
  }
}

Note, I call the init() function from my userAuthService, but you can do whatever you want. Just make sure the init() is called before you start tracking.

Then, from the rest of your code, you can use:

constructor(private mixpanelService: MixpanelService) { }

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

Answer 3

You have to include the mixpanel script in your index.html, but omit the

mixpanel.init('token').

Then in main.ts o app.component.ts you can declare the mixpanel library as variable:

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

I use multiple Mixpanel projects to avoid mixing up the dev data with prod data.

Answer 4

Another one good option is angulartics2 . It supports MixPanel and other tracking services.

Answer 5

Hopefully this works.

If you are following the instructions provided by the Mixpanel.com page, you should paste the big snippet into your index.html of your aplication in between the "Head" tags.

Now, double check that the last part of the script, the mixpanel.init("TOKEN"); is replaced by the one you have in your project. Make sure of this by clicking in the gear icon (In the report or <> page of Mixpanel) then click the tab "Management" and copy-paste the code of "Token" and then replace it from the one you copied in the index.html. If you are not the owner of the project, you can click on "Invite people" in the same location and then follow the same procedure.

Now, to track something, lets say, every time someone enters the landing page, you can paste this code:

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

Between your "Body" tags.

Save all changes, load the web app (npm start / npm run / ng serve if you will) and then go (or reload) the mixpanel.com page, click on the live view tab and there should be happening the magic.

Hope that works!