TIme the period between two actions on separate pages - javascript

I have 2 pages. On page-a.php a user clicks a button, which creates page-2.php and after completing some tasks on that second page the user click "Submit" button, at which point I would like to turn off the timer. I would like to record that time using Google Analytics which I think I can do with something like that:
// Feature detects Navigation Timing API support.
if (window.performance) {
// Gets the number of milliseconds since page load
// (and rounds the result since the value must be an integer).
var timeSincePageLoad = Math.round(performance.now());
// Sends the timing event to Google Analytics.
gtag('event', 'timing_complete', {
'name': 'load',
'value': timeSincePageLoad,
'event_category': 'JS Dependencies'
});
}
The question is how do I start that timer and keep it across pages?

Across pages you can use cookie storage. I think in your case you should save in cookie timestamp of first page view and timestamp of button "Submit" click on second page. Cookie expiration time - 30 min, for example. Then calculate time difference and send event with custom metric to GA triggered by click "Submit" just after calculating. In report you'll have time from view page one to click "Submit" within one session, if I understood correctly what do you need.

Related

clickNextButton not executing properly when previously clicking on the next button

I am building a survey in Qualtrics and use the method clickNextButton to automatically direct the participant to the next page with questions. I implemented the method in several following pages. Furthermore, participants are also able to click the next button themselves. The problem arises when they do so: if they click on the next button before the time limit, in the next page the method directs the participant earlier than given to the page after that one.
this.hideNextButton();
var that = this;
(function(){that.clickNextButton();}).delay(40);
For example, I set the time limit on 40 seconds on every page. On page 1, the participant manually clicks on the 'next button' after 10 seconds. What happens then is that on page 2, the participant is forwarded to page 3 after 28 seconds instead of 40. If he would have clicked on the 'next button' on page 1 after 5 seconds, he would have been forwarded on page 2 to page 3 after around 33 seconds. So it apparently depends on his click speed on page 1 when he will be directed on page 2. How can I prevent this?
Rather than using the timer for automatic redirection. call respective on click method when the question is answered so it will redirect to the respective page. and also reset the timer on every page redirection.
You need to clear the timeout if the respondent clicks the Next button themselves (delay is just a prototypejs implementation of setTimeout). Do it something like this:
Qualtrics.SurveyEngine.addOnReady(function() {
this.hideNextButton();
var that = this;
var timer = setTimeout(function() { that.clickNextButton(); },4000);
Qualtrics.SurveyEngine.addOnPageSubmit(function() { clearTimeout(timer); });
});

Automatically Refresh a IRR based on a Checkbox in Oracle APEX

I am using Oracle APEX 4.2.
Now, I have an Oracle APEX page that has an Interactive Report Region (IRR) and what I am attempting to do, is to add a automatic report refresh mechanism with a checkbox that will be used to activate/de-activate the report refresh.
Basically, when the page initially loads, I would like to default the checkbox to being checked (i.e. 'Y') which would initiate say an automatic 10 second refresh of the IRR, at the same time, maintaining the checkbox value of "checked" - perhaps this will need to be in a different region, so when the automatic refresh occurs, the checkbox continues to maintain state of "checked" and only the IRR refreshes, with any new rows/values that may have been added/changed.
At the same time, I would also like to de-activate the automatic 10 second IRR refresh by unchecking the checkbox, which would no longer perform a report refresh.
Hi Please copy below code and paste accorfingly.
Page attributes, Javascript, Function and Global Variable Declaration
var gtReloadPage;
"autorefresh" dynamic action
2 true actions:
Execute PLSQL code
null;
Page Items to Submit : P1_CHECK_BOX
Fire on page load: CHECKED
Execute javascript code
alert('ok - setting timeout');
gtReloadPage = setTimeout("location.reload(true);",8000);
Fire on page load: CHECKED
2 false actions:
Execute PLSQL code
null;
Page Items to Submit : P1_CHECK_BOX
Fire on page load: UNCHECKED
Execute javascript code
clearTimeout(gtReloadPage);
alert("Timeout has been removed!");
Fire on page load: UNCHECKED
I found this thread in the Oracle APEX forums that I must have missed relating to my post:
https://community.oracle.com/thread/2461953

history.go() how to get the index of a specific visited page url from window.history?

I have a web application that has button if click will go to a specific history. I heard that only IE supports history.go(url) but other browsers accept only numeric value. In my case the history.go() will go to specific page only e.g. http://localhost:54187/Products/Create. Even if users navigated to different page if the button is click it still goes to "create" page of the history. I need history.go since it's equivalent to browser back and forward. I cannot use window.location or location.href since my application requires that filled in data are still there exactly what history.go does. If the user loads a total of 26 pages how will I know which of these 26 is the create page so that I can history.go(createIndex)? window.history.length gives 26 but it doesn't expose the url.
Please help how can I resolve my problem.
JavaScript and HTML
<script type="text/javascript">
$(document).ready(function () {
$('#btnGoToCreate').click(function () {
var createIndex = //how to know what's the index of
//http://localhost:54187/Products/Create from window.history?
history.go(createIndex);
});
});
</script>
<input type="button" value="Go to Last Entry" id="btnGoToCreate" />
You can't read the history items because of security/privacy reasons. You can only access the previous URL, which can be read using the following:
document.referrer
You can manipulate the browser history though, but that also doesn't allow you to go to the specific page in the user's history.
Add a counter variable to save the index. This counter could be stored in cookie/sessionStorage/localStorage.
When the user navigates to another page, counter self plus 1, finally you could use window.history.go(counter) when the user clicks the button.
BTW, counter could self plus 1 when user refresh the page, to avoid this issue from happening, you need to pass a timestamp to the next page, use ?timestamp=1231232123, and save in cookie/sessionStorage/localStorage, if the timestamp in the url is different to the one save in cookie/sessionStorage/localStorage, then the counter could plus 1.
This is my solution in my project, hope can help you.

How to track events before page redirect with google analytics?

I use GA's trackEvent to record user's click event on search autocomplete of my site.
When user click on item of autocomplete, I record two event, and then page redirect to the result page.
But the problem is: the amount of the two action "click" and "view" is not equal, the amount of "click" > the amount of "view".
I see the two request are sent in firebug, but they are both canceled because the page redirect. Even though they are canceled, I can see the result in GA.I just can't understand why they are not equal? The later one failed sometimes?
Here is the code part:
//trackEvent just use _gaq.push("trackEvent", xxx)
trackEvent("search", "click");
trackEvent("search", "view");
window.location.href = des;
Here's the answer to your question:
Google Analytics - Setting the Hit Callback

How to save an option for background.html in popup?

I have a problem, what i cant solve yet. I have a popup page with a menu, and tabs, and there is a settings tab. On settings tab, i save some item to localstorage, one of them is notification_time for a desktop notification.
Note: i have no options page!
My extension has this popup window and a background page, its function is to alert user with a desktop notification. I show notification in every 5,10,30 minutes, 1,2 hours etc. And this time should be chooseable on popup pages's options menu. The problem is, if 5 minutes is saved, and when i update to 10 minutes for example, than background.html is not updating himself! I rewrited code almost 20 times, but couldnt find solution. Heres a code sample,and a printscreen to get clear about my problem.
popup:
$("#save_settings").click(function(){
var bgp = chrome.extension.getBackgroundPage();
localStorage.setItem("notifynumber",$("#notifynumber").val());
if($("#notify").attr('checked')){
localStorage.setItem('chbox','true');
} else {
localStorage.setItem('chbox','false');
}
if($("#notif_time_select :selected").val()!="default"){
bgp.setTime(parseInt($("#notif_time_select :selected").val()));
}
if($("#org_select :selected").val()!="default"){
localStorage.setItem('org',$("#org_select :selected").val().replace(/%20/g," "));
}
});
Note: save_settings is a button, on the tab there is a checkbox (if checked then notifications are allowed, else diabled). There are two html select tags, one for choosing some data (org = organisation), and one, for selecting time. "#notif_time_select" is the html select tag, where i choose 5,10,30 minutes etc...
So, whenever i click save button, i save checkbox state to localstorage,and i call one function from background page, to save time.
:bgp.setTime(parseInt($("#notif_time_select :selected").val()));
background page:
for saving time i use function setTime:
var time = 300000; // default
function setTime(time){
this.time=time;
console.log("time set to: "+this.time);
}
after, i use setInterval to show notification periodically
setInterval(function(){
howmanyOnline("notify",function(data){
if(data>localStorage.getItem("notifynumber")){
if (!window.webkitNotifications) { // check browser support
alert('Sorry , your browser does not support desktop notifications.');
}
notifyUser(data); // create the notification
}
if(localStorage.getItem('tweet')=='true'){
if(data>localStorage.getItem("notifynumber")){
sendTweet(data,localStorage.getItem('org'),localStorage.getItem('ck'),localStorage.getItem('cs'),localStorage.getItem('at'),localStorage.getItem('ats'));
}
}
});
},time);
The code inside setInterval works fine, the only problem is,that
},time);
is not updating well. If i change settings to show notifications in every 10 minutes, it stays on 5 minute. The only way is to restart the whole extension. How could i update setInterval's frequency without restarting the whole extension? Thanks Jim
What if i save notif_time to localStorage too, and in background, i set up a listener, to listen for localStorage changes. Is there a way to listen for a particular localStorage item changes?!
Right now, setInterval only runs once, when your application loads. If you want intervals to fire at a new time interval, you should use clearInterval and then make a new call to setInterval.
// set a new time, wipe out the old interval, and set a new interval
function setTime(t) {
window.time = t;
clearInterval(notifInterval);
notifInterval = setInterval(makeNotification, time);
}
// set first interval
notifInterval = setInterval(makeNotification, time);
function makeNotification() {
// do what you need to make a notification
}
Here, notifInterval is a reference to the interval, returned by setInterval, that is used to clear it.
The source code in your question is not completed, but I guess you called setInterval() and then modified window.time in the background page.
Your window.time is not an object but a number value, and setInterval() can't "see" changes of window.time after invocation.
Try this:
function onTimeout() {
// do your notification.
setTimeout(onTimeout, time);
}
setTimeout(onTimeout, time);

Categories

Resources