Docs · Einrichten

Snippet einbauen

Eine Zeile Code in deine Website — danach läuft Figgle im Hintergrund. Du brauchst nur die Möglichkeit, Code im <head> einzufügen (direkt oder über den Google Tag Manager).

1. Snippet kopieren

Setze diese zwei Zeilen in den <head> deiner Seite. Ersetze DEINE-SITE-ID durch die ID aus dem Dashboard (dort steht das fertige Snippet zum Kopieren bereit).

HTML · im <head>

<link rel="preconnect" href="https://cdn.figgle.de" crossorigin />
<script src="https://cdn.figgle.de/s/DEINE-SITE-ID.js"></script>

Tipp: Ohne async (wie oben) ist die Variante schon vor dem ersten Paint da — kein kurzes Aufblitzen des Originals. Wenn dein Setup nur asynchrone Skripte erlaubt, geht auch das:

HTML · asynchron

<script async src="https://cdn.figgle.de/s/DEINE-SITE-ID.js"></script>

Nutzt deine Website eine Content-Security-Policy (CSP)? Dann erlaube Figgles CDN, API und die eingebettete Toolbar, sonst blockt der Browser einzelne Funktionen still: ergänze script-src https://cdn.figgle.de und connect-src https://api.figgle.de. Für „Auf der Seite bearbeiten“ ergänze außerdem frame-src https://app.figgle.de. Wenn du keine CSP gesetzt hast, musst du nichts tun.

2. Über den Google Tag Manager (ohne Code-Zugriff)

Neues Tag → Typ „Benutzerdefiniertes HTML" → das Snippet einfügen → Trigger „All Pages" → speichern und veröffentlichen. Fertig.

3. Einbau prüfen

Im Dashboard zeigt dir Figgle automatisch an, ob das Snippet auf deiner Seite erkannt wurde. Sobald es aktiv ist, kannst du dein erstes Conversion-Ziel festlegen und einen Test starten.

Selbst hosten (eigenes CDN)

Optional: Du kannst das Snippet und seine Nachlade-Bausteine von deiner eigenen Domain ausliefern. Kopiere dazu pro Release den kompletten dist/- Ordner atomar (alle Dateien gemeinsam, gleiche Version) auf deinen Host:

dist/ · atomar kopieren

snippet.js
tier2-boot.js
tier2-chunk.js
privacy-chunk.js
wp-goal-chunk.js
shop-chunk.js
scroll-chunk.js
widget-chunk.js

Bei WordPress zeigst du das Plugin per wp-config.php-Konstanten auf deine Origin. FIGGLE_API_BASE bleibt dabei api.figgle.de — nur die statischen Dateien wandern, die dynamischen Aufrufe laufen weiter gegen die Figgle-API.

wp-config.php

define( 'FIGGLE_CDN_BASE', 'https://cdn.deine-domain.de' );
define( 'FIGGLE_API_BASE', 'https://api.figgle.de' );

In der CSP trägst du deine eigene Origin in script-src ein (optional cdn.figgle.de als Fallback) und die Figgle-API in connect-src:

Content-Security-Policy

script-src  https://cdn.deine-domain.de https://cdn.figgle.de;
connect-src https://api.figgle.de;

Versionen niemals mischen. Der Tier-2-Baustein (tier2-chunk.js) wird über einen im Snippet eingebackenen Integrity-Hash (SRI) geladen — der Browser blockt jede Datei, deren Prüfsumme nicht passt (z. B. weil nur ein Teil des dist/-Ordners aktualisiert wurde). Passiert das, fällt der Loader automatisch einmal auf cdn.figgle.de zurück und meldet den Fehler als chunkError (Kennzahl figgle_tier2_chunk_error_total). Kopiere deshalb immer den ganzen Ordner in einem Schritt. Dein Server muss die Dateien mit Access-Control-Allow-Origin: * ausliefern, sonst greift die Integrity-Prüfung nicht und der Loader nutzt immer das CDN.

Häufige Fragen

Wo finde ich meine Site-ID?

Im Dashboard unter deiner Website — das fertige Snippet inklusive deiner Site-ID steht dort zum Kopieren bereit. Du musst die ID nicht selbst zusammenbauen.

Brauche ich dafür einen Entwickler?

Nein. Wenn du den Google Tag Manager nutzt, fügst du das Snippet als „Benutzerdefiniertes HTML"-Tag ein — ganz ohne Zugriff auf den Quellcode. Bei WordPress, Shopify, Webflow oder Wix gibt es jeweils ein Feld für Head-Code.

Macht das Snippet die Seite langsam?

Synchron im <head> für Anti-FOOC; optional asynchron, wenn die Plattform nur das erlaubt. Der aktuelle Build ist rund 15 KB Brotli. Miss Web Vitals vor und nach dem Einbau auf deiner eigenen Seite.

Brauche ich einen Cookie-Banner?

Figgle setzt für die Grundfunktion keine klassischen Tracking-Cookies und erstellt keine websiteübergreifenden Profile. Ob deine konkrete Konfiguration oder weitere Dienste auf der Website eine Einwilligung erfordern, hängt vom gesamten Setup ab und sollte rechtlich geprüft werden.

Läuft etwas nicht? In den häufigen Problemen & Lösungen findest du CSP-Freigabe, „Snippet nicht erkannt", flackernde Varianten und mehr.

Snippet rein, fertig — der Rest läuft im Dashboard.

Preise ansehen