Clicks auf ein Element zählen?

https://www.pfrommer-gmbh.de/

Ich ahbe auf dieser Seite das gezeichnete Haus auf schwarzem Hintergrund, wo man viele Text-Buttons anklicken kann und das Haus entsprechend geändert wird.
Kann man irgendwie feststellen, wie oft das angeklickt wurde?
Mit fällt da jetzt nur ein Javascript ein.
In Google-Analytics gibt es da nichts von der Stange?

Frank

Ungelesener Beitrag von **Klaus** » Sa 3. Feb 2024, 11:13

Die Seite is ja im Browser geladen und es findet dann dabei keine Kommunikation mit dem Server statt.

->JavaScript mit "Meldung" an den Server.

... wobei Du dann vermutlich noch die Cookieeinstellung bzgl. Marketing &Co beachten müsstest ... als "für die Funktion der Seite erforderlich" geht das sicher nicht durch.

Moin,

ich verwende für so etwas immer einen 15 Jahre alten "Onclick Zähler" vom Werner. Glaube er selbst wird den gar nicht mehr kennen

Zum Beispiel hier für Downloads dieser Mail-Skripts:

https://www.mobirise-tutorials.com/Kontakt-Formular.php

Hier ist mein altes Tutorial dazu in NOF. Das geht in Mobirise ganz genauso:

http://www.tommyherrmanndesign.com/nof/ ... ckzaehler/

Ah ja, genau so!
Merci!

Moin,

hier noch mein:

Tutorial zum Einbau eines "Klick Zählers" in Mobirise

Dass die für dieses Script verwendete Mobirise-Seite die Dateierweiterung .php tragen muss, schreibe ich hier natürlich nur für Mitleser und nicht für Dich.

Werners Script zum Aufruf der Klicks aus der Datei "daten.txt" (damals war Werner noch "hompage-total.de"), gehört in den Bereich "Inside <head> code" von Mobirise.

Passe hier (gleich oben in der ersten Zeile) den relativen Pfad zur Datei "daten.txt" entsprechend an:

Code: Alles auswählen

    <?php
        $clicks_file = file('./downloads/imagecounter/daten.txt');
        for ($i = 0; $i < count($clicks_file); $i++) {
         $temp = explode('|', $clicks_file[$i]);
         $clicks[$temp[0]] = $temp[1];
        }

        function get_clicks($id) {
         global $clicks;
         return $clicks[$id];
        }
    ?>

Der Scriptaufruf über die Browser-Action zum Zählen der Klicks, hier als Beispiel auf meiner oben genannten Formular-Seite, am Button mit der Action zur ?id=4, die als HTTP GET-Variable an das Script mit dem Array $_GET übergeben wird. Die Verzeichnisse, die Du da verwenden willst, musst Du natürlich anpassen wie Du willst:

downloads/imagecounter/zaehler.php?id=4

Code: Alles auswählen

<div class="mbr-section-btn align-center" mbr-buttons mbr-theme-style="display-4" data-toolbar="-mbrBtnMove">
<a class="btn btn-primary" href="http://www.mobirise-tutorials.com/downloads/imagecounter/zaehler.php?id=4" 
data-app-placeholder="Type Text" target="_blank">Download Mailscripts</a>
</div>

Speichere dieses Script "zaehler.php" unverändert und kopiere es, hier in das Verzeichnis "imagecounter", am Server:

downloads/imagecounter/zaehler.php

Code: Alles auswählen

<?php
 // Bilderklickzähler von Werner-Zenk.de

$clicks_file = file('daten.txt');
if (count($clicks_file) > 0) {
 for ($i = 0; $i < count($clicks_file); $i++) {
  $temp = explode('|', $clicks_file[$i]);
  if ($temp[0] == $_GET['id']) {
    $link = $temp[2];
    $temp[1]++;
  }
  $file[] = implode('|', $temp);
}

 $string = implode("\n", $file);
 $string = str_replace("\n\n", "\n", $string);
 $fh = fopen('daten.txt', 'w+');
 flock($fh, 2);
 fputs($fh, $string);
 flock($fh, 3);
 fclose($fh);
 header('location: ' . $link);
}
else {
 header("Location: " . $_SERVER["HTTP_REFERER"]);
}
?>

Wie man an diesem Script sehen kann, wird in eine Datei "daten.txt", die im gleichen Verzeichnis liegt, geschrieben. Dort also in einer Schleife hochgezählt und die Zahl der Clicks an der geklickten ID neu überschrieben.

Die Datei "daten.txt" muss entsprechend Schreibrechte (604) besitzen.

Die Datei "daten.txt" befindet sich hier also im gleichen Verzeichnis, das ich "imagecounter" genannt habe, wie das Script "zaehler.php".

Hier der momentane Inhalt dieser, meiner Beispiel-Datei "daten.txt".

Die erste Zahl ist die ID | die zweite Zahl die gezählten Klicks | es folgt der Pfad zur Datei:

Code: Alles auswählen

1|2803|../download/2017-09-04-Mobirise_Mailscript.zip
2|1101|../download/2017-09-23-Mobirise_Mailscript.zip
3|494|../download/2020-10-12-popup_ein_aus.zip
4|4453|../download/2021-04-24-mailscript_phpmailer640.zip
5|1435|../download/2021-05-05-mailscript_2_phpmailer640.zip
6|876|../download/2021-07-21-mailscript_phpmailer650_smtp_mobirise.zip
7|855|../download/2021-10-16-mailscript_phpmailer650_smtp_mobirise_spam1.zip

Bei meinem Beispiel liegen also alle ZIP-Dateien für den Download in einem Verzeichnis "download".

Wenn Du nun ein Bild anzeigst (keinen Download), dann findet über diese Datei eben nicht der Download, sondern der Aufruf (die Anzeige) des Bildes aus einem Verzeichnis, das Du meinetwegen "anzeige" nennst, statt - also ungefähr so:

Code: Alles auswählen

1|2803|../anzeige/bild1.jpg
2|1101|../anzeige/bild2.jpg
3|4944|../anzeige/bild3.jpg
4|4453|../anzeige/bild4.jpg
5|1435|../anzeige/bild5.jpg
6|876|../anzeige/bild6.jpg
7|855|../anzeige/bild7.jpg

Du musst jeden Eintrag von Anfang an dort stehen haben - mit z.B. 0 Klicks - denn alle verwendeten Einträge müssen bereits in der Datei "daten.txt" vorhanden sein:

Code: Alles auswählen

1|0|../anzeige/bild1.jpg
2|0|../anzeige/bild2.jpg
3|0|../anzeige/bild3.jpg

... usw.

Deine Bilder liegen also dann auch bereits in Deinem neu angelegten Verzeichnis "anzeige" am Server.

Anzeige der Klicks:

Zur Anzeige der Klicks aus der Datei "daten.txt", habe ich folgendes geschrieben:

Downloads insgesamt seit 04.09.2017: <?php echo get_clicks(4)?>

Dieser PHP "echo" Befehl zeigt dann die Klicks über das PHP-Script, das im Bereich "Inside <head> code" dieser Seite liegt, an.

Ich habe in meinem Beispiel also 2 Verzeichnisse im Stammverzeichnis meines Mobirise-Projektes angelegt:

downloads     - mit den Dateien - bei Dir dann "anzeige"
imagecounter  - mit der Datei "daten.txt" und dem Script "zaehler.php"

Weiteres Beispiel mit Anzeige der Klicks zu einer bestimmten Seite:

Natürlich kann man dieses Script auch ebenso lediglich zur Anzeige der Klicks zu einer bestimmten Seite verwenden, wie bei meinem (Werners) "Formular-Generator":

https://www.mobirise-tutorials.com/Form ... -Generator

Da steht dann eben nur die Seite "formulargenerator.php" in der Datei "daten.txt":

Code: Alles auswählen

1|10790|https://www.mobirise-tutorials.com/Formular-Generator/Generator/formulargenerator.php

Werner-Zenk.de

Eine moderne Variante des "Klick Zählers"

Bilder bewerten - Einfaches Bewertungssystem für Bilder

Moin Werner,

vielen Dank für den Link zu deinem ganz neuen Script "Bilder-Bewertung".

Hast du eigentlich noch den alten Klickzähler, den ich oben beschrieben habe, irgendwo auf deiner Seite? Ich habe danach gesucht, aber konnte ihn nicht finden oder etwas Ähnliches.

Ich benötige ihn nicht zur Bewertung von Bildern, sondern nur als Klickzähler, wenn jemand tatsächlich auf ein Bild klickt, um dieses z.B. zu vergrößern.

Eigentlich brauche ich das auch nicht für Bilder, sondern insbesondere als Klickzähler für Links/Buttons zum Download von Dateien oder auch für Links zu anderen Seiten. Schöner wäre es noch, wenn die Klicks sofort angezeigt würden (jetzt muss die Seite immer erst neu geladen werden).

Stobi (Frank) benötigt einen Klickzähler, um festzustellen, welche Hotspots ⨁ auf dieser Architekturzeichnung bevorzugt angeklickt werden:

Habe mir auch deinen neuen Bildklickzähler angesehen. Es ist eine tolle Sache, nur leider so als Klickzähler für Links und Downloads oder frei verwendete Bilder/Hotspots gar nicht verwendbar.

Ich denke auch, dass eine .txt-Datei (wie beim alten Zähler) für den Benutzer in diesem Fall einfacher wäre als eine SQLite-Datenbank, in der ja am Ende nichts anderes steht.

Hallo Werner,

habe gerade den alten Bildklickzähler neu geboren bei Dir entdeckt

https://werner-zenk.de/archiv/bilderklickzaehler.php

Vielen Dank !!!

Tests:

"Bildklickzähler" als Test (Version 05.02.2024):

https://www.mobirise-tutorials.com/Test ... bilder.php

"Klickzähler" für Links als Test (Version 05.02.2024):

https://www.mobirise-tutorials.com/Test ... ckzaehler/

@Werner,

Frage zum "Klickzähler":

Die Zahl der Klicks wird ja nun sofort hochgezählt angezeigt, aber immer nur nach dem ersten Klick. Dazwischen muss ich die Seite neu laden. Muss das so sein oder fehlt da noch etwas?

Werner-Zenk.de

Ja da fehlt noch etwas JavaScript, Das Skript verschluckt sich manchmal beim Daten senden und Daten abholen.
Werde ich vielleicht noch ändern, aber so wichtig ist das nun auch nicht ... Wer klickt schon 2 mal auf einen Link, nur um zu sehen das sich der Zähler erhöht

Ja - viel mir nur auf und wollte ich Dir mitteilen.

Es geht aber auch um mehrere Links (nicht 2 x der gleiche Link).

Man könnte ja so eine Art "Linkliste" haben und dann zählt eben nur der erste Klick, ohne ein "refresh" der Seite, automatisch hoch.

Werner-Zenk.de

Tommy Herrmann hat geschrieben: ↑Di 6. Feb 2024, 10:17 Es geht aber auch um mehrere Links (nicht 2 x der gleiche Link).

Ja, weil immer nur der Link mit der aktuellen (angeklickten) ID erhöht wird und nicht alle Counter.

... Du meinst jetzt - bevor man die Seite neu lädt - oder ...

Das lässt sich doch aber auch gar nicht wirklich verhindern - oder man müsste die Seite immer automatisch neu laden lassen - ist vielleicht auch doof.

Werner-Zenk.de

Beim Script "Bilder bewerten" werden bei jedem Klick alle Counter aktualisiert, und beim "Klickzähler" nur der aktuelle Counter.

Wahnsinn Werner

https://www.mobirise-tutorials.com/Test ... kzaehler2/

Toll - nun wird es gleich auch hochgezählt und aktualisiert angezeigt

Hallo Werner,

ich hatte ein wenig Probleme den neuen "Klickzähler" direkt in Mobirise einzubauen

Ich habe diesen nun zum ersten Mal hier zum Download meines modifizierten Nachrichten-Scripts verwendet:

https://www.mobirise-tutorials.com/News/direkteinbau/

Ich glaube auch fast, dass da ein Fehler bei der class="info" liegt, denn diese liegt außen um eine weiteres

 Tag 

... drum herum und wirkt in Mobirise dann nicht (ich weiß eigentlich auch nicht warum).

Code: Alles auswählen

<span class="info"><span class="counter" data-count="1">64 x</span></span>

Ich wolle meine Download-Zahl fett darstellen und das ist mir nur mit einer weiteren class="counter" im JavaScript an der Variable $clicks gelungen. Die blaue Farbe hat dagegen über die class="info" gewirkt. Hat das vielleicht mit dem von Mobirise gesetzten "font-weight: 400" etwas zu tun. Das lässt sich nicht am überschreiben:

Code: Alles auswählen

  <!-- Klickzähler -->
  <?php
       // Klickzähler Version vom: 07.04.2024
       // https://werner-zenk.de
       
       // - EDIT Tommy - Pfad angepasst
       $clicks_file = file('counter/data.txt');
       for ($i = 0; $i < count($clicks_file); $i++) {
          list($id, $hits) = explode('|', $clicks_file[$i]);
          // EDIT Tommy - class="counter" hinzugefügt
          $clicks[$id] = '<span class="counter" data-count="' . $id . '">' . $hits . ' x</span>';
       }
       
       function get_clicks(int $id, array $clicks): string
       {
          return '<span class="info">' . $clicks[$id] . '</span>';
       }
  ?>  
  <script>
      window.addEventListener("DOMContentLoaded", () => {
         document.querySelectorAll("a[data-button]").forEach((element) => {
            element.setAttribute("title", "Download");
            element.addEventListener("click", (e) => {
               let id = e.target.dataset.button;
               // Eintagen - EDIT Tommy - Pfad angepasst
               fetch(`counter/counter.php?id=${id}`)
                  .then(() => {
                     // Auslesen - EDIT Tommy - Pfad angepasst
                     fetch(`counter/counter.php?da=${id}`)
                        .then((antwort) => {
                           return antwort.text();
                        })
                        .then((antwort) => {
                           document.querySelector(`[data-count="${id}"]`).textContent = antwort + ' x';
                        });
                  });
            });
         });
      });
  </script>

Dazu habe ich 2 Fragen an Dich:

1) Im Script oben wollte ich die Pfade anpassen, das geht nur so:

counter/counter.php

aber nicht so - mit einem führenden Slash - dann bleibt die Seite weiß - warum?

/counter/counter.php

2) In der Datei "data.txt" habe ich einfach als Kommentar noch "Nachrichten-Direkteinbau" mit hinten dran geschrieben, damit ich die ID besser zuordnen kann, wenn da später vielleicht 20 oder 200 IDs stehen. Ist das in Ordnung?

1|64|Nachrichten-Direkteinbau

Werner-Zenk.de

Tommy Herrmann hat geschrieben: ↑Mi 7. Feb 2024, 11:33 2) In der Datei "data.txt" habe ich einfach als Kommentar noch "Nachrichten-Direkteinbau" mit hinten dran geschrieben, damit ich die ID besser zuordnen kann, wenn da später vielleicht 20 oder 200 IDs stehen. Ist das in Ordnung?

1|64|Nachrichten-Direkteinbau

Ja, das war auch meine Idee, damit man sich vor lauter Zahlen in der Liste noch auskennt.

aber nicht so - mit einem führenden Slash - dann bleibt die Seite weiß - warum?

/counter/counter.php

Da fehlt noch ein Punkt davor, dann bleibt es im gleichen Verzeichnis.

Nur ein einfacher führender Slash, geht im Dateiverzeichnis nirgendwo hin und erzeugt nur eine Fehlermeldung.

OK - danke Dir - geht mit Punkt:

./counter/counter.php

Ich hätte jetzt schwören können, dass ich das als Allererstes mit Punkt versucht hatte, da muss ich dann was anderes falsch gemacht haben

In HTML geht das aber auch ohne Punkt - mache ich dann seit 30 Jahren falsch

http://www.tommyherrmanndesign.com/nof/Relative-Pfade/

… das hat wohl was mit JavaScript zu tun.

Werner-Zenk.de

Tommy Herrmann hat geschrieben: ↑Mi 7. Feb 2024, 13:40 OK - danke Dir - geht mit Punkt:

./counter/counter.php

Ich hätte jetzt schwören können, dass ich das als Allererstes mit Punkt versucht hatte, da muss ich dann was anderes falsch gemacht haben

In HTML geht das aber auch ohne Punkt - mache ich dann seit 30 Jahren falsch

http://www.tommyherrmanndesign.com/nof/Relative-Pfade/

… das hat wohl was mit JavaScript zu tun.

Das kommt halt darauf an wie fehlertolerant der HTML-. PHP-Parser ist.

bei einer Verlinkung im gleichen Verzeichnis bewirkt kein Punkt oder auch kein Punkt und kein Slash das Gleiche

Das mag vielleicht für HTML und CSS gelten, aber PHP ist da empfindlicher.
Einfach dieses ./ weglassen, wenn sich die Datei im gleichen Verzeichnis befindet.

OK - danke Dir Werner …

… so werde ich das dann in Zukunft auch machen

Werner-Zenk.de

Ich habe den Klickzähler aktualisiert und die JavaScript-Funktion: Intl.NumberFormat hinzugefügt.
Die Zahlenwerte werden dadurch formatiert, wenn diese mal jenseits der 1000 sind: zb: 1.645 oder: 179.521

Mobirise-Tutorials.com

Clicks auf ein Element zählen?

Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Re: Clicks auf ein Element zählen?

Wer ist online?