How to integrate ADF log service with Mixpanel analytics service

[eugenio_romano]

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 .