How to integrate mixpanel with angular2

angular, javascript, mixpanel

Solution

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

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

Problem

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.

Original source