How to integrate ADF log service with Mixpanel analytics service

cancel
Showing results for 
Search instead for 
Did you mean: 

How to integrate ADF log service with Mixpanel analytics service

Moderator
Moderator
2 3 834

Often after you have to build your app for a different reason you need to track it.The analytics collected can be used for multiple purposes:

  • Track possible error in your software
  • New functionality engagement
  • Understand how the user interacts with your product

In my career, I saw multiple time create this kind of tracking systems implemented duplicating the code everywhere in the app. What I want to propose to you today is a simple way to archive this result taking advantages of the message log bus introduced in ADF 2.3.0. 

If you want to give a look at the example that I made, you can find it here:

logservice message bus example by eromano · Pull Request #22 · Alfresco/adf-examples · GitHub 

Step 1 Generate your application:

First, install yeoman:

npm install -g yo

Then the Alfresco Application Generator:

npm install -g generator-alfresco-adf-app

Then create the app

yo alfresco-adf-app

Step 2 create an account on Mixpanel

Go to https://mixpanel.com and create your account. Once you have your account, you can get your Mixpanel token from the account information.

Step 3 add the log to your generated app

With the logService you can add differents kind of type of logs: 

"ERROR|DEBUG|INFO|LOG|TRACE|WARN|ASSERT"

Once you decided which kind of log is the one that you need to add a similar piece of code in your application:

import { LogService } from '@alfresco/adf-core';

@Component({...})
export class AppComponent {

    constructor(logService: LogService) {
    }
   
    myMethod(){
      this.logService.error('My error');
      this.logService.trace('My trace')
      this.logService.debug('My debug')
      this.logService.info('My info')
      this.logService.warn('My warn')
    }
   
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Please check the log service documentation for more details:  alfresco-ng2-components/log.service.md at master · Alfresco/alfresco-ng2-components · GitHub 

Step 4 Send the data to Mixapnel

 

In order to use Mixpanel we can take advantage of the Mixpanel javascript library:

Let's install it from npm:

npm install mixpanel

Now we need to redirect all the logService message to Mixpanel. The best way to archive this integration is adding a subscriber to the logService message bus:

import { Component } from '@angular/core';
import { LogService } from '@alfresco/adf-core';
import * as Mixpanel from 'mixpanel';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    constructor(public logService: LogService) {

        const mixpanel: any = Mixpanel.init('YOUR_MIXPANEL_TOKEN');
        mixpanel.set_config({ debug: true });

        logService.onMessage.subscribe((message) => {
            mixpanel.track(message.text, {
                type: message.type
            });

        });
    }

}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If you have more questions, please reply here or contact me using  gitter .

3 Comments
douglascrp
Advanced II

Hello.

I was trying to run the sample project, but it does not work.

The error I get is

ERROR in src/app/app.component.ts(20,14): error TS2339: Property 'set_config' does not exist on type 'Mixpanel'.

The steps I followed:

  • Cloned the project
  • Create an account at Mixpanel
  • Set my token in the app.component.ts file
  • Executed
npm install mixpanel
  • And then

ng serve

Moderator
Moderator

HI Douglas C. R. Paes, thanks for spotting the problem, can you check it now? I fixed the example project 

douglascrp
Advanced II

Nice, now it is working.

It is an interesting idea.

Thank you for sharing it.