SCE Tracking Script

Installation

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)

30

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] })">

OR

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);
});
PreviousCreating and testing a scenarioNextAdvanced Miner

Last updated