Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to integrate mixpanel with angular2

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.

like image 338
sumanth Avatar asked Oct 25 '16 20:10

sumanth


2 Answers

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'
  });
}
like image 88
Jeffrey Roosendaal Avatar answered Sep 22 '22 07:09

Jeffrey Roosendaal


  • 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);
like image 29
sumanth Avatar answered Sep 24 '22 07:09

sumanth