Not too long ago I added one of the "Share this page" scripts, AddToAny, to our web site.  This seemed like it was going to work fine but this approach had 3 major drawbacks.

1. Most of these services require you to link to their JavaScript file on their servers.  Sure this is fairly reliable but I am not a fan of this approach.
2. Limited tracking / analytic capabilities.
3. Cookies you can not control.

The first two issues are not huge issues, but while we were testing the site, we noticed that the scripts were adding a few of their own cookies to our users.  I understand why this is, but I did not like it and the feature was pulled.  So I tested out another one, Share This, and it did the same thing. Not only do they add cookies to your users, but they are also tracking usage of their tool on your site.  I don't blame them for this, after all they are providing this as a free service but I still do not like it.

After looking at the scripts for a while I decided that it could not be that difficult to write my own "Share this page" feature.

My goal was to create a widget to let users share the current web page without the limitations listed above.  With just a wee bit of research I found the methods needed to be able to share a page via email, Twitter, Facebook, and LinkedIn. And then track the usage of data in Omniture SiteCatalyst.

<ul>
  <li><A onClick="jsFunctionToRecordClick('Email');" HREF="mailto:?subject=#variables.emailSubject#&body=#variables.emailMessage#">Email </a></li>
  <li><a onClick="jsFunctionToRecordClick('Twitter');" href="http://twitter.com/home?status=#variables.twitterLink#" target="_blank">Twitter </a></li>
  <li><a onClick="jsFunctionToRecordClick('LinkedIn');" href="http://www.linkedin.com/shareArticle?mini=true&url=www.rudishumpert.com&title=AmazingArticle&summary=This is the best ever&source=Rudi"  target="_blank">LinkedIn </a></li>
  <li><a onClick="jsFunctionToRecordClick('Facebook');" href="http://www.facebook.com/share.php?src=bm&u=#variables.currentPage#&t=#variables.twitterLink#&v=3" target="_blank">Facebook </a></li>
</ul>

Sample links without the tracking added:

• Email
• Twitter
• LinkedIn
• Facebook

And then the JS Function: Note the JS function is specific to Omniture tracking but this could be leverage for any analytic solution with some minor tweaking.

			function jsFunctionToRecordClick(category){
				var s = s_gi(s_account);
				s.linkTrackVars="events,eVarN,propN,propN";
				s.linkTrackEvents="eventN";
				s.events="eventN";
				s.eVarN=''+category+'';
				s.propN=''+category+'';
				s.propN=''+category+' | '+s.pageName+'';
				s.tl();
				s.events="";
				s.linkTrackEvents="";
				s.linkTrackVars="";
				s.eVarN='';
				s.propN='';
				s.propN='';
			}

The feature is added to the page using a jQuery menu script that creates the same mouse-over drop down effect that the free scripts use, but you can use any sort of presentation approach that fits your web site's style.

And that is it.  You know have your own custom share this web page feature that your can style however you like and maintain complete control over what cookies are used on your site and what level of tracking you would like to get out of the widget.

Share/Save

As promised here are the presentation materials:

• Presentation
  • Blog Posts with examples from presentation:
    • Form Abandonment
    • Social Media
    • Video Tracking
    • Page Load Times
• Code Samples
• Tools / Links Referenced:
  • JW  Player (LongTail Video)
  • W.A.S.P.
  • Tamper Data
  • Omnibug

Bonus Resources:

In addition to numerous articles I have posted here on my blog, below are some great resources related to Omniture and web analytics in general.  If you have questions or comments, please leave them below.

Omniture Resources:

• Omniture Blogs
• Omniture Developer Forums
• The Omni-Man Blog
• @OmnitureCare on twitter

Web Analytics Resources:

• Occam's Razor
• Web Analytics Association
• Beyond Web Analytics - Podcast
• Web Analytics Land
• The Empty Mind

Books:

• Web Analytics: An Hour a Day
• Web Analytics 2.0
• Competing on Analytics

-Rudi

Share/Save

Earlier this week, I set out to see if there was a way I could get access to the page load data and send it along to Omniture so that I could first get a benchmark of what the performance of the web site was over time, and second be able to tell if changes we made to the site had any impact on performance.

My first attempt in accomplishing my goal was to try and access the same Java object that the debugging code used to get the execution times.  I thought, well I see it in the output on the screen, it should be easy enough to grab that data element and pass it along.

    <cfset codeFactory = CreateObject("java","coldfusion.server.ServiceFactory") />
    <cfset getDebugDataSet = codeFactory.getDebuggingService()>
    <cfset getDebugData = getDebugDataSet.getDebugger().getData()>

This call returned an object that I was able to parse using  the same methods you would use to parse a query object.  It ran great on my development box, but when I moved it to production: Fail.   ColdFusion provided this lovely error message:

Detail Its possible that a method called on a Java object created by CreateObject  returned null.

I tried adjusting a few settings and was not able to resolve the issues.  I reached out to the Atlanta ColdFusion community, and received some very good guidance on the matter.  The reason for the error was I had debugging enabled on my development box, but did not on my production server.   And no matter what creative method I could come up with, would not justify enabling debugging on a production ColdFusion server.  The performance loss by doing this would outweigh the data gained.

The method that turned out to be the best, was also the easiest.   ColdFusion applications can take advantage of a global application file and two great methods within it: onRequestStart() and onRequestEnd().   The functions do exactly as their names would suggest, they will execute the code within each of them at the start and end of every request for every page in the application.

So inside the onRequestStart() function, you get a start time. And within the onRequestEnd() you get the end time and take the difference to get the page load time in milliseconds.  Pseudo code below:

<cfset startTime = getTickCount() />
<!--- something that you want to measure --->
<cfoutput>That took #(getTickCount()-startTime)#ms!</cfoutput>

Note: While the methods I used are specific to ColdFusion, any site that uses a global header and footer, should be able to achieve the data data with javascript or jQuery.

Now I have the the page load times and I began to pass the data into Omniture.  Soon I had results like this.

It did not take long to determine that data in this format would not be very useful as I could have values from 0 to in excess of 10,000 milliseconds.   So I created a quick SAINT classification and was able to group the data together into more logical sections.

Now, this was better, but not perfect and I did not like the data groupings and the time being reported into milliseconds.   After thinking a bit on this, I decided to convert the time to seconds on the ColdFusion side and do the grouping on the web side as well.  I grouped the data into the following sections and passed the data into an sProp:

• < 1 Second
• 1-2 Seconds
• 2-3 Seconds
• 3-5 Seconds
• > 5 Seconds

I then took this data and concatenated it with the page name to send in a second sProp:  < 1s | Home Page.   Doing this gave me these sets of data.

....and....

Note: These may not be the absolute accurate page load times, but they will be close enough to get a good idea of overall site performance.

Success!  Now, before and after major code changes to the site we will be able to go and see if the changes we made had an impact on the performance of the site.   So why go through all the effort to put this into Omniture, when there are other methods to get this type of performance data?  Now that you are able to send this data to Omniture, what else could you do with it?

• Send it in an eVar to see how performance impacts conversions.
• Apply a bounce rate metric to see how performance impacts bounce rates.
• Justify the modification or removal of  slow pages/functionality.
• Add pathing to the second concatenated sProp to see how users move through the site with performance

These are just a few ideas I had.  What would you do with this data inside of your Analytics tool if you could?

-Rudi

Share/Save

NOTE: The code samples below are merely a proof of concept. This solution is not actively in place in any production environmetn that I am involved with.

I was talking to a fellow ColdFusion developer about a web site he was working on, specifically a registration form, and what were some of the best practices with form length and such that would facilitate users filling out the form and submitting.   This is a common issue with web sites that will not be going away anytime soon.  In fact the questions he had are the same ones I have seen in dozens of blog posts trying to figure this out.

• How many questions to put on a form?
• What type of questions work the best?
• What question(s) scared off a user and kept them from completing the form?

I know that there are a few "Form Abandonment" plug-ins out there for Omniture and the likes, but from what I've seen the data you get is somewhat limited.   If your form has 20 elements on it and the plug-in only lets you know what the last element with focus was, you have to really think about the validity of that data.  How do you know for sure that the user filled out the elements in order?  Did the developer of the form set the tab index correctly?  Did the user glance at the form, click somewhere near the bottom and then bail?  Did the user fill out half the form the shut down the browser?

From my understanding of the tools out there today, you are not able to get accurate answers to the questions above.     However, this is an very interesting problem that got me thinking on how I could leverage ColdFusion to be able to capture and get more meaningful data from the abandoned forms.

The Challenge:

• Capture data by users from abandoned forms
• Push that data into Omniture SiteCatalyst
• Create a report with real, actionable data on form abandonment

The Setup:

• ColdFusion 8
• Client Variables stored in a database (SQL)
• jQuery

Step 1:  Capture the form data

The trick to capturing the data would be to find a way to save the form data in some persistent variable so that the data could be retrieved later.  Right away I thought of the Client Scope .   Then the task was to find a method that could be deployed to multiple forms across a site with minimal re-coding.    For that I wrote this snippet of jQuery:

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
// Form Handling/Analysis Test
$('#Form2BeTracked').children().each(function() {
$(this).bind('change',function (event){
$.post("/includes/processFormProgress.cfm", $('#Form2BeTracked').serializeArray() );

});

});

});
</script>

This jQuery function simply binds an onChange event to every form on the page it finds with the id: Form2BeTracked.   This is an easy to deploy script site wide and has no impact on the normal form behavior.

The code on the proccessFormProgress.cfm is all of 3 lines :

<cfparam name="client.formProgress" default="#session.cfid##session.cftoken#">
<cfwddx action="cfml2wddx" input="#form#" output="wddxSession">
<cfset client.formProgress = wddxSession>

This code takes the entire Form Struct and saves it into the client scope/database

Form data is saved real time in the client scope.

The nice part about this is that by default, ColdFusion saves the list of form elements in the form.fieldnames variable. Using that we can get a count of the number of variables for this form, and then see that only 2 of the fields were filled out and what the values of those fields are. All of this without the user clicking submit.

Step 2: Clear data on form submit

If the user submits the form, we need to clear the data in the client variable. This is an easy one line of code to be added on the page that handles the normal submitting of the form.

<cfset client.formProgress = "">

This will clear the form data out of the client variable. This is an important step that can not be skipped or your count of abandoned forms will be inflated.

Step 3: Check for abandoned form data

By saving the form data in the client scope it will be held there in the database for as long as the time frame defined in the ColdFusion Administrator. This setting will determine the frequency that you must check for abandoned form data.

select cd.cfid, cd.data, cg.lvisit from
CDATA as cd join CGLOBAL as cg
on cd.cfid = cg.cfid
where cg.lvisit >= (your timeframe here )
and cd.data like 'formprogress%'

This should pull a result set with all the records of form data that has been saved. ie. abandoned.

With a little ColdFusion magic

<cfquery name="abandoned" datasource="#REQUEST.dsn#">
	select cd.cfid, cd.data, cg.lvisit from
	CDATA as cd join CGLOBAL as cg
	on cd.cfid = cg.cfid
	where cg.lvisit >= GETDATE()-1
	and cd.data like 'formprogress%'  

</cfquery>

<cfset variables.wddx2Convert = abandoned.data>
<cfset variables.wddxLen = len(variables.wddx2Convert)>
<cfset variables.wddx2Convert = right(variables.wddx2Convert,variables.wddxLen-13)>
<cfset variables.wddx2Convert = replacenocase("#variables.wddx2Convert#","##","","ALL")>
<cfdump var="#variables.wddx2Convert#">

<cfwddx action="wddx2cfml" input="#variables.wddx2Convert#" output="variables.form">

<cfset variables.formElementList = variables.form["fieldnames"]>
<cfset variables.formElementCount = listlen("#variables.formElementList#")>

<cfset variables.formList = "">
<cfloop list="#variables.formElementList#" index="formItem">
	<cfset variables.tempValue = variables.form["#formItem#"] >
	<cfset variables.valuePair = "#formItem#:#variables.tempValue#">
	<cfset variables.formList = ListAppend(variables.formList,"#variables.valuePair#","|")>
</cfloop>

You end up with a variable string that you can then submit to Omniture using the Data Insertion API. See this post on details if the API.

As you can see from the image above, you now have the count of the form elements in the form along with the data values from the form elements that were filled out before the user abandoned the form. With this, you can choose what format would be the most useful for your needs to really dig into abandoned forms.

-Rudi

Share/Save

Trying to find an explanation for all this, I checked the twitter-verse and did a little digging online, but did not have a chance to really dive into the issue until yesterday.

@OmnitureCare pointed me in the right direction with this link to a post on the Bing Forum.

From Bing Forum: I'm getting a ton of hits from IP 65.55.* that appear to be coming from user searches such as referrer "http://www.bing.com/search?q=copper" and user agents similar to "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SLCC1; .NET CLR 1.1.4322; .NET CLR 2.0.40607; .NET CLR 3.0.04506.648)"

The swell folks over at Microsoft claim that they are working on a new spider and working out the kinks. Well this "kink" has been mucking with my data and is very annoying. Kink FAIL!  I pulled the web log files and began to search for all traffic from the IP Range of 65.55.*.*  Here is what I found:

2009-10-04 00:12:34 W3SVC1 127.0.0.1 GET /filename - 80 - 65.55.207.50 msnbot/2.0b+(+http://search.msn.com/msnbot.htm) 404 0 0
2009-10-04 00:12:48 W3SVC1 127.0.0.1 GET /filename - 80 - 65.55.109.1 Mozilla/4.0 200 0 0
2009-10-04 00:12:48 W3SVC1 127.0.0.1 GET /filename - 80 - 65.55.109.1 Mozilla/4.0 200 0 0
2009-10-04 00:12:48 W3SVC1 127.0.0.1 GET /filename - 80 - 65.55.109.1 Mozilla/4.0 200 0 0
2009-10-04 00:12:48 W3SVC1 127.0.0.1 GET /filename - 80 - 65.55.109.1 Mozilla/4.0 200 0 0

The first line above looks ok.  The bot clearly identifies itself and does not fire off the tracking JS code.  The next few lines appear to be normal "real" user traffic and do result in the tracking code being executed.   I check the IP address over at http://www.dnsstuff.com and get back that the IP address does indeed belong to Microsoft.

I could list row after row of data from the log files with countless variations of traffic from various M$ ip addresses that do not identify them as bots.  All of the fake/spoofed traffic has this in common:

• 65.55.*.*  IP address range
• User Agent listed as "Mozilla/4.0" only

Now that I have the "signature" of the bad traffic, I wanted to find a way to prevent this from falsely inflating our city and other visitor data.  I dug around trying to find an elegant way to do this with JavaScript only, but decided the best approach would be to leverage the ColdFusion platform we use and simply suppress the s_code file from being loaded if I was able to detect the traffic matched the above pattern.

<cfif findnocase("65.55.","#cgi.remote_addr#") GT 0 AND findnocase("Mozilla/4.0","#cgi.HTTP_USER_AGENT#") GT 0>

This IF block checks for the pattern and prevents the Omniture JS code from being loaded if both conditions are met.   I put this code in place around noon yesterday and in less than 24 hours I can see that this is working.

I will be keeping a close eye on all the traffic reports to make sure that we are not losing any real traffic data, but I am confident that will will keep this current issue from jacking my data any further.

Below are a few sites I found that helped me in my research:

• http://solaroverpower.com/2009/06/16/is-microsoft-spoofing-blog-visits-to-generate-traffic-back-to-bing/
• http://www.webmasterworld.com/search_engine_spiders/3875363-5-30.htm
• http://www.webmasterworld.com/search_engine_spiders/3950463.htm
• http://www.bing.com/community/forums/p/648805/9549504.aspx?PageIndex=3
• http://www.bing.com/community/forums/t/648564.aspx

-Rudi

Updated 10/15/2009:

James Dutton found this bug showing up in Yahoo Web Analytics as well.  Read his tips to resolve it!
Yahoo Web Analytics data inflated by Bing and how to fix it.

Share/Save

Of all the Adobe products out there I use ColdFusion almost exclusively (not counting reading PDF's with Acrobat), so my list will be very slanted towards items I would love to see from an Omniture + ColdFusion perspective, that would make my job of implementing and optimizing the Omniture code & tags easier. That being said, this list below could easily be ported over to whatever development platform the site to be tracked is built on.

1) Tag library integration / validation within the soon to be released ColdFusion IDE - CF Builder. Much like the integrated JS libraries that can be added to other Eclipse based IDE's

2) Dedicated AJAX support - ok, so maybe this one has nothing to do with ColdFusion specifically but it would be great to have a defined/dedicated AJAX tag like s.trackAJAX() instead of having to use the custom link tracking s.tl() to track AJAX events. More and more of what I do is on RIA, AJAX heavy elements where a user/web visitor can spend a long time and make many clicks on AJAX elements without ever triggering a page reload.

3) Native integration with the ColdFusion session variables to by default populate many of the page specific variables to send to Omniture. (pageName, server, channel, etc.)

4) Built in tags to use the Data Insertion API to push data into Omniture as an alternative to the JS Beacon. Having this as a CF tag, might make it easier to accomplish #2 above.

5) Community. The Adobe ColdFusion is a loyal and active community and serves as a great example of the effectiveness of having a great active and supported developer community.

6) Enhance documentation by creating Adobe AIR versions such as this. I use this version of the Adobe Live Doc's all the time. Very handy!

So, there it is. My 2/5's of a nickel on what I would love to see as a results of the Adobe(ColdFusion) + Omniture integration.

-Rudi

PS. The original tweet request for the wish list made me instantly think of a quote my mom often repeated to me when I would say "I Wish...."

“If wishes were horses beggars would ride”

Share/Save

The vast majority of ColdFusion sites I've work on in the past are not public sites, and historically there have been little, if any concern for web analytics.  Sure, we had basic usage data, but nothing close to the level of detail that Omniture can provide.  This goes beyond SEO, and just numbers for the marketing department.  It is the ability to gain a true understanding of what your users are doing on your applications.  Which features they really use and which ones they don't.   Imagine building a web application and being able to have the data to drive the design of navigation and layout of these web apps.  Imagine having the data to take to the decision  makers to prove the effectiveness or lack of effectiveness of certain features.  This is what Omniture can do you for.

At it's most basic level, the Omniture code is a Javascript file that you will include on every page of your web application or public web site.  On every page load, the JavaScript file makes an image request to Omniture and in doing so, sends the tracking data to Omniture and is then available within their tools to analyze and slice in almost any way imaginable.   Combine this with the power of ColdFusion and the possibilities are dizzying, especially when you start thinking about adding this type of tracking to Flex, Air, and of course Flash applications as well.

Most public sites rely heavily on other JavaScript functions to get any data beyond the basic implementation, but with ColdFusion you have one of the most powerful web languages at your disposal to easily gather and send much more advanced levels of data into Omniture.  I have posted several articles here that demonstrate a few things you can leverage ColdFusion for and send the data into Omniture:

• Social Media Data
• Hierarchy Data
• Build Custom XML for Data Insertion
• Custom Video Tracking

I've only been exposed to and been working with the Omniture code for a few months and I'm still learning how powerful this data can be, but I'm a true believer in the value it can bring.  If you made it this far in the past, thanks, and take a look around.  I will be the first to tell you that by no means do I consider myself to be an expert, but I am very excited about the things I have been able to do with Omniture & ColdFusion and I am looking forward to what the merger of Adobe & Omniture could mean for the ColdFusion community.

-Rudi

Share/Save

I've been busy for the past few months working to integrate Omniture into our web site, and I have made a lot of good progress and I was quite sure that there was still much to learn in the training, however, I was not prepared for how much I still had to learn.

Despite all I had managed to learn on my own, and the resources I had managed to find on the web, there were some basic concepts that had escaped me (and will be rectified):

Core understanding of the 4 types of Omniture variables. (Traffic, Conversion, Configuration, Automatic):
I had a basic grasp on how each of these variables worked, but had not wrapped my head around how each of these variables not only related to other variables of the same type,  but how to properly format and track each one to maximize the detail you can achieve within SiteCatalyst.

Clearly define business goals & requirements before you code
In the process of jumping head first into the coding and figuring out ways to get the data we needed into Omniture, the critical step of getting all the goals defined and updating our Solution Design Document to reflect the goals was skipped.

Have Client Care enable additional features:
Yet another seemingly simple item of having pathing enabled, and adding additional metrics to variables , was missed.

There are a few other small things that I might go into more detail later, but this is as much ignorance on this topic I wish to share at this time.   The major item I am taking away from this training is that no matter how much you think you know, there is always something else to learn.

I would also like to give kudos to the trainers from Omniture!  Our instructor, Doc Cochran, was extremely knowledgeable about SiteCatalyst, and took the time to make sure that any and all of our questions were answered.   He also had a great way of relating each example/item to a real world scenario that all could benefit from.

From this class I have a full list of items to review and address once I am back at work and I am looking forward to applying the new knowledge and getting the full benefit from our investment in Omniture.

_______

I would also like to thank the other Omniture employees that I was able to meet with to discuss past and future initiatives we are working on.   It was great to be able to sit face to face and talk though some past successes and challenges with these folks.

_______

Lastly, it was a little on the surreal side to be in Orem when the news broke that Adobe was buying Omniture.  There are been many, many articles written about this and I will throw in my 2/5's of a nickel.   As a ColdFusion developer I have worked with many folks in the Adobe community for some time and have always been impressed with the dedication to innovation that is part of Adobe's culture.   I truly think that this is a great fit and the communities of both products/companies should benefit greatly from this merger.   I am looking forward to seeing how they will be able to tie the technologies together.

I had an absolutely great trip to Utah.  I learned tons, met great people, and soaked in the amazing landscapes!

-Rudi

Share/Save

I was reading a post on WebAnalyticsLand about a SiteCatalyst plugin to populate the s.hierN variables from the URL, and it got the gears turning. I wonder if I could get that to work using a combination of ColdFusion & JS instead of just making edits to the s_code file.

Some things to consider before implementing Hierarchies: (swiped from Omniture's Manual)

• There are five hierarchy variables available, which must be enabled by Omniture ClientCare.
• At the time the hierarchy is enabled, you will need to decide on a delimiter for the variable and the maximum number of levels for the hierarchy.
• Before implementing hierarchies, refer to the Channels and Hierarchies white paper.
• The delimiter may not be changed once the hierarchy is setup. If the delimiter for your hierarchy must be changed, contact Omniture ClientCare.
• The number of levels may not be changed once the hierarchy is set up.

Once the hierarchy is activated, you should see it in SiteCatalyst under the Site Content Menu item (In version 14.6)

That concludes the configuration portion of the adventure. Now to the coding!

Note: I code in a ColdFusion environment in which I have a .cfm page that pulls the s_code.js into it so I can use some built in CFML functions to tweak the data.

Goals for this adventure were to:

• Dynamically set the s.hierN variable on every page
• Prevent levels greater than 5 from being passed
• Prevent filenames being passed as levels (index.cfm)
• And of course..get it all working to provide a hierarchical view of our web traffic.

<cfset variables.omniHierList = cgi.path_info >
<cfset variables.omniHierListLen = ListLen(variables.omniHierList,"/")>
<cfset variables.newOmniHierList = ListChangeDelims(variables.omniHierList,"|","/")>
<!--- Check the list len to make sure we do no exceed the level depth --->
<cfset variables.lastItem = ListGetAt(variables.newOmniHierList,variables.omniHierListLen,"|")>
<cfif FindNoCase(".","#variables.lastItem#") GT 0>
 <cfset variables.newOmniHierList = ListDeleteAt(variables.newOmniHierList,variables.omniHierListLen,"|")>
</cfif>

This will result in: Assuming of course that your current path is "/root/evil/browsers/IE6/demonspawn/use/firefox.ftw"

So what I've done is parse through the cgi.path_info variable, change the delimiter to | and removed the filename from the end of the list.  But as you can see I am left with a list of 6 items and I can only send 5 levels to the s.hier I had ClientCare activate.  I was told that the extra's would be ignored, but I do not like to leave things to chance, so I added one more set of code.

<cfif variables.omniHierListLen GT 5>
 <cfset variables.newOmniListTrim = "">
 <cfloop from="1" to="5" index="i">
 <cfset variables.newOmniListTrim = ListAppend(variables.newOmniListTrim,ListGetAt(variables.newOmniHierList,#i#,"|"),"|")>
 </cfloop>
 <cfset variables.newOmniHierList = variables.newOmniListTrim>
 </cfif>

Now you have a list of a max of 5 items to set the s.hierN variable to.

This was one of the easier Omniture adventures so far!

-Rudi

Share/Save

One Player to rule them all, One Player to track them,
One Player to bring them all and in the darkness correlate them
In the Land of Analytics where the Shadows lie.

Almost one player. There are slightly different versions for the wmv player and the flv players, but it's close enough. So now the question was, could I take these players and have a unified look and feel to the player on the site and be able to track them the way I wanted/needed to with Omniture?

This is important to me since we have tons of content already created for our site that we need to track and we have very limited access to action source tools to be able to leverage the action source code that Omniture has.

I downloaded both versions and set to work. The wmv version requires that Silverlight be installed on your web server. This was a pain free process on my local workstation, but provided a small hicup when testing the code on my dev and prod servers. You have to add the silverlight extensions to the available MIME types on the server to get it to run. Once you do that, it is smooth sailing. Using the demos provided I had a working version of the JW Player running a wmv file and I had access to the event listeners in Firefox, IE, and Safari.

The FLV player was even easier to set up. As I was working with the flv player I discovered that you could put in a link to your favorite YouTube video in the call, and it would pull the video into the player and let you track it as if it was any other media file on your server.

So using the demo sites I found on the LongTail video site I put together this code sample that is ColdFusion based to pull in the information about the file and then serve up the correct player.

<cfparam name="variables.mediaFileExt" default="">
<cfparam name="url.mediaFilePath" default="">
<cfparam name="variables.mediaFileName" default="">
<cfparam name="variables.mediaLocation" default="">
<cfparam name="variables.mediaFilePath" default="">
<cfparam name="variables.mediaFileType" default="">
<cfparam name="variables.mediaPreviewImage" default="preview.png">
<cfparam name="variables.mediaHeight" default="500">
<cfparam name="variables.mediaWidth" default="700">

<div id="videoPlayerDiv">&nbsp;</div>

<cfif variables.mediaFileExt EQ "wmv">

	<cfoutput>
	<!--- windows media files --->
	<script type="text/javascript" src="silverlight.js"></script>
	<script type="text/javascript"  src="wmvplayer.js"></script>
	<script type="text/javascript">

		// some variables to save
		var currentPosition = 0;
		var currentBuffer = 0;
		var currentVolume = 80;
		var currentState = "NONE";
		var defaultState = "NONE";
		var currentLoad = 0;
		var player;

		// This creates the player after the page has finished loading (onload).
		function createPlayer() {
			var cnt = document.getElementById('videoPlayerDiv');
			var src = "/includes/mediaplayers/wmvplayer.xaml";
			var cfg = {height:"#variables.mediaHeight#", width:"#variables.mediaWidth#", file:"#variables.mediaFilePath#", autostart:"false",image:'#variables.mediaPreviewImage#'};
			player = new jeroenwijering.Player(cnt,src,cfg);
			addListeners();
		};
		function addListeners() {
			if(player.view) {
				player.addListener('STATE',stateUpdate);
				player.addListener('TIME',timeUpdate);
			} else {
				setTimeout("addListeners()",100);
			}
		};
		// These are the event listeners
		function stateUpdate(ost,nst) {
			currentState = nst;

		    if (defaultState == "NONE") {
		    	//alert("started");
		    	defaultState = "started";
		    	getTimeValue();
		    }

		     currentTime = getPosValue();
		    if (currentState == "Completed")
		 	  {
		  		omniMediaTrackingDone('#variables.mediaFileName#');
		  	  }
		    if (currentState == "Playing")
		 	  {
		  		omniMediaTrackingResume('#variables.mediaFileName#',currentTime);
		  	  }
		    if (currentState == "Paused")
		 	  {
		  		omniMediaTrackingStop('#variables.mediaFileName#',currentTime);
		  	  }

		};

		function timeUpdate(pos,dur) {
			currentPosition = pos;
			var tmp = document.getElementById("time");
			if (tmp) { tmp.innerHTML = pos; }
			var tmp = document.getElementById("dur");
			if (tmp) { tmp.innerHTML = dur; }
		};
		// you can not combine the listener events, so the functions below are a workaround to get the length/pos of the video file
		function getTimeValue(){
			var tmp = document.getElementById("dur");
			var tv = tmp.innerHTML;
			if (tv == "0")
				{
				setTimeout("getTimeValue()",100);
				}
			else
			{
				omniInitMediaTracking('#variables.mediaFileName#',tv,'#variables.playerName#');
			}
		}

		function getPosValue() {
			var tmp = document.getElementById("time");
			var pv = tmp.innerHTML;
			return pv;
		}
	</script>
	</cfoutput>
	<div style="display:none;" id="buffer"></div>
	<div style="display:none;"  id="state"></div>
	<div style="display:none;"  id="time"></div>
	<div style="display:none;"  id="load"></div>
	<div style="display:none;"  id="dur"></div>
<script>
	setTimeout("createPlayer()",500);
</script>
<cfelse>

<!--- flv & youtube use the same js script code --->
	<script type="text/javascript" src="/includes/mediaplayers/swfobject.js"></script>

	<cfoutput>
	<div id="timevalue" style="display:none;">0</div>
	<div id="posValue" style="display:none;">0</div>
	<div id="flashbanner">this will be replaced by the SWF.</div>

	<cfif variables.mediaFileExt EQ "yt">
		<script type='text/javascript'>
		  var so = new SWFObject('/includes/mediaplayers/player.swf','ply','#variables.mediaWidth#','#variables.mediaHeight#','9','##ffffff');
		  so.addParam('allowfullscreen','true');
		  so.addParam('allowscriptaccess','always');
		  so.addParam('wmode','opaque');
		  so.addVariable('file','#variables.mediaFilePath#');
		  so.write('flashbanner');
		</script>
	<cfelse>
		<script type="text/javascript">
		  var so = new SWFObject('/includes/mediaplayers/player.swf','aribaFLVVideoPlayer','#variables.mediaWidth#','#variables.mediaHeight#','9');
		  so.addParam('allowfullscreen','true');
		  so.addParam('flashvars','file=#variables.mediaFilePath#&image=#variables.mediaPreviewImage#');
		  so.write('flashbanner');
		</script>
	</cfif>

	<script>
		playerReady();

		var currentPosition = 0;
		var currentVolume = 0;
		var currentMute = false;
		var currentState = "NONE";
		var defaultState = "NONE";
		var clipduration = 0;

		var player = document.getElementById('aribaFLVVideoPlayer');

		function playerReady() {
		   var player = document.getElementById('aribaFLVVideoPlayer');
		    addListeners();
		}

		function addListeners() {
		    if (player) {
		        addAllModelListeners();
		    } else {
		        setTimeout("addListeners()",100);
		    }
		}

		function addAllModelListeners() {
			 if (typeof player.addModelListener == "function") {
		         player.addModelListener("BUFFER", "doNothing"); //{percentage,id,client,version}.
		         player.addModelListener("ERROR", "doNothing"); //{message,id,client,version}.
		         player.addModelListener("LOADED", "doNothing"); //{loaded,total,offset,id,client,version}.
		         player.addModelListener("META", "doNothing"); //{variable1,variable2,variable3,...,id,client,version}.
		         player.addModelListener("STATE", "stateListener");//{newstate,oldstate,id,client,version}.
		         player.addModelListener("TIME", "positionListener"); //{position,duration,id,client,version}.
			}

		}

		function doNothing(obj) { //nothing
		}

		function positionListener(obj) {
		    currentPosition = obj.position;
		     clipduration = obj.duration;
		    var tmp = document.getElementById("posValue");
		    if (tmp) { tmp.innerHTML = currentPosition; }
		      var tmp2 = document.getElementById("timevalue");
		    if (tmp2) { tmp2.innerHTML = clipduration; }
		}

		function stateListener(obj) {
			oldState = obj.oldstate;

		    if (defaultState == "NONE") {
		    	//alert("started");
		    	defaultState = "started";
		    	getTimeValue();
		    }
		     currentState = obj.newstate;
		     currentTime = getPosValue();
		    if (currentState == "COMPLETED")
		 	  {
		  		omniMediaTrackingDone('#variables.mediaFileName#');
		  	  }
		    if (currentState == "PLAYING")
		 	  {
		  		omniMediaTrackingResume('#variables.mediaFileName#',currentTime);
		  	  }
		    if (currentState == "PAUSED")
		 	  {
		  		omniMediaTrackingStop('#variables.mediaFileName#',currentTime);
		  	  }

		}

		// you can not combine the listener events, so the functions below are a workaround to get the length/pos of the video file
		function getTimeValue(){
			var tmp = document.getElementById("timevalue");
			var tv = tmp.innerHTML;
			if (tv == "0")
				{
				setTimeout("getTimeValue()",100);
				}
			else
			{
				omniInitMediaTracking('#variables.mediaFileName#',tv,'#variables.playerName#');
			}
		}

		function getPosValue() {
			var tmp = document.getElementById("posValue");
			var pv = tmp.innerHTML;
			return pv;
		}

	</script>
	</cfoutput>
</cfif>

The only workaround the event listeners I had to deal with was tracking the initial play of the video. The listener events can not be combined in a function, or at least I could not get that to work, so I came up with the solution to let the listeners track the position and duration of the file in a hidden div that I could pull the value from there when I needed it. Then it is a matter of just calling the JS functions I added to my tracking / omniture page code to pass the data to Omniture.

I am very pleased with this player and the ability I have to track all the video formats we use. The player also claims that it is skinable and seems easy enough to to that, but I have not tried that yet.

Demo sites:

• wmv
• flv
• YouTube

Be sure to read this article by Brian Thopsey on how he used the JW player with Omniture too.

Share/Save