Using PhantomJS to QA your analytics implementation

PhantomJS and Analytics

MeasureCamp London

19 Sep 2015

Spiders and robots

Until a few years ago spiders and bots could only read the HTML. They could not execute Javascript.

Spiders and robots

Until a few years ago spiders and bots could only read the HTML. They could not execute Javascript.

Now they can:

Spiders and robots

Until a few years ago spiders and bots could only read the HTML. They could not execute Javascript.

Now they can:• Access the DOM

Spiders and robots

Until a few years ago spiders and bots could only read the HTML. They could not execute Javascript.

Now they can:• Access the DOM• Interpret Javascript

Spiders and robots

Until a few years ago spiders and bots could only read the HTML. They could not execute Javascript.

Now they can:• Access the DOM• Interpret Javascript• Fill login forms

Just like you and me

Headless testing

Increasingly testing requires writing code

• Test Driven Development• Extreme Programming

An automated test goes through the pages, executes the relevant tests and produces a bug report

Introducing

Introducing

A scriptable WebKit chrome-less browser

Simulate user behaviour and more

PhantomJS can respond to different stages of the page load

• Page initialised• Page load start• Page load finished• Page closed• Page not found

Simulate user behaviour and more

PhantomJS can respond to HTTP requests

• Resource requested• Resource received• Resource error• HTTP status text and codes

Simulate user behaviour and more

PhantomJS can respond to alerts and messages

• Javascript alert sent• Javascript console sent• Javascript prompt

Simulate user behaviour and more

PhantomJS can also

• Scan and manipulate the DOM• Catch Javascript errors in the page analysed

Simulate user behaviour and more

PhantomJS can also

• Scan and manipulate the DOM• Catch Javascript errors in the page analysed

• It can do screenshots

With PhantomJS you can write a spider to audit your analytics

implementation

Continuously

http://www.phantomjs.org

PhantomJS 2 available!

// Set the start URLvar page = require("webpage").create();var url = "http://www.adobe.com";//var url = "http://www.webtrends.com";var links;

page.viewPortSize={ width: 1280, height: 800};page.clipRect={ top:0, left:0, width:1280, height:800}phantom.onError=function(){};page.onError=function(){};page.onLoadStarted=function(){};page.onResourceReceived=function(responseData){};

Source code

page.onResourceRequested=function(requestData,networkRequest){ if(requestData.url.match(/\/b\/ss\//)) console.log(requestData.url);//Adobe Analytics if(requestData.url.match(/dcs\.gif/)) console.log(requestData.url);//Webtrends};page.onLoadFinished=function(status){ if(status=="success"){ var links = page.evaluate(function(){ var a=document.createElement("a"); return [].map.call(document.querySelectorAll("a[href]"), function(link){ a.href=link.getAttribute("href"); return a.href; }); }); console.log(links.join("\n")); }else{ //log error }; //check next page};

Source code

page.open(url,function (status){ if(status=="success"){ }else{ //log error }; phantom.exit();});

Source code

Alban Gérômeemail: [email protected]: @albangerome

All pictures from this deck taken by myself in Barcelona