Web Analytics

The Hello world example will be expanded further by adding web analytics variables. The first example adds the function getPageName, which set the pageName variable with a string. (The page name is an important dimension in web analytics, used to uniquely identify each page.)

concept Global {
  match '*'

  val url = `window.location.href`
  val pageName = `getPageName()`

  plugin script `console.log( 'Web analytics example' )`

  flow
    => debug

  plugin debug
}

def getPageName = `(location.pathname||'/').substring(1)||'home'`

Several things are important to point out in the above example:

• The call of the getPageName function is regular JavaScript. No arguments are passed.
• The definition of the function is different to typical Javascript coding:
  • It starts with the def keyword
  • Second is the function name, followed by an =-sign
  • The function body is embedded in back ticks
  • The function body is a regular JavaScript expression
  • (The syntax for functions with arguments will be explained further below)

In the next example creates a unique ID for visitors. This allows us to tie a visitor to the pages that were viewed (and sent to the server). A visitor ID is a random value that is stored in a cookie, so it is still available if the visitor returns within 30 days.

concept Global {
  match '*'

  val url = `window.location.href`
  val pageName = `getPageName()`
  val visitorId = `localStorage.dimmlcid=localStorage.dimmlcid||guid()`
  val sandboxID = `dimml.cookies.get('dimml')`
  val currentTime = `getCurrentTime()`
  val currentDate = `getCurrentDate()`

  plugin script `console.log( 'Web analytics example2' )`

  flow
    => debug

  plugin debug
}

def guid = `dimml.sha1(+new Date()+Math.random().toString(36).slice(2)+navigator.userAgent).slice(20)`

def getPageName = `(location.pathname||'/').substring(1)||'home'`

def getCurrentTime = `
 var d = new Date(), h = (d.getHours()<10?'0':'') + d.getHours(), m = (d.getMinutes()<10?'0':'') + d.getMinutes();
 return h + ':' + m;
`

def getCurrentDate = `
 var d = new Date(), dd = d.getDate(), mm = d.getMonth()+1, yyyy = d.getFullYear();
 return dd + '-' + mm + '-' + yyyy;
`

To complete the web analytics example we will use the request plugin to capture the user agent information. This text contains all technical information of the browser and can be used not only to identify the specific browser, but also the device type and operating system. This information is typically quite valuable since this helps significantly in debugging website issues since they are typically by  a specific device type.

After adding the request plugin, the user agent string is available as a parameter. The user-agent flow element can then be used to process the string into several properties like browser and device type. This flow element is added to the flow as well before making the output available as a tuple.

Details on the request plugin can be here, details on the user agent flow element can be found here. This mechanism for getting the device information provides several benefits for developers:

• All processing is executed server side, minimizing the amount of data this is collected client side and the amount of code that is sent to the browser
• Future updates are handled automatically as part of the O2MC I/O Platform
• The entire logic is encapsulated in 2 lines of DimML code: the request header and the user agent flow element. This makes the solution significantly easier to maintain

The resulting code looks like this:

concept Global {
  match '*'

  val url = `window.location.href`
  val pageName = `getPageName()`
  val visitorId = `localStorage.dimmlcid=localStorage.dimmlcid||guid()`
  val sandboxID = `dimml.cookies.get('dimml')`
  val currentTime = `getCurrentTime()`
  val currentDate = `getCurrentDate()`

  plugin script `console.log( 'Web analytics example2' )`
  plugin request[ua = `headers['User-Agent']`]

  flow
    => useragent[parsedUserAgent = 'ua']
    => debug

  plugin debug
}

def guid = `dimml.sha1(+new Date()+Math.random().toString(36).slice(2)+navigator.userAgent).slice(20)`

def getPageName = `(location.pathname||'/').substring(1)||'home'`

def getCurrentTime = `
 var d = new Date(), h = (d.getHours()<10?'0':'') + d.getHours(), m = (d.getMinutes()<10?'0':'') + d.getMinutes();
 return h + ':' + m;
`

def getCurrentDate = `
 var d = new Date(), dd = d.getDate(), mm = d.getMonth()+1, yyyy = d.getFullYear();
 return dd + '-' + mm + '-' + yyyy;
`

Additional assigment

1. Add a parameter which captures the referring URL (URL of the page that was viewed before opening the current page).
2. Extend the processing of the referrer field such that if the referring URL contains the domain of the current URL, the value “Internal referrer” is generated.
3. Add a timestamp field which contains both the current data as the current time
4. Add a browserfamily field which contains the browser family as it currently present in the parsed field (populated by the user agent string).
5. After adding this field, filter the parsed field out of the data tuple by using the filter flow element right before the debug flow element