JavaScript Ninja Fundamentals - Tracking Impressions

Posted at


➫➬ Some time saver advice, look for jQuery plugins that does few of those sub-tasks, embedded them as-is into your code.. 👌






⋰ Stuff You Want To Know... ⋱   👀



  • have scroll until the widget-container is in the viewport (the part of screen visible).

  • the tab + the window are currently focused.

  • mouse/ touch hover each widget container, each recommendation container, each image, each text description.

  • amount of time of "attention" by mouse hovering above element, or viewport time.

  • repeating /new user, by your 3rd-party cookie (your domain, for example widgets.kyler.com)

  • 👉 new awesome API






  • fingerprinting your users 🏃 - forever cookie (BAD BAD idea, but also good if just for playing with)

  • User browser capabilities (query modernizr, enumerate the browser API,...)

  • Open a hidden iframe with your domain, to create your cookies (3'rd party) on the page, this is a trick used by Google, to overcome browser limiting all 3'rd party cookies.

  • advanced: inject not a script, but a iframe, use onmessage api to communicate with your lite-script on the main page (optionally).

  • provide a <noscript></noscript> alternative which is just a url that returns a 1x1 pixel image, with all the relevant information you want to collect as argument, prepare a server-side service to collect the data.

  • make all your domains cross-domain friendly, so you could use plain Ajax instead of callbacks..

    • CrossDomain.xml And ClientAccessPolicy.xml - Extremely Permissive

    • And COR headers (by .htaccess for example)
      Header set   Access-Control-Allow-Origin        "*"
      Header set   Access-Control-Allow-Headers       "Accept, Accept-Charset, Accept-Encoding, Accept-Language, Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Expose-Headers, Access-Control-Max-Age, Access-Control-Request-Headers, Access-Control-Request-Method, Cache-Control, Connection, Content-Encoding, Content-Length, Content-Type, Cookie, Date, DNT, Expires, Host, If-Modified-Since, Keep-Alive, Origin, Pragma, Referer, Server, Set-Cookie, Transfer-Encoding, User-Agent, Vary, X-Content-Type-Options, X-CustomHeader, X-Modified, X-OTHER, X-PING, X-PINGOTHER, X-Powered-By, X-Requested-With"
      Header set   Access-Control-Expose-Headers      "Accept, Accept-Charset, Accept-Encoding, Accept-Language, Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Expose-Headers, Access-Control-Max-Age, Access-Control-Request-Headers, Access-Control-Request-Method, Cache-Control, Connection, Content-Encoding, Content-Length, Content-Type, Cookie, Date, DNT, Expires, Host, If-Modified-Since, Keep-Alive, Origin, Pragma, Referer, Server, Set-Cookie, Transfer-Encoding, User-Agent, Vary, X-Content-Type-Options, X-CustomHeader, X-Modified, X-OTHER, X-PING, X-PINGOTHER, X-Powered-By, X-Requested-With"
      Header set   Access-Control-Allow-Credentials   "true"





- the bonus of having cross-domain friendly domain is that you are now fully capable of sending reports using xhr (XMLHTTPRequest), web-sockets (advanced) or navigator.sendBeacon(prefered) not just scripts and images...
And.. here is a a nice open-source event and statistics collecting named piwik you can host on your own domain.

Hope You'll Find It Useful 😉


also answered on stackoverflow