Using the Loggly JavaScript Bug

 

[obsolete]

Update: I added support for HTTPS connections in the code examples below.

JavaScript bugs are all the rage. Dropping a little bit of someone else’s JavaScript in your website allows sites like Google Analytics, LoopFuse, and MixPanel to provide various analytics around the data they collect from people browsing your site.

Loggly already supports sending in logs from your webserver via syslog or HTTP , but it’s usually a bit more involved to set up and configure than installing one of these JS bugs. We figured this was a good enough excuse to get in on the JS bug action, so we whipped up a cool solution for doing this using iframes and cross-site POSTs from your user’s browsers. We stuck the JS file on Amazon’s CloudWatch service to ensure we weren’t slowing your site down, and we made it work with our existing HTTP inputs.

Setting it Up

Setting up the Loggly JS bug is pretty straightforward. Start out by creating a Loggly HTTP input which you’ll use to send events. Next you’ll need to include a script tag for loading the loggly.js JavaScript file. Just drop the following snippet into your webpage, at the top or bottom:

<script type="text/JavaScript">
var scr = document.createElement("script");
var host = (("https:" == document.location.protocol) ? "https://d3eyf2cx8mbems.cloudfront.net" : "http://d3eyf2cx8mbems.cloudfront.net");
scr.type = "text/javascript";
scr.src = host + "/js/loggly-0.1.0.js";
document.documentElement.firstChild.appendChild(scr);
</script>

Once you have that included, you’ll want to include the following code, editing it slightly to include your HTTP input’s SHA-2 key as it appears on your HTTP input detail page, and setting the default logging level:

<script type="text/javascript">
window.onload=function(){
var key = "a00039e9-4827-49aa-9d28-e18e5ba5a818";
var host = (("https:" == document.location.protocol) ? "https://logs.loggly.com" : "http://logs.loggly.com");
castor = new loggly({ url: host+'/inputs/'+key+'?rt=1', level: 'log'});
castor.log("url="+window.location.href + " browser=" + castor.user_agent + " height=" + castor.browser_size.height);
}
</script>

If you are using something like jQuery that provides a load event, you can drop the window.onload=function() bit and just stick the code inside whatever JS ready block you already have.

Log Crap Out of JavaScript

Assuming no other changes to your JS code, you’ll end up getting events flowing into your HTTP input which represent accesses to your website by remote clients. We’ll capture IP address and whatever else you send us as key/value pairs that you can use to search on, including browser width and height. Here’s an example of a search we ran through Ivan’s tally command to get the top IP access to our site over the last hour:

logglyshell300x260

If you want to take it a bit further, you can actually log whatever you want out of your site’s JS. Here’s an example of how we could log a user’s subdomain stored in a cookie:

var subdomain = jQuery.cookie("cred-subdomain");
castor.info("subdomain=" + subdomain);

Using the data from your application and the power of Loggly’s search, you should be able to whip up any DIY analytics solution your heart desires.

BTW, if you using Loggly in a unique way, let us know. We’d love to chat with you, make a video, or even hire you!

Log on fellow beavers.


Share Your Thoughts

Top