Do you know what your visitors are doing on your site? You should.

If you’re going to be successful in selling your product or service, you need to present it in the best way possible. Frequently this involves finding out little things you can change about the product or it’s presentation in order to better entice visitors to buy it. In a traditional store, you can just watch visitors move around your store and see what displays are more appealing and which features your visitors get hung up on. On the internet, things aren’t so simple. You can’t just watch over someone’s shoulder as they’re clicking on things on your website and it’s very difficult to find out what people might not like about it.

Tracking click activity is a great way to find out what’s working on your site and what isn’t.

Using click tracking with your WordPress based site is a great way to gain insights into what’s going right and how you can improve your marketing strategies. Click tracking in WordPress is very easy and you probably already have some data available to you through popular tools and plugins. Once you have the tracking data, you can make some simple tweaks to improve your conversion rates and hopefully drastically increase user interaction. If you have one style of button that is being clicked on much more frequently than another style, now you know that you should always use the more popular style. If you have two very similar call-out areas but one is performing much better, examine the copy and see if you can rewrite the underperforming area to be more appealing. If you have other ideas for how to leverage click tracking to make your content more appealing, leave a comment below!

Setting up click tracking on your WordPress site.

There are two popular tools that you’re probably already using that do some limited click tracking. The first one is the JetPack plugin which has a Site Stats module. Jetpack keeps track of some of the more popular content on your site but I’ve always found the tracking ability to be a little lacking. You can see the tracking info from JetPack by clicking “Site Stats” under the JetPack label in your admin menu.

The other popular tool is Google Analytics. If you already have been using GA for event tracking then you know how to use ga.js to set up events. Simply add an event for any given click on the website and record what was clicked on.

Personally, my favorite way to track clicks in WordPress is with the WP Click-Track plugin. It provides you with a great interface for seeing what’s being clicked on, how many clicks you’re seeing per day and when people are clicking(sorted by hour and day of the week). Install the plugin straight from the codex, wait a few hours or a week(depending on how popular your site is) and start watching the incredibly useful statistics pour in. I don’t believe the plugin is being actively developed anymore but it’s still fantastic. I’ve included a link to a stable version above.

What’s next?

Well, now that you have all of this information on what’s popular and what’s not, experiment with making the things you want people to click on more prominent. Change the working, add a splash of color and make your call-out buttons bigger. If you have the time, A/B testing page designs can be incredibly useful. You can then get statistics on two different designs at once and compare the results from each. A very useful plugin for that is the Max A/B plugin. Check it out and start testing!

If you want to go all crazy town on it…

There is a way to basically watch exactly what people are doing on your site but it doesn’t work so well. I wouldn’t recommend this if your site is very popular or if you’re not a developer. A pretty easy way to get real-time data out of users is by using socket.io or by writing your own websockets script. In this example, you could set up a node.js server that only displays one page to you. Then include the socket.io script on the same-looking page on your real website. Include another script on that page on your website that sends an event containing the mouse’s coordinates to the node server every time a visitor’s mouse moves. Then just create an image of a mouse on your fake website and have it move to those coordinates every time data is received. This is not a very effective way to track users but it would show you exactly where people are moving their mouse on one single page. If you have a better idea for how to accomplish this, leave it in the comments section. I’d love to hear it!

When I first heard of Node.js I thought it was a terrible idea. “Javascript on the server-side?? That’s madness!” Well, “Sparta!” I say to you because Node may be the best thing I’ve discovered for web development so far. Node is so amazing because it allows you to use the same language everywhere without having to use one specific framework or other non-standard non-global language. In fact, if you add in a javascript-based HTML templating language like Jade(my other new favorite thing) You can write javascript for everything but your CSS. For which I strongly recommend SCSS but if you really love clean syntax, go for SASS. Just to get everything as clean and simple as possible you could also write your application using Coffeescript effectively eliminating all excess markup from your workflow. I find that to be a beautiful thing.

I only started learning about Node recently and I had a use for it almost immediately. I needed to build an ad server and quick! I didn’t really need all the power of WordPress which was my go-to for pretty much everything. I just needed a simple application with user authentication, a few data types and some data sending and storage capabilities. I turned to Node because I knew it had the capabilities and writing out a full application with PHP + MySQL seemed like it would take too long. The most powerful thing about Node is that it’s not just an application framework, it’s also everything else down to the most basic functions of a server(for context, lets just say that express.js is basically a given in any web app based on Node so it might as well just be part of it). Using Node and NPM I could quickly whip up the basic application framework by require-ing things like Mongoose(MongoDB), Express and Passport. From there, it was a hop and skip(no jumping required because even the database uses javascript and JSON so I already knew how to use it) to get my application running. Unit testing in javascript is pretty straightforward so I handled most of my testing quickly as well. I used Heroku for hosting so there was very little effort in delopying and configuring my application’s hosting. I’m also eyeing nodejitsu as an alternative because of what I’ve read about their stack and their amazingly low prices.

I was wary of performance before I started, thinking that Node could never achieve the speed of a “better” server/web app framework. Well boy was I wrong! This thing is speedy! I’ve never written an application and gotten such good performance out of it. Even WordPress run locally on MAMP seems a little slower than it should be to me but I just chalked that up to bad configuration or something. This is different. Node responds to my requests locally immediately and with no noticeable lag whatsoever. Run on Heroku, I sometimes notice a tiny delay maybe but never anything substantial. I’ll be learning Rails next for work but Node.js may continue to be my not-so-secret lover for a long time. If you’re a web developer and you don’t know about Node, considering taking a look at this setup (node, mongodb, coffeescript, sass, grunt or CodeKit for automation). I think you’ll appreciate the beauty of it.

I was watching tv today and my show was, as usual, so delightfully interrupted by a commercial for something I will never buy. This time though, the commercial was for IE10 and showed some sort of amazing future device using crazy techy software to generate holograms and energy beams and there was some DJ guy doing something so that must make it cool right? So, as usual, I read way too much into the commercial and I really feel like Microsoft should offer an apology. I checked out the “website” they show in the commercial which of course I couldn’t use. “But, Jack” you wonder “how could you not use the website? You always use modern browsers so you should be able to use any website!” Well, that’s not true because the demo site requires you to use Windows and IE10. I should really do more research but I imagine it’s not actually a marketing ploy so much as the site ties into some sort of proprietary software in the OS that is both recent and unavailable in modern browsers.

The site does, however, link to a behind the scenes of the lie page. Microsoft claims to be leading the effort to create a standard web and while it’s true that some people from Microsoft are participating in open web standards, they as a company continue to work against open standards and laugh in the face of best practices. Why would you claim to be modern but not support auto-updating? Why would you say you’re working to create a standard web when you’re not working on being compliant with open web standards instead of proprietary ones? Their demo code includes a reference to an MSGesture class which is totally part of a modern and open web standard… From their description it also seems that any of the “advanced” or interesting parts of their demo aren’t really advanced so much as canvas and javascript-based trickery. I mean, not that I’m mad. I’d be impressed if the demo site worked on modern browsers. I’m just saying that showing off a whole bunch of hacks and tricks that already worked on real modern browsers years ago doesn’t really speak well for how “modern” your broken-before-it-was-released platform really is.

I’m really looking forward to future releases of IE though. They have smart people working for them and they’ve come a long way from IE6. The team does at least seem better intentioned now and allowing for technical debt IE should be caught up to the rest of the modern web in 3 or 4 more major releases. Hopefully…