Home

How to: Check Google Analytics event tracking E-mail
Wednesday, 25 November 2009 17: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

     

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

    Firebug Net panel

     

  8. 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:
  9. page_Tracker._trackEvent('site' , 'click' , 'Pkstore');

  10. So now you know that event-tracking is working for this event.  You can check other events in the same way.


 
Skydrive, Live Sync, Live Mesh - so many sync'ing options E-mail
Friday, 13 November 2009 16:19

I just learned yesterday that Windows Live SkyDrive offers 25 GB online storage free!  That's a lot of free storage.  And then there are the other two similar but distinct products Microsoft offers: Live Sync and Live Mesh.  Here's the breakdown:

  • SkyDrive - an online backup utility.  You can access it via the web interface or you can integrate it into your Windows environment with SkyDrive Explorer.  Again, 25 GB is a lot of free space!
  • Live Sync - lets you synchronize files between several computers.  The difference between this and the other services is your data doesn't get saved online.  If you want live synchronization between computers and online backup, there's Live Mesh for that.
  • Live Mesh - similar to Dropbox, but offers 5 GB free space instead of Dropbox's 2 GB.  I haven't tried it yet, but it seems to offer some other features as well, like remote control of your desktop.  I've been using Dropbox for over a year.  It does what it does very well, so I see no reason to switch.

Obviously there are other, non-Microsoft, offerings out there, but I wanted to focus on these because initially I was confused why they have three different services that do the same or similar things.  Here's a more detailed comparison of the three offerings listed above.



 
Clicky, Woopra and Piwik web analytics E-mail
Tuesday, 03 November 2009 11:34

Update

I'm impressed with Woopra as well.  I was using the web interface for a while but decided to download the desktop client.  It offers more features, like filters and such, but the Exclude Visits feature seems buggy.  I entered my own IP address to be excluded from the visits but it still shows up.  Apparently it's a problem they're working on fixing.

The only other shortcoming I can think of is the lack of organized documentation for Woopra, the way there is for Google Analytics.  The only source for solutions and answers is the forums, which are great but, in my opinion, should be a secondary source, after official documentation.


So far I'm impressed with Clicky, although I haven't had a chance to test out the Spy feature which shows you real-time activity as it's happening.  On the other hand, Piwik doesn't seem to be collecting data.  I wondered if it's the WordPress and Joomla plugins I used, so I implemented the raw code on another site, but still no results.  I can't tell what's up.

I'm also giving Woopra a try.


I'm giving Clicky Web Analytics and Piwik a try.  I use Google Analytics right now, but even though it's very powerful, it's not the most intuitive (read: simple) interface to get around.  I want to try something else.

For Joomla integration I'm using the RokClicky for Clicky and Piwik analytics plugin for Piwik.

Clicky is web-accessible like Google Analytics, whereas Piwik has to be installed locally.



 
Speeding up your websites E-mail
Thursday, 29 October 2009 17: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.



 
Converting PDFs to JPGs E-mail
Thursday, 29 October 2009 10:32

I needed to batch-process PDFs to convert them into JPGs, and as usual, several solutions were found:

(I found several other solutions but I couldn't be sure they would work under Windows 7.) 

I'm sure Adobe Acrobat can do the job, but I don't have that hefty piece of software, and wherever possible I like to use open-source solutions.

I downloaded the binary for ImageMagick and installed it without issues (on Windows 7).  I was excited to use ImageMagick, but unfortunately I couldn't get it to find GhostScript when I went to use the convert -density 300 *.pdf *.jpg command.

Then when I installed PDFCreator, for some reason it didn't install GhostScript the first time around.  So I uninstalled and reinstalled, and this time it worked like a charm.  I enabled Auto-save and selected JPG under File Type in Options > Auto-save.  Now all I had to do was select all the PDFs I wanted to convert, and they would get auto-saved where I specified in the Auto-save options.



 
Optimizing images in bulk E-mail
Saturday, 17 October 2009 18:38

Update

It has come to my attention, courtesy of Web Resources Depot, that there are several Adobe AIR applications for modifying images in bulk.  (And they won't add the watermark like Image Optimizer does.)

 

Caldera

Caldera

 

ImageSizer

ImageSizer

 

JustResizeIt!

JustResizeIt!


I came across a freeware solution for optimizing (read: shrinking) image files for web deployment.  It's called, originally enough, Image Optimizer, and it can optimize images individually or in bulk, like all images in a folder.  As shown below (image from their website), the software integrates into the Windows shell so you can just right-click the file or folder and optimize away.

Image Optimizer



 
AEI Dish Network E-mail
Monday, 05 October 2009 19: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



 
«StartPrev12345678910NextEnd»

Page 10 of 18