How to track a form post initiating a download?

Support & Bugs
1

Hi,

Piwik is working great for us, both for static pages and for tracking JavaScript based interactive usage.

One aspect I didn’t manage to figure out yet is the following: We have a form submitting a POST request which leads to a file download. I attached a call to Piwik’s trackPageView() function to the form’s onsubmit handler to track those user actions.

Looking at the script’s execution and the network access in the browser (Chrome Web Inspector), it seems that Piwik’s tracking function is called all right but the browser for some reason cancels the request to the Piwik server before it is finished which prevents the tracking from happening.

The only theory I could come up with for this is that the browser sees the form submission and prepares going to a new web page by closing the active connections. Once the form reply comes in, it keeps the old page alive nonetheless.

As I am not familiar with browser internals, I am not sure whether this model is correct and how I could work around this issue.

Thanks for your help

Sven

2

Do you have a simple sample html code to show the issue?

3

@matt:

I didn’t. But now I tried to create a minimal example of this situation which I put here:

http://vlib.sub.uni-goettingen.de/demo/piwik/piwik.html


<!DOCTYPE html>
<html lang="de"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Piwik Form POST sample</title>
<script type="text/javascript">
function trackPiwik (action, info) {
	if (typeof(piwikTracker) !== 'undefined') {
		piwikTracker.setCustomUrl('testurl');
		piwikTracker.trackPageView('testpage');
		piwikTracker.setCustomUrl(document.URL);
	}
}
</script>
</head>

<body>

<form method="POST" action="http://aac.sub.uni-goettingen.de/typo3conf/ext/pazpar2/Resources/Public/convert-pazpar2-record.php?format=ris&language=de" onsubmit="trackPiwik()">

<input name="q" value="<?xml version="1.0"?>
<locations><location id="sru.gbv.de/opac-de-7" name="SUB G&#xF6;ttingen"><md-language>ger</md-language><md-id>556747496</md-id><md-isbn>978-3-407-74064-9 (kart.)</md-isbn><md-author>Bongard, Katrin</md-author><md-date>2008</md-date><md-title>Radio Gaga</md-title><md-title-remainder>Roman</md-title-remainder><md-title-responsibility>Katrin Bongard</md-title-responsibility><md-medium>book</md-medium><md-publication-place>Weinheim ;Basel</md-publication-place><md-publication-name>Beltz &amp; Gelberg</md-publication-name><md-physical-extent>295 S. ;</md-physical-extent><md-series-title>Gulliver ; 1064</md-series-title><md-electronic-url>http://deposit.d-nb.de/cgi-bin/dokserv?id=3050730&amp;prov=M&amp;dok_var=1&amp;dok_ext=htm</md-electronic-url><md-electronic-url>http://deposit.d-nb.de/cgi-bin/dokserv?id=3050730&amp;prov=M&amp;dok_var=1&amp;dok_ext=htm</md-electronic-url><md-catalogue-url>https://opac.sub.uni-goettingen.de/DB=1/PPNSET?PPN=556747496</md-catalogue-url></location></locations>
" type="hidden">

<input value="Download" title="Bibliographische Daten für diesen Treffer als RIS laden" type="submit">

</form>


<!-- Piwik -->
<script type="text/javascript" src="http://piwik.gwdg.de/piwik.js"></script>
<script type="text/javascript">
	/* <![CDATA[ */
		try {
			var piwikTracker=Piwik.getTracker("http://piwik.gwdg.de/piwik.php",111);
			piwikTracker.enableLinkTracking();
			piwikTracker.trackPageView();
		} catch(err) {}

	/* ]]> */
</script>
<noscript><p><img src="http://piwik.gwdg.de/piwik.gif" style="border: 0pt none;" alt=""></p></noscript>
<!-- /Piwik -->

</body></html>

I used that example to gather some more information (which, unfortunately doesn’t really make me understand the situation better).

  • when clicking the Download button on that page, piwik tracking should happen and a download should start
  • the download works fine
  • the tracking works rarely: I find (using a network monitor) that a connection to the is established quite frequently the first time I am submitting the form, but it hardly ever (but not never) seems to work on subsequent form submissions
  • I find that my browser (Chrome 15 on Ubuntu), marks all connections to piwik after a form submission as ‘(canceled)’ in the Status column of the Network inspector, even those where the connection seems to work fine
  • looking at the JavaScript console in Chrome, I see messages »Uncaught Error: Too much time spent in unload handler« with a stack trace of (getTimeOverride in v8/DateExtension; B in piwik.js:13) in these situations
  • seeing v8 mentioned there, I tried the same setup in current Firefox, where I do see connections to the piwik server for each click of the button (but Firebug’s Net display only seems to display the first of those with an indeterminate progress indicator)

I don’t fully understand the issue after this, but it suggests, Chrome/V8 may play a role in this. (It’s not really clear to me what exactly happens to those connections to piwik.php in any case.)

Best

Sven

4

Thanks for the script:

  1. try to add “return true;” in your post handler after the piwik calls. Maybe
  2. otherwise solution is to wrap the function inside a setTimeout javascript call, such as:

onsubmit="setTimeout('trackPiwik()', 500)"

Does it work?

if so, I would love to create a faq or edit the doc to clarify how to do this (track any FORM submit, note: you could also automatically track with custom variables what was submitted!)

5

Hi matt,

thanks for your ideas. The second one seems to do the trick! (The first one gives the same result I had before.)

Adding hints like these to the FAQ sounds like a great idea to me. Is there any good reason for browsers to behave this way or is it just a lucky observation? Could it be that after that 0,5 second break the browser is in the same state it is in immediately after the form submission, which could cause the tracking to fail?

Best

Sven

6

Matt: I’m curious if that will also fix the webkit issue tracking outlinks? (instead of using the target attribute hack)

7

Anthon, possibly… have fun with it :wink:

8

Also Form Analytics is coming soon! Check the page to learn more and be notified when it will be launched. :rocket: