Loggr was recently featured on a .NET coding podcast called HerdingCode. With that podcast came an influx of .NET users (thanks to everyone that has joined us). We decided to post some resources we think will be helpful for .NET users. Although anyone interested in Loggr will find them helpful as well.
Documentation on using the .NET Loggr Agent (new)
Loggr chat room on Jabbr.net (come chat with us)
We are currently beta testing Live User Monitoring in Loggr. With just a small snippet of Javascript on your web pages, this features enables you to watch exactly what your users are doing. At a glance, know how many users are online at any given moment. See which ones are actively browsing or which ones are idle.
User List
The user list shows all the active and idle users using your app. An idle user hasn’t navigated in the last minute. After 10 minutes of inactivity, we pull them from the list until they navigate again.
Activity Chart
Watch your user activity tick by on the Activity Chart, which shows a live feed of activity over the last 10 minutes. Your web app seeming a little slow to load pages, maybe you are getting a spike in activity. This chart will let you know if that’s the case.
User Inspector
Click the VIEW button next to any user to bring up the User Inspector. This little popup gives specific details about the user. Who they are, where there from, what events may have been posted in reference to them and details about their usage.
We are currently pulling demographic data from RapLeaf, like age, gender and location. With your own APIKEY from Rapleaf you’ll be able to grab more details too.
We are in the process of making the process of getting external data pluggable, so you can grab data from another service or from your own back-end systems, like your CRM.
In the next blog post we will show you how to analyze that data within Loggr as well as correlate that external data with existing events in your event log.
Now click over to the Pages tab within the User Inspector to see a real-time list of pages in the user’s current session. As the user navigates through your web app, you’ll see those pages appear. You can easily jump between users to see what each one is doing.
Are You Interested?
If you are interested in trying this out on your own website, let us know on twitter @loggrnet. Or sign up for a free account and follow the instructions in the Getting Started Guide.
Using the Loggr Web API and the Loggr Query Language, it’s easy to grab your event data and use it within your own websites. For example, if you’re building a website for a client you may want to show a simple sales chart in the admin area of that website. It’s very easy to do and clients love those kind of features.
In this post I’m going to show you how to extract the sales events from your Loggr event log and create a graph like below in HTML.
1. Make sure you’re logging sales event
Loggr does a great job with analyzing sales data. Make sure you’re logging each sale, setting a value equal to the amount of the sale and classifying it as a sale so you can easily filter them out later. For this example, we are using an Event Class to classify the sales events. The Event Class key is ‘order’.
2. Include the Loggr Web API javascript in your web page
Below is the webpage we are using for the example.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://api.loggr.net/1/loggr.min.js?l=[LOGKEY]&a=[APIKEY]"></script>
<script type="text/javascript" src="http://www.highcharts.com/js/highcharts.js"></script>
</head>
<body>
<div id="container">
<header></header>
<div id="content">
<div id="chart"></div>
</div>
<footer></footer>
</div>
</body>
</html>
Take notice on line 6 we are including the Loggr js file, passing your own LOGKEY and APIKEY. On line 7 we are including the chart API from HighCharts (great little library). On line 14 we are providing a DIV to stick our chart.
3. Write the query to grab your orders
Before we can write the javascript to display the chart we need to write the query to pull out an aggregated view of the past week’s sales. We do that using the the Loggr Query Language as described in the docs. The query will group our sales events by day over the past 7 days and will return the sum of the values for those events. It’s pretty straightforward for this query. Notice the events.order which tells Loggr to only return events with Event Class of ‘order’.
GET events.order GROUPBY DAY OCCURS(TODAY - DAYS(6)) COLUMNS(SUM)
4. Load the event data and graph it
The following javascript call the query method of the Loggr API and uses the data returned to draw the chart. Most of the code is used to configure and format the chart. Notice line 2 that makes a call to Loggr for the data. DrawChart is called in the callback for the query method.
$(document).ready(function () {
Loggr.Log.events.query("GET events.order GROUPBY DAY OCCURS(TODAY - DAYS(6)) COLUMNS(SUM)", function (es) {
drawChart(es);
});
});
var chart;
function drawChart(data) {
var weekday=new Array(7);
weekday[0]="Sun";
weekday[1]="Mon";
weekday[2]="Tue";
weekday[3]="Wed";
weekday[4]="Thu";
weekday[5]="Fri";
weekday[6]="Sat";
var today = new Date();
var days = new Array();
for (var i=7; i>1; i--) {
days.push(weekday[new Date(today.getDate() - (i * 1000 * 60 * 60 *24)).getDay()]);
}
days.push("Tod");
var config = {
chart: {
renderTo: 'chart',
defaultSeriesType: 'area',
width: 300,
height: 170
},
title: {
text: 'Website Sales'
},
xAxis: {
categories: days
},
yAxis: {
min: 0,
title: {
text: null
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
formatter: function() {
return ''+
this.x +': $'+ addCommas(this.y);
}
},
plotOptions: {
line: {
pointPadding: 0,
borderWidth: 0,
shadow: false
}
},
series: new Array()
};
var series = {
name: "Sales",
data: new Array()
};
for (var i=0; i<data.length; i++) {
series.data.push(data[i].sum);
}
config.series.push(series);
chart = new Highcharts.Chart(config);
}
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
And that’s it. If you refresh your web page you should see a nice little chart like above displayed on your web page. We’ve provided a jsFiddle page for you to easily try it out on your own: http://jsfiddle.net/7RaMb/ (make sure you swap in your LOGKEY and APIKEY first)
I was meeting with a large marketing/development company the other morning to demo Loggr and get some feedback (that was you Josh and Joe, thanks!). Usually one of the first questions I get in a meeting like that is…
“How is Loggr different than Google Analytics?” It’s a fair question, and since I typically talk about GA in my introduction, I fully expect to get it.
Both Loggr and Google Analytics track things and provide analytics on the things they track. The difference is in the things we track. GA tracks web traffic while Loggr is used for tracking application events.
“What are application events?” is usually the next question, and not as easy to explain. I usually try to give an example. Picture an online book store. There are numerous, important events going on in an e-commerce website like that. Events that give a clear picture into how the website is being used — or not used. Here are some:
These are events that are really important to track. Even more important is to track the particular user that is doing all these events, when they are doing them in what order. This is where Loggr excels and the effectiveness of Google Analytics is kinda useless.
I try to explain it this way… Google Analytics is one of the best tools prior to your website’s login page. After the login page you want to track events based on the user, which is what Loggr does. If your website doesn’t have a login page, which probably means it doesn’t specifically identify users, then Loggr is not as helpful.
Do you know what your conversions look like for today? What about compared to yesterday or last week?
