How to insert easily javascript code for Analytics

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.

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

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.

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