FollowMe

JQuery: click counter script

Du möchtest wissen, wie oft eine Datei von Deiner Website herunter geladen wurde – mit JQuery geht das ganz einfach. In meinem Beispielscript werden zunächst allen HREFs einer bestimmten Klasse – hier “dl_link” – ein Evenhandler hinzugefügt. Der Eventhandler fängt das “Click Ereignis” ab und deaktiviert anschliessend das Standardverhalten der HREFs.

Bei einem Klick wird nun nicht mehr automatisch das hinterlegt Target geöffnet. Stattdessen wirt per $.GET im Hintergrund ein Script aufgerufen, welches einen Eintrag in einer Datenbanktabelle hinzufügt. Dieser Eintrag enthält z. B. die Uhrzeit, das Datum und den Inhalt des Alt, Titel und des Href Attributes.

Anschliessend wird bei Success das ursprüngliche Target aufgerufen. Im Prinzip kann die Weiterleitung auch in der Funktion von $.get übergeben werden. Ich habe mich für Success entschieden, da es von der Bedeutung aus gesehen am nächsten ist. Der Vollständigkeit halber habe ich alle weiteren möglichen Funktionen aufgenommen aber den Inhalt leer belassen. Hier das vollständige Demo:

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
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona$
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Clickcounter-Demo</title>
 
        <!--jQuery per CDN einbinden-->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
 
                $(document).ready(function() {
                        //or all links: 'a', or class 'a.dl_class' or '#id a' ...
                        $('a.dl_link').click(function(e){
                                e.preventDefault();
                                var link = $(this).attr('href');
                                var title = $(this).attr('title');
                                var alt = $(this).attr('alt');
 
                                $.get('counter.php?link='+ link + '&title=' + title + '&alt=' + alt, function() {})
                                .success(function() {window.location.href=encodeURI(link);})
                                .error(function() {})
                                .complete(function() {});
                        });
                });
 
        </script>
 
</head>
 
<body>
 
<p>
        <a href="index.php?id=1" title="Link 1" alt="Link 1">Link 1</a>
        <a href="index.php?id=2" title="Link 2" alt="Link 2">Link 2</a>
        <a href="index.php?id=3" title="Link 3" alt="Link 3">Link 3</a>
        <a href="index.php?id=4" title="Link 4" alt="Link 4">Link 4</a>
        <a href="index.php?id=5" title="Link 5" alt="Link 5">Link 5</a>
        <a href="index.php?id=6" title="Link 6" alt="Link 6">Link 6</a>
</p>
 
<p>
        <a href="index.php?id=10" title="DL Link 1" alt="DL Link 1" class="dl_link">DL Link 1</a>
        <a href="index.php?id=20" title="DL Link 2" alt="DL Link 2" class="dl_link">DL Link 2</a>
        <a href="index.php?id=30" title="DL Link 3" alt="DL Link 3" class="dl_link">DL Link 3</a>
        <a href="index.php?id=40" title="DL Link 4" alt="DL Link 4" class="dl_link">DL Link 4</a>
        <a href="index.php?id=50" title="DL Link 5" alt="DL Link 5" class="dl_link">DL Link 5</a>
        <a href="index.php?id=60&p1=1&p2=2" title="DL Link 6" alt="DL Link 6" class="dl_link">DL Link 6</a>
</p>
 
</body>

Hier folgt die Datenbankstruktur:

1
2
3
4
5
6
7
8
CREATE TABLE IF NOT EXISTS `clicks` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `link` VARCHAR(255) NOT NULL,
  `title` VARCHAR(255) NOT NULL,
  `alt` VARCHAR(255) NOT NULL,
  `uhrzeit` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=41 ;

Und hier der PHP Code:

1
2
3
4
5
6
7
< ?php
  mysql_connect('localhost','DBUSER','DBPASSWORD');
  mysql_select_db('DBNAME');
  $sql = "INSERT INTO clicks (id, link, title, alt, uhrzeit) VALUES (NULL, '" . mysql_real_escape_string($_GET['link'])  . "', '" . mysql_real_escape_string($_GET['title'])  . "', '" . mysql_real_escape_string($_GET['alt'])  . "', CURRENT_TIMESTAMP)";
  mysql_query($sql);
  mysql_close();
?>

Viel Spaß damit!

P. S. Um später ggf. eine Heatmap zu erstellen zu können, lassen sich in ähnlicher Art und Weise auch die Koordinaten des Klicks aufzeichnen. In größeren Webapps können natürlich noch parallel Benutzerinformationen speichern lassen. Die App läßt sich so z. B. im Hinblick auf häufig benutzte bzw. weniger benutze Komponenten Benchmarken.





One Response to “JQuery: click counter script”

  1. All the backlinks you need…

    [...]JQuery: click counter script « devgeek.de: news, tutorials und links by Mark Buch[...]…

Leave a Reply

Kommentarlinks könnten nofollow frei sein.


Über den Author:

Nickname: admin:

Name: MarkBuch

Website: http://wordpress001.webserver.local/author/admin/

Jabber: buechlein@jabber.org

Über Mark Buch: Ich bin als Web-Entwickler mit langjähriger Berufserfahrung tätig und habe Anfang 2010 diesen Blog gestartet. Unter anderem trage ich hier Infos zu den Themen Web-Entwicklung und Web-Design zusammen. Ich freue mich auf Eure Kommentare und anregende Diskussionen!



adobe air Apache2 Apps Blender css debian factory fundstück fundstücke geek news geek wear Grafik-Tutorial html HTML/XHTML html 5 iphone iPhone OS 4.0 ispcp javascript jqtouch jquery jquery plugin linux linux shell Mac mysql os x pdf phonegap PHP PostgreSQL profiling qr code script security SEM SEO shell Technik tooltip typo3 video wallpaper xcode zend framework
 
ads webograf nohostname linkeaugen.de
 
linkeaugen - top image

Twitter timeline

Blogverzeichnis - Blog Verzeichnis bloggerei.de

IE Tester

Copyright 2010 devgeek.de - News, Tutorials & Links  
Templatedesign & Programmierung Mark Buch | Impressum | RSS