cache woes, how to force an image to refresh or load fresh

The simple trick here is to make the browser think that the image file is new. Most web professionals know that browsers will cache and image and remember it’s url and then if you try to access that url again it will show you the image you already downloaded rather than getting a new copy form the server every time. This is great and helps us surf the web faster overall. Sometimes this can bite us though, specifically when you are trying to show someone an image which you just updated and all they see is the old one. If you are in the business of creating things online and having them approved online, you could run into this situation multiple times before lunch every day. Raise your hand if you’ve had to walk a client though how to clear their cache, fun times right? One more situation when this is helpful is I’ve noticed some browsers (firefox) caching animated gifs, and they will not replay the animation if you refresh the page. But for banners and such sometimes you will want the animated gif to replay on reloading the page. I’ve started using this little trick to keep my pages from caching the images and saving me and clients confusion.

So the browser remembers the url and if you try to get that same url later, it will just display what you’ve already downloaded. The trick is to make the browser think it’s a new url. You can do this pretty easily by adding a query string to the end of the url. Those are the urls that have the file name and then it’s followed by a ‘?’ and some jibberish, for example: my-image-i-dont-want-cached.jpg?version=something. This will work once, but the real trick is to have a unique query string every time. I’ve seen this done with random numbers and a number of other things, but my favorite is to add the date to the url. With the date you know that it will always be unique (as it includes seconds).

There are a couple different ways we can append this to the url. They depend on which technologies we have available to us. It can be done with php or javascript. I prefer the php method because it is created as the page is delivered from the server, while the javascript version is set as the image loads, but either one works and I wouldn’t do this in a production since in that case, we want the cache to lighten the load on our servers.

As long as you understand what cache is and why it’s a good thing to have in most scenarios and you are in one of those exceptions where it’s best not o have it, here’s how to do it.

JS Method

[cc lang=”js”]
function freshimg(image){
if (image.src.indexOf(“?”) == -1)
image.src = image.src + “?v=” + Date();
}
[/cc]
[cc lang=”html”]

JS reload append to img src

[/cc]

PHP Method

[cc lang=”php]

PHP append to img src

” width=”160″ height=”600″ border=”0″ />

[/cc]

wideskyscraper from dummyimage.comHere’s some reference for the Date in javascript and php. Now to see it in action: here are a few examples, although this isn’t the best scenario for them, since these images won’t be changing. I’m just using some dummyimage.com and an animated gif inspired by the same.

Link to view example of how to force a fresh image to load.

circlecube Relaunch

Not just a redesign but a whole new site and location! After having built loads of sites for clients/friends I kept learning things I wanted to employ on my own site, but the cobblers kids are always barefoot right? I kept implementing new things and knew that they were making my clients lives easier and I wanted it easier as well.

circlecube logo
I’d already updated my logo a number of times since my last redesign and I wasn’t happy with how my collection of sites all looked different and required repetitive work to maintain. circlecube-sketch-3Well, I did some sketches and committed to working on it just a few minutes a day. I really work best as I visually think through a design so sketching is always the first step in my designs. After I nailed down the basic elements and concepts I needed in the site through sketches I installed a new wordpress site, the thematic framework and then got started on a child theme. I really surprised myself and in a mere couple weeks I had a short list of things to do before I could “flip the switch”. The hardest part by far was trying to do 301 redirects from all the old posts which lived on either my blog or portfolio sub-domains. But thanks to my friend we were able to iron that out and I learned more than I ever wanted to know about mod rewrites and such. I was able to combine my blog and portfolio and my home page all into one site. I always felt weird pushing friends/potential clients and everyone else to my blog or my landing page or portfolio… but now they can all simply go to the same place!

circlecube-sketch-1My goal was to enable all content to be updated in the back-end, I didn’t want any content in the theme. And I didn’t want to have to redo the css or layout to move something from the header to the footer or sidebar for example. I placed a lot of content in widgets and a few pages that were wholly widget areas. I also needed a portfolio section that displayed a little gallery of images and possibly flash content automatically. It needed to be easy if I were going to ever update the portfolio, so I used custom post types and custom fields to attach images and other data to each portfolio item. Then one of my favorite pages is the social page, it’s just a collection of my social feeds all displayed neatly in one place.

While I’d love to release the theme for everyone, I cheated and used quite a few plug-ins to accomplish my designs so the theme itself doesn’t include all the functionality and I’m pretty sure it’s bad for to require plug-ins and set up to get a theme functional, but if you’re interested, let me know.

As usually happens though, I learned some more tricks as I built this site. So I have a list of things I’m ready to write and share about on the blog: custom post types, custom taxonomies, thematic customizations, css tricks, fancybox, custom fields, jquery, widgets, htaccess, importing/exporting wordpress, new favorite plug-ins and more… So be excited!

My only regret so far is the lack of texture on the site so I may come back and apply slight noise to the site background to make it more tangible. But I also like the clean look. Well, to see snapshots of the site I added the circlecube redesign to the portfolio section of this site (cheesy to include my own site in my portfolio? yep, but I’m excited to use the feature and I always retrospectively wish I’d documented site updates).

Still, there may be a few things that don’t fully connect, so please, please let me know if you see anything broken or experience a broken link. But stay tuned for some posts since I’m not spending time building the site I’ll put a little time each day into putting content on the site again.

Circelcube Video Player 3.0 Stock Flash Video Player at ActiveDen

hero-image

My latest stock flash video player of mine was just added to the database of stock flash items at activeDen. Go check it out and if you like it, download it for use in your projects! I’ve got lots in it for you. I’m using the principles I used as the architect for the video player for stomperNet and then at cornerstone media group in this decked out video player. Go get circlecube’s awesome stock flash video player.

circlecube-video-player-3-preview

An extensively customizable yet simple video player. Integrate the video into your user experience with javascript integration as well as Google Analytics tracking on the video interaction! Control functionality, layout and colors of the player easily! Plus don’t sweat the embed codes – an embed code generator included!

Let your video be the focus!

Features

  • Includes an embed script generator! With options for swfobject implementation or simple valid html object tags (or both)!
  • Embed generator makes setting your settings easy with a Live Preview!circlecube-video-embed-preview
  • Supports flv, f4v and any container format using H.264: mp4, m4a, mov, mp4v, 3GP, 3G2.
  • All images and video loaded externally
  • Run this player without additional files, just pass in the flv path and thumbnail path.
  • Supports most image file types: jpg, gif, png.
  • Google Analytics Integration (event tracking) – Uses on page analytics account or a specified account on a per video setting in flashvars.
    analytics-overview
  • Load any dimension video. Completely resizable
  • Set player width and height
  • Set video width and height
  • Full screen capabilities
  • All colors fully customizable in flashvars
  • Use a preview/thumbnail image.
  • Auto play option
  • Auto load option – in case you had a bunch of video on one page you wouldn’t want them all to auto load.
  • Supports Window Mode options. window, transparent, opaque
  • Video scale/stretching options: none, exact, uniform, fill.
  • Javascript callback functions for loading video and finishing video playback.
  • Show a big play button over the video
  • Show/hide “vcr” video player controls
  • Advanced volume controls, click to mute or drag to desired volume. Volume fades rather than cuts.
  • Support for a logo
  • Controls auto-hide
  • 60k file size
  • Time code display in current time or elapsed time. click to toggle
  • Tooltips for controls
  • Send video files to player dynamically (with an html link on a page send a video to play)
  • Replay video after complete
  • Progressive play and load displays. Watch as the video loads and see the scrub bar update as you watch.
  • Scrub bar is interactive click and drag. Tooltip to display hovered time.
  • Animated play controls.
  • Buttons states & tooltips.
  • All player graphics are vector shapes and very small in size.
  • Fully rearrange player controls
  • Option to disable fullscreen
  • Display video title and description – html content (may contain links)
  • Video controls also in context menu

legend-image

Javascript to show/hide elements update with jQuery

I never expected it, but one of the most popular (most commented) posts on this blog is a javascript post from about 3 years ago. I was showing how to hide and show elements on a web page with some simple javascript using getElementById and altering the display or visibility attributes of the element. It still works – although I hear every once in a while that certain browsers have issues with is sometimes, but the truth is I haven’t used this code almost since I wrote it. I have converted to jQuery! And it is much easier to code, easier to read and even nicer to browsers. So I’m writing this update post to proclaim the antiquity (3 years on the internet is a long time) of getElementById and the benefits of jQuery!

There isn’t much more to say about it really. I hope you’ve heard of jquery and if not, please go check it out it’s pretty easy to pick up! One thing I will mention is the potential bloat to having to load a javascript library. But most of my projects lately have included jQuery because I’ve been using it much more than just showing and hiding elements. But remember our friend cache? Remember that if you’re using jQuery on a whole site, the user only loads it once, and if you load it from the google hosted version of jQuery they likely will already have the script in their cache. The current version is hosted at http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js, so just link to that script on your page and you’re free to throw in any jquery onto your page.

Well, check out the code; I hope it’s pretty self explanatory and you can see it in action. I always have to see things work to understand them and learn from them.

Javascript

[cc lang=”javascript”]
$(document).ready(function() {

$(‘.hide_it’).click(function(){ $(‘.to_hide’).hide(); });

$(“.show_it”).click(function () { $(“.to_show”).show(“slow”); });

$(“#toggle_it”).click(function () { $(“.to_toggle”).toggle(); });

$(‘.fade_it’).click(function() { $(“.to_fade”).fadeTo(“slow”,0); });

$(‘.fade_out’).click(function() { $(“.to_fade_out”).fadeOut(); });

$(‘.reset_all’).click(function() {
$(‘.to_hide’).show();
$(“.to_show”).hide();
$(“.to_toggle”).show();
$(“.to_fade”).fadeTo(“slow”,100);
$(“.to_fade_out”).fadeIn();
});
});
[/cc]

show-hide-jquery-screenshot

HTML Code

see it in action on the demo page
[cc lang=”html”]

testing hide js div

hide it


Show me slowly.


testing the toggle functionality of jQuery


testing fade out. you’ll notice that this is set to display:none once the fade is complete.

fade out


testing fade to 0. this fades out just as fadeOut, but it does no make the display none, so the page layout isn’t modified, just the visibility of this element.

fade it


[/cc]

Notice that with jQuery we can use a class or an id as a selector. This is great because you can show a whole slew of elements that share the same class at once. Remember that you can only have one id on a page at once since it must be unique.

See the demo page for working examples.

And don’t forget to read up on the api for jQuery here jQuery hide, jQuery show, jQuery toggle, jQuery fadeOut, jQuery fadeIn, jQuery fadeTo.

Better jquery mega-menu tutorial

My earlier simple mega menu implementation post displayed some simple css and jquery to explode a standard navigation menu into a mega-menu… I’ve made it even better. My biggest issue with that implementation was that it did not keep the order like you’d expect. It read left to right in columns rather than down each column. In the example you can see the first column of three would read from the top: a, d, g, j… this could potentially be confusing. So I wanted to update it to keep the order better and just stack the columns of elements rather than the elements themselves.

I used some different jquery to execute this. First we walk through the menu elements and calculate which column they should be in. We basically map that element’s (li)index to the column it should be, some big math. Luckily I had some experience from actionscript in my arsenal doing just that, so porting the function to javascript I was ready to go. If your number X falls between A and B, and you would like to convert it to Y which falls between C and D follow this formula: Y = (X-A)/(B-A) * (D-C) + C. Plugging this function in and cancelling out the zeros and adding some rounding to get integers I got: Math.floor((liindex / $total * $cols)+1). Using this I added a class to each ‘li’ designating which column it should be in, and then used wrapAll to wrap them into column divs. Very simple and a much better implementation overall anyways. Better code, better user experience… what more can you ask… so here’s the example and jquery code. I’m thinking I should make this into a jquery plugin or something, any thoughts?

better-mega-menu-screenshot

See the mega menu in action

Javascript code

[cc lang=”javascript”]
jQuery(document).ready(function() {
//clean up the row of the mega menu. add css class to each element on bottom row.
//only if more than 7 elements. if more than 16, mm-3
jQuery(‘#nav li ul’).each(function(ulindex, ulele){
$total = jQuery(this).children(‘li’).size();
if ($total <= 7) { jQuery(this).addClass('mm-1'); } else { $cols = Math.floor(($total) / 8) + 1; $remainder = $total % $cols; $rows = Math.ceil($total / $cols); jQuery(this).addClass('mm-' + $cols + ' total-' + $total + ' rem-'+$remainder );jQuery(this).children().each(function(liindex, liele){ //alert("total: "+$total+", remainder: "+ $mod+", ulindex: "+ulindex+", liindex: "+liindex); //If your number X falls between A and B, and you would like to convert it to Y which falls between C and D follow this formula: Y = (X-A)/(B-A) * (D-C) + C. jQuery(this).addClass('col-' + Math.floor((liindex / $total * $cols)+1) ); if( (liindex+1) % $rows == 0) { jQuery(this).addClass('last'); } });for (var colcount = 1; colcount<= $cols; colcount++){ jQuery(this).children('.col-'+colcount).wrapAll('

‘);
}
}
});
});
[/cc]

css

[cc lang=”css”]
ul { list-style:none; }

/********** < Navigation */ .nav-container { float:left; background: #398301; margin: 10em 0; width: 960px; } #nav { border: 0px none; padding:3px 0 2px 44px; margin:0; font-size:13px; }/* All Levels */ #nav li { text-align:left; position:relative; } #nav li.over { z-index:999; } #nav li.parent {} #nav li a { display:block; text-decoration:none; } #nav li a:hover { text-decoration:none; } #nav li a span { display:block; white-space:nowrap; cursor:pointer; } #nav li ul a span { white-space:normal; }/* 1st Level */ #nav li { float:left; } #nav li a { float:left; padding:5px 10px; font-weight:normal; color: #fff; text-shadow: 1px 1px #1b3f00; } #nav li a:hover { color: #fff; text-shadow: 1px 1px 3px #ccc; } #nav li.over a, #nav li.active a { color:#fff; }/* 2nd Level */ #nav ul { position:absolute; width:15em; top:26px; left:-10000px; border:1px solid #1b3f00; border-width: 0 1px 2px 1px; background:#398301; padding: 6px 0 6px; } #nav ul div.col { float:left; width: 15em; } #nav ul li { float:left; padding: 0; width: 15em; } #nav ul li a { float:none; padding:6px 9px; font-weight:normal; color:#FFF !important; text-shadow: 1px 1px #1b3f00; border-bottom:1px solid #1b3f00; background:#398301; } #nav ul li a:hover { color:#fff !important; text-shadow: 1px 1px 3px #ccc; background: #2b6301; } #nav ul li.last > a { border-bottom:0; }
#nav ul li.last.parent > a { border-bottom:0; }

#nav ul li.over > a { font-weight:normal; color:#fff !important; background: #1b3f00; }
#nav ul.mm-1 { width: 15em; }
#nav ul.mm-2 { width: 30em; }
#nav ul.mm-3 { width: 45em; }
#nav ul.mm-4 { width: 60em; }
/* 3rd+ leven */
#nav ul ul { top:-6px; background: #1b3f00; }

/* Show Menu – uses built-in magento menu hovering */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:14em; }
#nav li.over ul ul { left:-10000px; }

/* Show Menu – uses css only, not fully across all browsers but, for the purpose of the demo is fine by me */
#nav li:hover > ul { left:0; z-index: 100; }
#nav li:hover > ul li:hover > ul { left:14em; z-index: 200; }
#nav li:hover ul ul { left:-10000px; }
[/cc]

Download

Visit this demo page and view source or save as…

A simple mega menu implementation with CSS and jquery

I’ve been skinning quite a few ecommerce sites with the magento platform and wanted a simple way to explode the navigation menus. Some sites end up getting a long list of categories and sub-categories, so I wanted to do a mega-menu style navigation. One way to do it was to rewrite the html code for the navigation and pop each column into another nested unordered list. I’m not a fan of doing this because one – I didn’t want to manipulate the html. I like the simplicity of ul navigation with a clear flat list of li elements. Of course for nested sub-navigation any li can contain another ul. I wanted to just use some css and maybe javascript to visually accomplish the same thing. I also wanted it to be portable, so I could take it and use it on a wordpress install or even a plain html site. I went to my favorite: jquery. I knew there was a likely plugin out there already that would do something similar, but nothing after my initial search, but I realized that it was a simple procedure and mostly accomplished with some css.
mega menu screenshot
I’ll walk you through the process here and let you inspect the code yourself and see it in action on the demo page. Assign each ul to be a default width of 15em, then each li element we float:left and also give it a width of 15em. This way we can change the ul width to 30em and automatically I have 2 columns! Assigning the nested ul a specific width according to it’s class is done through css, mm-0 will be 15em and incrementally each next one will be 15em more. mm-1 is 30 and mm-2 is 45. Then we use jquery to determine the number of elements in the list and assign it a class accordingly. This involves some math and some preferences. Using the magic ui number 7, I determined that a menu with more than 7 elements should explode into multiple columns. So anything less than or equal to 7 I assign the class ‘mm-1’ which in the css sets the width to the standard 15em (ie 1 mega menu column). More than 7 should pop into columns no more than 8 tall. So dividing the total by 8 will give us the number of columns we want. We’ll add a class of mm-x, where x would be the number of columns. And the li elements will float to the left and fill in the space in columns.
One specific issue is the last element in the menu, sometimes we need to style that element differently. I’ll loop through each child of the nested ul element and if it is on the bottom row apply a class of ‘last’. But this was a little tricky in calculating which would be last because were never sure how many elements there will be or how many columns. I just used the remainder after dividing the total by the number of columns, then if the remainder could be used to know which elements are on the bottom row.

OK, now that that’s out of the way, let’s look at the code.

HTML

This I won’t show, you can inspect the source of the demo if you wish to see it, it a basic nested collection of unordered lists. It’s the standard that is created by magento, wordpress and most other CMS platforms.

CSS

[cc lang=”css”]
html, body { margin:0; padding:0; }
ul { list-style:none; }

/********** < Navigation */ .nav-container { float:left; background: #186C94; margin: 10em 0; width: 960px; } #nav { border: 0px none; padding:3px 0 2px 44px; margin:0; font-size:13px; }/* All Levels */ #nav li { text-align:left; position:relative; } #nav li.over { z-index:999; } #nav li.parent {} #nav li a { display:block; text-decoration:none; } #nav li a:hover { text-decoration:none; } #nav li a span { display:block; white-space:nowrap; cursor:pointer; } #nav li ul a span { white-space:normal; }/* 1st Level */ #nav li { float:left; } #nav li a { float:left; padding:5px 10px; font-weight:normal; color: #fff; text-shadow: 1px 1px #111; } #nav li a:hover { color: #fff; text-shadow: 1px 1px 3px #ccc; } #nav li.over a, #nav li.active a { color:#fff; }/* 2nd Level */ #nav ul { position:absolute; width:15em; top:26px; left:-10000px; border:1px solid #104A65; border-width: 0 1px 2px 1px; background:#186C94; padding: 6px 0 6px; } #nav ul div.col { float:left; width: 15em; } #nav ul li { float:left; padding: 0; width: 15em; } #nav ul li a { float:none; padding:6px 9px; font-weight:normal; color:#FFF !important; text-shadow: 1px 1px #111; border-bottom:1px solid #104A65; background:#186C94; } #nav ul li a:hover { color:#fff !important; text-shadow: 1px 1px 3px #ccc; background: #135575; } #nav ul li.last > a { border-bottom:0; }
#nav ul li.last.parent > a { border-bottom:0; }

#nav ul li.over > a { font-weight:normal; color:#fff !important; background: #104A65; }
#nav ul.mm-1 { width: 15em; }
#nav ul.mm-2 { width: 30em; }
#nav ul.mm-3 { width: 45em; }
#nav ul.mm-4 { width: 60em; }
/* 3rd+ leven */
#nav ul ul { top:-6px; background: #104A65; }

/* Show Menu – uses built-in magento menu hovering */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:14em; }
#nav li.over ul ul { left:-10000px; }

/* Show Menu – uses css only, not fully across all browsers but, for the purpose of the demo is fine by me */
#nav li:hover > ul { left:0; z-index: 100; }
#nav li:hover > ul li:hover > ul { left:14em; z-index: 200; }
#nav li:hover ul ul { left:-10000px; }
[/cc]

Javascript

Don’t forget to include jQuery (I prefer using the google hosted version at http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js)
[cc lang=”javascript”]
jQuery(document).ready(function() {
//clean up the row of the mega menu. add css class to each element on bottom row.
//only if more than 7 elements. if more than 16, mm-3
jQuery(‘#nav li ul’).each(function(ulindex, ulele){
$total = jQuery(this).children(‘li’).size();
if ($total <= 7) { jQuery(this).addClass('mm-1'); } else { $cols = Math.floor(($total) / 8) + 1; $remainder = $total % $cols; jQuery(this).addClass('mm-' + $cols + ' total-' + $total + ' rem-'+$remainder );jQuery(this).children().each(function(liindex, liele){ //alert("total: "+$total+", remainder: "+ $mod+", ulindex: "+ulindex+", liindex: "+liindex); if( liindex + $remainder >= $total || $remainder == 0 && liindex + $cols >= $total ){
//alert(“total: “+$total+”, remainder: “+ $remainder+”, index: “+liindex);
jQuery(this).addClass(‘last’);
}
});
}
});

});
[/cc]

See the demo in action

Cornerstone Media Group | Atlanta Web Design

csmediagroup redesignI’ve joined Cornerstone Media Group of Atlanta as the Senior Web Designer and Front-End coder! A bit stale as far as news goes, I’m going on 6 months already. The reason I bring it up now is that we’ve just relaunched our website. This new look is not just about new appearances and aesthetics, it is about a new approach. The redesigned website has new features that make the user experience easier and more intuitive. There is a dynamic portfolio and the company blog is tied more into the site and more into the business. Most employees are signed on as an author on the blog. We’ll do our best to flood the inter-web with good content related to what we do and our expertise. Three of our most popular business solutions now are highlighted buttons that can take you straight to landing pages with more in depth information on each solution; SEO, Web Design and E-Commerce. The redesigned website offers a freshness that comes with change. We hope you enjoy your new experience at cornerstone. If you’re in need of any web services chances are we’ll have a solution at CSMediaGroup.

CSS3 Tool, CSS3Please

With all the buzz about new improvements in CSS3 I’ve been meaning to write about it, but…

css3 please screen shot

I couldn’t find any excuses when I stumbled on Paul Irish’s new css3please.com: a cross-browser css3 rule generator. Just had to do a quick post to spread the word.

It’s great for cross-browser testing as well as generating the code for many css3 rules:

  • border-radius
  • box-shadow
  • gradient background
  • rgba backgrounds
  • transform (rotate)
  • @font-face

and more coming soon!

Stomper999

Interactive Design project for StomperNet’s tease of the announced reveal on 09/09/09 at 09:09:09!

“Online Marketing Changes Forever!”

stomper999-black
Wanted it to be unexpected, and I think we hit it! Check it out live at stomper999.com!
stomper999-white

Details:
For this project I used flash, html, css and javascript. Tweener for the fading effects. Found a nice stock flash from activeden for the countdown and used jquery and the easing and color plugins.

Event Tracking with Google Analytics | Flash Integration | Tutorial

Many have read my Integrate Google Analytics with Flash Tutorial in which I express enthusiasm for the new event tracking at google analytics! Well, it’s been a while, but I was admitted to the Beta testing group! So I’ve now had the chance to play with event tracking a bit and wanted to publish my findings!

Overview

Almost a year ago Google Analytics announced their new event tracking model and have had help documents published and code samples up. And as with many of Google’s products the beta stamp has lasted a very very long time. Many have seen my earlier tutorial exploring using traditional Google Analytics Tracking from within Flash, and it does wonders to track your flash apps in this manner, but there is a problem with it. We’re using supposed object oriented concepts to track objects as pageviews. One thing is it really isn’t a very intuitive way to represent that data, and another it inflates your pageviews! The solution? the long awaited and announced Event Tracking model. I’ve been itching for this to be released so I could refresh my analytic tactics I use in my flash projects. No, to answer your questions, it has not been released yet, but I contacted Google and explained that I would be a great beta tester for this feature and after a bit of correspondence they invited me to join in the beta testing! This is good news for you too! Because I will tell you all about how to do it and even show you what the reporting looks like and when it is released finally, you will know what you’re in for after this sneak peak!

UPDATE: Here are the reports for this very example: Report from Event Tracking with Flash Tutorial

The very quick summary is this:
_trackEvent(category, action, optional_label, optional_value)
Note that the _trackEvent function is called on the pageTracker object itself. (initially Google had you instantiate a separate event tracker for every object (or category) you wanted tracked)

For example, if we want to track a ball. All the actions that can apply to the ball are: it being created, dragged, dropped, bounced, deleted… You get the idea. We can have direct user actions tracked or even automatic actions. If we have gravity and physics running, the ball may bounce a lot without any direct user interaction. But it will never be dragged or dropped without direct interaction. I’d recommend only tracking user interactions because who cares how often a ball bounces on your page (unless you’re doing an experiment, of course), want we want to know is how and when a user interacts with the ball.

category:string (required)

This is the name of the object you are tracking.

action:string (required)

This is the action that happens to your object you want to track.

optional_label:string (optional)

This can be more information to accompany the action.

optional_value:integer (optional)

A number to provide numerical information to accompany the action.

Steps

  1. First, I’d recommend reading up about Event Tracking at Google
  2. Decide your object oriented structure for tracking events. What objects do you want to track and what useful information do you want to get through tracking user interaction?
  3. Make sure you have the new Google analytics tracking code on your page
  4. Use these functions to communicate Google Analytics from your flash
    1. Call the main function with the specified parameters
    2. It will call the appropriate function and send the data to your pageTracker object through javascript with externalInterface calls
  5. See the reports in your analytics profile! (if your a beta tester, or else, wait until it is released)

Source code

The tracking functions are below, I enhanced the earlier trackGA function I wrote about. Now you call trackGA with 2 required parameters, categoryOrPageTrack and action. categoryOrPageTrack is where you have to pay attention. I wanted to keep the ability to track pageviews as well as have event tracking, so as the first param you either send in the string ‘page’ to explicitly state that you want to track the page view, or you send in another string to state you want to track an event on that specified object. Action remains the same, the action you want tracked (either on the pageview, it is the path that will appear in your reports; or the event tracking will be the action tracked to the category)…
So to track a pageview I call
trackGA("page", "swfLoaded");
and to track an event to an object I call ball:
trackGA("ball", "created");
The trackGA function will rout your call to the appropriate place and send the info to Google through either the trackGAPage function or the trackGAEvent function.
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
//trackGA (categoryOrPageTrack [required], action [required], label [optional], value [optional]
//categoryOrPageTrack – either the category string or a string saying ‘page’
function trackGA(categoryOrPageTrack:String, action:String, optional_label:String, optional_value:Number) {
//call page tracking version of Google analytics
if (categoryOrPageTrack == “page”) {
//trace(“GATC pageTracker call”);
trackGAPage(action);
}
//call event tracking method
else {
//trace(“GATC event tracker call”);
trackGAEvent(categoryOrPageTrack, action, optional_label, optional_value);
}
}

var prefix:String = “flashGA”;
//Google Analytics Calls Page Tracking – for tracking page views
function trackGAPage(action:String) {
//GA call
if (prefix != null && !eventTrack){
var call = “/” + prefix + “/” + action;
//Old Google Analytics Code (urchinTracker)
ExternalInterface.call(“urchinTracker(‘”+call+”‘)”);
//New Google Analytics Code (_trackPageview) pageview
ExternalInterface.call(“pageTracker._trackPageview(‘”+call+”‘)”);
trace(“==GATC==pageTracker._trackPageview(‘”+call+”‘)”);
}
_root.tracer.text = action;
}

//Google Analytics Event Tracking Calls – for tracking events and not pageviews
//category, action, label (optional), value(optional)
function trackGAEvent(category:String, action:String, optional_label:String, optional_value:Number) {
/*
objectTracker_trackEvent(category, action, optional_label, optional_value)
category (required) – The name you supply for the group of objects you want to track.
action (required) – A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
label (optional) – An optional string to provide additional dimensions to the event data.
value (optional) – An optional integer that you can use to provide numerical data about the user event.
*/

theCategory = “‘” + category;
theAction = “‘, ‘” + action + “‘”;
theLabel = (optional_label == null) ? “” : “, ‘” + optional_label + “‘”;
theValue = (optional_value == null) ? “” : “, ” + optional_value;
//New Google Analytics Code (_trackEvent) event tracking
theCall = “pageTracker._trackEvent(” + theCategory + theAction + theLabel + theValue + “)”;
ExternalInterface.call(theCall);
trace(“====GATC====”+theCall);
_root.tracer.text = theCategory + theAction + theLabel + theValue;
}
[/cc]

Here’s the actionscript lines where I call the trackGA function:
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
//Tracks that the swf loads, so I pass ‘page’ to let it know I want a pageview tracked…
trackGA(“page”, “swfLoaded”);
//Tracks various objects sending various actions
trackGA(“gravity”, “on”);
trackGA(“gravity”, “off”);
trackGA(“friction”, “on”);
trackGA(“friction”, “off”);
trackGA(“ball”, “deleted”, count);
trackGA(“ball”, “created”, ballCount);
trackGA(“ball”, “drag”, this.ballNum, this.ballNum);
trackGA(“ball”, “drop”, this.ballNum, this.ballNum);
trackGA(“ball”, “bounce”, “right”, this.ballNum);
[/cc]

Example

[kml_flashembed fversion=”9.0.0″ movie=”/wp-content/uploads/2008/10/integrategoogleanalytics/integrategoogleanalytics.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”400″ height=”400″]

Get Adobe Flash player

[/kml_flashembed]

View example in it’s own html page, I even added a couple html buttons with javascript hooked in to show javascript event tracking implementation.

Download

Download Source

Concerns

I’ve noticed while putting this together that the calls to google analytics are not completely fullfilled, this example sends out correct calls to javascript, but (in firefox at least) a max of about 1 tracking call is registered with the tracking code every 5 seconds or so. I noticed this as I was monitoring the drag and drop events for each ball, although the drag and drop events are both fired, usually the drag event was received and the drop is not. After verifying that my code was consistent, I noticed that no matter how fast I interacted with the objects, the calls were much slower. I’m guessing this is a limit placed by the google team to keep us from sending pointless data such as is posted at the bottom of the event tracking implementation guide, titled Events Per Session Limit.