Important: As of August 13, 2024, this page will no longer be actively maintained. Please refer to the current version of this content here.
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 Analytics 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 Analytics 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@mparticle.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 Analytics to view all incoming events. You should expect to see your data in Analytics
4. Additional Information
For advanced JavaScript settings, please refer to our documentation.
For a full list of our Analytics Object API, please click here.