Documentation

JavaScript SDK integration

Enable Alooma's event tracking on your website or web application by integrating our Javascript SDK. The Alooma Javascript library is a modified version of the Mixpanel-JS library, trimmed down to the bare event tracking necessities.

Step 1 - Initialize the SDK

  1. Log in to your Alooma account and click Add new input.

  2. Select the JavaScript App input.

  3. Give your input a label (name), and copy the generated token.

  4. To begin, simply paste the code below in the <head> tag of the page you want to track. Be sure to change <TOKEN> to the token generated in step 2.

    <!-- start Alooma -->
    <script type="text/javascript">
    (function(e,b){if(!b.__SV){var a,f,i,g;
    window.alooma=b;
    b._i=[];
    b.init=function(a,e,d){function f(b,h){var a=h.split(".");
    2==a.length&&(b=b[a[0]],h=a[1]);
    b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;
    "undefined"!==typeof d?c=b[d]=[]:d="alooma";
    c.people=c.people||[];
    c.toString=function(b){var a="alooma";
    "alooma"!==d&&(a+="."+d);
    b||(a+=" (stub)");
    return a};
    c.people.toString=function(){return c.toString(1)+".people (stub)"};
    i="disable time_event track track_custom_event track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
     for(g=0;
         g<i.length;
         g++)f(c,i[g]);
    b._i.push([a,e,d])};
    b.__SV=1.2;
    a=e.createElement("script");
    a.type="text/javascript";
    a.async=!0;
    a.src="undefined"!==typeof ALOOMA_CUSTOM_LIB_URL?ALOOMA_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.alooma.com/libs/alooma-latest.min.js".match(/^\/\//)?"https://cdn.alooma.com/libs/alooma-latest.min.js":"//cdn.alooma.com/libs/alooma-latest.min.js";
    f=e.getElementsByTagName("script")[0];
    f.parentNode.insertBefore(a,f)}})(document,window.alooma||[]);
    alooma.init("<TOKEN>", {"api_host":"https://inputs.alooma.com"});
    </script>
    <!-- end Alooma -->

    The snippet loads the library asynchronously to keep your website loading quickly. Events that you track before the script finished loading will be registered and sent once it is loaded, so no data will be lost.

  5. Keep the mapping mode to the default of OneClick if you'd like Alooma to automatically map all events from your JavaScript integration exactly to your target data warehouse. Otherwise, they'll have to be mapped manually from the Mapper screen.

  6. Click Finish and move on to Step 2.

Step 2 - Sending events to Alooma

The snippet above provides a global variable named alooma that is used for sending tracked events to the Alooma API.

Tracking a named event

To track an event, call alooma.track with the event name and properties.

// Send a "purchase" event to Alooma
alooma.track(
  "purchase", {
    "item": "flip-flops"
  }
);

Using this method will send events in the following format:

{
  "event": "purchase",
  "properties": {
    "item": "flip-flops",
    /*
      additional properties added by the library:
      distinct_id, $os, $browser, $referrer,
      $referring_domain, $initial_referrer,
      $inital_referring_domain, $search_engine,
      mp_keyword, utm_source, utm_medium,
      utm_campaign, utm_content, utm_term,
      $device, $current_url, $browser_version,
      $screen_height, $screen_width, mp_lib,
      $lib_version ...
   */
  }
}
Tracking a custom event

In case you would like to send Alooma a custom JSON object, you can use the track_custom_event method:

alooma.track_custom_event({"event":"purchase", "item":"flip-flops"});

Using this method will send events in the following format:

{
  "event": "purchase",
  "item": "flip-flops"
  "properties": {
    /*
      additional properties added by the library:
      distinct_id, $os, $browser, $referrer,
      $referring_domain, $initial_referrer,
      $inital_referring_domain, $search_engine,
      mp_keyword, utm_source, utm_medium,
      utm_campaign, utm_content, utm_term,
      $device, $current_url, $browser_version,
      $screen_height, $screen_width, mp_lib,
      $lib_version ...
    */
  }
}
How events arrive in Alooma

Given the above configuration, all events from your JavaScript input will flow into a single event type with the name you defined when you created the input.

If you want to have separate event types for each event value in your events, simply add the following code to the def transform function in the Code Engine:

if event['_metadata']['input_label'] == '<YOUR_INPUT_NAME>':
 event['_metadata']['event_type'] = event['event']
 del event['event']

That's it, you're now ready to send events to Alooma! learn more about the default properties available in this SDK.

Search results

    No results found