Vue Web SDK Integration

NOTE: If migrating from a previous Kochava SDK javascript snippet, be sure to remove that integration snippet and update any Kochava SDK function calls as described below.

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

Integrating the SDK

Requirements:

• NodeJs
• NPM
• Vue

Supported Platforms:

• Vue

Data Privacy:

• SDK Data Privacy and Safety

Integration:

Estimated Time to Complete

5 Minutes

(Release Notes)

The Kochava web SDK is available for Vue projects as a normal npm package. It provides a class called Kochava, which contains all necessary Kochava SDK functions and behavior.

1. Install the Kochava SDK via NPM by running npm install -D kochava@latest in the root of your project directory (where package.json is located). For more installation options, see our NodeJS Web SDK Integration.
2. After running the command above, confirm that kochava version 3.0.1 or later was added in your package json.

Starting the SDK

Estimated Time to Complete

1 Minute

In order for the SDK to start operating, the Kochava class must be instantiated one time with a valid configuration. However, Vue is a very open-ended framework with many derivatives, and so this can be accomplished in various ways. Below is one example of how this can be done, but your implementation may vary depending on your architecture. For your reference, this code example uses the default Vue 3 “setup” configuration.

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.

We recommend 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’s started before use, resulting in more accurate data/behavior.

Within your root component script tag (usually App.vue):

1. Import the Kochava class.
2. Create an instance of the Kochava class (we recommend calling it lower-case ‘kochava’).
3. (Optional) Make any desired pre-start configuration calls (registerIdentityLink, disableAutoPage, useCookies, etc).
4. Call startWithAppGuid using a valid Kochava App GUID.

 

Example — (Start Kochava in the Root Component):

// Vue3 Setup SFCs
<script setup>
import HelloWorld from './components/HelloWorld.vue';
import { Kochava } from 'kochava'; // Import the Kochava class

const kochava = Kochava.createForVue(); // Create an instance of the Kochava class

// Optional pre-start calls would go here

kochava.startWithAppGuid("YOUR_APP_GUID"); // Call startWithAppGuid
</script>

• 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.

 

Optional Configuration

From here on, the SDK is integrated and ready, the following configuration calls are optional, and are only for special desired SDK behavior. The following code snippets should be placed in the above snippet, at the comment labeled Optional pre-start calls will go here.

<script setup>
import HelloWorld from './components/HelloWorld.vue';
import { Kochava } from 'kochava'; // Import the Kochava class

const kochava = Kochava.createForVue(); // Create an instance of the Kochava class

// Auto pages will be sent (default)
 kochava.disableAutoPage(false);

// Auto pages will not be sent
kochava.disableAutoPage(true);

kochava.startWithAppGuid("YOUR_APP_GUID"); // Call startWithAppGuid
</script>

<script setup>
import HelloWorld from './components/HelloWorld.vue';
import { Kochava } from 'kochava'; // Import the Kochava class

const kochava = Kochava.createForVue(); // Create an instance of the Kochava class

// Will not use cookies (default)
kochava.useCookies(false);

// Will use cookies
kochava.useCookies(true);

kochava.startWithAppGuid("YOUR_APP_GUID"); // Call startWithAppGuid
</script>

Vue Examples

Example — (Add the Kochava Object to a Child Component):

1. Attach the kochava object to the child component in the parent’s template.

// App.vue
<script setup>
import HelloWorld from './components/HelloWorld.vue';
import { Kochava } from 'kochava';

const kochava = Kochava.createForVue();

kochava.startWithAppGuid("YOUR_APP_GUID");
</script>

<template>
  <HelloWorld :kochava="kochava"/> // Add kochava as a prop
</template>

 

2. Define the prop on the child component, call SDK functions with the kochava object.

// HelloWorld.vue
<script setup>
import { Kochava } from 'kochava'; // Import the Kochava class 

// Define the kochava Prop
defineProps({
  kochava: Kochava,
});

kochava.sendPageEvent("hello_world"); // Example, send a new page event
</script>

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.