SCE Tracking Script

To start tracking users of a website or mobile app, you need to install a tracking script in one of the technologies mentioned below:

iOS: https://github.com/Algolytics/ios-tracking
Android: https://github.com/Algolytics/android-tracking
WWW: see details below

Installation on WWW

Fill places marked with comments and add our script to <head> tag of all of your views.

<script>
  (function(baseUrl, apiKey, sid, options) {
    var options = options || { debug: false, attachEvents: [], ignoreTypeAttributes: [], ignoreNameAttributes: [] };
    window.sce = {
      CODES_V: "0.4",
      writeKey: apiKey,
      baseUrl: baseUrl,
      sid: sid,
      buffer: [],
      ignoreTypeAttributes: options.ignoreTypeAttributes,
      ignoreNameAttributes: options.ignoreNameAttributes,
      debug: options.debug,
      attachEvents: options.attachEvents,
      permissionCookieName: "accept",
      event: function(eventType, args) {
          if (sce.sendData) {
              sce.sendData(eventType, args, null, "SCENARIO_NAME");
          } else {
              sce.buffer.push([
                  1 * new Date(),
                  eventType,
                  args
              ]);
          }
      }
    };
    var sceScript = document.createElement("script");
    sceScript.type = "text/javascript";
    sceScript.async = true;
    sceScript.src = baseUrl + 'scripts/sendData.min.js';
    var otherScriptTag = document.getElementsByTagName("script")[0];
    otherScriptTag.parentNode.insertBefore(sceScript, otherScriptTag);
  })("APP_BASE_URL", "APP_TOKEN", "sid", { debug: false, attachEvents: [ "optionalEvent" ], ignoreTypeAttributes: ["password"], ignoreNameAttributes:["optionalIgnoredAttributeName"] }); // change url to sce url, add api key, customer id and options
</script>

Parameters

SCENARIO_NAME - name of scenario you want to use or empty if you want to use scenario www_events
APP_BASE_URL - application base url, e.g. http://localhost:9002/
APP_TOKEN - application authentication token

Tracking permission

By default our script doesn't start working unless tracking permission is granted, e.g.:

<button onclick="sce.grantTrackingPermission()" type="button">Accept tracking</button>

Use

Our script gathers information about following events automatically:

time spent on page (sent in intervals(0, 5, 30, 60, 300, 900(seconds)) and with every event
page view,
scroll value,
mouse move (it sends cursor position with 0,5s interval) - optional (you can turn it on adding key/value pair - attachEvents: [ "mousePosition" ] to options object in our script),
click(on button or link),
input values after every character provided,
text pasted to input,
select change,
radio change,
checkbox check,
input characters count

To send your own event you can use sce.event() function:

sce.event("eventCategory", {
  eventLabel: [eventLabel],
  eventValue: [eventValue]
});

First argument is the name of the table in which the information will be stored. That is why the object which is being sent should have the same properties for equal first arguments of function event. For example:

sce.event("Input_click", {
  id: event.target.id,
  name: event.target.name,
  value: event.target.value
});

Variables

Computed variables to use in your app:

Variable

Type

Description

Example

sce.pageHeight

integer

height of a page (in pixels)

1500

sce.maxScrollY

integer

height of a page reached by user

890

sce.timeSpentOnPage

integer

time spent on a page (in seconds)

sce.currentCursorPostition

object

current position of a cursor (pixels)

{ x: 358, y: 781 }

sce.inputCharacters

object

number of characters provided on input

{ firstName : 5, lastName: 10 }

Ignoring attributes from being tracked

By default inputs with 'password' attribute type are not tracked. Other attribute types can also be ignored by specifying them in the script settings:

ignoreTypeAttributes: ["password", "text"]

Elements can also be ignored by their name:

ignoreNameAttributes:["optionalIgnoredAttributeName"]

Examples of use

Input edition

Add event listener to send information about input after edition:

<input 
    type="text"
    name="FirstName"
    onFocusOut="sce.event(
        'Inputs', {
            action: "input_edition",
            id: event.target.id,
            name: event.target.name,
            value: event.target.value,
            enteredCharacters: sce.inputCharacters[event.target.id]
        }
    )"
>

window.addEventListener("focusout", event => {
  if (event.target.tagName === "INPUT") {
    sce.event("input_edition", {
      id: event.target.id,
      name: event.target.name,
      value: event.target.value,
      enteredCharacters: sce.inputCharacters[event.target.id]
    });
  }
});

Clicks

Given:

<a id="googleLink" href="http://google.com">Go to google!!!</a>

To send information about link that user clicked you can add onClick attribute to <a> tag:

<a id="googleLink" href="http://google.com" onClick="sce.event("link_click", {
    linkId: event.target.id,
    linkName: event.target.innerHTML
    href: event.target.href
  });">
    Go to google!!!
</a>

OR Add event listener to your script:

window.addEventListener("click", event => {
    if (event.target.tagName === "A") {
      sce.event("link_click", {
        linkId: event.target.id,
        linkName: event.target.innerHTML
        href: event.target.href
      });
    }
});

Time spent on page and page view

let intervals = [0, 5000, 30000, 60000, 300000, 900000];
window.addEventListener("load", function() {
  intervals.forEach(function(interval) {
    const sendTime = setTimeout(
      () =>
        sce.event("time_spent_on_page", {
          value: sce.timeSpentOnPage
        }),
      interval
    );
  });
  sce.event("page_view", { value: window.location.href });
});

Scroll

window.addEventListener("scroll", event => {
  window.clearTimeout(sendScrollEvent);
  sendScrollEvent = setTimeout(function() {
    sce.event("scroll", {
      scroll_position_Y: sce.maxScrollY,
      scroll_position_Y_max: sce.pageHeight
    });
  }, 1000);
});

Processing evnts and storing in RDBMS

Events generated on a web page or a mobile app can be transmitted by an event queue system to a scenario, which further processes them and sends to a database. Here is an example code:

import com.rabbitmq.client.*
import groovy.json.JsonOutput

boolean isCollection(object) {
  [Collection, Object[], LinkedHashMap.class].any {
    it.isAssignableFrom(object.getClass())
  }
}
data1 = [: ]
table_name = 'all_events'
//------------------------------------------
additional_prefix = "ext_"
additional_name = "__additional"
event_type_name = 'eventType'
timestamp_name = 'ext_received_dt'

data1.put(timestamp_name, new Date().getTime())

__variables.each {
  key,
  value ->

  if (key != additional_name) {
    if (isCollection(value)) {
      data1.put(key, JsonOutput.toJson(value))
    } else {
      data1.put(key, value)
    }
  }
}
if (__variables.__additional) {
  __variables.__additional.each {
    key,
    value ->
    if (isCollection(value)) {
      data1.put(additional_prefix + key, JsonOutput.toJson(value))
    } else {
      data1.put(additional_prefix + key, value)
    }
  }
}
//table_name - removing all non alphanumeric chars except _
if (__variables.containsKey(event_type_name)) {
  tmp_tbl_name = __variables.get(event_type_name)
  if (tmp_tbl_name != null && tmp_tbl_name != '') {
    tmp_tbl_name = tmp_tbl_name.replaceAll("[\\W]", "").toLowerCase().take(64)
    if (tmp_tbl_name != '') {
      table_name = tmp_tbl_name
    }
  }
}
//all events not present in the list of allowed event types are send to all_events table
//-------------------------------------------
chName = „xxx.tracking„ //channel defined by the administrator of the system

amqpManager.checkConnection()
if (!amqpManager.channelExists(chName)) {
  amqpManager.createChannel(chName)
}

def req = [table: table_name, schema: "tracking", data: data1]
amqpManager.publish(chName, JsonOutput.toJson(req))

PreviousQuick Start - Create a simple scenario NextSending data to remote queues

Last updated 6 months ago

hashtagInstallation on WWW

hashtagParameters

hashtagTracking permission

hashtagUse

hashtagVariables

hashtagIgnoring attributes from being tracked

hashtagExamples of use

hashtagInput edition

hashtagClicks

hashtagTime spent on page and page view

hashtagScroll

hashtagProcessing evnts and storing in RDBMS

Installation on WWW

Parameters

Tracking permission

Use

Variables

Ignoring attributes from being tracked

Examples of use

Input edition

Clicks

Time spent on page and page view

Scroll

Processing evnts and storing in RDBMS