Besucherzähler-Badge

Sie können die Aufrufzahl einer Seite auf Ihrer Website anzeigen, indem Sie ein HTML-Element oder ein Bild einbinden.

Hinweis: Sie müssen zunächst die Option “Besucherzähler auf Ihrer Website anzeigen erlauben” in den Website-Einstellungen aktivieren; diese ist standardmäßig deaktiviert, um unbeabsichtigtes Durchsickern von Daten zu verhindern.

Am einfachsten geht das über die JavaScript-Integration:

<script>
    // Append to the <body>; can use a CSS selector to append somewhere else.
    window.goatcounter.visit_count({append: 'body'})
</script>
<script data-goatcounter="https://MYCODE.stats.wise-relations.com/count"
        async src="//static.stats.wise-relations.com/count.js"></script>

Stellen Sie sicher, dass das count.js-Skript geladen ist, bevor Sie diese Funktion aufrufen. Zum Beispiel:

<script>
    var t = setInterval(function() {
        if (window.goatcounter && window.goatcounter.visit_count) {
            clearInterval(t)
            window.goatcounter.visit_count({append: 'body'})
        }
    }, 100)
</script>
<script data-goatcounter="https://MYCODE.stats.wise-relations.com/count"
        async src="//static.stats.wise-relations.com/count.js"></script>

Sie können auch das async-Attribut entfernen.

Ein Beispiel, wie die Ausgabe mit den Standardeinstellungen aussieht:

HTML

SVG

PNG

Anpassung

Die Funktion goatcounter.visit_count() akzeptiert ein Objekt mit folgenden Optionen:

Einstellung	Beschreibung
`append`	HTML-Selektor, an den angefügt wird; CSS-Selektoren gemäß `querySelector()` sind erlaubt. Standard ist `body`.
`type`	Anzeigetyp: `html`, `svg` oder `png`. Standard ist `html`.
`path`	Anzuzeigender Pfad; wird normalerweise aus der URL ermittelt, kann jedoch überschrieben werden.
`no_branding`	Unterdrückt den Hinweis “by Webanalyse”
`attr`	HTML-Attribute, die für das Element gesetzt oder überschrieben werden; nur bei `type` gleich `html`.
`style`	Zusätzliches CSS-Styling für HTML oder SVG; nur bei `type` gleich `html` oder `svg`.
`start`	Startdatum; standardmäßig wird alles einbezogen. Format: `year-month-day` oder `week`, `month`, `year` für den entsprechenden Zeitraum.
`end`	Enddatum; standardmäßig wird alles einbezogen. Format: `year-month-day`.

Die HTML-Variante empfiehlt sich für die meisten Anwendungsfälle, da sie per CSS am einfachsten angepasst werden kann. Die SVG-Version lässt sich ebenfalls mit CSS anpassen; die PNG-Version ist ein festes Bild mit 200x80 Pixeln und kann nicht verändert werden.

Die Standardgröße beträgt 200x80 Pixel, bzw. 200x60 Pixel wenn no_branding gesetzt ist. Die Größe lässt sich durch Angabe von width und height in attr überschreiben.

Der spezielle Pfad TOTAL (Groß-/Kleinschreibung beachten, kein führendes /) zeigt die Gesamtsumme der Website an.

Die Bilder werden 30 Minuten lang gecacht, sodass neue Seitenaufrufe nicht sofort erscheinen.

CSS

Mit der Option style können Sie das Erscheinungsbild anpassen; das funktioniert nur für HTML und SVG.

Anpassbare Elemente:

div                 Div Wrapper; HTML only.
#gcvc-border        Border rect; SVG only.
#gcvc-for           "Views for this page" text.
#gcvc-views         Number with views.
#gcvc-by            "stats by GoatCounter" text.

Beispiel für ein dunkles Farbschema:

goatcounter.visit_count({append: '#stats', style: `
    div { border-color: #fff; background-color: #222; color: #fff; }
`})

Oder dasselbe für SVG:

goatcounter.visit_count({append: '#stats', type: 'svg', style: `
    #gcvc-border { fill: #222; stroke: #fff; }
    #gcvc        { fill: #fff; }
`})

Direkte URLs

Sie müssen die JavaScript-Integration nicht verwenden; Sie können auch direkt ein iframe oder ein Bild einbinden. Die Pfade haben folgendes Format:

https://MYCODE.stats.wise-relations.com/counter/[PATH].[EXT]

[PATH] ist der vollständige Pfad einschließlich führendem /.
[EXT] ist die Erweiterung html, png, svg oder json.

Zum Beispiel zeigt https://MYCODE.stats.wise-relations.com/counter//.html die Aufrufzahl für / an, und https://MYCODE.stats.wise-relations.com/counter//test.html.html zeigt die Aufrufzahl für /test.html.

Es gibt vier Query-Parameter: no_branding, style, start und end, die den Einstellungen in der obigen Tabelle entsprechen.

JSON

Die Erweiterung .json gibt die Seitenaufrufzahl als JSON zurück. Dies kann nicht direkt in einem HTML-Tag verwendet werden, eignet sich aber für eigene Zähler in JavaScript.

Die Antwort ist ein Objekt mit dem Feld count, das die Gesamtbesucherzahl als formatierten String mit Tausendertrennzeichen enthält.

Es gibt außerdem ein Feld count_unique für Abwärtskompatibilität; der Wert ist identisch mit count. Dieses Feld sollte in neuem Code nicht mehr verwendet werden.

Ein einfaches Anwendungsbeispiel:

<div>Number of visitors: <div id="stats"></div></div>

<script>
    let r = new XMLHttpRequest();
    r.addEventListener('load', function() {
        document.querySelector('#stats').innerText = JSON.parse(this.responseText).count
    })

    // Should be exact (encoded) path as it appears in the UI. This uses
    // GoatCounter's count.js
    let path = window.goatcounter.get_data()['p']

    // Or alternatively, do it manually. Will return HTTP status 404 if the
    // path is not found).
    //let path = location.pathname

    r.open('GET', 'https://MYCODE.stats.wise-relations.com/counter/' + encodeURIComponent(path) + '.json')
    r.send()
</script>

Fragen oder Probleme?

Bei Fragen oder Schwierigkeiten stehen wir Ihnen gern zur Verfügung. Die meisten Probleme lassen sich schnell klären.

Kontakt aufnehmen: anzeigen