I am writing some code to track user behavior on my website in order to improve conversion rate by determining how users are interacting with my website.
This requires me to send some events like "Leaving Website" to Google analytics inside the unbeforeunload handler. I have a few questions about the firing of this event.
Does it fire if user switches tabs without opening a new link?
Does it fire if a new tab is opened after users clicks a link with target="_blank" on my website?
Does it fire if a users visits some other page of my own website?
Does it fire on page reload?
Are there any other instances where it fires?
Thanks.
onbeforeunload will fire right before a webpage is 'unloaded' in the current tab (By navigating to a new page), or the current tab is closed. This means:
When a user navigates to a new page on or off your website.
When a user closes the tab or browser
When a user refreshes a page
When a user submits a form
To answer your questions
Does it fire if user switches tabs without opening a new link?
No
Does it fire if a new tab is opened after users clicks a link with target="_blank" on my website?
No
Does it fire if a users visits some other page of my own website?
Yes
Does it fire on page reload?
Yes
The current version of analytics.js should (Using sendBeacon()) dispatch events to GA as a POST request, which should be honoured even when closing tabs or the browser.
However, I wouldn't be so sure that 'Leaving website' is appropriate. Perhaps something more like 'Leaving page'.
Related
For a possibly familiar example, when you click a zoom link and chrome provides an "Open Zoom?" ok/cancel dialog, does the "Launching..." page in the background get any event or notification of the user's choice?
I am working on a similar page and would like to provide a different message, close the tab, or some other behavior depending on the user's choice to cancel vs open, is this information available to my "launching" page?
I want to call an ajax to other pages on the browser or tab close. When we reload tab or close tab it calls onbeforeUnload and onUnload events.
If I reload page either by pressing ctrl+r or by pressing enter in address bar it should reload page without any prompt and if I click close of browser or tab or I press ctrl+w keys it should prompt that "Changes you made might be lost" and if user click leave it should close tab and call an ajax, else it should stay on page.
Can anyone help me with this?
Thanks in advance
Most of the browsers intentionally block popups triggered in onbeforeunload, for known reasons.
But if you want to preserve users' data from erasing, you can engage window.localstorage property.
I want to fire the onbeforeunload event only when the tab or browser is closed and not upon refresh, link click and so on. I found a site where that works: https://checkout.deindeal.ch/
Steps to fire the event in Chrome:
Put something into the cart
Click on "Zur Kasse"
Close tab
onbeforeunload Message is shown and a popup opens. onbeforeunload events like refresh will not fire. I debugged their code, but could not find the place where they exclude those events or whatsoever.
Anyone out there who can find the correct place in the code?
Thanks!
For readers that want to use onbeforeunload,
The event onbeforeunload should be used for preventing user's data loss, like filled in forms and other data that are not saved and will be lost upon page refresh.
Using onbeforeunload to prevent a user from leaving your page is annoying and will not stop the user from leaving.
You can not detect a browser tab refresh button press, unless the user use a shortcut that you can detect with key press (like Ctrl+F5).
More info here :
javascript beforeunload detect refresh versus close
Old answer was removed in order not to mislead anyone (it was not working on nowadays browsers).
More stack overflow links related on onbeforeunload use:
How can i get the destination url in javascript onbeforeunload event?
How to prevent calling onbeforeunload when page refresh
Fire onbeforeunload confirm alert for external sites only
I remember that facebook did something similar,
Lets say you loaded facebook.com, browsed around a bit and then opened a new tab to read some news, meanwhile you had updates to your facebook feed, but they would not be automatically displayed when you switched back to the facebook tab, only when you switched to the facebook tab they would then fire the event for fetching the feed updates.
How is this done?
It can by done by detecting in javascript if the browser window gained focus.
Dynamic changes on the page or ajax calls are probably done only when the browser window has focus. More about detecting browser window focus in javascript:
Is there a way to detect if a browser window is not currently active?
I want to create a JS function that detect only browser close and tab close functionality.
I used this code from http://ykyuen.wordpress.com/2011/02/22/jquery-javascript-capture-the-browser-or-tab-closed-event/
I works for me but when i place a cursor on address and hit enter it goes to kill page method. I need only to show alert when tab or browser is closed.
I am afraid this is not possible.
You cannot really make a distinction. When the user navigates away from your page in any way, you get the same events (beforeunload, unload). You can do some tricks (like in the link posted) whether the user clicked any of the links on your page or submitted one of your forms, but you cannot really differentiate between the refresh button, back button, the user entering a new address, the user clicking a bookmark, close tab, close browser, etc.