UI Testing on Hype

Feature Requests
1

Hi there folks…

One of the key points when doing UX/UI is the actual testing of your prototypes, wich i do a lot on Hype, but i was looking for easier ways to measure the user interactions… so i wonder, is there a more automated way to make Hype to log the touch events on buttons and UI areas? i mean, other than manually adding every single tap over and over again…

Maybe this will be the real killer feature Hype needs to kick the butt on Adobe XD - Muse and Edge just get kicked out by itself - and make this amazing software better that Animate…

1 Like
2

Not presently, but this is a good feature request that I’d like to potentially add as part of Export Scripts automation.

Are there current frameworks/code you’re using that does the measurements/recording right now?

3

Actually i am using the google tag/analytics combo… but sometimes adding the code by hand is somewhat tiresome so maybe i tough we can use the event or objects tags and a JS function to add it automatically and saving hours of work… will be amazing actually™

4

maybe using this tag: onclick="__gaTracker(‘send’, ‘event’, ‘buttons’, ‘click’, ‘main_action_btn’);" just need to know how to add the code

5

It depends on the granularity of what you want tracked, but one method would be to assign a class name to the element and then potentially a Unique Element ID to further refine the arguments sent. Then you could have a single On Scene Load handler (either in the document or as an external event handler) that would iterate over a matching class name and add the tracker to those elements. Here’s an example that could be added to the head html:

<script>

function setupClickHandlers(hypeDocument, element, event) {
	var trackableButtons = document.getElementsByClassName("trackable_button");
	for(var i = 0; i < trackableButtons.length; i++) {
		var buttonElement = trackableButtons[i];
	
		var listenerCallback = function (event) {
			// not sure if you need/want to do something with the actual event element
			// also could use buttonElement.id for more specifics on what was pressed
			__gaTracker('send', 'event', 'buttons', 'click', 'main_action_btn');
		}
	
		buttonElement.addEventListener("click", listenerCallback);
	}
}

if("HYPE_eventListeners" in window === false) {
	window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":setupClickHandlers});

</script>

You’d need to adjust the class name used and I’m also not sure about what the correct arguments to supply to __gaTracker are, so you’d need to modify those probably.

1 Like