Skip to content

Commit 809b127

Browse files
mewismewis
authored
feat: Add incendium provider (#458)
1 parent 56cd9de commit 809b127

File tree

5 files changed

+296
-3
lines changed

5 files changed

+296
-3
lines changed

‎src/app/providers/providers.component.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,11 @@ export class ProvidersComponent {
6464
display: 'HubSpot',
6565
type: 'Analytics',
6666
},
67+
{
68+
name: 'incendium',
69+
display: 'Incendium',
70+
type: 'Analytics',
71+
},
6772
{
6873
name: 'intercom',
6974
display: 'Intercom',
@@ -114,9 +119,7 @@ export class ProvidersComponent {
114119
for (const provider of this.providers) {
115120
iconRegistry.addSvgIcon(
116121
provider.name,
117-
sanitizer.bypassSecurityTrustResourceUrl(
118-
`/assets/svg/${provider.name}.svg`,
119-
),
122+
sanitizer.bypassSecurityTrustResourceUrl(`/assets/svg/${provider.name}.svg`),
120123
);
121124
}
122125
}

‎src/assets/svg/incendium.svg

+30
Loading

‎src/lib/providers/incendium/README.md

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<img
2+
src="../../../assets/svg/incendium.svg"
3+
alt="Incendium analytics logo"
4+
height="100px"
5+
width="200px" />
6+
7+
**homepage**: [incendium.ai](https://www.incendium.ai/)
8+
**import**: `import { Angulartics2Incendium } from 'angulartics2';`
9+
10+
## Setup
11+
12+
1. Add tracking code provided by Incendium inside the header tag.
13+
14+
2. [Setup Angulartics](https://github.com/angulartics/angulartics2/tree/master#installation) using `Angulartics2Incendium`
15+
16+
```typescript
17+
constructor(Angulartics2Incendium: Angulartics2Incendium) {
18+
Angulartics2Incendium.startTracking();
19+
}
20+
```
21+
22+
3. Track Conversions, You can track conversions using Angulartics2 event tracking.
23+
this can be done by adding the following to you html
24+
25+
```html
26+
<button
27+
angulartics2On="click"
28+
angularticsAction="{{ eIncendiumEventNames.ADD_CONVERION }}"
29+
[angularticsProperties]="{ key: 'my_trigger_as_assigned_in_incendium' }"
30+
>
31+
Btn click
32+
</button>
33+
```
34+
35+
Note that eIncendiumEventNames is a reference to IncendiumEventNames expoted from Angulartics2Incendium
36+
37+
Or you can fire the conversion in code for example
38+
39+
```typescript
40+
this.angulartics2.eventTrack.next({
41+
action: IncendiumEventNames.ADD_CONVERION,
42+
properties: {
43+
key: 'my_trigger_as_assigned_in_incendium',
44+
},
45+
});
46+
```
47+
48+
4. Incendium allows for offline tracking, to do this you must record the conversion key provided when firing a conversion.
49+
A example of this would be a contact form which you later convert on the phone, incendium allows you to assign revenue next to this original conversion using this key
50+
51+
to do this fire a conversion off as above.
52+
you can then subscribe to incendiumResponse. once the conversion has been tracked and response is returned you can use this response how ever you like.
53+
54+
**_Dont forget to unsubscribe_**
55+
56+
An Example workflow of this would be
57+
58+
```typescript
59+
export class Example implements OnInit {
60+
private incSubscription;
61+
62+
constructor(
63+
private angulartics2: Angulartics2,
64+
private angulartics2Incendium: Angulartics2Incendium,
65+
) {}
66+
67+
ngOnInit(): void {
68+
this.incSubscription = this.angulartics2Incendium.incendiumResponse.subscribe({
69+
next: v => {
70+
if (v.type === IncendiumEventNames.ADD_CONVERION) {
71+
this.submit(v.value);
72+
}
73+
},
74+
error: e => {
75+
console.error(e);
76+
// submit without key or handle how you like
77+
this.submit();
78+
},
79+
});
80+
}
81+
82+
ngOnDestroy(): void {
83+
// Dont forget to unsubscribe
84+
this.incSubscription.unsubscribe();
85+
}
86+
87+
onSubmit() {
88+
this.angulartics2.eventTrack.next({
89+
action: IncendiumEventNames.ADD_CONVERION,
90+
properties: {
91+
key: 'my_trigger_as_assigned_in_incendium',
92+
},
93+
});
94+
}
95+
96+
submit(incendiumKey?: string) {
97+
alert(`form submitted with ${incendiumKey ? `key ${incendiumKey}` : `no key`}`);
98+
}
99+
}
100+
```

‎src/lib/providers/incendium/incendium.spec.ts

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { fakeAsync, inject, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { Angulartics2 } from '../../angulartics2-core';
4+
import { advance, createRoot, RootCmp, TestModule } from '../../test.mocks';
5+
import { Angulartics2Incendium, IncendiumEventNames } from './incendium';
6+
7+
jasmine.DEFAULT_TIMEOUT_INTERVAL = 5000;
8+
declare var window: any;
9+
10+
describe('Angulartics2Incendium', () => {
11+
let inc: any;
12+
let fixture: ComponentFixture<any>;
13+
let service: Angulartics2Incendium;
14+
15+
beforeEach(() => {
16+
TestBed.configureTestingModule({
17+
imports: [TestModule],
18+
providers: [Angulartics2Incendium],
19+
});
20+
window.inc = inc = jasmine.createSpy('inc').and.returnValue('test');
21+
22+
service = TestBed.inject(Angulartics2Incendium);
23+
service.startTracking();
24+
});
25+
26+
it('should track pages', fakeAsync(
27+
inject(
28+
[Angulartics2, Angulartics2Incendium],
29+
(angulartics2: Angulartics2, Angulartics2Incendium: Angulartics2Incendium) => {
30+
fixture = createRoot(RootCmp);
31+
angulartics2.pageTrack.next({ path: '/abc' });
32+
advance(fixture);
33+
expect(inc).toHaveBeenCalledWith('run', false, true);
34+
},
35+
),
36+
));
37+
38+
it('should track conversions', fakeAsync(
39+
inject(
40+
[Angulartics2, Angulartics2Incendium],
41+
(angulartics2: Angulartics2, Angulartics2Incendium: Angulartics2Incendium) => {
42+
fixture = createRoot(RootCmp);
43+
angulartics2.eventTrack.next({
44+
action: IncendiumEventNames.ADD_CONVERION,
45+
properties: { key: 'test' },
46+
});
47+
advance(fixture);
48+
expect(inc).toHaveBeenCalledTimes(2);
49+
expect(inc).toHaveBeenCalledWith(IncendiumEventNames.ADD_CONVERION, 'test');
50+
expect(inc).toHaveBeenCalledWith('go');
51+
},
52+
),
53+
));
54+
55+
it('should track conversion and emit conversion key', fakeAsync(
56+
inject(
57+
[Angulartics2, Angulartics2Incendium],
58+
(angulartics2: Angulartics2, Angulartics2Incendium: Angulartics2Incendium) => {
59+
service.incendiumResponse.subscribe(message => {
60+
expect(message).toEqual({
61+
type: IncendiumEventNames.ADD_CONVERION,
62+
value: 'test',
63+
});
64+
});
65+
fixture = createRoot(RootCmp);
66+
angulartics2.eventTrack.next({
67+
action: IncendiumEventNames.ADD_CONVERION,
68+
properties: { key: 'test' },
69+
});
70+
advance(fixture);
71+
},
72+
),
73+
));
74+
});

‎src/lib/providers/incendium/incendium.ts

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { Injectable } from '@angular/core';
2+
import { Subject } from 'rxjs';
3+
import { Angulartics2 } from '../../angulartics2-core';
4+
5+
enum EventNames {
6+
RUN = 'run',
7+
GO = 'go',
8+
}
9+
10+
export enum IncendiumEventNames {
11+
ADD_CONVERION = 'add_conversion',
12+
}
13+
14+
interface IIncendiumResponse {
15+
value: string;
16+
type: IncendiumEventNames;
17+
}
18+
19+
type TIncendiumParams =
20+
| {
21+
key: string;
22+
}
23+
| boolean;
24+
25+
declare var inc: (e: EventNames | IncendiumEventNames, v?: TIncendiumParams, g?: boolean) => string;
26+
declare global {
27+
interface Window {
28+
INCENDIUM: any;
29+
}
30+
}
31+
32+
@Injectable({ providedIn: 'root' })
33+
export class Angulartics2Incendium {
34+
incendiumResponse = new Subject<Partial<IIncendiumResponse>>();
35+
36+
constructor(private angulartics2: Angulartics2) {
37+
if (typeof inc === 'undefined') {
38+
console.warn('Angulartics 2 Incendium Plugin: incendium global not found');
39+
}
40+
}
41+
42+
startTracking(): void {
43+
this.angulartics2.pageTrack
44+
.pipe(this.angulartics2.filterDeveloperMode())
45+
.subscribe(x => this.pageTrack(x.path));
46+
47+
this.angulartics2.eventTrack
48+
.pipe(this.angulartics2.filterDeveloperMode())
49+
.subscribe(({ action, properties }) => this.trackAction(action, properties));
50+
}
51+
52+
/**
53+
* Track Page in Incendium
54+
*
55+
* @param path location
56+
*/
57+
pageTrack(path: string) {
58+
inc(EventNames.RUN, false, true);
59+
}
60+
61+
/**
62+
* Track Action
63+
*
64+
* @param action Action name
65+
* @param properties params
66+
*/
67+
async trackAction(action: string, properties: any) {
68+
try {
69+
switch (action as IncendiumEventNames) {
70+
case IncendiumEventNames.ADD_CONVERION:
71+
inc(IncendiumEventNames.ADD_CONVERION, properties.key);
72+
break;
73+
74+
default:
75+
break;
76+
}
77+
const res = await inc(EventNames.GO);
78+
this.incendiumResponse.next({
79+
value: res,
80+
type: IncendiumEventNames.ADD_CONVERION,
81+
});
82+
} catch (error) {
83+
this.incendiumResponse.error(error);
84+
}
85+
}
86+
}

0 commit comments

Comments
 (0)