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:

< !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:

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:

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

This entry was posted on Dienstag, Juli 5th, 2011 at 19:13 and is filed under Allgemein, mysql, PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “JQuery: click counter script”

All the backlinks you need sagt:

10. Dezember 2011 um 01:28

All the backlinks you need…

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

Ü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!

JQuery: click counter script

One Response to “JQuery: click counter script”

Leave a Reply