Category Archives: Website Design

Tracking file downloads with Google analytics

Google analytics (let’s call it GA) is a commonly used tool for keeping track of visitors to your website. In this article, I will highlight how to use this tool for tracking file downloads. This works for the so-called “Universal analytics” or newer version of the script, typically of the form: UA-XXXXXXXX-X.

The baseline use of GA involves signing up for a free account and then placing a small JavaScript snippet in all pages you wish to track. This enables us to track how many times that page was viewed and from which corner of the Earth your visitors are coming from. But if you have a link to a PDF file in that page, there is no way of knowing whether a user actually downloaded that PDF file or not.

Let’s assume that you have a button set up such that when the user clicks on the button, you send him the PDF file he requests.

An easy way to actually make this work is to use jQuery. We make an object based on the id of the HTML tag (button in this case) and then fire off an event to GA before sending the requested PDF file to the user. Something like this:

  • You can pick any string you wish to replace ‘PDF File’, ‘Download’ and ‘name of your file’. In general, these provide more and more granularity for the description of whatever it is the user is downloading.
  • The setTimeout() used above is a hack to buy some time for the event to fire off a message to GA. In the above example, I have used a delay of 1000ms between the user clicking the button and the client actually requesting the PDF file from the server.
  • The ‘_self’ parameter is to open the window in the same page and tab.

You can test in real-time if your events are firing by opening GA and navigating to Real-TimeEvents. They will also be available for analysis in BehaviorEvents.

Developing Web Applications using HTML5 canvas

It seems Apple introduced the canvas element almost 10 years ago, in 2004! Alas, I first learned about canvas only recently, while randomly browsing books in the computer programming section at Barnes & Noble. I happened to be browsing books about HTML5, CSS3 and JavaScript for building my website and canvas fit perfectly into my project. After playing with it for a while, it became clear that as far as I was concerned, it was the next QBASIC. Only much better in almost all respects than QBASIC.

The coolest things about canvas is that it can be used to build simple but useful client-side graphics applications that run inside web browsers. These applications can be quite sophisticated, with cross-browser compatibility and a complete point-and-click UI component.

The simple canvas API leads to a quick development cycle. Even if you are completely new to canvas, you will be writing pretty decent graphics apps very quickly. This time will be even shorter if you already know HTML5, CSS3 and JavaScript. Most (if not all) browsers now have dedicated development tools that are useful for debugging and optimizing your (JavaScript) code.

Lastly, canvas apps can be ported to iOS devices using mobile development frameworks like PhoneGap. This means I can create a game using HTML5, CSS3 and JavaScript and play it on my iPhone as if it is a native app. Of course, a better option is to master Objective-C and write a really native app for iPhone and iPad.

On my website, I have some rather simple examples of what canvas can do. These include applications for generating fractals, cellular automata and for a 1D, two-phase lattice Boltzmann method. I plan to spend a lot of time with canvas in the future.

 

Tools for building a new website

My motivation for building a website was simple. I wanted to collect and organize important things from the last several years in one place for future reference. Something like an online portfolio of what I have been up to. Last I dabbled in HTML to create a website, I was a student at Clemson and was able to use my university servers for hosting my website. Apart from photos and other things, I remember my website had a dedicated section devoted to Tolkien’s Silmarillion. I also used the website for managing the classes I taught at Clemson, posting homework, test solutions and things of that sort.

Has a lot changed in 10 years? Looks like HTML5 is the latest and greatest, along with CSS3. As I am slowly discovering for myself, this adds several great features to help design good web pages. A book I particularly liked and have been using as a guide is HTML and CSS: Design and Build Websites by Jon Duckett.

One of the new HTML5 feature I’ve been using quite a lot is the <video> tag. Makes adding videos amazingly easy. I’m currently making movies using QuickTime (.MOV) and then converting them to .MP4 using Miro video converter. All my videos now play fine on Chrome and Safari. Need further testing to add support, if required, for Firefox and iOS devices.

Another useful feature I absolutely wanted was syntax highlighting for C/C++ code. One way to get this feature on your webpage is via prism (http://prismjs.com/). This essentially supplies a .css file and a JavaScript file that you link to in your HTML file. Once you do this, simply wrap your code within <pre><code class=”lang-cpp”> and </code></pre>.

Finally, the question of where to host the site. I decided to go with iPage and it’s been a great experience so far.  So to summarize all the things needed to build a new website from scratch:

  • iPage
  • A good reference book for HTML and CSS
  • QuickTime for recording video from the screen
  • Miro video converter
  • Prism for syntax highlighting of C/C++ code
  • Lots of time and patience