Installationsanleitung: WordPress, Next.js, Tilda und mehr

Schnellstart

Binden Sie das EuroMetrics-Tracking-Skript in weniger als einer Minute auf Ihrer Website ein. Fügen Sie das folgende Snippet auf jeder Seite, die Sie erfassen möchten, vor dem schließenden </head>-Tag ein:

<script defer src="https://app.eurometrics.eu/script.js"
        data-website-id="YOUR_WEBSITE_ID"></script>

Ersetzen Sie YOUR_WEBSITE_ID durch die Website-ID aus Ihrem EuroMetrics-Dashboard. Sie finden sie unter Einstellungen → Websites → Tracking-Code.

Das Skript ist nur 1,5 KB groß: Es lädt mit defer asynchron und beeinträchtigt die Ladezeit Ihrer Seiten nicht. Es werden keine Cookies gesetzt und kein Consent-Banner benötigt.

WordPress

Für die einfachste Einrichtung gibt es ein offizielles EuroMetrics-Plugin für WordPress. Wenn Sie die volle Kontrolle behalten möchten, können Sie das Skript auch manuell einbinden.

Option 1: Offizielles Plugin (empfohlen)

1. Laden Sie die neueste Version von GitHub herunter (eurometrics-1.0.0.zip).
2. Gehen Sie im WordPress-Adminbereich zu Plugins → Neues Plugin hinzufügen → Plugin hochladen. Wählen Sie die heruntergeladene ZIP-Datei aus, klicken Sie auf Jetzt installieren und anschließend auf Aktivieren.
3. Öffnen Sie Einstellungen → EuroMetrics, fügen Sie Ihre Website-ID ein und speichern Sie. Das war’s, das Tracking ist jetzt aktiv.

Konfiguration

1. Öffnen Sie Einstellungen → EuroMetrics.
2. Das Feld EuroMetrics URL ist mit https://app.eurometrics.eu vorausgefüllt. Ändern Sie es nur, wenn Sie eine White-Label-Instanz nutzen.
3. Geben Sie Ihre Website-ID ein (Sie finden sie im EuroMetrics-Dashboard unter Einstellungen → Websites → Tracking-Code (UUID-Format).
4. Aktivieren Sie bei Bedarf Exclude Admins, damit Ihre eigenen Besuche nicht erfasst werden, wenn Sie als Administrator angemeldet sind.
5. Klicken Sie auf Änderungen speichern. Die Statusanzeige wird grün, sobald das Tracking aktiv ist.

Übersicht der Plugin-Einstellungen

Option 2: Manuelle Installation

Wenn Sie das Plugin nicht verwenden möchten, binden Sie den Tracking-Code manuell über die Datei functions.php Ihres Themes ein:

function add_eurometrics_tracking() {
    $website_id = 'YOUR_WEBSITE_ID';
    $host = 'https://app.eurometrics.eu';
    echo '<script defer src="' . esc_url($host . '/script.js') . '" data-website-id="' . esc_attr($website_id) . '"></script>';
}
add_action('wp_head', 'add_eurometrics_tracking');

Alternativ können Sie ein Plugin wie Insert Headers and Footers nutzen, um das Script-Tag in den <head>-Bereich einzufügen, ohne Theme-Dateien zu bearbeiten.

Option 3: Code-Snippet-Plugin

Wenn Sie ein Plugin zur Codeverwaltung wie WPCode, Code Snippets oder ein ähnliches verwenden:

1. Öffnen Sie die Einstellungen oder die Snippet-Verwaltung des Plugins.
2. Legen Sie ein neues Snippet im Bereich Site-Wide Header an.
3. Fügen Sie das Tracking-Skript ein und ersetzen Sie YOUR_WEBSITE_ID durch Ihre tatsächliche Website-ID.
4. Speichern und aktivieren Sie das Snippet.

Installation überprüfen

• Einbindung des Skripts prüfen: Öffnen Sie Ihre Website in einem Inkognito-Fenster, wählen Sie per Rechtsklick → Seitenquelltext anzeigen und suchen Sie nach eurometrics.
• Netzwerkanfragen prüfen: Öffnen Sie die Entwicklertools (F12) → Tab Netzwerk, laden Sie die Seite neu und filtern Sie nach script.js.
• Dashboard prüfen: Melden Sie sich bei EuroMetrics an und öffnen Sie Ihre Website. Ihr Seitenaufruf sollte innerhalb von Sekunden erscheinen.

Fehlerbehebung

Fortgeschritten: WordPress Multisite

Das EuroMetrics-Plugin funktioniert auch in WordPress-Multisite-Installationen. Aktivieren Sie das Plugin netzwerkweit, öffnen Sie dann auf jeder Unterseite Einstellungen → EuroMetrics und tragen Sie die jeweilige Website-ID ein.

Fortgeschritten: Kompatibilität mit Caching

Das Tracking-Skript ist mit allen gängigen WordPress-Caching-Plugins kompatibel: WP Super Cache, W3 Total Cache, LiteSpeed Cache (keine besondere Konfiguration nötig), WP Rocket (das Skript darf nicht in der Liste “Delay JavaScript Execution” stehen) und Cloudflare (script.js vom Rocket Loader ausnehmen).

Fortgeschritten: WooCommerce

EuroMetrics funktioniert mit WooCommerce ohne weitere Einrichtung. Seitenaufrufe von Produktseiten, Kategorieseiten, Warenkorb, Kasse und Bestellbestätigung werden automatisch erfasst.

Next.js

Verwenden Sie für optimales Laden die integrierte Komponente next/script. Fügen Sie sie in Ihr Root-Layout ein, damit sie auf jeder Seite geladen wird:

// app/layout.tsx
import Script from "next/script"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.eurometrics.eu/script.js"
          data-website-id="YOUR_WEBSITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Die Strategie afterInteractive sorgt dafür, dass das Skript erst lädt, wenn die Seite interaktiv ist, ähnlich wie defer in reinem HTML.

Pages Router? Wenn Sie den Pages Router statt des App Routers verwenden, fügen Sie die Komponente Script in _app.tsx statt in layout.tsx ein.

Tilda

In Tilda können Sie eigenes HTML in den <head> Ihrer Website einfügen:

1. Öffnen Sie Ihr Tilda-Projekt und gehen Sie zu Website-Einstellungen.
2. Klicken Sie auf den Tab Mehr und suchen Sie HTML-Code für den <head>-Bereich.
3. Fügen Sie das Tracking-Skript ein.
4. Klicken Sie auf Speichern und veröffentlichen Sie Ihre Website. Die Daten erscheinen innerhalb weniger Minuten in Ihrem Dashboard.

Allgemeine Empfehlungen

Content Security Policy (CSP)

Wenn Ihre Website eine Content Security Policy verwendet, ergänzen Sie folgende Direktiven:

Content-Security-Policy:
  script-src 'self' https://app.eurometrics.eu;
  connect-src 'self' https://app.eurometrics.eu;

Single-Page-Anwendungen

EuroMetrics erkennt die clientseitige Navigation in SPAs, die mit React, Vue, Svelte und anderen Frameworks gebaut sind, automatisch. Das Skript reagiert auf Änderungen über pushState und replaceState, daher ist keine zusätzliche Konfiguration nötig.

Eigene Events erfassen

Neben Seitenaufrufen können Sie eigene Events wie Button-Klicks, Formularübermittlungen oder Käufe erfassen:

// Track a custom event
umami.track("signup_click", {
  plan: "pro",
  source: "pricing_page",
})

Die Events erscheinen in Ihrem Dashboard unter Events und lassen sich für Funnels und Conversion-Ziele nutzen.

Brauchen Sie Hilfe? Schreiben Sie uns an support@eurometrics.eu.