Get Started

6min
Inject SDK ScriptAdd the following line to your src/index.html before </head>  or </body>
JS
|
<script src="https://cdn.jsdelivr.net/npm/@letscooee/web-sdk/dist/sdk.min.js" async></script>
<script>
    window.CooeeSDK = window.CooeeSDK || {events: [], profile: [], account: []};
</script>
<script src="https://cdn.jsdelivr.net/npm/@letscooee/web-sdk/dist/sdk.min.js" async></script>
<script>
    window.CooeeSDK = window.CooeeSDK || {events: [], profile: [], account: []};
</script>
﻿
We recommend loading the SDK with the async flag so your page load times don't increase.
Add Cooee App ID We recommend that you store the App ID in your environment files. For that, you can add cooeeAppID  in all your environment.ts files.
TypeScript
|
export const environment = {
    production: false,
    cooeeAppID: 'MY_COOEE_APP_ID',
};
export const environment = {
    production: false,
    cooeeAppID: 'MY_COOEE_APP_ID',
};
﻿
Replace MY_COOEE_APP_ID with the App ID which is present at Cooee Portal.
After you are done with testing, since the SDK should only collect analytics in your production website, we recommend that you remove cooeeAppID  value from environment.ts  and only add to your environment.prod.ts  file.
Add CooeeServiceIn your Angular project, add this generic service src/services/cooee.service.ts -
TypeScript
|
import {Injectable, NgZone} from '@angular/core';
import {Observable, ReplaySubject} from 'rxjs';
import {environment} from '../../environments/environment';

// eslint-disable-next-line @typescript-eslint/naming-convention
declare let CooeeSDK: { events: any[], account: any[], profile: any[], screen: any[] };

@Injectable({
    providedIn: 'root',
})
export class CooeeService {

    private readonly onCTA$ = new ReplaySubject<Record<string, any>>(0);

    constructor(
        private readonly ngZone: NgZone,
    ) {
    }

    init(): void {
        if (!this.isAvailable()) {
            return;
        }

        CooeeSDK.account.push({appID: environment.cooeeAppID});
        document.addEventListener('onCooeeCTA', (event: Event) => {
            this.ngZone.run(() => {
                // @ts-ignore
                this.onCTA$.next(event.detail);
            });
        }, false);
    }

    onCTA(): Observable<Record<string, any>> {
        return this.onCTA$.asObservable();
    }

    setProfile(data: Record<string, any>): void {
        if (!this.isAvailable()) {
            return;
        }

        CooeeSDK.profile.push(data);
    }

    trackPageView(screenName: string): void {
        if (!this.isAvailable()) {
            return;
        }

        CooeeSDK.screen.push(screenName);
    }

    trackEvent(name: string, props?: Record<string, any>): void {
        if (!this.isAvailable()) {
            return;
        }

        CooeeSDK.events.push([name, props]);
    }

    private isAvailable(): boolean {
        return !((typeof CooeeSDK) === 'undefined');
    }

}

import {Injectable, NgZone} from '@angular/core';
import {Observable, ReplaySubject} from 'rxjs';
import {environment} from '../../environments/environment';

// eslint-disable-next-line @typescript-eslint/naming-convention
declare let CooeeSDK: { events: any[], account: any[], profile: any[], screen: any[] };

@Injectable({
    providedIn: 'root',
})
export class CooeeService {

    private readonly onCTA$ = new ReplaySubject<Record<string, any>>(0);

    constructor(
        private readonly ngZone: NgZone,
    ) {
    }

    init(): void {
        if (!this.isAvailable()) {
            return;
        }

        CooeeSDK.account.push({appID: environment.cooeeAppID});
        document.addEventListener('onCooeeCTA', (event: Event) => {
            this.ngZone.run(() => {
                // @ts-ignore
                this.onCTA$.next(event.detail);
            });
        }, false);
    }

    onCTA(): Observable<Record<string, any>> {
        return this.onCTA$.asObservable();
    }

    setProfile(data: Record<string, any>): void {
        if (!this.isAvailable()) {
            return;
        }

        CooeeSDK.profile.push(data);
    }

    trackPageView(screenName: string): void {
        if (!this.isAvailable()) {
            return;
        }

        CooeeSDK.screen.push(screenName);
    }

    trackEvent(name: string, props?: Record<string, any>): void {
        if (!this.isAvailable()) {
            return;
        }

        CooeeSDK.events.push([name, props]);
    }

    private isAvailable(): boolean {
        return !((typeof CooeeSDK) === 'undefined');
    }

}
﻿
This is a generic example of using Cooee in your Angular application.
Now, in your app.component.ts (or somewhere in any global code), initialize the service-
JS
|
import {Component} from '@angular/core';
import {CooeeService} from './services/cooee.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent {

    constructor(private readonly cooeeService: CooeeService) {
        this.cooeeService.init();
    }

}

import {Component} from '@angular/core';
import {CooeeService} from './services/cooee.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent {

    constructor(private readonly cooeeService: CooeeService) {
        this.cooeeService.init();
    }

}
﻿
﻿
Updated 03 Mar 2023
Did this page help you?
Yes
Angular 2+
Tracking Events
Docs powered by archbee
TABLE OF CONTENTS
Inject SDK Script
Add Cooee App ID
Add CooeeService