If you have a framework that controls the URL in some way then you may have an issue when it comes to Google Analytics tracking. In this blog entry I will examine how to alter your GA tracking so that you can specify custom URL values to track. I will then apply this to a FuseBox framework.

Traditionally Google Analytics code tracks each page impression by capturing the URL and all values of the Query string, storing it in a cookie and sending it back to the Google search engine through a JavaScript call. When all your site / applications pages are "index.cfm" it may prove difficult to generate useful Analytics information.

In this example I am using a FuseBox framework. If you are unfamiliar with this, the premise is that all the templates use "index.cfm" and then pass through two parameters. The first is the component to use as a controller (we will use public.cfc) and the second value is the function name to call within that controller. So our URL may look like this:

In this case our framework will go to the controller/public.cfc and find the function "login". Google analytics will log this hit as "/index.cfm?go=public.login". This is not at all user friendly, and would be very difficult to represent usefully to a client in a report.

Instead we alter the Google Analytics code so that it is logging a pseudo URL, rather than the actual URL.

The Google Analytics code resides just before the end body html tag, at the end of your page. In the FuseBox example I am using one layout template, "lay_template.cfm" so I only need add it there.

Firstly call the Google Analytics code.

Next we will call the Google Analytics JavaScript that builds and sends the request. The pageTracker variable is created, and your Google Analytics code is added to it. Next we call the initData function. There seems to be confliction information online about whether this is required or not. Essentially it tells the Google Logging mechanism to prepare for a request. Next we will add a line that remove the need for a Fully Qualified Domain Name (FQDN). This has a negative impact on the next line of code, and must be run before the trackPageview code.

The trackPageview code is usually left empty, but in this case we are inserting the fuseaction that has been requested. So if we are following our example above this will read as "/login". You can have as long a string here as you require. IE it could be "campaign5/landingpage2". In this way Google will log the hit as you specify as this overwrites the URL cookie that Google normally creates.

This principle can also be used to track AJAX URL requests, as they do not create a unique page impression.

Whilst writing a ColdFusion based query to create a JSON response I thought I'd look up returning data values as a "Yes/No" string rather than "1/0". Then I wouldn't have to transform it in any way to use in the JSON build script.

The mySQL version allows you to do this by evaluating the value, and matching a string if the condition is met, like this:

This does not work in ColdFusion at all. An error is thrown:

After a little tweaking it seems that if you alias the field it does work. In the example code below I've simply aliased the field with its own name.

I'm not exactly clear why, as the error message above isn't all that helpful.

You could use a 404 ColdFusion template to handle missing templates, or the onmissingtemplate Application CFC function. Luckily I have a client with half a dozen sites all on the same server, with nothing else on it, so it makes more sense to do this in Internet Information Services.

404 templates are a handy way of masking any site errors or missing templates. Not only are they a cosmetic fix to nasty display errors but they can also seriously help your server security.

A recent incident where I was helping a friend setup a custom tag path on his server demonstrated this. He couldn't remember where the webroot was to point ColdFusion server at his custom tags directory. The default IIS 404 message will quite happily serve up a template telling anyone who cares to look where your webroot is, and half the other details of your server.

Begin by opening the IIS management console. Expand the list of websites in the left-hand pane of the console, and right-click on the icon for the website you want to customize. Choose "Properties" from the popup menu, and click the "Custom Errors" tab in the configuration window.

Enter the URL for the error template. At this point I was getting an error message "The path is not a local absolute path". The error is that windows is looking for a UNC path, so it needs a proceeding forward slash.

A few points to note in your custom 404 templates.

• Keep it simple. It isn't part of your site, its an error handler and should not really feature any functionality.
• 404 might mean something to us, but it probably wont to most users. Is there really any reason to display 404 all over the page?
• The url will be relative from where the error was thrown so hard code any url values used. IE CSS images or links to anywhere.
• Add logging. Either Google Analytics tracking, or what ever tracker you use. I also like to drop a cfmail request in there so that I know its gone wrong.

I've been experiencing issues with my development setup, so I thought I'd write a blog entry to wrap up my findings, and try and gauge what the community is running. In this article I will detail what I use in my development environment, and how it is set up.

I've recently had errors occurring in my Eclipse IDE. There have been some very frustrating SVN client version incompatibilities, so I thought I would re install it. It turns out this was a common error (menu options in subclipse were not available) based on an incompatibility between the subclipse plug-in and the Aptana studio.

A detailed fix is in this blog entry: https://radrails.tenderapp.com/discussions/problems/173-synchronize-view-broken-after-upgrading-to-radrails-203

Software setup

I use the Eclipse Java IDE as my primary development application. Alongside this I use the CFEclipse plug-in for ColdFusion functionality, the Aptana Studio plug-in for CSS and JavaScript functionality. I also use the subclipse plug-in for SVN integration.

For Flex/AIR I use a standalone FLEX studio installation. This is pretty much a custom workspace in an Eclipse IDE. I only do this as I have had several issues trying to get FLEX installed into the regular Eclipse IDE.

I recently tried to switch to the 64 bit version of Eclipse, but it would not recognise my Java install, and from what I've read online you need to install a 64 bit version of Java. The only version of this I can find is flagged as "experimental" so I think I'll leave it well alone.

I've found it quite good to increase the default 256mb heap space in Eclipse to 512mb, there e is an article detailing how to edit the Eclipse ini file here: http://wiki.eclipse.org/FAQ_How_do_I_increase_the_heap_size_available_to_Eclipse%3F

Download links

Eclipse downloads: http://www.eclipse.org/downloads/

CFEclipse downloads: http://trac.cfeclipse.org/wiki/InstallingCfeclipse

Aptana downloads: http://www.aptana.org/studio/plugin

Subclipse downloads: http://subclipse.tigris.org/servlets/ProjectProcess?pageID=p4wYuA

I stumbled upon an interested dilemma recently whilst building a search engine. The results of a search are returned, and can be viewed in a list or thumbnail view. The view toggle is a uses a JQuery function, so no persistent data is stored concerning a users current viewing option. The dilemma is how do you maintain the viewing mode across page reloads, such as for pagination, or filtering of the search results?

The views are both built, and toggled between using a JQuery function, like this:

This code will hide one of two div's based on a session variable. It also includes the code to toggle the div's with a link, like this:

The only way I could think of to persist the JQuery display selection was to store it as a server based session variable. I created a simple AJAX call and attached it to the toggle function, so that after each toggle the session variable was updated, like this:

In the template 'changedisplay.cfm' I simply update the session value to the opposite of its current value.

In this way the user can refresh or page through the result set and still maintain the same display. I'm really interested to see if anyone has done anything similar to this, or maybe taken a different angle.

Rather than writing out long winded table code to display your data in a tabulated fashion why not use the dataTables JQuery plugin to do it for you?

In this blog entry I'll be generating tables using a JQuery plugin, but I will also be generating the JQuery code from an XML document.

The theory behind the dataTables JQuery plugin is that when the template loads it makes an AJAX request to a remotely specified template. That template returns a JSON object of data which is formatted and used in a tabular display. This means that you can perfom filtering and sort functions inline, and the JQuery simply re submits the AJAX request, receiving new JSON each time. So no refreshing.

I'll be dealing with the auto generation of the JSON back end in the second part of this article. Here is how I setup the tabular display.

Build a standard html template, including the CSS and JQuery plugins.

Next we build our JQuery function. I wont go into massive detail about all the parameters and values being passed in here, but it is well documented on http://www.datatables.net/.

The really important column here is the "aoColumns" JSON data block. This specifies what fields are returned from your AJAX call, and parameters they must adhere to.

In this example we are anticipating that we will receive four columns of data back (Edit,Band,Genre and Fake Column).

Lastly we create a table with an ID of "example", as this is what the JQuery is looking for. This table must be formatted in a certain way, as the JQuery plugin will re write the specified elements.

The code also contains the header elements that will match the returned column values from the AJAX request. The last part of the table is displayed when the data is loading.

This all works well, but to extend it further I have altered the code to read from an XML document. The XML document Is loaded when the template starts, and the data fields and attributes are read, and looped over to create the JQuery code and table headers. In this way it is a generic table display template, driven from an XML document.

The XML doc:

Read the XML file and parse it out into an Array:

Use something like this to dynamically generate the JQuery and table values:

The JSON response is hard coded in this example, so the result will not filter or search. I'll handle that in article two.

There is a full example of this here.

This entry will deal with how to create a displayed / collapsible floating div, using JQuery. When I build a web platform I often like to include small sections of text alongside the functionality, just to provide the users with a little guidance on what is going on. Rather than having these inline, where they can often interfere with the content and display, I like to add them to a 'help' div that I float inside the framework. First we include the JQuery library from Google, and our link. It doesn't go anywhere, but we will attach a JQuery event to it. Next we create our JQuery function, attached to the 'help' div. This adds a div to the document with whatever content you have set in it. There is also a 'close' link in the floating div that calls the close function. Lastly we add some styling and positioning to tie the whole lot together. This gives the pop up div its shape and style. I've positioned the floating div on top of the calling function text. You can see an example functionality here.

There are many ways of hiding all your page elements then only showing specific areas based on user selection. One old school way of changing the displayed page content was with a select field that had an onchange event that posted to the same page, but with a URL variable.

I have been testing out a variation on this using the JQuery show() / hide() functions.

We attach an event to the select field, and pass the selected option to a JQuery function, as in the example code below.

We have a series of DIV's that are named the same as the select field options. All these DIV's will be hidden by default, apart from the "start" div.

Lastly we have our JQuery script. Here we have our showHide function. This accepts a DIV id, which is then shown. All other DIV's are hidden.

The last piece of script here simply hides all the DIV's on the page load, so that they are all hidden by default.

Putting it all together, and making it dynamic based on a list, it looks like this:

An example is here.

There are pro's and con's to both mySql and MS SQL, one of the pro's of mySql is the limit function. This allows you to set a starting record number, and select N number of records from there. But how can we do that in MS SQL?

This is usually used for pagination functions, IE SELECT the next N records from the current count.

Firstly declare two variables, a "rows per page" and a start record.

Next we need to write the query we want, but wrap it in a parent select. Remember at this point to do all your conditional processing on the query inside the parenthesis.

Next we can apply a where clause that filters down the results based on the two variables declared at the top of the script. This means we will only get back the required number of records, starting at our defined record number.

The whole script looks like this:

I am selecting *, but I recommend that you actually list your fields here, I tweaked it for this entry.

Not quite as nice as the mySql version tho is it: