More formatting issues. The new plug-in I got for synatax highlighting has some conflicting CSS with my theme… No time to fix right now, but the code is still there for you to copy/paste. Sorry!

So I’ve been back from Engage and while I don’t really have time to do this, I feel I owe some people an update/follow-up. In general, I think the conference was a great success for attendees (not so much for sponsors, but I won’t discuss that here). Where I think attendees did get let down was with my own workshop.

As I have been telling people, my workshop was supposed to be a hands-on problem solving session to help and educate simultaneously on the thinking and practices of asynchronous tagging; unfortunately a few people showed up thinking I was going to talk about Webtrends asynchronous tag.

So after I did my brief introduction (being given only 45 minutes is really not enough time to discuss things in any amount of detail!!),  I opened up the floor to field questions. I was expecting to get some questions asking me to show how someone may tag a specific asynchronous event or data point. Instead, the first question out of the gate was “why should I change my Webtrends tag for the new one?” I was a little confused at first – thinking that I misunderstood the question, but it turns out that one simple question resulted in a 20 minute derailment. So rather than getting 40 minutes to work through several attendee questions, I spent about 20 going over two short simple examples from what I’ve prepared on queue cards… [No  one in the room wanted wanted to raise any questions or ask for help with anything - of course there were several people willing to hang back after to ask me 1:1 questions!!!]

Anyway…. I think it’s safe to say that my session was a complete disaster and I feel like I let down the room. One person who stuck around to ask private questions requested that I put together a sample file for one of my queue-card scenarios. I haven’t heard back from this guy, but I figure I may as well get it up here so that I can drive any other Webtrends users back to this post who may be looking for more of the same. For the record, this situation is a simplified version of a much more complicated real-world issue I dealt with a while back.

The Scenario:

A client has a home-brew CMS that has many links on many pages (upwards of 100-300 links per page). Right now, they don’t have any control over the links in the CMS (this was some non-standard view-controller design whose abstraction made it managerially impossible to handle). The destinations of those anchors are not all unique, but the client has a need to track them to establish page real estate value and activity success. We could heat-map the page, but that won’t mean much if linked images are moved on the page. It also doesn’t simplify conversion tracking… So – we’re going to use some  asynchronous techniques to tag all the links.

One point I made during my intro is that I like to use existing JS libraries. What library you use really doesn’t matter, but my samples are in jQuery. I don’t advocate one library over another – I just advocate smart utilization of your time. Spend time making the important stuff in your code and leave the grunt work to others!

The Set-Up: XHTML

The XHTML to set up for this is pretty simple and straight-forward. It’s just a base container that calls a JavaScript file that will auto-generate a randomized table of links. The HTML looks like this (sorry for the poor formatting – the indentation was not preserved):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

 
	Sample Dynamic Link Modification
 
	<script type="text/javascript"><!--mce:0--></script>
	<script src="jquery-1.5.1.min.js" type="text/javascript"><!--mce:1--></script>
 
	<script src="mod.js" type="text/javascript"><!--mce:2--></script>
 
 
This is a sample HTML file that demonstrates the dynamic linking event discussed during the workshop. The idea here is to go in and modify the elements after they are loaded on the page.
 
 
 
For the sake of this sample, we are using JavaScript to dynamically create a random list of links on the page, then calling a JS file titled <a href="/mod.js">mod.js</a> to find all the links after they're added and give them a class of "CHANGED". Note that the modifier did not change the link in this paragraph.
 
 
 
<button id="addClass" class="button">Add New Classes</button> 
Everything after this line is randomized!
 
 
 
 
<hr id="startline" />
 
 
	<script src="base.js" type="text/javascript"><!--mce:3--></script>

The Set-up: JavaScript

We are making a random table of links. This wasn’t the case for the real-world work, but it helps to organize everything in an easy to read way. I’ve randomized the size of the table to show that the solution is not hard coded. This uses the ready command, which is attached to ‘body’ not ‘document’ as you may see much more often.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$('body').ready(startup()); //run as soon as the page is ready
 
function startup() {
	var newTable = makeTable();
	$('#startline').after(newTable); //inject the newly created table statement to the website
} //end startup function
 
function makeTable() {
	var statement = "<table width='100%' border='1' id='thetable' class='stuffs'>";
	var seed = 3 + Math.floor(Math.random() * 8);
	for(i = 0; i < seed; i++) {
		statement += "<tr id='row"
		 + (i + 1) 
		 + "'><td id='row"
		 + (i + 1) 
		 + "-col1'><p>Filler goes here.</p></td><td id='row"
		 + (i + 1) 
		 + "-col2'><p><a href='http://google.ca'>These links</a> would be going to different places in a live site from my example.</p></td></tr>";
	} //end loop
	statement += "</table>";
	return statement;
}

The Solution

The funny thing here is how short the code is for the solution vs. the set-up. Seasoned programmers won’t be surprised by this, but I like to point out just how simple the solution is for tagging. This is the crux of what I was hoping to get through to the room during my Webtrends Engage workshop, but I really don’t think I did a good job of it. Regardless, here’s how we go in AFTER the links are created to slap a class on there. Now, when you go back to multi-track your things, you’ll be able use the class attribute to name the anchor being clicked. This keeps your multitrack solution simple, and allows for almost any kind of naming system you want (note how I derived the name using a rule that pulls from existing element attributes from outside the element being modified.

1
2
3
4
5
6

$('.button').click(function() {
	$('#thetable').find('a').addClass(function(){
		var str = 'link_of_' + $(this).parents('td').attr('id');
		return str;
	});//end func
});