Support Home > Web SDK Integration > Angular Web SDK Integration

Angular Web SDK Integration


Feature Summary: The Kochava Web SDK is a javascript-based solution that provides marketers with Web Tracking capabilities. It can be integrated with a variety of web-based frameworks; this document describes how to integrate with the Angular framework.


Integrating the SDK

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. Install via Angular CLI.
  2. Run ng add kochava-angular from the root of your project (which contains your package.json). This will pull in the latest version of the SDK.

  3. Import KochavaAngularModule to the root component’s module file (typically app.module.ts) and add the KochavaAngularModule.forRoot() entry to your app.module’s import section.
  4.  

  5. In your root component, import the KochavaAngularService and inject it into the constructor. Finally, set its required provider entries.
    • 'app_id' — 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.
    • 'verbose' — Set to true for verbose logging to the console. Set to false to suppress all logging.
    • 'use_cookie' — Set to true to drop Cookie on the website to track a device across sub-domains. Set to false to not drop the Cookie and rely only on local storage for tracking.
    • 'custom_traits' — Set to an object of key-value pairs that provides a means for linking different identities with Kochava devices. E.g., {“User ID”: “123456789”, “Login”: “username”}.
    • 'disable_auto_install' — Set this value to true to stop the SDK from automatically signaling an install when the SDK is initialized for the first time.

  6. For any additional components which utilize the SDK, import the KochavaAngularService service and inject it into the component constructor. No provider entries are required.
  7. NOTE: You do not need to worry about multiple instances of the Kochava service, as it is a singleton. There is only ever one KochavaAngularService in existence, which is initialized in your root component.

 

SDK Waypoint: At this point basic integration is complete! Optional functionality is discussed below.


Using the SDK

Once you have completed integration, access the Kochava service to perform the following optional functionality.

The Kochava service works just like other angular services you may have used before. After integration, you can access the Kochava service in a number of ways. For example, while not required, you can assign the service to a class member in order to use it outside of your component constructor.

 

Example — (Assign the Kochava Service to a Class Member for External Usage)


Page:

The page function allows you to record page views on your website, along with optional metadata information about the page being viewed. If you do not specify a page name, Kochava will dynamically collect the page from the URL. Optional metadata must be provided as an object of key value pairs. The callback parameter is optional and may be safely omitted if not desired.

Example — (Record a Page View Manually)

 

Example — (Record a Page View Manually with Event Data)

 

Autopage —

If you would like to record page views automatically whenever the user loads a new page, this can be accomplished by calling the kochava.page() function in the root component (usually app.component.ts) constructor.

Example —(Automatically Record all Page Views Using the Current URL)


Identify (Identity Link):

The identify function tells Kochava who the current user is. This method provides Kochava with a unique user ID and any other user specific data available. Calls to kochava.identify() will send the user data to the Kochava Identify API, allowing the data to be used for attribution. The callback parameter is optional and may be safely omitted if not desired.

NOTE: If a string is passed instead of an object, that value will be associated with the key custom_id.

Example —(Identify with Only a String Value)

 

Example —(Identify with a Key Value Pair)


Activity (Event):

The Activity function allows you to record custom actions or events which your users are performing or completing throughout your site. Every integrated action or event that is triggered can include optional metadata properties which can be exposed via reporting and analytics. These integrated activities can also act as engagement/conversion events through the tracking URL creation process. The “callback” parameter is optional and may be safely omitted if not desired.

Example —(Track an Activity)

NOTE: The SDK collects the time on page which is sent with any custom events implemented. The time that is returned is in seconds and starts once the page is loaded until the custom event is sent/completed. The “event_name” parameter is required but all other parameters are optional and may be safely omitted if not desired.

NOTE: For more information on standard events within Kochava, refer to our Post-Install Event Examples support documentation.


Install:

The install is automatically sent for you and you do not need to perform this activity unless you have set Disable Auto Install to true. If you have set this value to true, you must manually send the install only once, and do so before sending any other activities or events. It is your responsibility to ensure this function is called only once per user.

 

BEST PRACTICES: It is highly recommended that if sending the install, autopage not be used. This is because Kochava will automatically send an event when landing on a page, which will in turn auto-generate an install defeating the purpose. In this case no page views should be tracked until after the install is manually sent.

 

Example —(Install)

 

Alternatively, if you have an identity link in scope at the moment you wish to send the install, call installWithIdentity() with an object containing identity key and value pairs as the first parameter. This will ensure the identity link is included directly within the manually triggered install payload.

Example —(Install with an Identity Key Value Pair)