Custom javascript

Adding javascript to kiwitrees pages for Google Analytics / Social media icons / Piwik etc.

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 > 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 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 with entering whatever code you need in the text box at Administration > Custom JavaScript.

The key thing to be aware of here is that you must ONLY enter JavaScript. Not 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></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:

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!!

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

document.getElementById('header').innerHTML += '<div></div>';
(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.

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

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

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);
 })();

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

document.getElementById('footer').innerHTML += '<div class="noprint"><div style="line-height:6px;margin-bottom:5px;vertical-align:top;"><div class="g-plus" data-action="share" data-annotation="bubble" data-height="20"></div><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a><div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div></div></div>';
(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);
})();


2 Comments

jacoline » 11 Jun 2014 »

Great idea to put it up here 🙂

An idea:
I think that the facebook button and twitter is also something users want to have

Have your say!

Have your say!