Klicks zählen ohne URL zu verändern ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anweisung
aufruf
ausgabe
beispiel
code
datei
dynamisch erfassen
entfernen
frage
funktion
funktionieren
gleiches fenster
http
idee
speichern
speicherung
target
text
url
ziel
-
Hallo
wie kann man Klicks auf Links zählen, ohne die Ziel URL zu verändern ?
Der Link soll jeweils zu einer externene Seite gehen (mit http://)
und jeder Klick (evtl. sogar auch View) soll gezählt werden.
ohne das"'Feature" die URL nicht zu verändern bekäme ich es hin,
mit PHP und einem Redirect (/seite.php?id=12345 leitet weiter zur URL)
aber es soll die URL nicht verändert werden, kein Redirect
Speichern muss ich die Klicks letztlich wohl mit PHP (+MySQL)
aber Auslösen des Klick-Zählers wird wohl über JS / Ajax gehen
... aber wie kann das gehen
Idee: um den Link ein <span id="12345"> mit eindeutiger ID
und bei Klick auf die ID den Zähler auslösen
Aber sobald auf den Link geklickt wird, dann wird die Seite ja auch verlassen
und somit hat JS / Ajax ja keine Zeit mehr um den an Zähler im Hintergrund zu laden
also geht die idee nur mit target="_blank" damit meine Seite offen bleibt ??
(weil bei "gleiches Fenster" die eigene Seite, die ja noch zählen soll, weg ist ?)
oder geht das trotzdem (so schnell) ??
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wenn du neue URL in einer neuen Seite geöffnet werden soll dann ist die Idee mit AJAX wohl die Beste.
Damit du dein JavaScript bei einem Klick ausführen kannst gibts da was Schönes:
http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick
-
Du kannst da auch ganz einfach mit jQuery arbeiten und zwar wählst du mit dem Selektor den Link mit der id aus:
$('#12345').click(function(){ // und hier drinnen dann die AJAX-Anweisung }, und hier rein kommt der callback, also wenn die funktion fertig ist z. B.: fertig(););
und weiter oben kannst du dann die callback funktion definieren:function fertig(link) { location.href=link; }Irgendwie so kann das dann funktionieren wenn das, das ist was du suchst.
Über jQuery und AJAX mit jQuery kann du hier nochmal nachlesen oder schau dir online-Tutorials an.
MfG
Dominic -
hmm, ja, aber ich will kein onclick= im Code haben,
es sollte mit getElementByID oder so funktionieren
also so, dass ich den Link-Code (<a href=...>...</a>) nicht verändern muss
und am liebsten suche ich eine Möglichkeit,
wie es auch mit target="_top" geht (Link in gleiches Fenster)
Idee wäre noch bei Klick ein (unsichtbares) Popup zu öffnen,
in dem dann der Zähler den Klick speichert und sich gleich wieder schließt,
aber das kommt nicht in Frage, da ja 90% einen Popup-Blocker haben
@naturfit
ja, sowas in der Art habe ich mir vorgestellt, nurr eben die ID noch dynamisch erfassen
und es ist hat noch die Frage, ob das auch bei Link im gleichen Fenster funktioniert
hebt die jQuery click() Funktion mit callback das "sofortige" öffnen des Links auf
so dass erst nach Speicherung des Klicks die Ziel-URL geöffnet wird ?
-
Ja das kannst du mit return false machen glaub ich oder preventDefault oder irgend wie so das findest du schon.
Wähle einfach statt der id im selektor alle links also alle a tags oder du machst auf alle links die du zählen willst eine class und wählst die aus:
dann kannst du die id des angeklickten elements auslesen:$('.linkdieichzaehlenwill')
und für diese id machst du dann den rest in der php-datei und speicherst es in die mysql.$(this).attr('id')
Das mit AJAX mit jQuery kannst du dir eh online anschauen.
MfG
Dominic -
Hallo
habe das mal ausprobiert, hier meine Lösung dafür
... aber noch ohne fertige Datei count_click.php zum Speichern der Klicks (siehe unten)
nur mit DEBUG-Ausgabe, was durch den Klick und die jQuery (POST) Anfrage dort ankommt
Datei test_seite.htm
= die Datei mit den Links, je Link mit eindeutige ID innerhalb dem Container (div) #links
damit der Klick auch genau zugeordnet werden kann
... diese Seite muss nicht .htm sein, sie könnte auch index.php oder sonst-wie heissen, egal ....
nur wenn man die Datei count_click.php anders benennt, das dann entspr. auch im Code ändern ;)
<html> <head> <title>Test Click Count</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#links a').click(function(e) { var cc_id = $(this).attr('id'); var cc_href = $(this).attr('href'); var cc_target = $(this).attr('target'); var cc_text = $(this).text(); var cc_msec = new Date().getTime(); $.post("count_click.php", { 'id':cc_id, 'link':cc_href, 'target':cc_target, 'text':cc_text, 'msec':cc_msec }) .done(function(data) { $('#result').empty().html(data); }) .fail(function() { $('#result').empty().html("<p> Fehler ... kann Anfrage nicht verarbeiten </p>"); }); if (cc_target != '_blank') { e.preventDefault(); window.open(cc_href); // --- open link in new window/tab if target is not _blank --- return false; } }); }); </script> </head> <body bgcolor="#FFFFFF" text="#000000"> <br> <br> <div id="links"> <br> + <a href="http://heise.de" id="lnr01" target="_blank">heise.de</a> <br> + <a href="http://google.de" id="lnr02" target="_self">google.de</a> <br> + <a href="http://lima-city.de" id="lnr03" target="_top">lima-city.de</a> </div> <br> <br> <div id="result"> ... hier kommt die Ausgabe bei Aufruf von: count_click.php ... </div> <br> <br> </body> </html>
Datei count_click.php
an diese Datei werden die Daten bei Klick gesendet, dort kann man dann in DB Speichern, etc.
dort könnte dann auch eine IP-Reload-Sperre rein, um keine Mehrfach-Klicks mit zu zählen, usw.
<?php // ------------------------------------------------------ print "<br />\n"; print "<br />\n"; print "<pre style=\"margin:4px; padding:4px; background:#DEDEDE; text-align:left; color:#000033;\">\n"; print_r($_POST); print "</pre>\n"; print "<br />\n"; print "<br />\n"; // ------------------------------------------------------ ?>
Beispiel Ausgabe wäre bei Klick auf den lima-city.de LINK dann so
Array ( [id] => lnr03 [link] => http://lima-city.de [target] => _top [text] => lima-city.de [msec] => 1366283081418 )
also man bekommt sowohl die ID sowie href (= KEY: link) und den Link-Text , etc.
und kann damit dann je nach Anforderungen und DB-Struktur die Klikcs speichern
PS: Besonderheit ist, wenn ein Link nicht target="_blank" hat
dann wird der Link trotzdem in einem neuen Fenster (bzw. Tab) geöffnet,
damit man genug "Zeit" hat, die Datei count_click.php zu verarbeiten
... evtl gibt es dafür ja ne bessere Lösung ... ;)
EDIT: ... Nachtrag .. das geht bestimmt auch ohne jQuery, direkt mit AjaX ... irgendwie :oO
Beitrag zuletzt geändert: 18.4.2013 13:10:50 von boobox -
Hallo
hier eine Variante die auch ohne jQuery auskommt ...
<div align="center"> <br> <br> aaaa <br> <a id="b01" href="#111" rel="follow" title="test_123" target="_self">bbbbb</a> <br> cccccc <br> <a id="b02" href="#222" target="_top">ddddd <span>xyxyxyxy</span></a> <br> eeeee <br> </div> <script type="text/javascript"> /* <![CDATA[ */ (function(){ var tId = setInterval(function(){if(document.readyState == "complete") onComplete()},12); function onComplete(){ clearInterval(tId); watch_links(); }; })(); function watch_links() { var a = document.getElementsByTagName("a"); for(i = 0; i< a.length; i++) { if (a[i].id != '') { a[i].onclick = count_link; } } return true; } function count_link() { var cc_root = '/'; var cc_file = 'count_click.php'; var cc_id = (this.id); var cc_text = (this.innerHTML); var cc_href = (this.href); /* --- var cc_target = (this.target); var cc_rel = (this.rel); var cc_title = (this.title); --- */ var cc_sloc = self.location.href; var cc_time = new Date().getTime(); var imgsrc = ''; imgsrc += cc_root + cc_file; imgsrc += '?id=' + encodeURIComponent(cc_id) + ''; imgsrc += '&text=' + encodeURIComponent(cc_text) + ''; imgsrc += '&href=' + encodeURIComponent(cc_href) + ''; imgsrc += '&sloc=' + encodeURIComponent(cc_sloc) + ''; imgsrc += '&time=' + encodeURIComponent(cc_time) + ''; alert(imgsrc); i = new Image(); i.src = imgsrc; /* ------ document.write('<img src="' + imgsrc + '" alt="' + cc_id + '" border="0" />'); ------ */ return true; } /* ]]> */ </script> <br> <br>
Beispiel siehe: http://jsfiddle.net/jY75K/2/
was dann in der count_click.php ankommt, das sieht man
ja auch schon im IMG SRC ... mit alert() ... der (GET) Query-String
... diees alert() sollte man dann natürlich entfernen oder aus-kommentieren.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
