Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Sunday, August 24, 2014

Tracking outbound links with google analytics, without annoying middle-clickers

As a quick and dirty solution I just added google analytics tracking of outbound links. It was really easy as I just borrowed a piece of code from this blog (kudos!). Everything went fine and the stats started coming in.

But when I later visited the site myself I realized something awful. Since I'm a obsessive middle-clicker opening all potentially interesting links in new tabs I ran into the issue immediately. It opens my middle-clicks in the same tab, transforming my middle-clicks to left-clicks.

Further googling explained everything. Many have written scripts like the one I picked and some have already considered this issue. So I read them all and improved the script I had stolen already. Here it is. Please comment if you think there's something wrong with it!


(function($) {
  "use strict";
  // current page host
  var baseURI = window.location.host;
  // click event on body
  $("body").on("click", function(e) {
    // abandon if link already aborted or analytics is not available
    if (e.isDefaultPrevented() || typeof ga !== "function") return;
    // abandon if no active link or link within domain
    var link = $(e.target).closest("a");
    if (link.length != 1 || baseURI == link[0].host) return;
    var normalClick = !e.metaKey && !e.crtlKey && e.which == 1;
    var href = link[0].href;
    var opts = {'hitType': 'event','eventCategory': 'outbound',
      'eventAction': 'link','eventLabel': href
    }
    if (normalClick) {
     // cancel event and record outbound link
     { opts.hitCallback = loadPage };
     e.preventDefault();
     ga('send', opts);
     // redirect after one second if recording takes too long
     setTimeout(loadPage, 1000);
    } else {
     // Just send the event
     ga('send', opts);
    }
    // redirect to outbound page
    function loadPage() {
      document.location = href;
    }
  });
})(jQuery);

Tuesday, November 10, 2009

jQuery autocompleter

How can it be that well working (out of the box) autocompleters are so hard to come by? Well, this time I wanted one for jQuery, since I didn't want to introduce yet another javascript framework for this little thingy.
I found two different autocompleters under the jQuery project.

The first one didn't really work as ajaxy as I wanted. I couldn't get it to update the selection base while entering data. Instead it could only load a dataset when bound to the input then do some filtering itself.

The second looked much better but despite all the configuration options I couldn't get it to read simple JSON responses. Instead it seemed only to work with the default newline-separated-"formatted" datasets.

So. Should I fix one of them or continue looking? Well, the second had some eyecandy going so I jumped in to it. Didn't take long. Alot of cutting (since json becomes simpler than "my own fluffy format") and fiddling with the requests and voila, an exellent, simpler ajax autocompleter for jQuery. Source code GPL (beware, it's hacked for my needs!):

Tuesday, May 19, 2009

Sitemesh is the shit!

Once upon a time I was working on a project developing a ticket management application. Someone high up had decided that we should certain frameworks. Struts 1 was one of them. We made a fine ajax application with struts and prototype.js. Unfortunately I had to follow my love and quit before it was finished.
Since the app was ajax-driven, we didn't use any templating engine. But later on I learned about tiles. Tiles was the shit at the time. And since struts 1 means xml-hell the tiles-hell was alright. Then wildcards came with struts 2, and wildcards in tiles. And the hell got cooler.
Now, there is convention in Struts, and tiles doesn't have a convention nor is working very well anymore. So I must find something new.
Yesterday I found sitemesh. One of those things you don't find unless you know what you're looking for. And I love it. It's simple and does what it should. Just like you wan't it. Beats tiles any day!

Instead of graceful degradation I always try to build apps that doesn't degrade. So, all sites must be nice ajaxified and work just as well (but impression heavier) without javascript enabled. But how! Well here is where my search for sitemesh comes in. Basically what is needed is an action which renders a decorated full site when called without javascript and only the simple view for javascript calls and of course use the same files to do this (I work in AM, I want maintainability). On the road I've found two readworthy sites on the subject. rkcole has an excellent tutorial demonstrating how to decorate an already written views with sitemesh. raibledesigns has an explanation on exactly what I'm trying to do. I'm putting together small app with those concepts (and alot others as well). I'll get back when I'm not too ashamed of it...