How to integrate ADF log service with Mixpanel analytics service

Showing results for 
Search instead for 
Did you mean: 

How to integrate ADF log service with Mixpanel analytics service

Alfresco Employee
2 3 4,413

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 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: 


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

export class AppComponent {

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

Please check the log service documentation for more details:  alfresco-ng2-components/ 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';

    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 .