Anonymisiertes Google Analytics mit jQuery

0
 
 
14. Jul. 2010

Ich benutze auf mei­nem Blog Google Ana­lytics zum Web­tracking. Nur ist der Ein­satz von Google Ana­lytics bis vor kur­zem nicht mit den Vor­ga­ben des Düs­sel­dor­fer Krei­ses ver­ein­bar gewesen.

Als Lösung habe ich bei mir ein OptOut aus dem Web­tracking mit jQuery rea­li­siert. Google hat zudem ein AddOn für die meis­ten Brow­ser ent­wi­ckelt, das Ana­lytics grund­sätz­lich deaktiviert.

Aber vor ein paar Wochen hat Google nach­ge­bes­sert und Google Ana­lytics den Vor­ga­ben ange­passt, und die Anony­mi­sie­rung der IP–Adres­sen ermög­licht. Damit erfüllt Ana­lytics die­ses Kri­te­rium und ist in Deutsch­land wohl pro­blem­los nutzbar.

Um Google Ana­lytics ein­zu­bin­den, ver­wende ich das jQuery Plu­gIn GeekGA von Wil­lem van Zyl. Ich habe die Ver­sion 1.1 so erwei­tert, dass es jetzt mög­lich ist, das Tracking zu anony­mi­sie­ren. Per Default ist die Anony­mi­sie­rung aktiv.

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

/*
 * jQuery plugin for Google Analytics
 *
 * Version 1.0
 *
 * This plugin extends jQuery with two new functions:
 *
 *   - $.GATrackPage(options)
 *       Track a pageview of the current page.
 *       options: account_id -> Your google Analytics Account
 *                anonymize  -> Flag to enable anonymous stats, defaults true
 *
 *   - $.GATrackEvent(category, action, label, value)
 *       Track an event with a category, action, label and value.
 *
 *   - $.GATrackPageview (page)
 *       Track a pageview of page.
 *
 *
 * This code is in the public domain.
 *
 * This jQuery plugin is based on GeekGA 1.1 by
 *
 * Willem van Zyl
 * willem@geekology.co.za
 * http://www.geekology.co.za/blog/#
 *
 * Fork by
 * Martin Gude
 * http://onygo.org
 */
 
(function($){
  var pageTracker;
 
  $.GATrackPage=function(options){
    var host       = (("https:"==document.location.protocol)?"https://ssl.":"http://www.");
    var src        = host+'google-analytics.com/ga.js';
    var account_id = options["account_id"];
    var anonymize  = (options["anonymize"] == undefined) || options["anonymize"];
    $.ajax({
      type:'GET',
      url:src,
      success:function(){
        pageTracker=_gat._createTracker(account_id);
        if (anonymize) {
          _gat._anonymizeIp();
        }
        pageTracker._trackPageview();
      },
      error:function(){
        throw"Unable to load ga.js; _gat has not been defined.";
      },
      dataType:'script',
      cache:true
    });
  };
 
  $.GATrackEvent=function(category,action,label,value){
    if(typeof pageTracker!=undefined){
      pageTracker._trackEvent(category,action,label,value);
    }else{
      throw"Unable to track event; pageTracker has not been defined";
    }
  };
 
  $.GATrackPageview=function(page){
    if(typeof pageTracker!=undefined){
      pageTracker._trackPageview(page);
    }else{
      throw"Unable to track event; pageTracker has not been defined";
    }
  };
})(jQuery);

Das Skript kann dann in $(document).ready fol­gen­der­ma­ßen auf­ge­ru­fen werden:

1

$.GATrackPage({account_id:'UA-000000-0', anonymize:true});

Die Account ID (UA-000000-0) muss natür­lich durch die ent­spre­chende ID ersetzt werden.

Als nächs­ter Schritt muss noch die Daten­schutz­er­klä­rung ange­passt wer­den. Ein Vor­schlag hier­für fin­det sich bei der Grün­der­szene.

 

Aktuellen Tweet per jQuery ausgeben

1
 
 
24. Jan. 2010

Caching ist eine schöne Sache. Die Sei­ten wer­den schnel­ler aus­ge­ge­ben und man muss kür­zer war­ten. Marian hat auf uxzen­trisch beschrie­ben, warum schnelle Web­sites wich­tig sind.

Nur wie soll man dann aktu­elle Daten wie den letz­ten Tweet anzei­gen. Die Lösung ist Java­script und ins­be­son­dere mal wie­der jQuery.

Auf onygo benutze ich das Word­Press Plug-In WP Super Cache um die Word­Press Sei­ten zu cachen. Die gecach­ten Sei­ten wer­den nach 86400 Sekun­den — also einem Tag — gelöscht.

Um die Tweets via jQuery abzu­ru­fen und aus­zu­ge­ben ver­wende ich die Plug-Ins jTwit­ter und Timeago sowie die Date Erwei­te­rung Date.format. Zudem benutze ich das Word­Press Plug-In Twit­ter Tools von Alex King, um Tweets auch ohne Java­script — dann aber nicht den neu­es­ten — anzuzeigen.

Zudem benutze ich eine AJAX–Loader-Grafik von Ajax­load.

Mein HTML besteht aus je einem span für den Tweet und einem für sei­nen Zeits­tem­pel. Zudem wird ein Pre­loa­der für die Lade­zeit eingeblendet.

1
2
3
4
5
6
7

<div id="twitter">
  <span class="status jshide">
    <span id="tweet">Tweettext</span>
    <span id="tweettime">Tweettime</span>
  </span>
  <span class="preloader nojshide"><img src="ajax-loader-white.gif" /></span>
</div>

Die bei­den Ele­mente wer­den wie hier beschrie­ben abhän­gig vom Vor­han­den­sein von Java­script ange­zeigt. Dafür wird fol­gen­des CSS benutzt:

1
2
3

.hide, .hasjavascript .jshide, .hasnojavascript .nojshide {
  display:none;
}

Und natür­lich muss auch noch etwas in die $(document).ready Funk­tion ein­ge­fügt werden:

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

$(document).ready(function(){
  $.jTwitter('TWITTERID', 1, function(posts){
    var text = posts[0].text ;
    text = text.replace(/http:\/\/(\S*)/gi,"<a href=\"http://$1\" class=\"external\">http://$1</a>");
    text = text.replace(/https:\/\/(\S*)/gi,"<a href=\"https://$1\" class=\"external\">https://$1</a>");
    text = text.replace(/@(\w*)/gi, "@<a href=\"http://twitter.com/$1\" class=\"external\">$1</a>");
    text = text.replace(/#(\w*)/gi, "#<a href=\"http://search.twitter.com/search?q=%23$1\" class=\"external\">$1</a>");
 
    if (posts[0].in_reply_to_screen_name) {
        text += ' <a href="http://twitter.com/'+posts[0].in_reply_to_screen_name+'/statuses/'+posts[0].in_reply_to_status_id+'" class="aktt_tweet_reply external">';
        text += 'als Antwort auf '+posts[0].in_reply_to_screen_name+'</a> ';
    }
    $('#tweet').html(text);
 
    var thedate = new Date(posts[0].created_at);
    var thetime;
    var isodate = thedate.format("c");
    thetime = '[<a href="http://twitter.com/'+ posts[0].user.screen_name +'/statuses/'+ posts[0].id +'" class="aktt_tweet_time external timestamp" timestamp="' + isodate + '" title="' + isodate + '">';
    thetime += 'am '+ thedate.format("j. M Y") + ' um ' + thedate.format("H:i");
    thetime += '</a> via ' + '<a href="http://twitter.com/'+ posts[0].user.screen_name +'/" class="external">Twitter</a>]';
 
    $('#tweettime').html(thetime);
    $(".timestamp").timeago();
    $("#twitter .preloader").addClass('hide');
    $("#twitter .status").removeClass('jshide');
  });
});

Mein HTML ist im Java­script fest ein­co­diert und muss ent­spre­chend ange­passt wer­den. Und natür­lich muss die rich­tige Twit­te­rID ange­ge­ben werden.

 

Unterschiedliche Styles mit und ohne Javascript

0
 
 
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.

 

OptOut für Google Analytics mit jQuery

4
 
 
2. Jan. 2010

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>
 


Über onygo

onygo ist das persönliche Notizbuch von Martin Gude. Ich arbeite als Berater im Bereich Beratung und Konzeption der nexum AG.

 
 
 
re:publica 12
 
 
 
« ältere Einträge
neuere Einträge
 
Creative Commons-Lizenz BY-NC-SA 3.0 DE