Andre Goncalves

Tracking form submit events with Google Analytics.

2012-10-26T00:00:00+01:00

Questionform.com payment pages are hosted in Paypal and Fastspring, and I’ve been using Google Analytics events to track outbound links to both payment providers. The purpose was to get an idea of the drop-out rate for each provider.

After a few weeks, I noticed the data coming in didn’t seem correct, Google Analytics was missing a huge percentage of submit actions. It turns out, my tracking code was incorrect:

There is not enough time for analytics to send the data to the backend server, the browser will (sometimes) navigate away from the page before the event is registered.

The solution is actually very simple, just add a fraction of a second delay (100ms) before submitting the form:

From my experience this mostly solves the problem (does not guarantee 100% fidelity), and the delay is too small to be annoying to the user.

Follow me @andregoncalves / google+
questionform.com, beautiful and powerful web forms and surveys.

Chrome Web Store Install Notification

2011-07-18T00:00:00+01:00

Mappeo.net, a geographic video search app, is one of my lab projects and I use it to try new techniques and technologies. Recently and to familiarize myself with the Google Chrome Web Store publishing process, I built a packaged version of mappeo and published on the Web Store.

Many Chrome Web Store apps are also available outside the store (like mappeo), and like me, you may want to notify visiting Chrome users that an optimized Chrome app is available.
Inspired by Jolicloud and Paul Kinlan’s badgemator, I created a javascript library to display an animated notification like the one below.

The install button redirects the user to the Web Store install page for your app.
There’s also a nice CSS3 animation, visit mappeo.net with Chrome to check it out.

The window.chrome.app object is very handy to make sure we’re not showing the notification if the app is already running. Also, to prevent the notification bar reappearing for returning visitors, a cookie is used to save state.

The library is small, has no dependencies and you can download it from the github repository (MIT license).

@andregoncalves

WWDC 2011 Videos

2011-06-24T00:00:00+01:00

If like me you were unable to attend this year Apple’s WWDC, then there is hope for you.
Less than two weeks after WWDC, Apple has uploaded the videos from the sessions, and they are now available on iTunes for registered developers.

https://developer.apple.com/videos/wwdc/2011/

Topics include the new IOS 5 and upcoming iCloud and OS X Lion.

Inaugural: Twitter streaming with node.js and HTML5 WebSockets

2009-12-29T00:00:00+00:00

The idea of having a full javascript stack with code reuse and the removal of language impedance between client and server has always interested me.

It seemed that a full javascript stack was an utopia, waiting in the distant future, but not anymore. Now there are a few powerful javascript solutions for the server and with CouchDB I can aim for a full javascript stack.

One of those solutions is node.js. It’s an high performance non-blocking event driven framework. It is brilliantly designed, it feels right, and the performance is impressive to say the least. I’ve not been so excited with a new technology since Rails appeared on my radar a few years ago.

If you’re unfamiliar with it, go watch Ryan Dahl presentation at JSConf.

WebSockets and Twitter Real Time Streaming

Yesterday I stumbled upon Ruben Fonseca excellent blog post on a Ruby Twitter Streaming example using AMQP, EventMachine and HTML5 WebSockets (basically it streams real time tweets to the browser without the use of polling).
Ruben’s experiment was inspired by Ilya Grigorik post on WebSockets and Ruby.

I decided to follow on Ruben’s post and do the exact same thing with node.js, only IMO much simpler. Ruben’s architecture was based on the following:

Twitter Stream → Filter → RabbitMQ → AMQP → Eventmachine → WebSocket → Browser

The node.js version:

Twitter Stream → node.js → WebSocket → HTML5 Browser

Let’s look at the code:

The Server

Notice how everything looks familiar, and at first glance it seems we’re writing typical client side javascript.
I find it to be very elegant and simple solution, and with a lot less dependencies. The javascript style callbacks and closures are well suited for an evented non-blocking framework like node.js.

I’m using Jacek Becela very cool minimal web sockets library that creates the websocket server with a similar interface to the native tcp.createServer.

The Client

Here for comparison sake (and because I’m lazy) I copied Ruben’s client side script.

You can check out the project and installation instructions on the github repo.

How to run it yourself

Download and install node.js (instructions here)
Download the project from github.
Start the server: node server.js <twitter_username> <twitter_password>
Open index.html with a WebSocket compatible browser (Chrome or Webkit nightly)

Thanks to Lourens Naudé (@methodmissing) and Pedro Teixeira (@pedrogteixeira) for reading drafts of this.