How WordPress Tracks Visitor Clicks
Most websites that want to track links do so by redirecting it through another page. For instance a link to http://www.example.com would become http://www.mywebsite.com/?redirect=http://www.example.com. The redirect page would record the target and send the user to that page. The problem with such methods is that it becomes more difficult for visitors to determine where the link will take them, since the URL looks like it is going to another page on the same website.
JavaScript to the Rescue
Instead of redirecting links, WordPress loads some JavaScript that tracks all clicks that are made on the page. Here is the function that is first called to start monitoring clicks.
function linktracker_init(b, p) {
_blog = b;
_post = p;
_host = document.location.host ? document.location.host: document.location.toString().replace(/^[^\/]*\/+([^\/]*)(\/.*)?/, '$1');
if (document.body) {
document.body.onclick = clicktrack;
document.body.oncontextmenu = contexttrack;
} else if (document) {
document.onclick = clicktrack;
document.oncontextmenu = contexttrack;
} else {}
}
It initializes the variables about the current page and sets the functions clicktrack and contexttrack to be called for the events onclick (left click) and contextmenu (right click). It needs to check if document.body exists or if document exists because of the differences between browsers.
Receiving Events
function clicktrack(e) {
var t;
if (e) {
t = e.target;
} else {
t = window.event.srcElement;
}
linktrack(t, 500);
}
function contexttrack(e) {
var t;
if (e) {
t = e.target;
} else {
t = window.event.srcElement;
}
linktrack(t, 0);
}
The functions check if e (the event) exists, otherwise it uses window.event. The is also due to the different ways browsers handle events. Both these functions are identical, except for the second parameter that is passed to linktrack. We’ll see what this parameter does later. The first parameter to linktrack is the element that triggered the click event.
The Pièce de résistance
Yes, I do like using fancy French words.
function linktrack(a, d) {
try {
if (!a || a == null) return;
while (a.nodeName != "A") {
if (typeof a.parentNode == 'undefined') return;
a = a.parentNode;
if (!a) return;
}
b = a;
while (b.nodeName != "BODY") {
if (typeof a.parentNode == 'undefined') return;
b = b.parentNode;
if (b.id == 'wpcombar') return;
}
if (a.href.match(eval('/^(http(s)?:\\/\\/)?' + _host + '/'))) return;
if (a.href.match(eval('/^javascript/'))) return;
var bh = a.href;
var pr = document.location.protocol || 'http:';
var r = (typeof a.rel != 'undefined') ? escape(a.rel) : '0';
var b = (typeof _blog != 'undefined') ? _blog: '0';
var p = (typeof _post != 'undefined') ? _post: '0';
//var x=document.createElement('IMG');
var src = pr + '//stats.wordpress.com/c.gif?b=' + b + '&p=' + p + '&r=' + r + '&u=' + escape(bh) + "&rand=" + Math.random();
if (a.className.match('flaptor')) {
var fx = function(c) {
return c.replace(/flaptor\s*/, '')
};
var f = 'b' + _blog + 'p' + _post + ' ' + fx(a.className);
var links = document.getElementsByTagName('A');
for (i = 0; i < links.length; i++) {
if (links[i].className.match('flaptor')) f = f + ' ' + fx(links[i].className);
}
src = src + '&f=' + f;
}
if (typeof _acseed != 'undefined') src += '&ac=' + _acseed;
var x = new Image(1, 1);
x.src = src;
if (d) {
var now = new Date();
var end = now.getTime() + d;
while (true) {
now = new Date();
if (now.getTime() > end) {
break
}
}
}
} catch(e) {}
}
The linktrack function is where all the magic happens. The first while loop checks if the current element is the A element that contains our URL, if not it keeps checking its parent until it finds it or fails. This is required because of the way JavaScript handles events. For every event, JavaScript goes to the lowest level element and checks if the event triggers anything for that element. It then continues to bubble its way up each level until it is done. Since WordPress is getting all clicks on the page instead of clicks for a single item, it will always get the lowest level element and must manually work its way up to the link element.
The second loop does the same to find the BODY element that contains the A element we found. If the id is “wpcombar” (the WordPress Admin bar), then it stops.
Next it checks that the link is for another website. If it is a link to another part of the blog, or contains JavaScript, then it won’t report it.
The next few lines of code build the URL to send the tracking information to. In addition, it removes “flaptor” class from the current link for some unrelated purpose. I’m not sure what it does exactly, but it could be used to flag a link so it doesn’t report it, if it is clicked more that once.
Afterwards, it creates a new Image object and sets the source to the URL we send the tracking information to. If you look at the variable src, you can see that it loads “c.gif” and one of the parameters “escape(bh)” is the link we need to track. The image is loaded in the background, unknown to the user. It does not matter what the image is, only the request needs to be sent in order to record the transaction.
Finally, it uses the second parameter of linktrack to specify the amount of time it needs to run in a loop. If the function was called from contexttrack (right click), then the parameter is 0 and it does not need wait at all. If the function was called from clicktrack (left click), then it must run for at least 500 milliseconds so that the request for the Image can get through before going to the new page.
Conclusion
There are a variety of ways to track visitors, and each has its advantages and disadvantages. The disadvantage of using JavaScript is that it uses more bandwidth to load the file and some users have JavaScript disabled. However, it increases usability and tracks clicks in a transparent manner.
Google Chrome Extension – Google Reader!
Hey guys,
I had some free time yesterday night, so I thought I’d write an extension for the Google Chrome browser, and maybe learn a bit of JavaScript on the way. One of the coolest Google features I recently discovered was Google Reader, and so I though why not write an extension that’ll tell me exactly how many unread posts I have in Google Reader? This way I wouldn’t have to constantly check for updates and whatnot… so check it out and tell me what you think. Here’s what it looks like:
Google Reader Extension
Installation Instructions
Download the extension: http://drop.io/pineappleorange/asset/google-reader-crx
To install an extension in Google Chrome, you must first have the developer build of Google Chrome. The stable release currently does not support extensions.
To get the developer build, check here: http://dev.chromium.org/getting-involved/dev-channel.
Now once you’ve updated to the developer build, you need to let Chrome know that it can start using extensions. To do this, find your Google Chrome shortcut icon, and right click -> properties. In the ‘ Target ‘ field, append to the end of what’s already there the following: ” –enable-extensions”.
Finally, double click the installer, and enjoy!
If you wish to uninstall, type in “chrome:\\extensions” in your browser’s URL window, and click uninstall.
Let me know what you think! I’m now also trying to make some more extensions, so if you have any suggestions, let me know.
Getting Past the “activation server is temporarily unavailable” iPhone Update Error
Due to the large number of people trying to update at once, it seems the iPhone activation server is not responding. Here is a simple workaround to fix this issue.
Alternative 1:
From mozcheez in the comments:
disconnect from the internet as the (already downloaded) update is extracting, before it tries to connect to the activation server.
Alternative 2:
- Download the update through iTunes.
- Exit out of iTunes.
- Unplug the USB cable for the iPhone and plug it back it. (Edit: I’ve been getting reports that you need to turn the phone off after unplugging the cable.)
- If iTunes does not automatically open, then start it.
- You should see a dialog asking if you want to install. Click the “Install” button.
- It should get past the activation step and complete the update.
Note that after the update is complete it checks the activation a second time. It worked for me, but there have been reports of errors happening. In most cases, after waiting for a few minutes the phone activated by itself. An unactivated phone can only make emergency calls. If you do not want to risk this, wait a few days until the server is steady.
This is the final result, if everything works correctly:
iPhone Activated Dialog
5 Common Mistakes of Using a Version Control System
For any large or medium sized projects, a version control system is a necessity to properly manage code. Using one results in a large boost in productivity, by allowing multiple developers to edit the same code base. However, in order to be effective, a version control system must be used correctly. The following mistakes results in decreased productivity, and lower quality code.
1. Checking in Changes Without a Summary
The only reason this occurs is due to pure laziness. Without adding a comment with your submission, other developers have no indication to the purpose of your submission, forcing them to check if it’s safe to update or if they need to adapt their code. In addition, a summary makes it easier to identify a revision, if there is ever a need to roll back to it. A few sentences for each check in prevents wasted time by other members of your team.
2. Checking in Big Changes with a Single Submission
This mostly concerns changes that affect large number of existing files. However, it can also apply to the addition of numerous files in a single submission. Although this cannot always be avoided, it is better to have incremental changes. Incremental changes make it easier to identify which update or file may be causing an elusive bug.
3. Using Version Control for Peer Review
Like #2, there are special times where it is necessary to do this, but for most circumstances submitting code for peer review results in repeated submissions and lower quality code. By having peer reviews before the code is checked in, there is a decline in revisions, and the code base contains fewer bugs.
4. Not Verifying Submissions
One of the biggest hassles I’ve experienced came from a submission that did not merge files correctly. Most of the team had already updated to the latest code, only to find out it created errors when running the application. Although it was fixed by pulling back to a previous version and manually merging the files, many hours were wasted by not having a working application. Similar issues include forgetting to check in a file, or checking in the wrong file. This type of problem can easily be avoided by synchronizing with the repository after each submission and making sure the code compiles and runs properly.
5. Not synchronizing with the repository in a timely matter
Another effect of laziness is that developers will not stay up-to-date with the latest release in the repository. While its fine to delay synchronization for a week or two (assuming an average of ten releases a week), postponing an update for a long amount of time increases the likelihood that complications will occur. Errors such as merge conflicts, and bugs from incompatible code will start to appear. By updating in a timely fashion, most of these problems will disappear.
By following these simple guidelines, a version control system can be used to its full potential, resulting in faster development and higher quality code.
The Best Places to Get Free Mp3 Music Downloads
With the current economy and the latest price hikes for iTunes, everyone is looking for cheaper ways to get new music. For most people this means swapping CDs with friends or using a P2P client. However, there are limits to the number of CDs your friends have, and P2P clients have had legal issues in the past. Fortunately, there are many legal places on the web to get all the music you want for free.
Music Search Engines
If you have a specific song in mind, these search engines will quickly find what you are looking for.
- SkreemR – Simple interface and easy to use search.
- TunesDaily – Searches a large index, but it contains many fake files. You can preview the song before downloading to check if it is the song is correct.
- BeeMp3 – Good place to find popular songs.
- Mp3Realm – Similar to the others in the list, but it also allows you to browse music by genre.
Using Google
In addition to websites, Google can also find music, if you know the right search query. Use the following Google search to find a song.
-inurl:htm -inurl:html intitle:"index of" mp3 "Song"
To customize the search, replace “Song” with the song title and “mp3” with the file type you want.
For more advanced queries, here are a few sites that make Google searches easier.
- Google Music Search – Uses the Google search API to customize the results.
- G2P – Uses some advanced search commands (Can also search by album name, and for ringtones)
- Musgle – Provides a simple search to Google.
Blogs
Music blogs are the best place to find the latest songs, and some songs that haven’t been released to the public. Blogs provide reviews for upcoming albums and and give away free mp3 files to preview the songs.
The best way to keeps track of most music blogs is to use The Hype Machine, which monitors hundreds of music blogs. A list of all the blogs it monitors can be found here.
Youtube
Most songs are already available on Youtube from artists, record companies, or music videos. You can convert the audio from the Youtube videos to mp3 with VidtoMp3. Just enter the URL of the Youtube video (Eg. http://www.youtube.com/watch?v=HcOZ6xFxJqg) and click the Download button.
Myspace
Sometimes new artists have not released any songs to the public yet, but they have their songs on their Myspace page. Use File2HD and enter the url of the Myspace page, select the Audio option and click the “Get Files” button. Sometimes it may work depending on your country, in which case use a proxy.
Music Archives
These sites have a large collection of music that is available to free download.
File Sharing Sites
There are many popular file sharing sites that people use to send music. To find the right file, use the following tools.
Be careful when using these, as some files may contain viruses. Check the file type before you open the files.
- Rapidstack – Searches Rapidshare links in realtime.
- MegaDownload – Searches both Rapidshare and MegaUpload.
- FilesTube – File sharing site that allows you to search through all the files it contains.
Did we miss anything? If you use something else to get your music, tell us about it in the comments.
How to Intercept and Process data from Cookies
A few weeks ago, I was reading about how a hacker could easily steal cookies by intercepting them over an open network. So I wanted to see for myself, what kind of information websites are sending unencrypted over the Internet.
What are cookies?
When a web page wants to remember bits of information about a user, it can store them in a file on the user’s computer called a cookie. Any type of information can be stored, such as usernames, preferences, or shopping cart information. The next time the user visits that web page, the browser sends back the cookie, so the web page can process it.
The Problem
The vulnerability occurs when the cookie data is being sent between the user and the web page. If the data is sent in an unencrypted transmission, someone can view all the details that are stored in that cookie, without being detected.
For this article, I will be showing you how to use Wireshark to see the data that is sent over a network.
- First off, you will need to download and install Wireshark from here.
- Once installed, start the program.
- In the top menu go to Capture -> Options or press Ctrl+K
- Configuration depends on the computer and network used, so it will not be covered in this post.
- Click the Start button when you are ready.
- In the Filter box, enter “http” without the quotes and click apply.
- With Wireshark running, go visit a website or wait until another user visits it over the network.
- Stop the capture once you see a GET or a POST under the Info column.
- Select the row with the GET or the POST and check in the bottom frame if there is a Cookie section in the “Hypertext Transfer Protocol” header.
Screenshot of a captured cookie in Wireshark
To see the full cookie, right-click on the line with Cookie -> Copy -> Bytes (Printable Text Only). Now open a text editor and paste it to see the full cookie. Here is a part of the cookie from the screenshot:
Cookie: CULTURE=EN-US; FlightGroupId=68; FlightId=BasePage; hpsvr=M:5|F:5|T:5|E:5|D:blu|W:F; hpcli=W.H|L.|S.|R.|U.L|C.|H.; wpv=0
While this may not look like much, if a hacker copies these values into their browser, the website will recognize them as the original user, potentially giving the hacker full access to your account. Cookies can easily be added to Firefox using add-ons such as Add N Edit Cookies or the more powerful SQLite Manager.
Securing Cookies
There are a few ways to protect cookies from being stolen. However, both of the methods I’ll mention can only be done by the websites storing the cookie.
This first method is to use SSL encryption on all connections. The disadvantage is that the website will require increased bandwidth, due to the overhead of encrypting the data. Also, encrypted pages are not stored in a cache so it is downloaded on each visit to the website, leading to increased bandwidth requirements.
A much easier method is to improve the cookie management using a solution like Barry Jaspan’s, which can be found at http://jaspan.com/improved_persistent_login_cookie_best_practice. This is not as secure as using SSL, but can be helpful for websites that do not store sensitive information.
Difficulties installing Windows 7 RC?
With the release of Windows 7 RC, a lot of people seemed to have quite a bit of trouble getting it to install correctly. From what I’ve seen, the two most common errors people run into are either getting stuck at the “Completing Installation…” stage, or seeing a Black Screen after the computer restarts. Well, here are a few tips to hopefully make the installation go smoothly:
If you are stuck at “Completing Installation…”:
This is the stage where windows installs all of its drivers, services, etc. Problems at this stage are either due to a bad image/cd, or points to issues with drivers. Now before I go into details on how to fix this, remember that this stage IS supposed to take time. Don’t assume its stuck in this stage until you’ve waited 1 or 2 hours with absolutely no change.
1. Driver issues. This is a tough one, because driver issues can mean any number of things. Make sure that everything you don’t need is disconnected from your computer when installing Windows 7. If you have an onboard graphics card, use that instead of any other installed graphics card. Remove all USB devices, make sure you are only using ONE monitor, etc. A lot of issues are also caused by DVI connections, so if possible use a VGA connection with your monitor instead of DVI cables.
2. Bad image/cd. I remember spending hours trying to get past this stage only to find that it was due to a bad CD. What was even more surprising is that the same exact CD worked fine on another installation only a few hours beforehand. For some reason, Windows 7 seems to be especially sensitive when it comes to burning a CD. To get around this, try burning the CD at the slowest speed possible (usually 2x or 1x), or look into installing Windows 7 from a USB Flash Drive:
Installing from a Flash Drive:
- Open Command Prompt (cmd) as administrator
- Type ‘diskpart’
- Type ‘list disk’ – This will show you what disk drives are attached. Look for your USB flash drive, and note the number #
- Type ‘select disk #’ where # is your USB drive number
- Type ‘clean’ – Note this will delete all data on your drive
- Type ‘create partition primary’
- Type ‘select partition 1’
- Type ‘active’
- Type ‘format fs=fat32 quick’
- Type ‘assign’
- Open up the Windows 7 ISO with some kind of archive opener (WinRAR, MagicDisk, UltraISO, etc)
- Extract everything from the Windows 7 ISO to the root of the USB drive
- Insert the USB drive, and boot from it to install Windows 7.
If you are getting a Black Screen after restart:
This is usually caused by a video card problem. Before installing Windows 7, make sure you only have ONE monitor connected and use your onboard graphics card instead of any installed ones if possible. Also there seems to be a lot of problems with DVI connections, so try to use VGA if possible. If your problem persists, I know two possible solutions for this:
1. After seeing the Black Screen, restart your computer. As soon as it gets past loading the BIOS startup, tap F8. This will bring you into the Windows startup selection screen. Choose the option to start windows in low resolution (640×480). Hopefully, this will allow you to complete your windows installation. Afterwards simply update your windows, or install the necessary display drivers and you should be able to change your resolution to your likings.
2. Here’s a trick that works with NVidia graphics cards.
- Obtain the latest NVidia drivers for your graphics card. Run the installer, and note where it extracts the files to.
- Copy the extracted files to a USB flash drive, or CD rom, etc.
- Run the Windows 7 installation as normal until it restarts for the first time
- Instead of letting the computer restart normally, boot into the Windows 7 installer.
- This time select repair, and then open up the command prompt.
- Type ‘notepad’ to open up notepad, and then go to File -> Open.
- Make sure the file type is set to ‘all’, and find the setup.exe that goes along with the NVidia driver installer you extracted.
- Right click the exe and run as administrator.
- After it finishes, restart your computer and allow Windows 7 to complete normally.
Well, thats all I’ve got. Hope it helps.
Stardock Fences really reduces Desktop Cluttering
I recently found out about a nifty program made by Stardock called Fences. For those of you who don’t know, Stardock has been known for its windows customization software that allows users to change the login screen, Windows themes, etc. This new software, Fences, is designed to help reduce to TONS of icons some people have floating around their desktop. Personally, I know a couple of friends who have every inch of their desktop occupied with an icon. To me thats a nightmare, and this program can probably help quite a bit. Its currently still in beta, and you can download it FREE for personal use here: http://www.stardock.com/products/fences/index.asp
The way Fences works is it creates labeled regions on your desktop. You can create multiple regions for various categories, like music, documents, games, etc. After that all you need to do is drag your icons into one of these regions, and Fences will make sure that they stay all nice and organized. It’ll even add a scrollbar to the region if you have more icons than will fit.
Fences in action
I especially like the scrollbar feature. That means you can add as many icons as you want into the region and still have the region occupy a relatively small space. Regions can be renamed and resized at will, and icons within the region can be arranged however you like. There’s also another feature I’ve never used but you might find useful. Double click the desktop, and Fences will automatically hide all the icons/regions until you double click again. This feature can of course be turned on or off.
Pineapple Orange 