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

{{if .FromWWW}}
**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.
{{else}}
**Hinweis**: Sie müssen zunächst die Option "Besucherzähler auf Ihrer Website anzeigen erlauben"
in den <a href="{{.Base}}/settings/main#section-site">Website-Einstellungen</a> aktivieren; diese ist standardmäßig *deaktiviert*, um unbeabsichtigtes Durchsickern von Daten zu verhindern.
{{end}}

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>
    {{template "code" .}}

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>
    {{template "code" .}}

Sie können auch das `async`-Attribut entfernen.

Ein Beispiel, wie die Ausgabe mit den Standardeinstellungen aussieht:

<div id="vc-example">
<div id="vc-html">HTML<br></div>
<div id="vc-svg">SVG<br></div>
<div id="vc-png">PNG<br></div>
</div>


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:

    {{.SiteURL}}/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 `{{.SiteURL}}/counter//.html` die Aufrufzahl für `/` an, und `{{.SiteURL}}/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', '{{.SiteURL}}/counter/' + encodeURIComponent(path) + '.json')
        r.send()
    </script>
