JavaScript

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/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”.

 

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.

 

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 set a unique ID for this event only (explained here) or a stateful unique ID (explained under the Stateful Variables header). The following call will set the unique id for this event only:

Indicative.buildEvent('event-name', 'unique-user-id');

If you have a stateful unique ID set, the unique ID in this call will override that unique ID. If you want to add properties to a call, it’s fairly simple. Call buildEvent with any of the following forms:

Indicative.buildEvent('event-name', 'unique-user-id', {propertyName: 'propertyValue'});
Indicative.buildEvent('event-name', 'unique-user-id', {propertyName: 'propertyValue', propertyName2: 'propertyValue2'});
Indicative.buildEvent('event-name', 'unique-user-id', [{propertyName: 'propertyValue'}, {propertyName2: 'propertyValue2'}]);
Indicative.buildEvent('event-name', 'unique-user-id', [['propertyName': 'propertyValue'], ['propertyName2': 'propertyValue2']]);

Building without the uniqueID is just as simple. You’ll mostly be using these cases if you’ve set a stateful unique ID or have no unique ID and will use the random UUID we set for you:

Indicative.buildEvent('event-name', {propertyName: 'propertyValue'});
Indicative.buildEvent('event-name', {propertyName: 'propertyValue', propertyName2: 'propertyValue2'});
Indicative.buildEvent('event-name', [{propertyName: 'propertyValue'}, {propertyName2: 'propertyValue2'}]);
Indicative.buildEvent('event-name', [['propertyName': 'propertyValue'], ['propertyName2': 'propertyValue2']]);

Indicative also allows callbacks, which will be fired after a successful or unsuccessful stat post. You can include a callback function in any of the buildEvent methods, like so:

var callbackFn = function () {
        console.info("callback!");
};

Indicative.buildEvent('event-name', callbackFn);
Indicative.buildEvent('event-name', 'unique-user-id', callbackFn);
Indicative.buildEvent('event-name', 'unique-user-id', {propertyName: 'propertyValue'}, callbackFn);
Indicative.buildEvent('event-name', {propertyName: 'propertyValue'}, callbackFn);

With so many different ways to build an event, you’ll have a lot of flexibility to build and send any custom events you need. For further references, refer to the Indicative object API table below.

 

Stateful Variables
We allow you to set stateful variables across every page. Stateful variables are stored as a persistent cookie, so every page will be able to share the same common properties and a uniqueID for the user triggering events on your site. Anywhere in your JavaScript, after Indicative was initialized, call:
Indicative.setUniqueID("unique-user-id");
This will allow you to log events without having to refer to a unique ID every time you build an event. Indicative also allows for stateful properties, as well, which can be added with the following calls:
Indicative.addProperty('propertyName', 'propertyValue');
Indicative.addProperties({propertyName: 'propertyValue', propertyName2: 'propertyValue2'});
Indicative.addProperties([{propertyName: 'propertyValue'}, {propertyName2: 'propertyValue2'}]);
Indicative.addProperties([['propertyName', 'propertyValue'], ['propertyName2', 'propertyValue2']]);
These properties will be appended to subsequent event calls. They will not override the properties passed into a buildEvent call, rather append to the list of properties. If a common property isn’t applicable anymore, call:
Indicative.removeProperty('propertyName');
This will remove a single property. It’s just as easy to clear the entire common properties list:
Indicative.clearProperty();

 

How to Track Links

Tracking href link clicks can be challenging, because once the page changes we lose our chance to fire an event. To solve this problem, we’ve added a callback to our build object. Use the following function to track link clicks and then send the user to the linked page:

function linkClick (event, linkName) {
        var url = event.target.getAttribute('href');
        console.info(event);
        event.preventDefault();

        Indicative.buildEvent("Link Click", {Link_Name: linkName}, function () {
            console.info("go to site");
            if (url) {
                window.location = url;
            }
        });
}

To call this function in your HTML, set up a link like so: 

<a onclick="linkClick(event, 'home')" href="home.html">Home</a>

How to Track Web Sessions

We’ve implemented Web Sessions in our JavaScript SDK track users’ web sessions with just a slight change to one line of your code.  If a user has no activity for 30 minutes (no events are fired locally), upon any new event activity, the JavaScript SDK will also fire a Web Session” event to indicate the start of a new Web Session.  Note: the window of inactivity is customizable, but defaults to 30 minutes, with industry standards.

 

How to Integrate

Where you see the line in the snippet:

Indicative.initialize(apiKey);

Alter it to read:

Indicative.initialize(apiKey, {recordSessions: true});

If you want to alter the inactive session length, change the line to be this instead:

Indicative.initialize(apiKey, {recordSessions: true, sessionsThreshold: 5});

Where 5 signifies 5 minutes.  

 

Automatic Tracking

We automatically track the following properties: browser (browser), operating system (browser_os), device (browser_device), referrer (browser_referrer), language (browser_language), page title (page_title), and url (page_url).

We also automatically track marketing channels provided by UTM search parameters. You’ll be able to see the following properties if you have users loading your page with UTM properties in the URL: campaign_source,campaign_mediumcampaign_termcampaign_content, and campaign_name. We will also provide these channel properties in their own section of the data panel, titled as Channels.

 

Indicative Object API

Method Call Parameters Description
Indicative.initialize(apiKey) String Initializes the Indicative object to be ready for use. Must contain your project's unique apiKey.
Indicative.getProperties(); N/A Returns an object of the stateful properties.
Indicative.addProperties(obj); Obj | Array Adds a list or object of properties to the object of stateful properties. Can be an object or an array, see docs for further info.
Indicative.addProperty(name,value); name: String & value: String | Number| Boolean Add a single property to the object of stateful properties. Must include a String name and String or Number or Boolean value.
Indicative.removeProperty(name); String Removes a single property from the stateful properties object.
Indicative.clearProperties(); N/A Clears all stateful properties.
Indicative.setUniqueID(id); String Sets a stateful uniqueID to be used for all events built without a uniqueID.
Indictive.clearUniqueID(); N/A Clears the stateful uniqueID.
Indicative.buildEvent(eventName); eventName: String Records an event wit hthe given eventName, using the unique ID stored as a cookie (Random UUID if not set manually using Indicative.setUniqueId(id)). More information provided in documentation on building an event.
Indicative.buildEvent(eventName, id); eventName: String & id: String  Records an event with the given eventName and unique id. It will only set this event's unique id. More information provided in documentation on building an event.
Indicative.buildEvent(eventName, id, propmap); eventName: String & id: String & propmap: Obj | Array Records an event with the given eventName, unique id, and property map. The property map can be an object or array and will only be used for this event. See how to format these in the subsection on building an event.
Indicative.buildEvent(eventName, propmap); eventName: String & propmap: Obj | Array Records an event with the given eventName and property map. The property map can be an object or array and will only be used for this event. Refer to building an event subsection for more information.
Indicative.buildEvent(eventName, callback); eventName: String & callback: Func Records an event with the given eventName and callback function. It will use the default unique id. The callback function will be called after successful or unsuccessful POST. Refer to building an event for more information.
Indicative.buildEvent(eventName, id, callback); eventName: String & id: String & callback: Func Records an event with the given eventName, unique id, and callback function. It will record this event's unique id. The callback function will be called after successful or unsuccessful POST. Refer to building an event for more information.
Indicative.buildEvent(eventName, id, propmap, callback); eventName: String & id: String & propmap: Obj | Array & callback: Func  Records an event with the given eventName, unique id, property map, and callback function. The property map can be an object or array and will only be used for this event.The callback function will be called after successful or unsuccessful POST. Refer to building an event for more information.
Indicative.buildEvent(eventName, propmap, callback); eventName: String & propmap: Obj | Array & callback: Func  Records an event with the given eventName, property map, and call back function. The property map can be an object or array and will only be used for this event.The callback function will be called after successful or unsuccessful POST. Refer to building an event for more information.
Indicative.setUniqueID(id,true); id: String This will automatically call Indicative.sendAlias() after setting the new unique ID. If you just call Indicative.setUniqueID(id) (without 'true') it will not send the alias call.
Indicative.sendAlias(); N/A The Indicative client automatically generates a default unique ID (a UUID) to use on all events until Indicative.setUniqueID(id) is called. At that point, Indicative.sendAlias() can be called to alias the UUID to the 'id' parameter set within Indicative.setUniqueID(id)

 

2 users found this helpful