JavaScript

Overview

To get started with JavaScript, you can add an HTML script snippet to each page in your application. By default, this will start tracking Web Session and Page View events, and will allow you to start sending custom events.

The JavaScript SDK is great for client-side tracking and can be used in conjunction with our API to send server-side events.

 

1. Installation

Script for Non-AMD Sites

Please note, the instructions in this section are only valid for sites that don't use AMD (e.g. require.js). 

First, you’ll need to asynchronously load our script into your site. Add this script in either your site’s <head> or <body>tag:

<script type="text/javascript">
        (function(apiKey) {
                var ind = document.createElement('script');
                ind.src = '//cdn.indicative.com/js/1.0.2/Indicative.min.js';
                ind.type = 'text/javascript';
                ind.async = 'true';
                var ind_init = false;
                ind.onload = ind.onreadystatechange = function() {
                    var rs = this.readyState;
                    if (ind_init || (rs && rs != 'complete' && rs != 'loaded')) return;

                    ind_init = true;
                    Indicative.initialize(apiKey);
                    Indicative.buildEvent('Page View');
                };

                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(ind, s);
        })("YOUR_API_KEY_GOES_HERE");
</script>

This script tag asynchronously loads Indicative.js from our CDN and initializes the JavaScript code with your unique API key. You will need to set your API key in quotes where it says “YOUR_API_KEY_GOES_HERE”. You can find a list of all of your projects and appropriate API keys here.

To choose between your site’s <head> or <body> tags, note the pros and cons of each. The <head> tag will allow you to access the Indicative object earlier (on load), however your site will not load until everything in the <head> tag is loaded. So, if you do not need the Indicative object immediately, we recommend putting this snippet in the <body> tag.

If you would like a version of the script that does not ask require.js, please reach out to support@indicative.com

Example Module for Require.js Enabled Sites

requirejs.config({
paths: {
Indicative: '//cdn.indicative.com/js/1.0.2/Indicative.min',
}
});

define(['Indicative'], function (Indicative) {
Indicative.initialize('5b440efe-603a-494d-8c89-4c55a4d489f6');
Indicative.buildEvent('Page View');
});

2. Building and Sending an Event

Recording an event is easy and customizable. It can be as simple as:

Indicative.buildEvent('event-name');

The above line will build and send an event named ‘event-name’ with a unique ID set as a random UUID.

You can also add your own user IDs and important properties to every event to further enrich your data for more impactful analyses like in the example below.

Indicative.buildEvent('Purchase', 'unique-user-id', {
billing_status: 'Premium',
payment_plan: 'Annual'});

Some properties may be stored as a persistent cookie, so that every page can share some common properties or unique ID instead of explicitly passing them every time you build an event. Additionally, Indicative automatically tracks some properties by default; learn more. 

3. Validating Integration

Open up the Debug Console in Indicative to view all incoming events. You should expect to see your data in Indicative 

4. Additional Information

For advanced JavaScript settings, please refer to our documentation.

For a full list of our Indicative Object API, please click here.

 

13 users found this helpful