Custom Javascript

It is is far easier than most people realise to add the code required for Google Analytics / Social media icons / Piwik etc.

You need to use the “custom_js” module. That is now a standard part of kiwitrees. You will find it at Administration > Tools > Custom JavaScript. This is a far better than any other solution, as it will never be affected by any upgrades you do later. If you don’t see it, look in Administration > Modules and make sure it is ticked as enabled.

Before you do anything else, to use this module you must also enable it in Administration > Modules > Manage modules.  Then you need to activate it in Administration > Modules > Menus. Set Custom JavaScript there to “show to visitors” for each family tree and save. (This setting doesn’t really have anything to do with menus for this module – it’s just a convenient and necessary way to get the software to register the JavaScript code correctly).

Now you can go on to entering whatever code you need in the text box at Administration > Tools > Custom JavaScript.

The key thing to be aware of here is that you must only enter JavaScript. Exclude any commenting or HTML unless it is specifically formatted as JavaScript (more about that later). That catches people out often as most code snippets for these products are wrapped in “<script>” tags. But these are actually HTML tags, and must therefore be removed for the module to work.

If you just enter the correct code it will be added to the footer of each page,below the HTML “footer” element. That is the original purpose of the code. However, with careful use of JavaScript you can also force the code into other places such as the header. In the examples below this is done by using JavaScript such as “document.getElementById(‘header’).innerHTML += ‘<div></div>’; “.

If you need to, it is also OK to add more than one feature to the module. There is no problem for example adding social media links in the header, and Google Analytics in the footer all from a single set of code on the same module.

Here are some examples of the code you might want to include:

Google Analytics

Typical Google Analytics code:

var _gaq = _gaq || [];
var pluginUrl =
 '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
 _gaq.push(['_setAccount', 'UA-xxxxxxx-1']);
 _gaq.push(['_trackPageview']);
(function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

Note: Don’t forget to replace “xxxxxxx” in my example with your own number from GA!!


Google Plus

The code to add a Google Plus “like” button in the header area:

document.getElementById('header').innerHTML += '&lt;div&gt;&lt;/div&gt;';
(function() {
 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/platform.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();

Note: This snippet includes the extra code in the first line to force the icon to display in the header area, and using css to centre it.


Copyright

Add your own copyright to the footer (with automatically incrementing year):

var d = new Date();
document.write ("&lt;div class=\"noprint\"&gt;&lt;div&gt;© Copyright 2006 - ");
document.write (d.getFullYear());
document.write (" All rights reserved.&lt;/div&gt;&lt;/div&gt;");

Piwik

The code required to collect data for Piwik on your site:

var _paq = _paq || [];
 _paq.push(["trackPageView"]);
 _paq.push(["enableLinkTracking"]);
 (function() {
 var u=(("https:" == document.location.protocol) ? "https" : "http") +"://the path to your piwik installation/";
 _paq.push(["setTrackerUrl", u+"piwik.php"]);
 _paq.push(["setSiteId", "1"]);
 var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
 g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
 })();

Social media icons

Add social media icons in footer area (Google, Twitter, and Face book included here):

document.getElementById('footer').innerHTML += '&lt;div class="noprint"&gt;&lt;div style="line-height:6px;margin-bottom:5px;vertical-align:top;"&gt;&lt;div class="g-plus" data-action="share" data-annotation="bubble" data-height="20"&gt;&lt;/div&gt;&lt;a href="https://twitter.com/share" class="twitter-share-button"&gt;Tweet&lt;/a&gt;&lt;div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
(function(d,s,id){
	var js, fjs=d.getElementsByTagName(s)[0];
	if(!d.getElementById(id)){
	js=d.createElement(s);js.id=id;
	js.src="//platform.twitter.com/widgets.js";
	fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs"));

(function(d,s,id) {
	var js, fjs=d.getElementsByTagName(s)[0];
	if(!d.getElementById(id)){
	js=d.createElement(s);js.id=id;
	js.src="//connect.facebook.net/en_GB/all.js#xfbml=1";
	fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","facebook-jssdk"));

(function(){
	var po=document.createElement("script"); po.type="text/javascript"; po.async=true;
	po.src="https://apis.google.com/js/plusone.js";
	var s=document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po,s);
})();