JS ADK challenge
Hi,
We need to measure on a web application the complete time it takes since a user selects a value from a select box on a web page, which then triggers a page load, until the end of the page load. Looking at the samples of the JS, I thought the correct way should be as follows:
- hook into the onchange event of the first page and enterAction
- hook into the onLoad event of the second page and leaveAction.
- To make sure it was the same action the action value is passed in cookie.
Here is a short example of what we've tried doing:
This is the code for the first page (page1.html):
<html>
<head>
<title>dynaTrace JavaScript ADK</title>
<script type="text/javascript" src="../dtagentApi.js"></script>
<script type="text/javascript">
function performAction(){
dynaTrace.setAutomaticActionDetection(false);
var mySelect=document.getElementById('MySelect');
var sel=mySelect.selectedIndex;
var value=mySelect.options[sel].value;
var actionName = dynaTrace.enterAction(value,'click');
top.location.href='page2.html';
document.cookie = document.cookie + "customDynatraceAction=" + actionName + ";";
}
</script>
</head>
<body>
When Clicked it will go to page2
<div>
<select name="MySelect" id="MySelect" onchange="javascript:performAction()">
<option value="Gil">Gil</option>
<option value="Hagit">Hagit</option>
</select>
<br/>
<br/>
<a href="../index.html">Back</a>
</body>
</html>
And this is for page2:
<html>
<head>
<title>dynaTrace JavaScript ADK</title>
<script type="text/javascript" src="../dtagentApi.js"></script>
<script type="text/javascript">
function leaveAction(){
dynaTrace.setAutomaticActionDetection(false);
dynatrace.reportEvent("Started page 2");
dynatraceCustomAction = "";
match = document.cookie.match(new RegExp(name + '=([^;]+)'));
if (match) dynatraceCustomAction = match[1];
if (dynatraceCustomAction.length > 0 ) {
dynaTrace.leaveAction(dynatraceCustomAction);
}
else
{
dynatrace.reportEvent("No Cookie Value Found");
}
dynaTrace.setAutomaticActionDetection(true);
}
</script>
<link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
<link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<script src="//jqueryui.com/jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="//jqueryui.com/jquery-wp-content/themes/jquery/js/jquery-1.11.2.min.js"><\/script>')</script>
<script src="//jqueryui.com/jquery-wp-content/themes/jquery/js/plugins.js"></script>
<script src="//jqueryui.com/jquery-wp-content/themes/jquery/js/main.js"></script>
<script src="//use.typekit.net/wde1aof.js"></script>
</head>
<body onload="javascript:leaveAction">
PAGE 2
<div>
<a href="page1.html">Go Back</a>
</div>
<br/>
<br/>
</body>
</html>
Unfortunately, this is not workng in the way that
- I don't see the event being reported.
- the click event on the value is very short and does not reflect the load time of page2.
Can anyone help ?
Thanks,
Gil.
Hi Gil,
isn't JS agent detecting the click and page load automatically in your case?
When I take your pages and remove almost all JS code except the part where page2.html is loaded, I get a perfect click on ... action with a linked page load.
-Clemens
