13sides | BlogEngine.NET HeatMaps: Part I

BlogEngine.NET HeatMaps: Part I

1 Mar 2009 6:51 PM 8 Comments

Have you ever thought about what users do on your site? Beyond the usual statistics, logs, etc, denoting where your users are clicking can be very useful. A heatmap might just be the thing. There are many services / products out there but nothing in .NET that I wanted. What I wanted was an easy, quick and zero-performance-impact solution to implement in my site. So here we go.

Collector

I divided this “idea” into 2 sections. Today, I’ll discuss the HeatMap Collector as it was the easiest to develop. Essentially it grabs the mouse coordinates on every mouse click and sends the info to an AJAX-enabled WCF Service. This service will then save the current date, page and mouse coordinates to an XML file in my App_Data folder. The name of this xml file is configurable through the web.config as such:

       
   1: <add key="HeatMap_Settings" value="HeatMap.xml"/>

View Plain | Copy To Clipboard

At first I used ASP.NET call-backs but the performance hot was not pretty. I was looking at 7+ seconds for any mouse click to be sent to the WCF Service. With a doubt, that wasn’t a viable solution. In the end I used JQuery + Ajax. Take a look at the performance, the numbers say it all.

With that, I present you with this simple user control.

HeatMapCollector.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HeatMapCollector.ascx.cs" Inherits="HeatMapCollector" %>

  

<script type="text/javascript" language="javascript">

  

  

    ///////////////////////////////////////////////////

    // Internal Variables

    ///////////////////////////////////////////////////

    var IE = document.all ? true : false

    if (!IE) document.captureEvents(Event.MOUSEUP)

  

    document.onmouseup = GetMouseXY;

  

    var sTime = Date();

    

    ///////////////////////////////////////////////////

    // Capture MouseUP Events

    ///////////////////////////////////////////////////

    function GetMouseXY(e) 

    {

        var posx = 0;

        var posy = 0;

        

        if (!e) var e = window.event;

        if (e.pageX || e.pageY)     

        {

            posx = e.pageX;

            posy = e.pageY;

        }

        else if (e.clientX || e.clientY)     

        {

            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;

        }

     

     

        // Get the current page name, or user supplied page name

        var sPage;

        sPage = HMC_DefaultPageName;

        

        if(HMC_PageName == "")  // No user supplied pagename, attempt to parse page name from URL

        {

            var sPath = window.location.pathname;

            sPage = sPath.substring(sPath.lastIndexOf('/') + 1);

  

            // There's a possibility that sPage will be NULL due to the default page of a site or virtual site

            // If that's the case, alert user

            // i.e http:///www.somewhere.com/

            if ((sPage == '') || (sPage == null))

            {

                if ((HMC_DefaultPageName == '') || (HMC_DefaultPageName == null))

                {

                    alert("No Default PageName parameter or URL 'page name' available to save mouse click.");

                }

                else

                    sPage = HMC_DefaultPageName;

            }

            else if (sPage.toLowerCase() == HMC_DefaultPageName.toLowerCase())

            {

                sPage = HMC_DefaultPageName;

            }

        }

        else

            sPage = HMC_PageName;   // Use user supplied name

  

  

        $j.ajax({

            type: "POST",

            url: getRootURL() + "/themes/13sides/HeatMapService.svc/SaveClick",

            data: '{ "coordX":"' + posx + '", "coordY":"' + posy + '", "page":"' + sPage + '" }',

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: function(msg) { },

            error: function(xhr, msg, e) { }

        });

  

  

        // Let the mouse event continue normally

        return true;

    }

    function getRootURL()

    {

        var baseURL = location.href;

        var rootURL = baseURL.substring(0, baseURL.indexOf('/', 14));

  

        // if the root url is localhost, don't add the directory as cassani doesn't use it

        if (baseURL.indexOf('localhost') != -1)

        {

            return rootURL + "/BlogEngine.Web/";

        } 

        else

        {

            return rootURL + "/";

        }

    }

    ///////////////////////////////////////////////////

</script>

View Plain | Copy To Clipboard

HeatMapCollector.ascx.cs

using System;

using System.ComponentModel;

using System.Web.UI;

  

[ToolboxData("<{0}:HeatMapCollector runat=server></{0}:HeatMapCollector>")]

public partial class HeatMapCollector : System.Web.UI.UserControl

{

    #region Properties

    [Category("HeatMap Optional")]

    [Description("String - Page name to save mouse coords against.  If blank, page name will be parsed from URL.")]

    public string PageName { get; set; }

    [Category("HeatMap Optional")]

    [Description("String - Page name to save mouse coords against if PageName property is not set and page name can not be parsed from URL.")]

    public string DefaultPageName { get; set; }

    #endregion

  

    protected void Page_Load(object sender, EventArgs e)

    {

        // HeatMap Collector Config Options Script

        string ss = @"var HMC_PageName = '" + PageName + "';" + System.Environment.NewLine;

        ss += @"var HMC_DefaultPageName = '" + DefaultPageName + "';" + System.Environment.NewLine;

        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "HeatMap_Collector_Config", ss, true);

    }

}

View Plain | Copy To Clipboard

A couple of explanations for the above code would probably help now. I exposed a couple of properties in the code to get around issues with MasterPages. There is probably a much more elegant way to do this but… anyway, its done. To integrate this control to my theme, I dropped it on my MasterPage as such:

<%@ Register src="~/User controls/ThirteenSides/HeatMapCollector.ascx" TagName="HeatMapCollector" TagPrefix="ucHMC" %>

  

<body>

    <form id="Form1" runat="Server" class="body">

  

    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    

    <script src="/js.axd?path=jquery-1.3.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $j = jQuery.noConflict();

    </script>              

  

    <ucHMC:HeatMapCollector ID="ucHeatMapCollector" runat="server" 

            PageName="" 

            DefaultPageName="default.aspx" />

...

...

...

View Plain | Copy To Clipboard

BlogEngine.NET already defines the $ for its own use so unless we use the useful jquery.noConflict() method, I wouldn’t be able to use JQuery anywhere in my code.

You can see the call to my WCF service via this JQuery Ajax call:

$j.ajax({
    type: "POST",
    url: getRootURL() + "/themes/13sides/HeatMapService.svc/SaveClick",
    data: '{ "coordX":"' + posx + '", "coordY":"' + posy + '", "page":"' + sPage + '" }',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) { },
    error: function(xhr, msg, e) { }
});

I created the Ajax-enabled WCF Service, named HeatMapService in the root of my theme. If you’ve read any of my previous posts you will see how I’ve done this (notably, the Factory parameter).

<%@ ServiceHost Language="C#" Debug="true" 

                Service="HeatMapService" 

                CodeBehind="~/App_Code/HeatMapService.cs" 

                Factory="CustomServiceFactory" %>

View Plain | Copy To Clipboard

HeatMapService.cs

using System;

using System.Configuration;

using System.ServiceModel;

using System.ServiceModel.Activation;

using System.Web;

using System.Xml.Linq;

  

[ServiceContract(Namespace = "")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class HeatMapService

{

    /// <summary>

    /// Saves the Mouse Coordinate and Page Name to the XML data source

    /// Will create the XML file, if it's the first time

    /// </summary>

    /// <param name="coordX"></param>

    /// <param name="coordY"></param>

    /// <param name="page"></param>

    [OperationContract]

    public void SaveClick(int coordX, int coordY, string page)

    {

        string settings = ConfigurationManager.AppSettings["HeatMap_Settings"];

        string path = string.Concat(HttpContext.Current.Request.PhysicalApplicationPath,

                                    "App_Data/" + settings);

  

        XElement element = new XElement("HeatMapClick",

                                        new XElement("Date", DateTime.Now.ToString()),

                                        new XElement("Page", page),

                                        new XElement("CoordX", coordX),

                                        new XElement("CoordY", coordY));

  

        XElement heatmapClicks = null;

        try

        {

            heatmapClicks = XElement.Load(path);

        }

        catch { }

  

        if (heatmapClicks != null)

        {

            heatmapClicks.Add(element);

            heatmapClicks.Save(path);

        }

        else

        {

            XElement root = new XElement("HeatMapClicks");

            root.Add(element);

            root.Save(path);

        }

    }

}

View Plain | Copy To Clipboard

Using Linq-to-Xml, its a piece of cake to create and write to Xml files.

That’s it to the HeatMapCollector control. A few items to note on this control:

I left JQuery on the root of my site.
The folder App_Data should (and probably already is) write-enabled, to save the HeatMap.xml file.
This xml file will continue to grow – beware. I’ve not added any logic to create new files every day, etc.

Be the first to rate this post