Aangepast javascript

Voeg javascript toe aan kiwitrees pagina's met Google Analytics / Social media iconen / Piwik etc.

Het is makkelijker dan de meeste mensen denken om code toe te voegen voor Google Analytics / Social media iconen / Piwik  etc.

U moet de custom_js module gebruiken. Dat zit nu standaard in kiwitrees. U vind het bij Beheer > Aangepast Javascript. Dit is beter dan elke andere oplossing, omdat het niet wordt beïnvloed door welke upgrade dan ook in de toekomst. Als u het niet ziet, kijk in Beheer > Modules en verzeker u ervan dat het is aangevinkt als ingeschakeld.

Voor u verder gaat om deze module te gebruiken, moet u het ook activeren in Beheer > Modules – Menus. Stel Aangepast JavaScript daar in op “toon aan bezoekers” voor elke stamboom en sla op. (Deze instelling heeft niet echt iets te doen met menus voor deze module  – het is alleen handig en noodzakelijk zodat de software de JavaScript code correct registreert).

Nu kunt u verder gaan met invoeren met de code u nodig heeft in het tekstveld bij Beheer > Aangepast JavaScript.

Denk eraan dat het belangrijk is dat u ALLEEN JavaScript invoert. Geen commentaren of HTML behalve als het specifiek geformatteerd is als JavaScript (later meer hierover).  Men gaat hier vaak de fout mee in, omdat de meeste stukken code worden verpakt als “<script></script>” tags. Maar dit zijn eigenlijk HTML tags en moeten daarvoor verwijderd worden om de code te laten werken.

Als u de juiste code invoert, wordt het toegevoegd aan de footer van elke pagina onder het HTML “footer” element. Dat is het oorspronkelijke doel van de code. Alhoewel door Javascript voorzichtig te gebruiken, kunt u ook de code op ander plaatsen zoals de header gebruiken. In de voorbeelden hieronder is het gedaan door  javascript  te gebruiken zoals “document.getElementById(‘header’).innerHTML += ‘<div></div>’; “.

Als het moet, is het ook OK om meer dan een functie toe te voegen aan de module. Het is geen probleem om bijvoorbeeld social media-links in de header en  Google Analytics in de footer te gebruiken dit alles door een enkele   code in dezelfde module.

Hier zijn een paar voorbeelden van de code die u misschien wilt insluiten :

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

Opmerking: Vergeet niet “xxxxxxx”  te vervangen in mijn voorbeeld door uw eigen nummer van GA!!

De code om een Google Plus “vind ik leuk” button in the header toe te voegen:

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

Opmerking: Dit stukje bevat de extra code in de eerste regel om het icoon weer te geven in de header en gebruikt css om het te centreren.

Voeg uw eigen copyright toe aan de footer (Met automatische aanpassing van het jaar):

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;");

De code nodig voor verzamelen van data voor Piwik op uw website:

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

Voeg social media iconen toe in de footer (bevat Google, Twitter, and Facebook ):

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


Have your say!

Have your say!

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe jouw reactie gegevens worden verwerkt.