Home Notes Web development
Pranshuarya.com

Sponsored Links


Development
jQuery Woopra plugin part 2: Usage E-mail
Monday, 14 December 2009 18:11

I will document here how I am using this plugin, through which you can determine how best to use it for yourself.

pthesis.com

I tested the jQuery Woopra plugin on my own portfolio website, p()thesis.  I'll present the index.html code in bits and explain as I go along.

<head>

<head>
<title>Web developer and designer in Boulder, Colorado</title>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="http://www.google.com/jsapi?key={your key}" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery","1.2");</script>
<script type="text/javascript" src="includes/jquery.livequery.js">script> 
<script type="text/javascript" src="includes/jquery.google-analytics.js"></script>
<script type="text/javascript" src="includes/jquery.woopra-analytics-min.js"></script>
<script type="text/javascript" src="includes/webtoolkit.cookies.js"></script>
<script type="text/javascript" src="functions.js" mce_src="functions.js"></script>
<script type="text/javascript">
$.trackWoopra({cookie : 'woopraExclude'});
$.trackPage('UA-xxxxxxx-xx');
</script></head>

Pretty standard stuff:

  1. Declare meta content
  2. Load jQuery - I load it via GoogleAJAX APIs
  3. Load jQuery Livequery plugin, which I will be using for this plugin
  4. Load functions.js which contains the JavaScript functions used in the site
  5. Load jQuery Woopra plugin, either the standard or the minified version (I've also left in the jQuery Google Analytics plugin for demonstration purposes)
  6. Load the Webtoolkit Cookies script - this is only necessary if you want to exclude visits by cookies (See here for how to set a cookie using either PHP or this simple script)
  7. Initialize jQuery Woopra plugin with the cookie parameter to exclude visits from all visitors who have the cookie woopraExclude set:

<script type="text/javascript">
$.trackWoopra({cookie : 'woopraExclude'});
</script>

<body> part 1

The next step is to load the page HTML content as usual.  At the bottom of the document is where all my JavaScript is:

<script type="text/javascript">
$(document).ready(function(){
...
   $('#pfolio').click(function(){
        $('#portfolio').show('slow')
...
   })
// location for analytics code
})
</script>

<body> part 2

Here are the few lines that enable Woopra analytics on my site via the jQuery Woopra plugin.  I've left in the jQuery Google Analytics plugin code so you can see the similarities and differences in syntax between the two.

$('#refine_by').livequery(function(){$('#refine_by').track({
category : 'refine_by',
action : 'click'})})
    $('#refine_by').livequery(function(){$('#refine_by').trackEvent({
title : 'refine_by'})
})
    $('#sites ul li').livequery(function(){$('#sites ul li').not('#reset_sites').track({
category : 'site',
action : 'click',
label : function(element) {return element.text()}}
    )})
    $('#sites ul li').livequery(function(){$('#sites ul li').not('#reset_sites').trackEvent({
title : 'site',
label  : function(element) {return element.text()}
})})
    $('#categories ul li').livequery(function(){$('#categories ul li').track({
category : 'category',
action : 'click',
label : function(element) {return element.text()}
})})
    $('#categories ul li').livequery(function(){$('#categories ul li').trackEvent({
title : 'category',
label : function(element) {return element.text()}
})})

 

Let's go over a couple of these lines. 

$('#refine_by').livequery(function(){$('#refine_by').trackEvent({
title : 'refine_by'})
})

refine_by

  1. $('#refine_by') - the element being tracked
  2. .livequery(function()($('#refine_by') - because the element is not created when the DOM is ready, I am using the livequery plugin to actively apply the tracking rule each time the #refine_by element gets created via AJAX.  If you're using jQuery 1.3 you can use the built-in live method to achieve the same purpose.
  3.  .trackEvent({title : 'refine_by'}) - the only parameter I'm passing through in this example is the title of the event

Now let's look at one of the more complex examples, where I'll be tracking the sites in the list in #sites ul li:

sites_ul_li

$('#sites ul li').livequery(function(){$('#sites ul li').not('#reset_sites').trackEvent({
title : 'site',
label  : function(element) {return element.text()}})
})

The main difference here is that I'm passing a function to the label property.  This particular function evaluates the text of the li element that is clicked on and stores it in Woopra.  This lets me track which site in the list the visitor has clicked on.

To track an a element I might use something like this:

$('div#site_details a').trackEvent({
title : 'site_details',
label : function(element) {return element.attr('href')}
})

I didn't use livequery in this statement because of where it was placed in my code.  I placed it where the a elements are created, so there's no need to apply the code to any elements that haven't yet been created.  The label property is now storing the URL of the a element being tracked.

Note that all a elements are being tracked, and whichever particular one is clicked, that one's URL will be returned.  So for example, in the example below, there are three a elements (in red).

site_details_a

 
jQuery Woopra plugin part 1: Introduction E-mail
Monday, 14 December 2009 14:04

Taking inspiration from Christian Hellsten's jQuery Google Analytics plugin, and using it as a starting point, I have developed a jQuery plugin to implement Woopra analytics in your application (download).  Right now, in version 1.1.5:

It adds the following methods to jQuery:

  • $.trackWoopra(options) - Adds Woopra tracking on the page from which it's called.  This is the only required method to enable Woopra tracking.
  • $.woopraEvent(options) - Tracks an event using the given parameters
  • $('a').trackEvent(options) - Adds event tracking to element(s)

$.trackWoopra(options)

This method is required, and can be used simply as:

<script type="text/javascript">
$.trackWoopra();
</script>

or:

<script type="text/javascript">
$.trackWoopra({
domain : 'http://www.mydomain.com',
url : 'http://www.myurl.com',
title : 'My page',
cookie: 'someCookie'});
</script>

All parameters in example above are optional:

  • domain - use it to specify root domain (to enable tracking of sub-domains)
  • url and title parameters must be passed in together as a pair; use them to give pages custom names in Woopra
  • cookie allows you to exclude visitors who have the cookie set (someCookie in this case)

See here for more information on using these optional parameters.  (The cookie feature is not yet built into Woopra, so you won't see any information on that on the Woopra site.  Once they implement it into the core, I will remove this add-on feature and incorporate their implementation.  You can learn more about how to use my current implementation here.)

$.woopraEvent(options)

Used like:

<script type="text/javascript">
$.woopraEvent({
title : 'category_click',
label : 'Category1',
url : 'url1'
event_name : 'click'});
</script>

This method is best called from the next one, $.trackEvent(options).

$.trackEvent(options)

Takes the following parameters:

  • title - required.  Name for the event being tracked.
  • event_name - optional.  Name of event you want to bind to.  Default is 'click'.
  • as many (key,value) pairs as you want your event to have

Example usage:

<script type="text/javascript">
$('#content #links a').trackEvent({
title : 'Links_hover',
label : function(element) {return element.text()},
url : function(element) {return element.attr('href')},
event_name : 'mouseover'});
</script>

Similar to the jQuery Google Analytics plugin, you can enter functions as property values, and they will be evaluated for the element that is the target of the event triggered.  However, whereas Google Analytics takes a specified number of parameters in its event tracking object, Woopra lets you specify custom properties and values, so this plugin was modified to accomodate for that.

In this example, everytime a visitor hovers over a link (<a> element) inside #content #links, a 'mouseover' event will be registered in Woopra, with the following properties:

  1. title: Links_hover
  2. label: the text between the <a> and </a> tags
  3. url: the url in the href attribute of the link clicked

Update history

Version 1.1.5 - added ability to exclude visits with cookies, similar to Google Analytics.

Version 1.1 - removed setTracker property which is no longer supported by Woopra.  To download older releases, visit the official jQuery plugin page.

View jQuery Woopra plugin part 2: Usage

Download

Download jQuery Woopra plugin
 
How to: Check Google Analytics event tracking E-mail
Wednesday, 25 November 2009 15:52

Google Analytics offers Event Tracking, which is useful for tracking JavaScript and Flash events.  But there's at least a day's delay before you can get analytics to show up, so if you're testing your own or a client's site, it could take a while to get things right.

There is, however, a way to check if your event-tracking code is working on your pages.  This way you don't have to wait to log in to Analytics the next day and see if your events registered.

Required ingredients

  1. Implementation of Google Analytics tracking code in the website you want to track
  2. Mozilla Firefox
  3. Firebug extension for Firefox

What to do

It's really quite simple:

  1. Load up your website and start up Firebug.  If you have screenspace you would want to pop Firefox out of the browser window into its own window.
  2. Enable the Net panel in Firebug.
  3. Once you've got the website up, click around or do whatever to trigger the events are you want to track.
  4. If event tracking is working, you should see an entry like the following upon triggering your event:

    5.  

    Firebug Net panel

     

  5. Go ahead and click the "+" button to the left and select "Params", which will show you something like:

    6.  

    Firebug Net panel

     

  6. What you're looking for is the highlighted entry, because this shows you the parameters you entered in your event-tracking code.  In my case, the code was:

    7. page_Tracker._trackEvent('site' , 'click' , 'Pkstore');

  7. So now you know that event-tracking is working for this event.  You can check other events in the same way.
 
Speeding up your websites E-mail
Thursday, 29 October 2009 15:31

I've run YSlow on several websites, including my own, and it gives some good suggestions for speeding up your website.  So here are a few tips I've found from around the web for generally speeding up a website:

ETags and Expires Headers

Update

I have changed the code below to the following, from this page:

<IfModule mod_headers.c>
Header unset ETag
FileETag None
<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
Header unset Last-Modified
Header set Expires "Fri, 21 Dec 2012 00:00:00 GMT"
Header set Cache-Control "public, no-transform"
</FilesMatch>
</IfModule>

These can be added by adding the following to your .htaccess file (from here): 

<IfModule mod_headers.c>
Header unset ETag
Header unset Last-Modified
</IfModule>
FileETag None

<FilesMatch "\.(ico|gz|JPG|jpg|jpeg|png|gif|js|css|swf)$">
Header unset Cache-control
Header set Expires "Wed, 28 Apr 2010 20:00:00 GMT"
</FilesMatch>

The first of these requires mod_headers, and the latter mod_expires to be enabled on your Apache server.

Gzip

Update

If your site runs on cPanel and you have access to it, you can also turn on compression - either only for certain extension or for all files - by going into Optimize Website from the main cPanel screen.  You'll see the following:

cPanel

If you don't have access to cPanel, you can use the following in your .htaccess file (instead of what's posted below).  This will compress all content except for file extension types you specify:

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ \
    no-gzip dont-vary
SetEnvIfNoCase Request_URI \
    \.(?:exe|t?gz|zip|bz2|sit|rar)$ \
    no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
In this example the following extensions are excluded: exe, tar.gz, zip, bz2, sit, rar, and pdf

This requires that mod_gzip or mod_deflate be enabled on your server.  I found several solutions to add this to your site, so I'll list them all:

To compress all text and HTML:

AddOutputFilterByType DEFLATE text/html text/plain text/xml

To compress certain file types by extension:

<Files *.html>
SetOutputFilter DEFLATE
</Files>

Here's the other route:

AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

There's also the PHP route, which is to add the following to the top of each of the files you want to compress:

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
ob_start("ob_gzhandler");
else ob_start();

It seems there are plugins available for both WordPress and Joomla to help with compression and mini-fication:

Finally, this seems to be the most popular place to test whether your site is being transmitted compressed.  (Here's another site.)These are the most effective site-wide changes you can make.  Other than that, you can individually compress JavaScript and CSS files, and optimize your site's images.
 
AEI Dish Network E-mail
Monday, 05 October 2009 17:18

AEI Dish Inc. is a Dish Network regional installer for satellite TV and satellite Internet.  AEI Dish Network has been in business since 1997.

The website was developed on WordPress with Thesis, with heavy JavaScript (with jQuery) and PHP customizations.

 

The three feature boxes and sidebar on the right are instituted via the Improved Include Page plugin.

 

Other features include:

  • Custom font for headers is implemented via Cufon, and incorporated using the WP-Cufon plugin
  • Header image is specified via a custom field, so each page can have its own unique header
  • Dynamic drop-down menus are CSS-only based, with a small jQuery solution for potential IE problems
  • Yoast Breadcrumbs plugin modifed to display slugs instead of page titles

AEI Dish Network

Carousel

The carousel is uses the jCarousel Lite jQuery plugn, and I hand-coded the entire functionality.  All code and content are stored in the WordPress page and not in any back-end file, so upgrading is not an issue.

 

Carousel

Accordion

The accordion uses the Hackadelic Sliding Notes plugin for WordPress.

 

Accordion

Feature boxes

The sidebar on the left is also implemented via Improved Include Page, so each page can have its own unique sidebar.

 

Support
 
Lutsey Land Company E-mail
Sunday, 26 July 2009 12:46

This is a website I converted from a PSD design to a fully-functional WordPress theme based on the Thesis framework.

Lutsey Land Company

The site makes use of several basic in-built WordPress features, including:

  • custom fields
  • hooks
  • permalinks
  • pages

The following WordPress plugins are used:
 
Displaying meta keywords in articles E-mail
Saturday, 16 May 2009 21:12

It took a while but I found what I was looking for: an extension that allowed me to display meta keywords within articles.  The bonus is it turns each one into a link with which you can browse other articles sharing that keyword.

I made one small and easy tweak.  By default the plugin only displays the tags in individual article view.  I modified the SearchTag.php file from:

if ((JRequest :: getVar('view')) == 'article'){

to:

if (((JRequest :: getVar('view')) == 'article') || ((JRequest :: getVar('view')) == 'frontpage')) {

Now the tags appear on the frontpage as well.
 
NetBeans - good but...useless E-mail
Thursday, 07 May 2009 13:37

After reading great things about NetBeans - on its own and in comparison with Eclipse, I decided I would like to adopt it as my IDE for PHP work.  It's a great piece of software.  It's small, intuitive, and pretty well-featured.

The problem is, it's rendered essentially useless until a certain bug is fixed.  The bug is that when you're coding PHP in NetBeans and working on a local server such as WampServer or XAMPP, changes you make to PHP files are saved but aren't reflected on the local server.

That's a pretty big bug, I would say.  So, in the meantime, I've turned to Eclipse with Aptana Studio, and it's working out pretty well so far.  The interface is a bit more busy than NetBeans but no so much to be discouraging to use.
 
More Articles...
«StartPrev123456NextEnd»

Page 2 of 6