DEV Community

Uzeyr OZ
Uzeyr OZ

Posted on

To integrate Mixpanel with NestJS

#programming #security #discuss

To integrate Mixpanel with NestJS, you can use the official Mixpanel JavaScript library and install it via npm:

Install the Mixpanel library:

npm install mixpanel-browser --save
Enter fullscreen mode Exit fullscreen mode

Create a module for Mixpanel by running the following command:

nest generate module mixpanel
Enter fullscreen mode Exit fullscreen mode

In this Mixpanel module, import the Mixpanel library and add it to the imports array:

import { Mixpanel } from 'mixpanel-browser'; @Module({ imports: [ Mixpanel ] }) export class MixpanelModule {}
Enter fullscreen mode Exit fullscreen mode

In the component where you want to use Mixpanel, import the Mixpanel service and initialize it with your Mixpanel token:

import * as mixpanel from 'mixpanel-browser'; import { Injectable } from '@nestjs/common'; import AppConfigService from '../../config/app/configuration.service'; @Injectable() export class MixpanelService { constructor(private readonly configService: AppConfigService) {} init(userToken: string): void { mixpanel.init(this.configService.mixPanelToken); mixpanel.identify(userToken); } track(id: string, action: any = {}): void { mixpanel.track(id, action); } people(id: string, action: any = {}): void { mixpanel.people(id, action); } }
Enter fullscreen mode Exit fullscreen mode

To track an event, use the track method:

 constructor( private readonly mixpanelService: MixpanelService, ) {}
Enter fullscreen mode Exit fullscreen mode

example track:

 this.mixpanelService.init('UZI'); this.mixpanelService.track('Signup', { $first_name: 'Uz', $last_name: 'Oz', $created: new Date().toISOString(), plan: 'premium', });
Enter fullscreen mode Exit fullscreen mode

To set user properties, use the people.set method:

this.mixpanelService.people.set({ "$email": "joe@example.com", "$first_name": "Joe", "$last_name": "Smith", });
Enter fullscreen mode Exit fullscreen mode

You can also use identify method to identify user with unique ID

this.mixpanelService.identify("13793");
Enter fullscreen mode Exit fullscreen mode

That's it! You have now integrated Mixpanel with your NestJS app using a dedicated Mixpanel module. You can find more information on Mixpanel's official documentation.

Top comments (3)

Collapse
 
seunope profile image
Mesonrale Ope •

Hi! Nice write-up.
I tried to use your implementation and ran into some issues. I made a few changes before it worked.

The correct lib to use with NestJs is npm install mixpanel. The lib you used in your tutorial npm install mixpanel-browser was meant for the web. Your implementation was also for the web instead of Node(NestJs). You might need to make some adjustment to the article.

Collapse
 
jamrees profile image
James •

@seunope how did you get this working with nest? i keep getting this error: TypeError: (0 , mixpanel_1.track) is not a function

Collapse
 
youngkiu profile image
youngkiu •

Why did you use npm install mixpanel-browser instead of npm install mixpanel?