You may have read my previous entry on performing a 301 redirect from Blogger to Wordpress, where I wrote a script that will capture all traffic to your old Blogger site and redirect it to your new Wordpress site. Ideally you’d want to do the 301 redirects from the web server, but unfortunately Blogger doesn’t allow you to do that and thus, you’re left with the client-side solution: Javascript.

First of all, let me clarify briefly on my previous post and inform you what the core strengths of my script are.

• Client-side redirect will not work without Javascript. Pretty obvious huh? What that means is that search engine crawlers aren’t able to follow the redirect. Nasty limitation in a simplistic sense.
• Strengths of my script are:
  1. It works.
  2. You need a client-side solution if you’re on Blogger. No other way.
  3. It captures and redirects all traffic from your old site to your new site.

That being said, let me now expand on these two major points: the limitations of search engine crawlers and why is capturing traffic important.

Continue Reading

Bookmark It

Hide Sites

I’ve just updated my code on tracking exit links in Google Analytics to skip applying the code if the href of an anchor tag is ‘#’. This is usually the case when the anchor tag is there to execute javascript or to scroll to the top of the page, thus does not contain any exit liks.

This can be found on line 29 with the addition of a condition in the condition statement, anchors[i].href != (document.location + ‘#’).

I’ve seen a few other scripts that tracks exit links but some of them I don’t think are very good as they lack error checking and also some of them overwrite the existing onclick attribute which I guess could break the site’s functionality.

Also to prove to you that my script is working, I’ve included a screenshot of the report found in google analytics.

Of course you can click through to the individual links and analyse the dimensions for further analysis. I will be working on more google analytics custom scripts to help bring and enhance more meaningful reports.

Bookmark It

Hide Sites

I just wrote a simple helper function that gets the cumulative offset of the x and y position (or the cumulative top and left) of an element. This function is helpful if you want to position things around a certain element.

Although I haven’t tested it extensively yet, I think it works fine so far. If there’s any bugs, please let me know.

To use it, simply call getCumulativeOffset(element).x or getCumulativeOffset(element).y. There’s also a simple helper method to get the offsetTop and offsetLeft properties by calling getOffset(element).x and getOffset(element).y.

I’m working on a feature that allows these methods to be prototypes of HTML elements so that you can call it by element.getCumulativeOffset().x instead which is more elegant and object oriented.

/**
 *  @author:    Danny Ng (http://www.dannytalk.com)
 *  @date:      21/09/08
 *  @notes:     Free to use and distribute for non-commercial use without altering this notice. Would appreciate a link back.
 */
function getCumulativeOffset(el)
{
	var x = 0;
	var y = 0;
	var cur = (el) ? el : this;
	do
	{
		if (cur.nodeName.toLowerCase != 'td')
		{
			x += cur.offsetLeft;
			y += cur.offsetTop;
		}
	}
	while ((cur = cur.offsetParent) && cur.nodeName.toLowerCase() != 'body');	

	return { x: x, y: y };
}

function getOffset(el) { return (el) ? { x: el.offsetLeft, y: el.offsetTop } : { x: this.offsetLeft, y: this.offsetTop }; }

Bookmark It

Hide Sites

I’ve written a window event handler mainly for handling multiple onload events. The typical way of handling multiple onload events is by creating a helper function that contains all the onload functions and using window.onload to call the helper function.

An example would look something like this,

function onloader()
{
    onload1();
    onload2();
    // and so on...
}
window.onload = onloader;

However, I wanted to write something more object oriented and more elegant. So I wrote my own method which will allow you to add multiple events to the window object. This script is very early in its stage and only allows you to add events. I will probably work on it more if I figure out more uses for it.

So here’s the script.

/**
 *	@author:	Danny Ng (http://www.dannytalk.com)
 *	@date:		30/08/08
 *	@notes:		Free to use and distribute without altering this notice. Would appreciate a link back.
 */

/**
 *	Window Events:
 *		- onblur
 *		- onerror
 *		- onfocus
 *		- onload
 *		- onresize
 *		- onunload
 *
 *	@usage: window.addEvent(event_type, function)
 *	@params: string, function
 */
function addEvent (e, func)
{
	var old_event;
	switch(e)
	{
		case 'onblur':
			old_event = this.onblur;
			if (typeof this.onblur == 'undefined')
			{
				this.onblur = function(e) {
					func();
				};
			}
			else if (typeof this.onblur == 'function')
			{
				this.onblur = function(e) {
					old_event();
					func();
				};
			}
			break;
		case 'onerror':
			old_event = this.onerror;
			if (typeof this.onerror == 'undefined')
			{
				this.onerror = function(e) {
					func();
				};
			}
			else if (typeof this.onerror == 'function')
			{
				this.onerror = function(e) {
					old_event();
					func();
				};
			}
			break;
		case 'onfocus':
			old_event = this.onfocus;
			if (typeof this.onfocus == 'undefined')
			{
				this.onfocus = function(e) {
					func();
				};
			}
			else if (typeof this.onfocus == 'function')
			{
				this.onfocus = function(e) {
					old_event();
					func();
				};
			}
			break;
		case 'onload':
			old_event = this.onload;
			if (typeof this.onload == 'undefined')
			{
				this.onload = function(e) {
					func();
				};
			}
			else if (typeof this.onload == 'function')
			{
				this.onload = function(e) {
					old_event();
					func();
				};
			}
			break;
		case 'onresize':
			old_event = this.onresize;
			if (typeof this.onresize == 'undefined')
			{
				this.onresize = function(e) {
					func();
				};
			}
			else if (typeof this.onresize == 'function')
			{
				this.onresize = function(e) {
					old_event();
					func();
				};
			}
			break;
		case 'onunload':
			old_event = this.onunload;
			if (typeof this.onunload == 'undefined')
			{
				this.onunload = function(e) {
					func();
				};
			}
			else if (typeof this.onunload == 'function')
			{
				this.onunload = function(e) {
					old_event();
					func();
				};
			}
			break;
		default:
	}
}

I use this feature in my previous post in tracking exit links in Google Analytics where I need to handle multiple onload events as my other Wordpress plugins uses the onload event as well.

An example of using this would be, window.addEvent(’onload’, dtalk_ga.applyVirtualExits). Hope this helps.

[update date=01/09/08]
Thanks to ahot’s tip, I’ve shortened the code significantly now. Theoretically, this function should be able to work on all objects that support events.

/**
 *	@author:	Danny Ng (http://www.dannytalk.com)
 *	@date:		01/09/08
 *	@notes:		Free to use and distribute without altering this notice. Would appreciate a link back.
 */

/**
 *	@pre-condition: object must support events
 *	@usage: object.addEvent(event_type, function)
 *	@params: string, function
 */
function addEvent(e, func)
{
	var old_event = this[e];
	if (old_event)
	{
		this[e] = function(e) {
			old_event();
			func();
		};
	}
	else
		this[e] = func();
}

[/update]

Bookmark It

Hide Sites

I’ve been spending my time writing a script that will help track exit links (external links) in Google Analytics. This script will traverse through all anchor tags within the body and apply tracking codes on tags with the href attribute.

If the anchor tag has an onclick attribute already, it appends the tracking code to it and it shouldn’t affect the functionality.

I will try to post screenshots of how it looks in Google Analytics once I gather some data. To use it, simply paste the following code after the google analytics code and before the </body> tag.

<script type="text/javascript" src="<PATH-TO-SCRIPT>"></script>
<script type="text/javascript">
	dtalk_ga.applyVirtualExits();
</script>

You can view the source code here,

/**
 *	@author:	Danny Ng (http://www.dannytalk.com)
 *	@date:		30/08/08
 *	@updated:	26/09/08
 *	@notes:		Free to use and distribute without altering this notice. Would appreciate a link back.
 *	@usage:		Place the following code before the </body> tag and after google analytics code,
 *
 *				<script type="text/javascript" src="<PATH-TO-SCRIPT>"></script>
 *				<script type="text/javascript">
 *					dtalk_ga.applyVirtualExits();
 *				</script>
 */

var dtalk_ga = {
	applyVirtualExits: function() {
		var trackPage = function(a)
		{
			var domain_name = document.location.toString().toLowerCase().split('/')[2];
			var exit_domain = a.href.split('/')[2].toLowerCase();
			if (domain_name.toLowerCase().indexOf(exit_domain) == -1)
			{
				if (typeof pageTracker != 'undefined')
					pageTracker._trackPageview('/exit/' + a.href);
			}
		};
		var anchors = document.getElementsByTagName('a');
		for (var i = 0; i < anchors.length; i++)
		{
			if (anchors[i].href && anchors[i].href != (document.location + '#'))
			{
				if (typeof anchors[i].onclick == 'undefined')
					anchors[i].onclick = function(e) {
						trackPage(this);
					};
				else if (typeof anchors[i].onclick == 'function')
				{
					var old_onclick = anchors[i].onclick;
					anchors[i].onclick = function(e) {
						old_onclick();
						trackPage(this);
					};
				}
			}
		}
	}
};

Hopefully I can find more ways of writing scripts that will help with Google Analytics.

Bookmark It

Hide Sites

As promised in my previous post (301 Meta Refresh Redirects: How Google and Yahoo Sees It), I will show you a script I wrote that will handle 301 redirects from Blogger to Wordpress using the meta refresh tag and javascript.

I have tested it on my old blogger (http://dannynsl.blogspot.com) and it seems to have worked fine so far.

There are a few steps you will first need to do.

1. Install Wordpress on your domain. There should be installation tutorials on the website. I haven’t had time yet to do my own installation tutorial.
2. Import your Blogger posts into Wordpress. In your dashboard, go to Manage and then Import.
   
3. Change your permalink structure. In your dashboard, go to Settings and then Permalinks. The Day and name or Month and name settings should work. However, for my script I think Month and name should be safer.
   
   
4. Use my javascript code just after the start of the <head> tag in your Blogger layout template. Note: Please make sure you do a backup before making changes. The variables that you need to change are old_root_domain and new_root_domain. This script handles redirection of individual posts, monthly archives and yearly archives. Anything else it will redirect to your homepage.

   <script type='text/javascript'>
   /*
    * Written by Danny Ng (http://www.dannytalk.com/2008/07/25/how-to-301-redirect-from-blogger-to-wordpress/)
    * Free to use and distribute but must keep this comment in place.
    */
   var post_regex = /^http:\/\/(www.)?.*\.blogspot\.com\/\d{4}\/\d{2}\//;
   var month_archive_regex = /http:\/\/(www.)?.*\.blogspot\.com\/\d{4}_\d{2}_\d{2}_archive.html/;
   var year_archive_regex = /updated-min=\d{4}/;
   var label_regex = /search\/label\/.+/;
   var old_root_domain = 'http://dannynsl.blogspot.com', new_root_domain = 'http://www.dannytalk.com', tag_url = '/tag/', redirect_suffix;
   
   if (post_regex.test(location.href))
   	redirect_suffix = (location.href.search(/www/i) == 7) ? location.href.substring(old_root_domain.length+4, location.href.length-5) : location.href.substring(old_root_domain.length, location.href.length-5); // -5 to strip .html
   else if (month_archive_regex.test(location.href))
   {
   	redirect_suffix = (location.href.search(/www/i) == 7) ? location.href.substring(old_root_domain.length+4, location.href.length-16) : location.href.substring(old_root_domain.length, location.href.length-16); // -16 to strip _XX_archive.html
   	redirect_suffix = redirect_suffix.replace(/_/g, '/');
   }
   else if (year_archive_regex.test(location.href))
   {
   	redirect_suffix = year_archive_regex.exec(location.href).toString();
   	redirect_suffix = redirect_suffix.replace(/updated-min=/, '/');
   }
   else if (label_regex.test(location.href))
   {
   	redirect_suffix = label_regex.exec(location.href).toString();
   	redirect_suffix = tag_url + redirect_suffix.split('/')[2];
   }
   else
   	redirect_suffix = '';
   
   document.write("<meta content='0;" + new_root_domain + redirect_suffix + "' http-equiv='refresh'/>");
   </script>

If you want to do a 302 redirect equivalent, just change the number in the meta content from 0 to 1 or 2.

Hope this works for you and please let me know if there are any bug issues.

[edit date=26/07/08]

I just fixed the code to accommodate blog addresses with ‘www’ subdomains. As for redirects for labels, I’ll try to update the code for it tomorrow if I have time.

[/edit]

[edit date=27/07/08]

I’ve added a new regular expression to handle labels and also another variable tag_url that points to your permalink structure for tags or categories.

This setting can be found under Setting, then Permalinks and just scroll right down to the bottom. You will need to edit the variable tag_url to what you’ve sent in the permalinks structure. Make sure you add the ‘/’ at the end of it.

I think by default, Wordpress automatically imports posts from Blogger and sets the labels to categories instead of tags. In this case, just set the variable to the category slug name unless you can be bothered to go through all the posts and set them as tags instead.

[/edit]

Bookmark It

Hide Sites

Normally the best practice for 301/302 (permanent/temporary) redirects are through your web server. However, you can only do this if you own your own domain. So what happens when you’re using a free webpage service such as Blogger, Wordpress and Typepad, and you want to do 301 redirects to your new website?

If you’re thinking of doing Javascript redirects, this isn’t highly recommended as Google and Yahoo web crawlers won’t be able to follow the redirects, which will affect the destination’s ranking and indexing.

Although not the best, your next best bet is using the meta refresh tag to do your redirections. It seems that Google recognises meta redirects and Googlebot should be able to crawl to the new page, according to Google’s Webmaster Help Center.

Yahoo’s Search Help also seems to recognise meta redirects and the crawler will be able to follow the redirects.

It appears that a meta refresh delay of 0 or 1 second will be considered as a 301 redirect and anything longer is considered a 302.

I will try to post a javascript solution that will be able to handle redirects from your old website to appropriate pages of your new website this weekend.

Bookmark It

Hide Sites

I was bored so I decided to write a font control using javascript. Try it here.

I’ve added the controls on the top of the page as well as in my javascript widget.

Enjoy :)

[edit date="09-08-07"]

Added new buttons I made.

[/edit]

Bookmark It

Hide Sites

Found some really useful tutorials on how to use inheritance in JavaScript. This is pretty new to me as I haven’t learnt JavaScript formally but through the Internet. <3 Internet

Anyways, I’m working on an automated HTML generator using JavaScript since I don’t have access to server side stuff. Gosh it gets complicated doing it all on client side!

http://www.cs.rit.edu/~atk/JavaScript/manuals/jsobj/

http://www.webreference.com/js/column79/index.html

Bookmark It

Hide Sites

Some cool javascript I found on the web. Flips whatever text you give it upside-down and reversed!

Bookmark It

Hide Sites