mei 2010

iWeb : Adding Google Analytics without editing the webpage

Google Analytics is a service that tracks the visitors of your webpage and provides information about where they come from, what pages they visit, what they use as Operating System and Browser and how long they stayed on your website. And a lot more.

Google uses JavaScript code which you have to paste in the webpage.

iWeb has no way of adding this to the webpage. After publishing you must open the html file in a plaintext editor and paste the code before the </body> HTML element. Then save the page.

Everytime you edit the page in iWeb, you have to edit the published page again to add the code.

Rather cumbersome.

Here's how you can add the code with the HTML Snippet.

Go to Google Analytics and sign-up for an account if you haven't already done that.

Create a new profile for your website.

It will provide you with a Webuser ID and the JavaScript code :

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-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);
})();

</script>

Open een plaintext document and paste the code without these lines :

<script type="text/javascript">
</script>

Save the file as plaintext and give it a meaningful name : I use analytics.js

Connect to your webserver and create a folder in the root of the server and put the file in it. I call this folder js.

Open iWeb and select the Site and page you want to track.

Add the HTML Snippet and paste this code :

<script type="text/javascript">

var bodyID = parent.document.getElementsByTagName("body")[0];

var newScript = parent.document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '/js/analytics.js';
bodyID.appendChild(newScript);

</script>

Publish the page and open it in the browser. In Safari open the Activity window (Command-Option-A).

Check to see that the /js/analytics.js file is loaded correctly and a very long URL to Google is present.

The newScript.src = '/js/analytics.js'; only works when you have your own domain.

If you use both web.me.com/username and Personal domain, use newScript.src = '../js/analytics.js'; for non-blog pages and newScript.src = '../../js/analytics.js'; with the main blog page.

And again, verify it.

iWeb : HTML5 Audio and Video

Based on some topics in the iWeb forum at Apple Discussions about HTML5 I decided to give it a go too.

I already made the BlowUp and 3D pages described earlier.

Now I added some sample pages with audio and video.

HTML5 Audio — HTML5 Video

Both pages determine if a browser supports html5 and what audio or video formats.

Usually mp4/mpeg (h.264/AAC) or ogg. On the audiopage it falls back to a Flash Audioplayer if html5 is not supported.

I wrote the JavaScript in the past few days with some help from code at Apple Developers :

Safari HTML5 Audio and video Guide

I think it all looks rather well. See if you can apply it to your own pages.

Google Analytics — Besturingssystemen

In tegenstelling tot een hoop mensen in het iWeb Discussions forum ben ik niet gefrustreerd als ik niet #1 ben bij Google. Sterker nog, een hoop van die lui zijn volledig getraumatiseerd als hun kut webpaginaatje niet wordt gevonden.

Aangemoedigd door allerlei SEO FUD Meisters verspillen ze hun tijd met allerlei programmas om hun ranking te verbeteren.

En als je dan hun paginaatje ziet, vraag je je af waarom je ze wilt vinden.

Omdat ik toch wel nieuwsgierig ben naar wie er zoal m'n website bezoeken, heb ik Google Analytics op een paar paginas aangebracht.

Ik ga niet alle statistieken tonen, wellicht later eens, maar één staatje is aardig om te zien. De besturingssystemen. Dan blijkt dat de Apple iPad reeds na een maand op een verdienstelijke 3e plaats staat.

Vermoedelijk komt dat omdat ik zelf met de iPad Simulator mij website bezoek om te zien hoe een en ander in beeld komt.