I have a basic HTML website (with some javascript) using a simple anchor tag to download a file like so:
Mexml Samples 1.0
In order to track the number of downloads, I have an onclick handler that passes an event to Google Analytics like so:
$('#mybutton').click(function(e){ga('send','event','Download','MexmlSample','MexmlSample-1.0');});
This works as expected when downloading the file using Chrome on OS X, and IE on Windows 7. The file downloads and I see the event in my GA account.
When I test it in Safari 8 on Yosemite, the file does download, but GA only rarely sees the event. And of course I get the dreaded Failed to load resource: Frame load interrupted in the Safari error console.
I assume that I get the GA event sometimes because of a race condition between when Safari interrupts the action and when the GA code fires.
So can anything be done to fix this in Safari so that I always get the GA events?
Note that my question probably has the same root cause as this unanswered question: Frame load interrupted when downloading excel files
Update June 6
I am now thoroughly confused. I just noticed that if I open up a new browser page to my site (in Safari), and click on the download, then it gets logged by GA. However subsequent clicks download still the file, but don't get logged by GA.
If I close that window, and open a new one, then again the first download gets logged by GA.
In contrast, when using Chrome every download gets logged by GA.
I am now thinking that I may be looking at the wrong problem. The behavior I am seeing is telling me that Safari is maintaining a state in JavaScript that allows the first GA call to go through, but blocks all subsequent calls.
But this is the same code being run by Chrome, so I don't know where to how to even start debugging the problem.
If you always want to get the ga event then the hitCallback is likely the only way to go until whatever is wrong with Safari is fixed. I use a similar pattern to send a GA event from a page in an app which is just a redirect after a whole load of database stuff has been executed in rails. There is no noticeable lag from adding the javascript redirect into the callback. However I am not sure how to initiate the download from javascript off the top of my head.
ga('send','event','Download','MexmlSample','MexmlSample-1.0', {
hitCallback: function(){
initiateDownload();
})
I am not aware of any need to use the setTimeout() for pattern in this instance.
The only solution I can think of - is waiting till GA request will finish, and only after that set location.href to desired file download link. But this is not really good from user's perspective. (This can be achieved with hit callback https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#hitCallback).
Probably HTML5 download attribute for href will solve the problem.
I have no OSX with safari to test, so this is only my thoughts.
Related
I am trying to add a onbeforeunload to my code so it fires a message that is sent to a server. I am encountering the following issue:
On page refresh, the message is sent to the server when using Firefox. It does not send a message to the server when I refresh the page on Google Chrome.
When clicking on links on my site to navigate to different sites, the server gets a message only when using Chrome. Firefox does not send a message when clicking on external links.
I also know that onbeforeunload is supposed to work when the window is closed, you enter a different website and navigate to that. There are some additional cases which also trigger the function. My site does not work with any of these along with the errors mentioned above.
If there a fix to this? If so, what can I do? I have looked around to fixes but I only get fixes where it prompts the user on whether they want to leave the page or not, I do not want that.
Additionally, I tried adding the function call to onclick on my external links but that is not being triggered on Firefox. I am guessing this is due to the amount of time onbeforeunload has before it is cancelled. If so, there a way around this?
Lastly, if this is not possible with onbeforeunload, what are my other options without prompting the user if they want to leave or not.
Thanks in advance!
EDIT: Here is some code that can be used:
https://jsfiddle.net/985drboy/
Make sure, that your code sending the message to the server is blocking and not async. If onbeforeunload returns before your message is sent, you get undefined behavior e.g. your message might not be sent if the page is unloads before the sending was complete. The browser continues unloading as soon as unbeforeunload returns.
A test which works perfectly well locally with selenium webdriver is timing out when run remotely on saucelabs.com. The same test works for Chrome (both local and on sauce).
From the client code's side, the click in the following code is never returning:
var someLink = await driver.findElement(By.className('some-class'));
await someLink.click()
I'm using jest for the test framework with at 60 second timeout, so on the client end, I get that timeout error after a minute.
When I log into sauce and look at the list of commands it processed I see:
POST elements
With parameters:
{"using":"css selector","value":".some-class"}
And the returned body is:
[{"ELEMENT":"2"}]
So that succeeds and finds the link. I then never see a click event on that element. Prior click events, and navigation commands are successful.
When I watch the video playback of the session, I see it click the given link and the new page load in Firefox, but the spinner (actually a little dot going back and forth) in the top right never stops.
I can't reproduce with Firefox myself, or even through the manual testing on Saucelabs where you can control the browser and VM through the web.
I'm wondering if there's some synchronous code that's running that just isn't resolving. But I can't figure out how to find that out. The developer tools don't appear to have any way to show currently blocking code.
When page is being loaded, Selenium is waiting for document.readyState to be complete.
Sometimes loading of some resource might stuck - when it tries to get big file and connection is poor, when resource is not reachable because of proxy, when service that provides this resource is down, and so on.
I had the same problem with Firefox and solved it using eager page load strategy.
With this load strategy Selenium will wait for document.readyState to be interactive - some resources might not be loaded, but main elements of the page are loaded and you can interact with them in common way.
DesiredCapabilities caps = DesiredCapabilities.firefox();
caps.setCapability(CapabilityType.PAGE_LOAD_STRATEGY, "eager");
We're developing a web application that handles state change via change of the hash of the page (e.g. example.com/#/page1).
Lately, I've been running into an issue with Google Chrome, when the prefetch option is enabled ("Predict network actions to improve page load performance"). Among the different routes, we have #/logout that performs the logout.
In the "normal" state, I'm on the page example.com/#/ (the main page), and as I start typing "l" after that (example.com/#/l), Chrome autocompletes with logout. However, not only it does autocomplete, but it also calls the "haschange" event, so the client is sending a request to log out to the server... Even just by typing a l!
This behaviour is not only unexpected, but it's also dangerous. Aside from unchecking "Predict network actions to improve page load performance" in the settings page (which is on by default), is there a way to prevent Chrome to do this?
EDIT
A small new "discovery". Actually, Chrome is not firing the "hashchange" event, as a console.log in the event handler is not being executed. Chrome learnt that, when visiting the #/logout page, a request to the server (GET /auth/destroy) is called, and so it's firing it by itself! What can we do to stop this?
Answering my own question. This is not really a solution, but rather a workaround.
According to this documentation, prendering is disabled in certain situations: with POST requests (not an option in our case) and when the resources are served via HTTPS.
Since we were already going to enable HTTPS in the production environment, we just enabled it in the development one as well and the issue disappeared. However, I still feel like this is more of a workaround than a real solution.
My eventual goal is to find all resources that the webpage is attempting to load, stop them from loading, and then list them (so that the user can see what the webpage tried to load). Can anyone help me get started with the necessary JavaScript that I'll need to both stop the page from loading and print the resources? I'm just kind of lost on what the first step should be.
Take a look at webrequest for chrome extensions:
https://developer.chrome.com/extensions/webRequest
I would suggest to create a callback for onBeforeRequest() and then checking what resources are being fetched and loaded.
You can cancel a particular web request from this callback.
I'm loading a page through AJAX with jQuery's load() function. It doesn't work in IE8, giving the "permission denied" error. Using the IE debugger, it seems that when jQuery tries to open up the xhr, ie blocks it.
The problem is, my page has a javascript src that points to bing maps js api (which of course is in a completely different domain than mine). It seems to me that IE tries to grab this js file through a xhr, which then throws the "permission denied" error. Is there a workaround for this?
I can only remember of downloading the bing maps js myself and serving them locally.
I did more test on this. And seems the error was caused by invalid HTML structures on the page. As it is a very complicated page, there are mismatched open <div> or <table> on the page, as when I shorten the page to bare minimum, it works on IE as well. But I don't understand why it was not working when you get to the page first time, and if you refresh the page, it will work after that.
I just had this problem and I posted my solution on this thread:
jQuery AJAX problem in IE7 (possibly other versions as well)
I eventually grabbed a copy of the script and include it myself, so it is in the same domain.
You could include the script tag to the Bing Maps API in the parent document (the one making the jQuery load() call).
Just for the reference:
I experienced this error on Windows 8 with IE 10 inside my WinForms application.
In this application, I'm hosting a WebBrowser control that loads its content from a built-in web server and also communicates via window.external with my host WinForms application.
Enough keyword fishing.
Getting this error
Now what happens to get this jQuery error in my application was:
Browser has successfully loaded an URL.
I programmatically loaded another URL.
Then I immediately opened a child form with Form.ShowDialog.
After closing this form, the jQuery error was shown.
Resolving this error
I resolved the error by postponing the opening of the child form until the application was idle.
I.e. I used a Queue list inside my main form, subscribed to the Application.Idle event and inside this event handler, I processed the queue, one by one.
The new steps now were:
Browser has successfully loaded an URL.
I programmatically loaded another URL.
Put the action to open the child form inside the idle queue.
When the idle queue is processed, it opens the child form.
Then, the error was gone.
I guess, instead of using this idle processing, I also could have waited until the web browser finished its loading by subscribing to the DocumentCompleted event and show the child dialog from there.
Hope this will help someone...