SearchGazer

For SearchGazer to perform eye tracking you need to add the searchgazer.js file as a script in your search engine:

 /* WebGazer.js library */
<script src="searchgazer.js" type="text/javascript" >

Be aware that when you do local development and you might need to run locally a simple http server that supports the https protocol.

Once the script is included, the webgazer object is introduced into the global namespace. webgazer has methods for controlling the operation of WebGazer.js allowing us to start and stop it, add callbacks, or change out modules. The two most important methods on webgazer are webgazer.begin() and webgazer.setGazeListener(). webgazer.begin() starts the data collection that enables the predictions, so it's important to call this early on. Once webgazer.begin() has been called, WebGazer.js is ready to start giving predictions. webgazer.setGazeListener() is a convenient way to access these predictions. This method invokes a callback you provide every few milliseconds to provide the current gaze location of a user. If you don't need constant access to this data stream, you may alternatively call webgazer.getCurrentPrediction() which will give you a prediction at the moment when it is called.

webgazer.setGazeListener(function(data, elapsedTime) {
    if (data == null) {
        return;
    }
    var xprediction = data.x; //these x coordinates are relative to the viewport
    var yprediction = data.y; //these y coordinates are relative to the viewport
    console.log(elapsedTime); //elapsed time is based on time since begin was called
}).begin();
                    

Here is the alternate method of getting predictions where you can request a gaze prediction as needed.

var prediction = webgazer.getCurrentPrediction();
if (prediction) {
    var x = prediction.x;
    var y = prediction.y;
}
                    

Saving Data Between Sessions

WebGazer.js can save and restore the training data between browser sessions by storing data to localstorage. This occurs automatically when end() is called. If you want each user session to be independent make sure that you do not call the end() function.

webgazer.end()

Pause and Resume

It may be necessary to pause the data collection and predictions of WebGazer.js for performance reasons.

webgazer.pause(); //WebGazer.js is now paused, no data will be collected and the gaze callback will not be executed
webgazer.resume(); //data collection resumes, gaze callback will be called again
                    

Util and Params

We provide some useful functions and objects in webgazer.util. The webgazer.params object also contains some useful parameters to tweak to control video fidelity (trades off speed and accuracy) and sample rate for mouse movements.

webgazer.util.bound(prediction);
prediction.x; //now always in the bounds of the viewport
prediction.y; //now always in the bounds of the viewport
                    

Detecting Areas Of Interesting in Search Engine

When a searcher issues a query, SearchGazer can detect which areas of interest (organic results, related searches, ads, etc.) the searcher is examining in real time. SearchGazer currently supports detection of DOM elements for Bing and Google. Simply call the functions findDomElementBing(x,y) and findDomElementGoogle(x,y) respectively, which given a pair of coordinates within the search engine page will return the corresponding DOM element.

Google Chrome 47+

Microsoft Edge 13+

Mozilla Firefox 44+

Opera 36+

Bing

Google

SearchGazer

Download SearchGazer

Bing

Google

SearchGazer on Bing or Google

See how SearchGazer works on Bing and Google. The only thing you need to do is make sure your face is captured correctly and on the next page click the center of a black circle that will appear in different locations within your screen. Once you have successfully clicked the target for 9 times you can choose to see SearchGazer's predictions in action on a Bing or Google demo. The areas of interest that correspond to the location of the predicted gaze will be logged in the console.

Try Live!

Alexandra Papoutsaki

James Laskey

Jeff Huang