Get Started

5min
Inject SDK Script
Add 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 CooeeService
In 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 25 Mar 2024
Did this page help you?
Angular 2+
Tracking Events