Measuring or AB-Testing Single Page Applications (Angular apps)

If you website contains Angular apps which do not have URL fragments and you want to measure form steps or AB-test this application, what to do?

Modern browsers provide a nice function called MutationObserver() that watches the DOM for you for changes.

Maybe this script will help you determine when the application is changing itself.
You can run this javascript snippet in your console and it will display detected changes and log these in the console.

$( document ).ready(function() { 	// jQuery required
	console.log("Start watching changes");
	var target = document.body;
	var changeCount = 0;

	// config object
	var config = {
		childList: true,
		subtree: true
	};

	// subscriber function
	window.changeSeen = true;
	function subscriber(mutations) {
		for(i=0;i<mutations.length;i++){
			// handle mutations here
			mutation = mutations[i];
			console.log("ChangeSeen: " + changeSeen);
			if(window.changeSeen){
			  changeCount++;
				console.log("Something changed : " + changeCount);
				window.changeSeen = false;
				// If multiple changes happen at once see it as one within half a second
				setTimeout("window.changeSeen = true;console.log('Reset changeSeen: ' + window.changeSeen)",500); 
				// Place your code for changes here! 
				//setTimeout("console.log('Wait for elements to be rendered by the change');",100);
			}
			break;
		};
	}

	// instantiating observer
	var observer = new MutationObserver(subscriber);

	// observing target
	observer.observe(target, config);
});

Leave a Reply

Your email address will not be published. Required fields are marked *