otto-de-legacy / drop-in.js

A good start to do Real User Monitoring (RUM) in your project with this simple drop-in js file.

drop-in rum.js

Description

A good start to do Real User Monitoring (RUM) in your project with this simple drop-in js file. All you have to do is loading this the rum.js (e.g. by merging it into your main.js) on your website and adjust the monitoring urls:

RUM_BEACON_URL =                "https://www.example.com/some_rum_url.gif",
JS_BEACON_URL =                 "https://www.example.com/some_js_errors_monitoring_url.gif",
PRINT_BEACON_URL =              "https://www.example.com/some_print_monitoring_url.gif",
CONSOLE_BEACON_URL =            "https://www.example.com/some_other_monitoring_url.gif",
LIVE_URL_PATTERN =              "live.example.com", //for specifying the live env so that you dont monitor on dev or prelive envs
ALERT_BEACON_URL =              "https://www.example.com/omg_another_monitoring_url.gif",

The URLs you insert should point to an image beacon url under your control. Providing that you get in your (apache|nginx).log files all the RUM data you ever dreamed of.

Installation

1. Just include the file as

<script src="rum.js"></script>

anywhere in your project. Preferably at the very end of your document.

2. You must have a server under your control where the JavaScript can send the data to. E.g. Apache or nginix where you have good access to the logfiles.

3. For optimal evaluation of the data you use a logfile parser/analyzer such as splunk together graphite.

Requirements

drop-in rum.js only works with browsers supporting the navigation.timing api (https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html). Those are currently: Firefox 7+, Chrome 5+ and IE9+

Oh, and you will need jQuery. Pull requests for a jQuery-less version are welcome.

Data being delivered

The format in the logs will look like: https://www.example.com/some_rum_url.gif?networkTime=386&domTime=431&complete=770&dnsTime=0&timeToFirstClick=7039&clickObject=DIV%3A&timeFromMoveToClick=6548&parentURL=https%3A%2F%2Fwww.example.com%2F&referrer=&htmlLength=110186&numberStylesheets=3

Performance Data

parameter	value
domTime	The time the browser spends on evaluating the loaded document (DOM calculation, Asset fetching) until dom:ready
networkTime	The time thats being spent only to fetch the whole document excluding assets.
dnsTime	Time being spend resolving the hostname
complete	The complete time from initiating the pageload until dom:ready. Including dom:ready relevant asset requests
clickObject	A nice insight of minor importance: where did the user click on the loaded page. Could it be, that your users constantly click your exit button on a special page because it peforms bad ?
timeToFirstClick	Another new metric: When (counting from the triggering the pageload) does the user perform the first click. Could lead to some interesting performance insights
timeFromMoveToClick	Delivers the time difference from the first movement of the mouse until the first click. Question could be: "Do your users move the mouse around for hours until they click due to bad performance ?"
parentURL	The URL where the user was at time of the monitoring
referrer	The URL before this page
htmlLength	The number of characters inside the body at the moment of the first click in the document. A good metric to learn about your avg pagesizse.
numberStylesheets	The number of Stylesheets being loaded from this page. Two is a good number, more than 5 far too much.
pageViewsUntilCheckout	The number of pageviews a user performs until he buys something on your site. Indicator is when he arrives at URL_PATTERN_FOR_CHECKOUT_PAGE . Afterwards the counter here is resetted.
clicksUntilCheckout	The number of click a user performs until he buys something on your site. Indicator is when he arrives at URL_PATTERN_FOR_CHECKOUT_PAGE . Afterwards the counter here is resetted. Can give some insights to your UX on how click intensively your website is (JIRA or Typo3 should have awesome high numbers here).

Print out data

parameter	value
print	Just an integer 1. You need to sum them up get the overall printouts per time period.

JavaScript Errors

use of console.log

use of alert()