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
Hi Clemens,
Since it included some more steps inside, it broke up. Using the ADK with "enableAutomaticDetection" to false, entering the action and then leaving it on the second page solved the problem.
Thanks.
Gil.
Community Member of the Month
September 2018
Announcing Dynatrace's Community Member of the Month for September 2018, Muthu P.! Click here to read more! Employee Member of the Month
September 2018
Announcing Dynatrace's Employee Member of the Month for September 2018, Kris Z.! Click here to read more! 