Manny Sahagun bio photo

Manny Sahagun

Manny is a software engineer on the Ad-Client Engineering team at Conversant

Email

Cross browser compatibility for JavaScript is an issue all front end developers have to face. AdLibs eliminates the legwork for developers by providing a library of methods that can safely be executed across all browsers.

What is AdLibs?

AdLibs serves as a Swiss Army knife for front end development. It is an open source collection of CommonJS modules containing methods that allow users to execute JavaScript across all browsers. Its modules range from getting information about the user’s environment to providing it’s own dom methods such as domReady and appendHtml.

Small differences in features between browsers can have a great impact on how your site performs. Sites like caniuse.com allow developers to determine each browser’s featuresets and thus develop their script accordingly. AdLibs utilizes these browser-specific features to determine the user’s environment and safely perform a task across all browsers.

What does it do?

AdLibs.js uses feature detection to return information about the client’s environment, including browser and OS data. AdLibs also allows the user to perform front end tasks such as XMLHttp and JSONP requests, url parsing, and performance measurement using high performance navigation apis, when available.

Detection Modules

For website publishers, user agents should be used to detect how a user intends to interact with and experience their site. Almost every browser detection script available today takes this into account and provides detection based on these user and application changeable strings. This poses a problem for reliable market share analysis tools and troubleshooting. The AdLibs library utilizes feature API detection as a mechanism for detecting the true device or webview version an ad or script is embedded within. This functionality is best when used in a clean iframe window where native methods have not been munged by polyfill functionality. Knowing how polyfill libraries can affect a page, AdLibs is both dependency free and uses no polyfills, leaving the embedding page unaffected.

Feature detection is key in distinguishing between browser versions. For example, the navigator.permissions property is only available after Chrome 43 and window.indexedDB was only available on Safari after 7.1. As a tool primarily used when serving ads, AdLibs is also able to detect the context in which an ad is served, such as frame depth and ad size. It’s detection modules include:

  • Browser and OS detection
  • Environment detection - detects environment context (e.g. screen size, flash version, etc.)
  • Mraid - can return the version of MRAID as well as execute a given function when mraid is ready
  • Safeframe - returns Safeframe metrics (specVersion, getInfo support, etc.)
var browser = require('adlibs/lib/detect/browser');
var environment = require('adlibs/lib/detect/environment');
var mraid = require('adlibs/lib/detect/mraid');
var safeframe = require('adlibs/detect/safeframe');

// returns detected data
var details = browser.detect();
var envDetails = environment.detect();

// outputs the OS name and version (e.g. Windows8, iOS9, etc.)
console.log(details.os.name + details.os.version);

// outputs the browser's name and version
console.log(details.name + details.version);

// outputs the version of Flash, MRAID, and Safeframe, respectively
console.log(envDetails.flash);
console.log(mraid.getVersion());
console.log(safeframe.getVersion());

// outputs the current ad's frame depth
console.log(envDetails.ad_depth);

Client-side Operations

AdLibs uses its feature detection to safely execute browser-side functions. For example, XMLHttpRequest isn’t supported on all browsers. Specifically, older versions of Internet Explorer use ActiveXObjects to wrap HTTP requests. AdLibs contains its own XMLHTTPRequest wrapper to account for the difference in behavior between browsers. Other supported operations include jsonp requests, domReady, and appendHtml.

var xhr = require('adlibs/lib/xhr');
var domReady = require('adlibs/lib/dom/domReady');

// performs GET request
var resp = xhr({ url: 'www.example.com/api' }).send();

// executes the cb when the DOM is ready
domReady(cb, window);

Measure Performance

AdLibs also allows developers to measure the performance of their script. AdLibs is able to build a report from the currently available page performance data. For optimal results, make sure the debug panel is closed prior to running any performance test and open it to view the results in the console afterward. There are performance penalties on all scripts running when the inspector panels of browsers are open during script execution.

var perf = require('adlibs/lib/measurePerformance').factory();

/* ...some script executes */

// outputs the duration since script start
console.log(perf.now() - perf.startTime);

// outputs report based on performance events such as navigationStart, unloadStart, domLoading, etc.
console.log(perf.report());

Why the funky name?

Aside from sounding like mad libs, AdLibs is a common library used by the ad-client team at Conversant to retrieve market share and browser environment and feature support information for use in light weight, high performance scripts. We use the tool to return info about the user’s device and context of the ad.

For more information

Conversant AdLibs is on github