Das Snippet
Nach dem Anlegen einer Website unter Live-Daten erhältst du einen Einbindungscode:
<script src="https://turbometrics.de/tm.min.js" data-site-id="DEIN_SITE_KEY" async></script>
Dieses Script muss im <head> jeder Seite stehen, die gemessen werden soll. Das async-Attribut sorgt dafür, dass es die Ladezeit nicht beeinflusst.
WordPress
Option 1: functions.php (empfohlen)
Füge folgenden Code in die functions.php deines Child-Themes ein:
add_action('wp_head', function () {
echo '<script src="https://turbometrics.de/tm.min.js" data-site-id="DEIN_SITE_KEY" async></script>';
}, 1);
Die 1 als Priorität sorgt dafür, dass das Script früh im <head> geladen wird.
Option 2: Plugin „Insert Headers and Footers"
- Installiere das Plugin WPCode (ehemals „Insert Headers and Footers")
- Gehe zu Code Snippets > Header & Footer
- Füge den Script-Tag in das Feld Header ein
- Speichern
Option 3: Theme-Einstellungen
Viele WordPress-Themes bieten unter Design > Customizer > Zusätzliches CSS/JS oder in den Theme-Optionen ein Feld für Header-Scripts. Füge den Snippet-Code dort ein.
Option 4: wp_head Hook per Plugin
Falls du ein eigenes Plugin nutzt:
<?php
/**
* Plugin Name: turbometrics Live-Daten
*/
add_action('wp_head', function () {
echo '<script src="https://turbometrics.de/tm.min.js" data-site-id="DEIN_SITE_KEY" async></script>';
}, 1);
Speichere als turbometrics.php im Verzeichnis wp-content/plugins/ und aktiviere das Plugin.
Shopify
- Gehe zu Online Store > Themes > Actions > Edit code
- Öffne
theme.liquid - Füge den Script-Tag direkt vor
</head>ein - Speichern
TYPO3
Über TypoScript:
page.headerData.99 = TEXT
page.headerData.99.value = <script src="https://turbometrics.de/tm.min.js" data-site-id="DEIN_SITE_KEY" async></script>
Statische Websites / HTML
Füge den Script-Tag direkt in den <head> deiner HTML-Dateien ein:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine Seite</title>
<script src="https://turbometrics.de/tm.min.js" data-site-id="DEIN_SITE_KEY" async></script>
</head>
Next.js / React
In _app.tsx oder layout.tsx:
import Script from 'next/script'
export default function Layout({ children }) {
return (
<html>
<head>
<Script
src="https://turbometrics.de/tm.min.js"
data-site-id="DEIN_SITE_KEY"
strategy="afterInteractive"
/>
</head>
<body>{children}</body>
</html>
)
}
Nuxt / Vue
In nuxt.config.ts:
export default defineNuxtConfig({
app: {
head: {
script: [
{ src: 'https://turbometrics.de/tm.min.js', 'data-site-id': 'DEIN_SITE_KEY', async: true }
]
}
}
})
Laravel
In deinem Blade-Layout (z. B. layouts/app.blade.php):
<head>
...
<script src="https://turbometrics.de/tm.min.js" data-site-id="DEIN_SITE_KEY" async></script>
</head>
Google Tag Manager
- Neues Tag erstellen: Benutzerdefiniertes HTML
- HTML einfügen:
<script src="https://turbometrics.de/tm.min.js" data-site-id="DEIN_SITE_KEY" async></script>
- Trigger: All Pages (oder spezifische Seiten)
- Veröffentlichen
Hinweis: Die Einbindung per Tag Manager kann dazu führen, dass das Script erst nach dem initialen Laden ausgeführt wird. Dadurch können einzelne Metriken (vor allem FCP und LCP) bei manchen Seitenaufrufen fehlen. Die direkte Einbindung im <head> ist deshalb genauer.
Prüfen ob es funktioniert
Nach der Einbindung:
- Öffne deine Website in einem normalen Browser (kein Inkognito mit Adblockern)
- Navigiere ein paar Seiten
- Gehe zu Live-Daten in turbometrics — nach 1–2 Minuten sollten die ersten Messwerte erscheinen
Falls keine Daten ankommen:
- Prüfe die Browser-Konsole auf Fehler
- Stelle sicher, dass der
data-site-id-Wert korrekt ist - Prüfe, ob Adblocker oder Content-Security-Policies das Script blockieren