Angular Web SDK Integration

If you have already integrated the SDK and started it, please visit Using the SDK support page and choose a topic.

Integrating the SDK

Requirements:

• NodeJS
• NPM
• Angular

Supported Platforms:

• Angular

Data Privacy:

• SDK Data Privacy and Safety

Integration:

Estimated Time to Complete

5 Minutes

(Release Notes)

The Kochava Web SDK is available as a first-class Angular library. The SDK itself operates as an Angular service singleton, available within the KochavaAngularModule.

1. Navigate to the root of your Angular project.
2. Run ng add kochava-angular.
3. Run npm install kochava@latest.
4. In your root component’s module file (typically app.module.ts) add the following:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { KochavaAngularModule } from 'kochava-angular'; // import the module import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, KochavaAngularModule.forRoot() // call forRoot() on the module ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { KochavaAngularModule } from 'kochava-angular'; // import the module   import { AppComponent } from './app.component';   @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     KochavaAngularModule.forRoot() // call forRoot() on the module   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

Starting the SDK

Estimated Time to Complete

1 Minute

Once you have added the Kochava SDK to your project, the next step is to create and start the SDK class in code. Only your App GUID is required to start the SDK with the default settings, which is the case for typical integrations.

Kochava recommends starting the SDK as soon as the application starts, although this can be done later if needed. Starting the tracker as early as possible will ensure it has started before use, resulting in more accurate data/behavior.

1. In your root component (usually app.component.ts), import the KochavaAngularService and inject it into the constructor. Then call startWithAppGuid with your Kochava app guid.
import { Component } from '@angular/core'; import { KochavaAngularService } from 'kochava-angular'; // import the service @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [ KochavaAngularService // add the service as a provider ] }) export class AppComponent { title = 'angular'; // inject service in the constructor // you can call the service whatever you would like instead of 'kos' constructor(kos: KochavaAngularService) { // start the SDK // replace YOUR_APP_GUID with your kochava app guid kos.kochava.startWithAppGuid("YOUR_APP_GUID"); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

import { Component } from '@angular/core'; import { KochavaAngularService } from 'kochava-angular'; // import the service   @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css'],   providers: [     KochavaAngularService // add the service as a provider   ] }) export class AppComponent {   title = 'angular';      // inject service in the constructor    // you can call the service whatever you would like instead of 'kos'   constructor(kos: KochavaAngularService) {       // start the SDK     // replace YOUR_APP_GUID with your kochava app guid         kos.kochava.startWithAppGuid("YOUR_APP_GUID");   } }

2. Replace YOUR_APP_GUID with your Kochava App GUID. For more information on locating your App GUID, refer to our Locating your App GUID support documentation.
3. For any additional components which use the SDK, import the KochavaAngularService and inject it as a dependency into the component’s constructor. No additional provider entries are required.
import { KochavaAngularService } from 'kochava-angular'; ... export class AppComponent { constructor(kos: KochavaAngularService) { kos.kochava.sendPageEvent("test_page"); // example of page } }

1 2 3 4 5 6 7

import { KochavaAngularService } from 'kochava-angular'; ... export class AppComponent { constructor(kos: KochavaAngularService) {    kos.kochava.sendPageEvent("test_page"); // example of page } }

Confirm the Integration

SDK WAYPOINT: At this point basic integration is complete and the Kochava SDK will begin reporting session activity and attributing installs.

Where to Go From Here:

Now that you have completed integration you are ready to utilize the many features offered by the Kochava SDK. Continue on to Using the SDK and choose a topic.