Javascript

How To: Track File Downloads with Google Analytics

Wednesday, March 25th, 2009 | Business, Tutorials | 11 Comments

Google Analytics is what most people use nowadays for web traffic reports.  It is flexible, powerful and simple.

The problem with Google Analytics is that it doesn’t analyze web traffic reports, but generates data in real time.  In most cases, this isn’t a problem.  In fact, it is big feature.  The problem is what about files that do not parse javascript such as PDFs, ZIP files, or other non-HTML documents.

When a user clicks on a PDF from your site, you will never see that PDF in Google Analytics.

How to track File downloads with Google Analytics
It’s very easy.  As is most things with Google Analytics.

Google Analytics provides a method for tracking anything you want.  It’s called “_trackPageview”.

You use it in javascript as “pageTracker._trackPageview(‘/downloads/map’);”.

How does this help us track file downloads?  Simply modify the link to the file asset to have an “onClick”:

[jscript]
Link to the file here:

<a onclick=”javascript: pageTracker._trackPageview(‘somefile.pdf’);” href=”somefile.pdf”>Download somefile.pdf</a>

[/jscript]

See how easy that was?

Hopefully you have a function used to print out those links, then you can modify it in one place (that’s what I did).

You should see results in Google Analytics under Top Content shortly.

Tags: , , , , , , , ,

How do I use transparent PNGs in IE6: Using AlphaImageLoader

Tuesday, March 10th, 2009 | Tutorials | No Comments

Internet Explorer is a tough beast.  It was very popular years ago.  Unfortunately, it’s still in use in out there.

This site, www.seangw.com, has a fairly technical crowd.  We still see approximately 3% of our visits from IE6 (Firefox is the most popular at 64%, then IE7 at 14%, Safari at 10%, then Chrome at 5%).  

I don’t believe IE6 should be supported anymore.  In many jobs, that isn’t our decision to make.  We can recommend ignoring IE6 specific issues, but should do so intelligently:

  • Identify the current IE6 audience (knowing it will probably decrease over time)
  • Approximate the cost of supporting IE6 (depends on what you are trying to do)
  • Present the pertinent information to the client, and let them make an informed decision
  • You should tell the client what you feel, but make sure they understand the difference between emotion and facts

Note: If your client makes $1,000,000 online every year, ignoring that minor 3% audience means possibly ignoring about $30,000 in revenue.  Math is enlightening sometimes.

At that, you are here, and STILL want to do transparent PNGs in IE6.  

How to implement transparent PNGs in IE6
It’s pretty standard the method for implementing transparent PNGs in IE6 by now.  

This method is for implementations in CSS (you are using CSS, aren’t you?).  

Frequently I find myself making a quick browser detect for IE6 (since there are oh so many issues that only affect IE6).  I use basic IE conditional comments:

<body>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />

<!-- [if lte IE 6]>
<link rel="stylesheet" href="styleIE6.css" type="text/css" />
< ![endif] -->
</head>
<body>
</body>
</html>

There you go, now when you setup your styles in style.css and realize they don’t work in ie6, edit them in styleIE6.css to get them working again.

Assuming you defined a logo in style.css as follows:

#logo {
  width: 300px; 
  height: 150px;
  background: url(images/logo.png) no-repeat left top;
}

You will find that the PNG does NOT work in IE6.

The fix is easy, we tell IE6 to use the Microsoft DXImageTransform AlphaImageLoader to render the PNG. So we add an IE6 specific change ot the styleIE6.css file:

#logo {
  background: transparent;
  filter: progid:DXImageTransform:Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='scale');
}

There you go. It should work now.

The background: transparent thing tells the browser to ignore the originally defined background used in the original CSS document.

Tags: , , , , , , , , , , ,

JSDoc: How to document your JavaScript

Monday, March 2nd, 2009 | Business, Tutorials | No Comments

JSDoc is meant to do for Javascript, what Javadoc does for Java.

It does.  

You can download and install JSDoc easily:

  1. Download JSDoc
  2. Expand the tgz.gz file (I use Winrar)
  3. Optional – I copy the jsdoc folder to my C: drive to make things easier
  4. Reminder – you need a perl runtime installed.  ActivePerl is recommended
  5. Open up a command prompt 
  6. Change to your JSDoc folder (mine is c:\JSDoc-1.10.2\)
  7. Run it: “perl jsdoc.pl test.js” (to test it against the built in JS file)

Usage of JSDoc is as simple as Javadoc was.  An example of usage taken from the official JSDoc page is below:
[sourcecode language='jscript']/**
* Shape is an abstract base class. It is defined simply
* to have something to inherit from for geometric
* subclasses
* @constructor
*/
function Shape(color){
this.color = color;
}

// Bind the Shape_getColor method to the Shape class
Shape.prototype.getColor = Shape_getColor;

/**
* Get the name of the color for this shape
* @returns A color string for this shape
*/
function Shape_getColor(){
return this.color;
}

/**
* Circle is a subclass of Shape
*/
function Circle(radius){
this.radius = radius;
}

/**
* A very rough value for pi
*/
Circle.PI = 3.14;

/**
* Get the radius of this circle
* @returns The radius of this circle
*/
function Circle_getRadius(){
return this.radius;
}

// Circle is a subclass of Shape
Circle.prototype = new Shape(null);
[/sourcecode]
 

You can use the reference on the official site to learn about more of the “@” attributes you can use for JSDoc.  

The example code is here:

Tags: , , , , , ,

Introduction to JSON (JavaScript Object Notation)

Wednesday, February 18th, 2009 | Business, Tutorials | 3 Comments

JSON, JavaScript Object Notation, is a very useful tool for AJAX developers (and many others I’m sure).

XML is fairly difficult for JavaScript to parse out.  It also includes quite a bit of infrastructure overhead in certain applications.  

Implementation of JSON can be very easy, it is imported natively in JavaScript through the eval() procedure.  It is also supported by many server side languages.

Lets take a basic example of an XML statement and see it’s JSON equivalent:

XML
<book id=”123″><author>Tom Jones</author></book>

JSON
{“book”: {“id”:”123″, “author”:”Tom Jones”}}

It may seem more cryptic, but if you look, that’s just because there are fewer iterations of key words.  The compression gets extended when you implement longer arrays of data.

The best part about JSON, in my opinion, is the speed increase you get when using it in javascript.  Please implement something in XML and JSON with the same data, you will notice a significant performance increase.

JSON is easy to consume in JavaScript:

objJSON = eval(jsonDataFeed);

You can access data (using our example earlier):

alert(objJSON.book.id);
alert(objJSON.book.author);

Server side implementation can be quite simple as well:

$dataObject = array();
$dataObject["book"] = array();
$dataObject["book"]["id"] = 123;
$dataObject["book"]["author"] = "Tom Jones";
echo (json_encode($dataObject));

Ask any questions in the comments below.  

Here are some articles to continue your exploration of JSON:

Tags: , , , , , , ,

Basic AJAX Tutorial: jQuery toggle and slide

Wednesday, January 21st, 2009 | Business, Tutorials | 20 Comments

In this tutorial we will review:

  • Definition of AJAX
  • Introduction to jQuery
  • Basic document jQuery preparation
  • Binding jQuery actions to an anchor (A) tag
  • Toggling visibility of a div
  • Sliding in and out of that div

It sounds like a lot, but it’s all very easy.

Definition of AJAX
The term AJAX means Asynchronous JavaScript and XML.  That means AJAX technically defines a method for javascript to communicate with XML.  Over the past few years AJAX has been interpreted as a means for implementing all “web 2.0″ functionality in the front end.  That added things like animations to the general term “AJAX”.





Introduction to jQuery
jQuery is one of my favorite libraries with a good toolset for working with AJAX techniques.  You can find out more information on jQuery at their site.

jQuery is a “fast and concise Javascript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development”.  Taken from the website itself.

As a javascript library, we will have to include the jQuery library on a page, and implement some of it’s more basic functions.

Basic jQuery document preparation
The first thing we need to do is incorporate the jQuery library in our page.  So download jQuery (direct link to the Google Code location).

Now that we have our JS library, we need to tell our document where it is (I renamed my js file to jquery.js, and threw it in the js folder):

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
</head>
<body>

</body>
</html>

We inserted the SCRIPT tag to include the jquery library when the page is loaded.

Binding jQuery actions to an anchor (A) tag
Lets create a basic link in our document:

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
</head>
<body>
     <a href="#">Click Here</a>
</body>
</html>

We now have a link that does nothing.  We are preparing to bind jQuery to the anchor.

Toggling the visibility of a div
We need to do 2 things to toggle the visibility of a div with jQuery.  First off, we need a DIV to toggle!  Second we need to bind jQuery commands to the anchor link.

We will take advantage of the jQuery toggle effect.

To do this, we change our code below:

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript">
     $(document).ready(function() {
          $('#toggleButton').click(function() {
               $('#toggleSection').toggle();
               return false;
          });
     });
     </script>
</head>
<body>
     <a href="#" id="toggleButton">Click Here</a>
     <div id="toggleSection">
          Content to toggle on and off
     </div>
</body>
</html>

This step we did a lot.

First we added [id="togglebutton"] to the A tag.  That lets us identify it in the jQuery code.

Second we added the “toggleSection” DIV to the document.  The entire div will be toggled on and off.  Again, here we identified the DIV as “toggleSection” to be able to target it with the jQuery code.

Third, we added the jQuery code that actually does the toggling in the HEAD section of the document.  jQuery is a javascript engine, so we have to execute the commands in SCRIPT tags.  The first line of the code, “$(document).ready(function() {” is complicated.  Lets dissect this code.

Finally we put “return false;” in the code, that tells the link NOT to use the HREF value.  This means “#” will not be loaded.  It’s annoying, because that brings the browser to the top of the page in certain browsers.

$(document) — this is the HTML document itself.  It is the same as “document” in normal javascript.

.ready( — this is us looking at the “onLoad” part of jQuery.  When the document is ready, it executes  the “ready” method.  Here we are defining what the ready method is.

function () { — basically, we are creating a new function that will fill in for the document.ready method.  When the document is ready, our code will be executed.  This is smart, as executing code when the page isn’t ready can result in missing elements that aren’t loaded yet.

After that statement, we have “$(‘#toggleButton’).click(function() {“, another complicated statement.  Lets break it down:

$(‘#toggleButton’) — we are looking for the “toggleButton” via jQuery.  This code finds it for us.

.click( — Instead of setting the value of the “ready” method before, we are setting the function of when the “toggleButton” is clicked. So we need to create a function…

function () { — again, creating a function inline.  This will be assigned to the button’s “click” method.

Finally we do the fun stuff, toggling the DIV on and off with “$(‘#toggleSection’).toggle();”.  By now it should be easier to read this line.  We are finding the toggleSection div, and calling the jQuery method of “toggle()” which will toggle the visibility of the DIV.

It is important to note the “return false” part of this.  By returning false, we are telling the HREF that it should NOT execute the HREF value (which is #, and would bring the browser to the top of the screen).  If we don’t return false, the browser will still load the HREF value, and we will have some minor issue cross browser.

We’re done!  We are toggling the visibility, check out the demo — jQuery toggle demo.  Fortunately, we can still have a little more fun..

Sliding in and out of that div
In the previous step, we toggled the visibility of a DIV.  It’s not too exciting, as we could easily do that with javascript before with stylesheets and basic DOM code.  What is great about the jQuery library is all of the additional methods for animation it gives us.  Lets setup that div to not just appear, or hide — but to slide in and slide out.

For that we will take advantage of the slideUp and slideDown methods, they are just 2 of many Effects available in jQuery.

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript">
     $(document).ready(function() {
          $('#toggleButton').click(function() {
               if ($('#toggleSection').is(":hidden"))
               {
                    $('#toggleSection').slideDown("slow");
               } else {
                    $('#toggleSection').slideUp("slow");
               }
               return false;
          });
     });
     </script>
</head>
<body>
     <a href="#" id="toggleButton">Click Here</a>
     <div id="toggleSection">
          Content to toggle on and off<br>
          More content<br>
          Slides are more fun with more content<br>
          Four lines should be enough
     </div>
</body>
</html>

We have added a little more content to the DIV, so we can more easily see how the slideUp and slideDown work.  There are 2 interesting steps we hav taken.

First, we added an “if” statement to detect if the DIV is hidden or not.

Second, we added code to slideUp or slideDown depending on whether the DIV is actually hidden.

Check out the result on our example — jQuery slideUp and slideDown demo.

Conclusion
I hope this helped some of you out.  Let me know if it did.  Comments are open!

Tags: , , , , , , , , , , , , ,

jQuery 1.3 Released – How to use jQuery

Thursday, January 15th, 2009 | Business | 10 Comments

jQuery is a “fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.  jQuery is designed to change the way that you write JavaScript.”

jQuery version 1.3 was released yesterday.

Some new features in 1.3 are:

  • Sizzle – a brand new CSS selector engine
  • Live Events – event delegation with a jQuery twist
  • jQuery Event Overhaul – simplified event handling
  • HTML Injection Rewrite – Lightning-fast HTML appending
  • Offset Rewrite – Super-quick position calculation
  • No more browser sniffing!!
  • New API Browser - http://api.jquery.com/

I have yet to play with jQuery 1.3, but will post my impressions after I get some hands on time with it.

Are you new to jQuery?
jQuery is a library that you can include on your web projects.  jQuery enables HTML and JavaScript developers to rapidly deploy functionality that traditionally is more complex.  Through browser independent APIs, developers and designers can implement event handling, CSS changes, animations, popular web 2.0 effects, or other common function of web 2.0+ sites. 

Downloading jQuery
You can get jQuery by going to jQuery.com and downloading the version of jQuery you want:

  • Production version – 18kb – Minified for production environments (don’t try to debug this, its a nightmare)
  • Development version – 114kb – Developers can go in and see how things work with this version, but the footprint is huge

Getting Started with jQuery
jQuery provides a series of useful tutorials.   

Some favorites are:

There are so many more tutorials out there.

Tags: , , , , , , , , , , , , , , ,

AJAX Effects, including Heatmapping

Tuesday, October 7th, 2008 | Business | No Comments

I saw an article on Digg today, 20 Excellent AJAX Effects You Should Know.

They go through the usual stuff, auto completing forms, inline editing, fancy uploading, email, file directory, etc.

The most interseting, to me at least, is the “ClickHeat Clicks Heatmap“.

ClickHeat image screenshot of reported heatmap information.

The other effects are all standard, they are very useful, but as is noted in the article — heatmaps are an underused aspect in web development.

 

Way back when, I used to work on Heatmaps (although I didn’t have a name for it).  I had created a webpage that was just a grid of 5×5 transparent pixels.  The point of that, was that each pixel reported the mouse position on mouseover.  Back then (this was in 1998 now), I had tried to find a way to get the browser to be able to track down where the user “looks” with the mouse, while on your website.

Can’t we all understand just how powerful this is?

We can finally, clearly, see what a user is looking at with their mouse.  I know I do this — move my mouse around as I’m interested in something in an article.  I don’t know why I do it, but I do.

Here’s just some quick ideas:

  1. Identify if the users can “see” parts of your navigation, or if they are ignoring it
  2. Which articles are they looking at?
  3. Optimize the functionality to report on a single user, and record the time of the mouse position — giving a view of exactly where a user moves their mouse (they may provide this functionality)
  4. Adding mouse movement tracking (the software seems to only report clicking locations)
I know other reporting services like Google Analytics have website overlays that let you see visually where a user clicks, but this is a different approach.  It logs mouse events.  Minor tweaks to it, and we have an extremely powerful production and/or test environment logging software.

Tags: , , , ,

jQuery becomes an official part of Microsoft and Nokia Frameworks

Monday, September 29th, 2008 | Business | No Comments

As posted on the official jQuery blog, “jQuery, Microsoft, and Nokia“, jQuery is being made an official part of the development platforms for both Microsoft and Nokia.

That’s going to be quite the blow to other frameworks.  Does this mean Scriptaculous will be slowing down?

I think this may have been strategic, as Apple has pushed Scriptaculous, and other developers have been using the Yahoo AJAX kit, as well as the Google AJAX kits.

All in all, great news for the talented jQuery team.  A great piece of software that is changing the way the web is being built.

Tags: , , , , ,

Chrome – Holding Steady

Sunday, September 21st, 2008 | Business | No Comments

I had posted earlier that I had setup Google’s new Chrome browser.

Now it’s been at least a week that I’ve been using it and I wanted to post some comments.

First of all, I don’t consider a “beta” browser.  I know whenever I test out a new browser it feels like it’s almost unusable for a period of time.  It’s been getting much better since the IE4 days, but there’s still always a sense of “this isn’t ready yet”.

Being a web developer, I dread new browsers because … thats just one more environment you have to test in.  

With this browser, I feel like it is already a final product.  Already I’m excited about the integration of “Gears”, the slim application like interface when you “Create application shortcut”, how fast it seems to run, and the possibilities it introduces for Javascript and AJAX online.

Some minor issues I would, however, like to raise are:

  • I had a tab freeze, and the other tab froze as well — I had thought each tab was supposed to be entirely independent from one another in processor space and prevent this.  Maybe I’m misunderstood?
  • It seems the great “V8” team that Google had put together is in competition with SquirrelFish Extreme in terms of pure performance.  Needless to say, I’m no expert in this, and it’s probably one of those benchmarks that highly favors a browser, or isn’t indicative of the complete functionality of an engine.
  •  This is entirely a subjective point, but I don’t like the way the Taskbar icons look.  I know I’m tuned into Firefox and IE’s icons for the web, but I always get confused with the 3 colors in the Chrome taskbar icons.  
  • Whos’ taking advantage of the new functionality the most?  I remember years ago seeing links to who was taking advantage to IE4′s new capabilities, does anyone have a list of site’s that are built to embrace Chrome?  (maybe an idea for a future project)
Overall I’m impressed with the new browser.  It feels clean.
Chrome is slowly becoming my browser of choice.  
I know lots of early adopters tried and switched back (check out this interesting review of Chrome adoption and usage at Arstechnica, it is useful information).

Tags: , , , , , , , , , ,


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template