1 | <img
|
2 | src="../../../assets/svg/mixpanel.svg"
|
3 | alt="Mixpanel logo"
|
4 | height="100px"
|
5 | width="200px" />
|
6 |
|
7 | # Mixpanel
|
8 |
|
9 | **homepage**: [mixpanel.com](https://mixpanel.com/)
|
10 | **docs**: [mixpanel.com/help/reference/javascript](https://mixpanel.com/help/reference/javascript)
|
11 | **import**: `import { Angulartics2Mixpanel } from 'angulartics2/mixpanel';`
|
12 |
|
13 | ## Setup
|
14 |
|
15 | 1. Add tracking code [provided by Mixpanel](https://mixpanel.com/help/reference/javascript) to right above the header closing tag `</header>`
|
16 | 2. [Setup Angulartics](https://github.com/angulartics/angulartics2/tree/next#installation) using `Angulartics2Mixpanel`
|
17 |
|
18 | ## Integrating with NgRx:
|
19 |
|
20 | You have a chance to unburden the integration process if your system is using NgRx. Specifically, we can reuse the existing actions in our application and use effects to catch and dispatch a mixpanel action accordingly.
|
21 |
|
22 | ### Boilerplating:
|
23 |
|
24 | ```ts
|
25 | /**
|
26 | * Action definition
|
27 | */
|
28 | export const MIXPANEL_TRACK = '[MIXPANEL] Track';
|
29 |
|
30 | export class MixpanelTrack implements Action {
|
31 | readonly type = MIXPANEL_TRACK;
|
32 |
|
33 | constructor(public payload: MixPanelPayload) {}
|
34 | }
|
35 |
|
36 | export interface MixPanelPayload {
|
37 | action: string;
|
38 | properties?: MixPanelPayloadProperties;
|
39 | }
|
40 |
|
41 | export interface MixPanelPayloadProperties {
|
42 | // Your custom properties go here
|
43 | }
|
44 | ```
|
45 |
|
46 | ### Catch and dispatch a mixpanel event by an effect:
|
47 |
|
48 | ```ts
|
49 | import { Injectable } from '@angular/core';
|
50 | import { Actions, Effect } from '@ngrx/effects';
|
51 | import { Angulartics2Mixpanel } from 'angulartics2/mixpanel';
|
52 |
|
53 | import * as mixpanel from '../actions/mixpanel';
|
54 |
|
55 | @Injectable()
|
56 | export class MixpanelEffects {
|
57 | @Effect({ dispatch: false })
|
58 | mixpanelActionTracking$ = this.actions$
|
59 | .ofType(mixpanel.MIXPANEL_TRACK)
|
60 | .do((action: mixpanel.MixpanelTrack) => {
|
61 | // ATTENTION HERE
|
62 | this.angulartics2Mixpanel.eventTrack(action.payload.action, {
|
63 | ...action.payload.properties,
|
64 | });
|
65 | });
|
66 |
|
67 | constructor(
|
68 | private actions$: Actions,
|
69 | private angulartics2Mixpanel: Angulartics2Mixpanel,
|
70 | ) {}
|
71 | }
|
72 | ```
|
73 |
|
74 | ### Usage:
|
75 |
|
76 | Somewhere in our application, we might have the code to dispatch a mixpanel action:
|
77 |
|
78 | ```ts
|
79 | @Effect()
|
80 | someEffect$ = this.actions$
|
81 | .ofType(some.ACTION)
|
82 | .map(action => new mixpanel.MixpanelTrack({
|
83 | action: action.type,
|
84 | properties: {
|
85 | category: 'Your Category',
|
86 | labelOrWhatever: 'LabelHere',
|
87 | }
|
88 | }));
|
89 | ```
|
90 |
|
91 | ### Common error:
|
92 |
|
93 | The custom properties object should be a **new object**, otherwise the action will not be recorded successfully. For example the code below will be ignored by the server.
|
94 |
|
95 | ```ts
|
96 | @Injectable()
|
97 | export class MixpanelEffects {
|
98 | ...
|
99 | .do((action: mixpanel.MixpanelTrack) => {
|
100 | // reuse the existing properties is WRONG
|
101 | this.angulartics2Mixpanel.eventTrack(action.payload.action, action.payload.properties);
|
102 | });
|
103 | ...
|
104 | }
|
105 | ```
|