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 mixpanelNow 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 .
