13. Jan. 2010

Wie ver­spro­chen erzähle ich noch­ein­mal etwas über meine Ideen, die ich beim Relaunch mei­nes Blogs ein­ge­baut habe.

Nach dem OptOut für Google Ana­lytics kommt dies­mal ein eher klei­ner Trick: man­che Ele­mente sol­len anders gestylt wer­den, je nach­dem ob Java­script ein– oder aus­ge­schal­tet ist.

Als ers­tes wird im HTML dem body die Klasse »has­no­ja­va­script« zugewiesen.

1
2
3
<body class="hasnojavascript">
...
</body>

Im nächs­ten Schritt wird mit jQuery die Klasse »has­ja­va­script« dem body zuge­wie­sen und die Klasse »has­no­ja­va­script« entfernt.

1
2
3
4
5
$(document).ready(function(){
    // Indicate Javascript for CSS
    $("body").addClass('hasjavascript');
    $("body").removeClass('hasnojavascript');
});

Mit Hilfe die­ser bei­den Klas­sen kön­nen dann im CSS beide Zustände expli­zit ange­spro­chen werden.

Die bei­den Klas­sen benutze ich bei­spiels­weise um die Label für For­mu­lar­fel­der bei ein­ge­schal­te­tem Java­script auszublenden.

 
 

Google Ana­lytics ist ein sehr schö­nes Tool, um das Nut­zungs­ver­hal­ten einer Web­site zu tra­cken. Lei­der bie­tet Google keine Mög­lich­keit, dass die Besu­cher diesm Tracking widersprechen.

Marco Hass­ler hat eine Mög­lich­keit beschrie­ben, ein OptOut im Eigen­bau zu machen. Das Ganze hab ich für mei­nen Blog mit Hilfe von jQuery nachgebaut.

Falls kein OptOut Coo­kie gesetzt ist wird mit Hilfe des Geeko­logy jQuery Plugins Google Ana­lytics gela­den. Anschlies­send wer­den die exter­nen Links wie bei CSS–Tricks beschrie­ben zum Tracking hinzugefügt.

Das Coo­kie wird bei jedem Auf­ruf der Seite mit einer Gül­tig­keit von einem Jahr neu gesetzt, so dass das OptOut dau­er­haft vor­han­den ist. Die­ser OptOut Coo­kie muss aber von dem Besu­cher akzep­tiert werden.

Der jQuery Code hierfür:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(document).ready(function(){
    // Google Analytics
    var trackSite = ($.cookie("ga_optout") != "donttrack");
 
    if (trackSite) {
        // Enter Tracking Code here
        $.geekGaTrackPage('UA-0000000-0');
        $(".external").each(function() {
            $(this).bind('click keypress', function(event) {
                var code=event.charCode || event.keyCode;
                if(!code || (code && code == 13)) {
                    var fixedLink = $(this).attr('href');
                    fixedLink = fixedLink.replace(/https?:\/\/(.*)/,"$1");
                    fixedLink = '/outgoing/' + fixedLink;
                    $.geekGaTrackEvent('page', 'click', fixedLink, '');
                }
            });
        });
        $('#optout').attr('checked','checked');
        $.cookie("ga_optout", "track", { path: '/', expires: 365 });
    } else {
        $('#optout').attr('checked','');
        $.cookie("ga_optout", "donttrack", { path: '/', expires: 365 });
    }
 
    // Set OptOut Cookie
    $('#optout').change(function() {
        if ($(this).attr('checked')) {
            $.cookie("ga_optout", "track", { path: '/', expires: 365 });
        } else {
            $.cookie("ga_optout", "donttrack", { path: '/', expires: 365 });
        }
    });
});

Um das OptOut ein­zu­bin­den, muss eine Check­box mit der ID »optout« dort ein­ge­bun­den wer­den, wo die OptOut Mög­lich­keit gege­ben wer­den soll:

1
2
<input id="optout" type="checkbox" value="track" />
<label for="optout">Daten mit Google Ana­lytics aufzeichnen</label>
 
 
1. Jan. 2010

End­lich hab ich es geschafft. Nach meh­re­ren Jah­ren im bis­he­ri­gen Design habe ich zum Jah­res­wech­sel ein neues Design fer­tig­ge­stellt. Erst­mals habe ich das Gridsys­tem 960​.gs und die Java­Script Library jQuery verwendet.

Ein paar Klei­nig­kei­ten müs­sen noch umge­stellt wer­den, aber im Grunde bin ich mit dem Relaunch sehr zufrie­den. Und in den nächs­ten Tagen werde ich ein paar Sachen beschrei­ben, die ich mei­nes Erach­tens nach recht schick mit den Tools gelöst habe.

 
 

Das macht echt Spaß. Num­mer 6 ist also »The Sand­wich EP: Beyond Human Beings.«

Pseudo-Cover: The Sandwich EP - Beyond Human Beings

Band, Album­ti­tel und Photo.

 

 
 
 
Creative Commons-Lizenz BY-NC-SA 3.0 DE