I have some js code to record outbound link click events in Google Analytics, which effectively adds a delay to the click event before allowing the normal click behaviour to go through.
This applies to both http as well as tel: links. I trigger a specific "phone number has been clicked" event in GA so we know the user intended to make a call (whether or not they go through with it is a different issue entirely).
The number of events being tracked into GA seems strangely low and with anecdotal testing, many deliberately triggered events don't seem to show up in GA (I.e. I sit on my phone and press the link a few times).
I wonder why this could be.
Does iOS do something weird to immediately halt or bypass my javascript when a tel: link is clicked? If not, what could explain the lack of event tracking going on here?
For context, I'm talking about tracking the click event before the call prompt comes up:
i had the same issue (working with jquery) and found out that it occurs when i tried to recognize the tap with jquery click handler.
i found a solution with adding
jquery.on("click touchstart", function(e){...});
now it works fine again on desktop and mobile/touch browsers (tested on newer ios and android devices) and the call-prompt is displayed immediately.
Related
In past mobile apps that I developed, I found that the click event did not work as expected in all devices (for example: in games in which the user had to tap/click quickly on the screen, instead of triggering the click event, the double click was triggered), and using touchstart gave better results for what I wanted.
Since then, I started listening to the touchstart event instead of click; but testing on Chrome, I got the following warning message in the JS console:
Performing operations that require explicit user interaction on touchstart events is deprecated and will be removed in M54, around October 2016. See https://www.chromestatus.com/features/5649871251963904 for more details.
I visited the linked page (and the links inside it) and it seems that this new behavior is to avoid certain unwanted actions, and in particular to avoid third-party iframes or ads (my app has none) from opening pop-ups. I tried changing the event to touchend (as one of the links stated "The touchend event will continue to behave as before"), but got a similar warning message.
And my questions:
Is this something that only affects Chrome, or will it affect my web apps (with Cordova/Phonegap) for Android and iOS?
What event should I use to replace touchstart and avoid the issues I faced in the past? I could go back to click, but fast clicking/tapping would still be a problem.
When creating Cordova app, you target different OS versions, Android 5 and up has auto updating webview based on Chromium, so that problem will probably affect your apps.
But since Chrome 32, when using this viewport <meta name="viewport" content="width=device-width">, the click delay should go away (see this article), so you could safely use click event. Latest webviews on android 5 and 6 are based on Chromium 52.
You can also use fastclick library that will "fix" the click delay only where it's necessary
I have built a website that uses some simple JavaScript. I make use of many events throughout the website such as the input and submit event for validating and processing a contact form, the focus event for some form-related things and a dynamically-created tab interface, etc. I register all of these handlers using element.addEventListener("event", handler).
My JavaScript works wonderfully everywhere that I have been able to test (Firefox and Chrome on Ubuntu; Firefox and Chrome on Android), except for on iOS devices (regardless of what browser is used), where it seems that very few events are being fired.
It has been difficult for me to debug what the issue is on iOS devices because I do not have an OSX computer to connect an iOS device to so that I can use the remote console. I have come to the conclusion that the events are not firing for a few reasons:
The contact form on the website is being submitted even though I make a call to event.preventDefault() in the form's submit event handler, and do not explicitly submit the form anywhere after that.
I have tried catching any errors and displaying them in an alert like so:
window.onerror(function(err) { alert(err) })
to no avail (i.e. no errors were caught).
I have adapted all my functions to make use of only the click event, and then they work perfectly!
The last point is a possible solution to the problem, but I think it is bad practice to adapt all my work to one specific platform and rely only on a single event when there are so many purpose-built events that can be used and that are supposedly supported by iOS in the first place.
Why are so many events not being fired on iOS devices?
The problem was actually that I had made a const declaration in strict mode, which is, according to caniuse, not recognized in the current versions of both Safari and iOS Safari (9.1 and 9.3, respectively, as of writing).
I have better documented this problem in another question and answer.
I am developing a custom translation extension for GMail in chrome and need to trigger the content script when the user clicks on an email in his inbox.
Since GMail uses AJAX, I decided to use the DOMSubTreeModified event. My extension works, but it seems via console logging that the function that sits the translate keeps getting executed constantly, even though the email text remains the same.
DOMContentLoaded does not trigger. Can anyone suggest any alternative I can use? I guess a timer or something in GMail constantly updates the page and makes minor adjustments. I had even narrowed the element on which the event is generated.
It appears that you should be using gmail-specific events to know when a new email is loaded, not generic DOM events. This add-on is not official Google code, but if you look at how it works, you could probably discover how to observe all sorts of gmail events or you could just use it to solve your problems.
I am having an issue where dynamically-created links are working on all devices I have tested (in all desktop browsers, on my iPhone, on my iPad, and on my Samsung Galaxy Tablets Chrome Browser), but will not work when clicked on Android phones (I've tested on three Android phones running Chrome, sorry don't have the Chrome versions, but one phone is really new and the others are 1-2 years old at most).
I am dynamically-creating the links to add items to a cart (inside of a larger dynamically-created entity) in a loop.
The link in question is constructed basically like this:
var itemHTML = "";
...
itemHtml += '...<span>\n'
...
Where gAddLink is just a standard URL. I am then inserting that itemHTML (in addition to other HTML) onto the page dynamically using document.write().
Since this is being dynamically created on page load (for reasons out of scope for this question, but it is a necessity), I know I have to have a click handler set up as so:
$('.elementToInsertTo').on('click', '.add2CartLink', function() { ... });
Where '.elementToInsertTo' is the parent element that is NOT dynamically created, and is present on the page at page load. There are multiple of these parents, hence why I can't use an element ID. Don't think it makes a difference though.
Again, I can confirm that the function call in this click listener works everywhere except Android phones (as far as I can tell). Any idea why this may be? I've read StackOverflow pages all day, but nothing seems related to this. I've read a bunch about JS closures (which may still be the issue) and the like, but none of that seems to be relevant since the link click listener is working on most all devices I have tested on (even the Android tablet's Chrome browser, which is the part that really is confusing to me).
If you happen to have seen this issue before or have any idea why this may be happening, please write it out before reading the next part, so as not to confuse or bias you.
Ok, now to the part that is even more mind-boggling, though I hope this only helps figure this out and doesn't confuse the situation.. I connected one of the phones to my computer with a USB and did some remote debugging using Chrome developer tools as described here (https://developers.google.com/chrome-developer-tools/docs/remote-debugging). I could confirm there that the click listeners were not working (they weren't being triggered)... (and now here comes the crazy part) UNTIL I did some element inspection on the link (i.e. the link was highlighted on my phone as I was inspecting the DOM-element in my browser, again using Chrome dev tools) and then clicked the link. This made it so that the click listener worked! What?? To debug further, if I inspected any of the DOM elements on the page and clicked the link, the click listener worked. If I changed tabs away from the dev tools tab, or simply stopped inspecting the DOM elements in Chrome Dev tools, the link click listener no longer worked. I really don't know what to make of this, but I'm hoping this part of information narrows down what may be going on with the Android phones and the click listeners.
Happy to try to provide any other info I can, though I am without the Android phone for testing at the moment.
Thanks!
Tap was still needed (thanks for both suggestions), but the issue was with a 3rd party JS library stopPropogation() call. Apparently this only happened on Android phones, but regardless, after removing the line, the click (on computers) and tap (on mobile) now works everywhere. Thanks!
As far as I know all popular web browsers execute the onclick attribute of an anchor link first, then follow the path specified by the href attribute.
The problem here is that the onclick attribute only gets called when clicking with the left mousebutton (without pressing ctrl or shift for a new tab or window) or when pressing enter on your keyboard while the tabIndex is set to the link you want to follow.
But there are many other ways of following a link than just those two.
Ctrl + click
shift + click
rightmousebutton + open
rightmousebutton + new tab
drag & drop link to address bar
and so on...
My client uses onclick for conversion statistics. Which seems heavily unreliable.
My question:
What percentage of hyperlinks are being followed without activating their onclick attribute?
All estimates are highly appreciated. I'm completely lost; I think it can be any number...
Aside from those of us who habitually middle-click/ctrl-click to open links in new tabs, there's another major cause of onClick failure: NoScript and similar plugins which allow javascript to run only when it comes from whitelisted sites. If your domain isn't on my whitelist, then your onClick won't run, no matter how I trigger the link.
If you want reliable stats on which pages people are visiting, there's only one bulletproof source for that: The web server logs.
The logs are probably also your best bet for tracking how people move throughout the site, but they're not entirely reliable, as some privacy-paranoid users will falsify their referer headers or just not send them at all, but I expect that to be far less common than disabling javascript.
It depends. If the audience is more technically inclined, I'd assume that using alternative ways of following a link would be more common. All in all, though, even a lot of technical people seem to be unaware of things like clicking the middle mouse button to open or close a tab. If that's the case with technical people, I wouldn't be surprised if almost no one in the general audience used it.
The links are all exit-links. I was thinking of a PHP script that does the counting of clicks.
Though this is not the subject of your question, you might want to have a look at Google Analytics then. They are The Master in tracking you. They track right-clicks (even when not actually selecting "open in new window" after that, which they obviously cannot know), which will yield Ajax calls to http://www.google.com/url.
To see Analytics in action: with Adblock and the like disabled, search something on google.com and open up Live HTTP Headers in Firefox (or your Firebug Net tab in Firefox, or WebKit's Resources pane in Safari or Chrome, sorted by time). Next, click, right-click, shift-click or control-click any search result (preferably a result that does not require a lot of HTTP traffic by itself, or is in your browser's cache).
the onclick attribute only gets called when clicking with the left
mousebutton (without pressing ctrl or shift for a new tab or window)
Not entirely true. I created a quick test at JS Bin, to show that modifier keys do not affect the onclick event. (For right-click, one should use the oncontextmenu event.)
What are you doing in your onclick handler that you are worried about not working? e.g. if you have a regular link to a page... and the onclick just opens that same page in a pre-sized popup for user convenience in a web application... then there's likely no issue (e.g. CTRL+Click) still opens the page, it just gets opened in a new tab)
If you are just trying to "log" every click in the site/application for tracking purposes then maybe you can hook into the onmousedown/up or focus/blur events instead/also.