Inject SDK Script Add the following line to your src/index.html before </head> or </body>
< 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.
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 -
import { Injectable, NgZone} from '@angular/core' ;
import { Observable, ReplaySubject} from 'rxjs' ;
import { environment} from '../../environments/environment' ;
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 ( ( ) => {
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-
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 ( ) ;
}
}