How to insert easily javascript code for Analytics

Flow
1

Here is an easy and very practical way to read and execute javascript just at the loading page or every Layout.

Insert these lines everywhere you want in your code:


import com.vaadin.ui.BrowserFrame;

BrowserFrame browser = new BrowserFrame("", new ThemeResource("HTML/markers/compteurs.html?page='Accueil'"));
browser.setWidth("0px"); browser.setHeight("0px"); addComponent(browser);

HTML is a directory in the theme
by example the content of compteurs.html looks like this


<script type="text/javascript">
function qs(search_for) {
	var query = window.location.search.substring(1);
	var parms = query.split('&');
	for (var i=0; i<parms.length; i++) {
		var pos = parms[i]
.indexOf('=');
		if (pos > 0  && search_for == parms[i]
.substring(0,pos)) {
			return parms[i]
.substring(pos+1);;
		}
	}
	return "";
}	
</script>
<!--************CODE XITI xxx ************-->
<a href="http://www.xiti.com/xiti.asp?s=533913" title="WebAnalytics" target="_top">
<script type="text/javascript">
<!--
Xt_param = 's=xxx&p='+qs("page");
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="80" height="15" border="0" alt="" ';
Xt_i += 'src="http://logv4.xiti.com/g.xiti?'+Xt_param;
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]
/g, '').replace(/&/g, '$')+'" title="Internet Audience">');
//-->
</script></a><br/><br/>
<!--************CODE GEOCOUNTER xxx  ************-->
<script type="text/javascript" src="http://geoloc18.whoaremyfriends.net/private/geocounter.js?compte=xxx"></script>
<!--************CODE GEOCOUNTER xxx ************-->
<script type="text/javascript" src="http://geoloc6.whoaremyfriends.com/private/geocounter.js?compte=xxx"></script>

<!--************CODE GOOGLE xxx ************-->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']
=r;i[r]
=i[r]
||function(){
  (i[r]
.q=i[r]
.q||[]).push(arguments)},i[r]
.l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0]
;a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-xxx-1', 'xxxx.com');
  ga('send', qs("page"));

</script>

Note the qs(“page”) to give the name of the page.

2

Why not use JavaScript.getCurrent().execute(…) and add javascript source files directly to the html header of the Vaadin Application?

3

Hi marius,
You make me discovered this function. I will try it. But i need to execute javascript code each time some layouts are loaded.

4

If you need more information have a look at
this Chapter
 of the BoV 7.