Google Analytics erweitertes Tracking

Christian Böttger 12 Jun 2014 0 Kommentare
18 Stimmen (3.89 von 5.00)

Hallo, heute möchte ich euch ein bisschen über Google Analytics zeigen. In diesem Artikel möchte ich euch zeigen, wie Ihr das Tracking von Google Analytics, um ausgehende Links, Downloads, Klicks auf Bilder und Demografische Informationen erweitern könnt.

Was benötigen wir?

Um unseren Google Analytics Tracking Code zu erweitern, benötigen wir erst einmal noch das neuste jQuery Paket, das müssen wir in unserem <head></head> laden. Das machen wir mit folgender Zeile.

 

<head>
...
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js></script>
...
</head>

 

Google Analytics erweiterter Code:

Nun können wir unseren Google Analystics Code erweitern und erstellen erst einmal eine Java Script Funktion in unserem <head></head> Bereich.

 

<head>
...
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js></script>
...
<script type='text/javascript'>
 (function($){
    $(window).load(function() {
        <!-- folgender Code hier -->
    });
})(jQuery);
</script>
...
</head>

Als nächstes erstellen wir unsere Funktion um Downloads auf unserer Seite zu tracken. Der folgende Code kommt anstelle <!– folgender Code hier –>.

 

            $('a').filter(function() {
                return this.href.match(/.*\.(zip|mp3|mpeg|pdf|doc*|ppt*|xls*|rar|exe)/);
            }).click(function(e) {
                ga('send','event', 'download', 'click', this.href);
            });

Darunter kommt die Funktion um anzuzeigen ob Besucher eurer Seite sich die Bilder anschauen.

 

            $('a').filter(function() {
                return this.href.match(/.*\.(jpeg|png|gif|tiff)/);
            }).click(function(e) {
                ga('send','event', 'ShowImage', 'click', this.href);
            });

Nun könne wir noch eine Funktion erstellen, um Klicks auf mailto Links zu tracken. Dieser Abschnitt kommt unter den oberen.

 

             $('a[href^="mailto"]').click(function(e) {
                ga('send','event', 'email', 'send', this.href);
             });

Und als letztes kommt nun noch das Tracking von ausgehenden Links. Dazu benötigen wir einige Variablen und eine Funktion.

 

            var loc = location.host.split('.');
            while (loc.length > 2) { loc.shift(); }
            loc = loc.join('.');
            var localURLs = [
                              loc,
                              'http://www.your-domain.de'
                            ];
            $('a[href^="http"]').filter(function() {
                for (var i = 0; i < localURLs.length; i++) {
                    if (this.href.indexOf(localURLs[i]) == -1) return this.href;
                }
            }).click(function(e) {
                ga('send','event', 'outbound', 'click', this.href);
            });

Nun haben wir die Erweiterung erst einmal fertig und nun können wir mit dem Google Analytics Code fortfahren.

 

Google Analytics Universal Code:

Nun benötigen wir noch den Original Code von Google Analytics, da Google auf den Universal Code umgestellt hat, zeige ich euch hier auch diesen. Der nachfolgende Code kommt unter den Oben gezeigten.

 

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  
  ga('create', 'Your Analytics ID', 'your-domain.de');
  ga('require', 'displayfeatures');
  ga('require', 'linkid', 'linkid.js');
  ga('send', 'pageview', {'anonymizeIp': true});
</script>

 

Beschreibung zum Code:

  • Your Analytics ID -> Hier steht eure ID von Google Analytics und beginnt in der Regel mit UA-
  • your-domain.de -> Hier kommt eure Domain von eurer Seite hin z.B. howto-blog.de

 

Zum Abschluss hier noch einmal der ganze Code zum kopieren.

 

<head>
...
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js></script>
...
<script type='text/javascript'>
(function($){
    $(window).load(function() {
        $('a').filter(function() {
                return this.href.match(/.*\.(zip|mp3|mpeg|pdf|doc*|ppt*|xls*|rar|exe)/);
            }).click(function(e) {
                ga('send','event', 'download', 'click', this.href);
            });
            $('a').filter(function() {
                return this.href.match(/.*\.(jpeg|png|gif|tiff)/);
            }).click(function(e) {
                ga('send','event', 'ShowImage', 'click', this.href);
            });
             $('a[href^="mailto"]').click(function(e) {
                ga('send','event', 'email', 'send', this.href);
             });
            var loc = location.host.split('.');
            while (loc.length > 2) { loc.shift(); }
            loc = loc.join('.');
            var localURLs = [
                              loc,
                              'http://www.your-domain.de'
                            ];
            $('a[href^="http"]').filter(function() {
                for (var i = 0; i < localURLs.length; i++) {
                    if (this.href.indexOf(localURLs[i]) == -1) return this.href;
                }
            }).click(function(e) {
                ga('send','event', 'outbound', 'click', this.href);
            });
    });
})(jQuery);
</script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  
  ga('create', 'Your Analytics ID', 'your-domain.de');
  ga('require', 'displayfeatures');
  ga('require', 'linkid', 'linkid.js');
  ga('send', 'pageview', {'anonymizeIp': true});
</script>
...
</head>

 

Nun solltet Ihr in eurer Übersicht bei Google Analytics unter Ereignisse sehen können was eure Besucher klicken, wie hier zu sehen ist.

 

Google Analytics Statistik

Artikel drucken

Kommentare (0)