> ## Documentation Index > Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt > Use this file to discover all available pages before exploring further. # Installationsanleitung für Web Experimentation > Installieren und konfigurieren Sie das Kameleoon-Skript auf Ihrer Website, einschließlich Projektkonfiguration, Domain-Konfiguration, Einwilligungseinstellungen und Verhinderung von Flackern. Diese Seite enthält eine schrittweise Anleitung zur Installation von Kameleoon, einschließlich der Erstellung eines Web-Experimentation-Projekts für Ihre Website sowie der Konfiguration Ihrer Projekteinstellungen. (Feature-Experimentation-Projekte unterstützen sowohl die Plattform Web / Backend als auch Mobile App.) ## Übersicht Bevor Sie Experimente auf Ihrer Website oder mobilen App starten, müssen Sie das Kameleoon-Skript installieren. Dieses Skript, das Ihren eindeutigen Projektcode enthält, muss dem ``-Tag Ihres Quellcodes hinzugefügt werden. Wenn Ihr Paket dies zulässt, können Sie mehrere Sites oder Apps von Ihrem Kameleoon-Konto aus verwalten, was für Tests in Staging- oder Pre-Production-Umgebungen nützlich ist. Wenn Sie ein Projekt erstellen, führt Sie das Setup-Formular durch vier Schritte. Ihre Installationsmethode entscheidet, welche Optionen Sie sehen: ```mermaid theme={null} flowchart LR MI[MAIN INFORMATION] --> IM[INSTALLATION METHOD] IM --> CS[CODE SNIPPET AND LOADING MODE] IM --> TM[TAG MANAGER] IM --> SH[SHOPIFY] CS --> TC[TECHNICAL CONFIGURATION] TM --> TC TC --> CL[CHECKLIST] SH --> CL ``` Wenn Sie Cross-Domain-Tracking einschalten, enthält die Checkliste zusätzlich eine Aufgabe, die statische HTML-Datei von Kameleoon auf Ihrer Hauptdomain zu hosten. ## Projektkonfiguration Klicken Sie in der [Kameleoon-App](https://app.kameleoon.com/) auf **Admin** > **Projects**, um eine Liste Ihrer Projekte zu sehen. Standardmäßig enthält Ihr Konto ein Projekt für die Website oder mobile App, die Sie bei der Anmeldung angegeben haben. ### Ein bestehendes Projekt konfigurieren So ändern Sie die Installationseinstellungen eines Projekts: 1. Klicken Sie auf **Admin** > **Projects**. 2. Klicken Sie auf **Edit** in der Zeile des Projekts und dann auf den **Setup**-Tab. 3. Klicken Sie im Abschnitt **Installation method** oder **Technical configuration** auf **Edit**. Das dreistufige Setup-Formular öffnet sich. ### Ein neues Projekt erstellen So erstellen Sie ein neues Projekt: 1. Klicken Sie auf **Admin** > **Projects** und dann auf **New project**. 2. Wählen Sie **Web Experimentation** oder **All campaign types**, wenn Sie auch Feature Flags und SDK-Experimente im selben Projekt ausführen. Nach der Erstellung des Projekts können Sie seinen Typ nicht mehr ändern. Klicken Sie auf **Next**. 3. Geben Sie die Hauptdomain des Projekts ein, wählen Sie eine Farbe und fügen Sie optional einen Namen, eine Beschreibung und Tags hinzu. Klicken Sie dann auf **Next**. 4. Wählen Sie die Installationsmethode und beim Code-Schnipsel den Lademodus, dann klicken Sie auf **Next**. 5. Konfigurieren Sie die Unterstützung für dynamische Websites (nur beim Code-Schnipsel), das Ressourcen-Hosting und die Domains, dann klicken Sie auf **Next**. Wenn Sie **Shopify** als Installationsmethode gewählt haben, überspringt Kameleoon diesen Schritt. 6. Erledigen Sie die Aufgaben in der Checkliste und klicken Sie dann auf **Complete setup**. Um später fortzufahren, klicken Sie im Schritt **Installation method** oder **Technical configuration** auf **Save for later**. Kameleoon speichert das Projekt als Entwurf, und das Projekt erscheint auf der Seite **Projects** mit dem Status **Draft**. Wenn Sie auf **Complete setup** klicken, speichert Kameleoon das Projekt als **Enabled**. Die vollständige Liste der Optionen finden Sie unter [Ein Projekt erstellen](https://docs.kameleoon.com/de/user-manual/project-management/create-a-project.md#projektsetup-schritte). > [!NOTE] > > Ihre Möglichkeit, weitere Projekte zu erstellen, hängt von Ihrem Kameleoon-Paket ab. ## Wählen Sie Ihre Implementierungseinstellungen Im Schritt **Installation method** des Setup-Formulars wählen Sie, wie Sie Kameleoon installieren und wie Kameleoon auf Ihrer Website geladen wird. Technische Details, einschließlich der Installation von Kameleoon über einen Tag Manager oder der Implementierung benutzerdefinierter Skripttypen, finden Sie im Artikel [Standard-Implementierung](https://docs.kameleoon.com/de/developer-docs/web-experimentation/implementation-and-deployment/standard-implementation.md). ## Einwilligung Bevor Sie das Kameleoon-Skript auf Ihrer Website installieren, stellen Sie sicher, dass Ihre Konfiguration den Einwilligungsverwaltungsrichtlinien Ihrer Organisation entspricht. Wenn Sie eine Consent Management Platform (CMP) verwenden, können Sie diese in Kameleoon integrieren, um zu steuern, wann Experimente und Datenerfassung aktiviert werden. Einzelheiten finden Sie im [Artikel zur Einwilligungsverwaltung](https://docs.kameleoon.com/de/user-manual/project-management/consent-management-policy.md) von Kameleoon. ## Domains und Subdomains Sie können festlegen, welche Domains und Subdomains das Kameleoon-Skript laden und auf seine Funktionen zugreifen dürfen. * Geben Sie im Schritt **Technical configuration** unter **Domains and subdomains** eine Domain ein und klicken Sie auf **Add domain**, um Domains für das Cross-Domain-Tracking auf die Whitelist zu setzen. * Damit können Sie den Graphic Editor von Kameleoon verwenden und Besucherdaten über Domains hinweg speichern/abrufen. * Wenn Sie versuchen, Kameleoon auf einer nicht aufgelisteten Domain zu verwenden, schlägt das Laden aufgrund der Browser-Sicherheitsrichtlinien (CORS) fehl. ### Cross-Domain-Tracking Cross-Domain-Tracking ermöglicht es Ihnen,: * denselben Besucher über verschiedene Domains und Subdomains hinweg zu verfolgen (z. B. `example.com` und `example.org`). * zu vermeiden, dass Benutzer als „neue Besucher" eingestuft werden, wenn sie zwischen Domains wechseln. * konsistente Personalisierungs- und Experiment-Erlebnisse über alle Properties hinweg anzubieten. > [!NOTE] > > Sie sollten Cross-Domain-Tracking aktivieren, wenn Sie Sitzungsdaten über mehrere Domains hinweg vereinheitlichen möchten. Um es zu aktivieren, schalten Sie **Track visitors across listed subdomains** unter **Domains and subdomains** ein. ## Berechtigungen Wenn Sie Subdomains ansprechen, überprüfen Sie diese zwei HTTP-Header-Einstellungen: * [Setzen Sie keinen X-Frame-Options-Response-Header](#issue-refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin) auf der Seite, die den Kameleoon-iframe hostet. * [Erlauben Sie Kameleoon-Ressourcen in Ihrer Content Security Policy](#issue-refused-to-load-the-script). > [!NOTE] > > Erfahren Sie mehr über Apples Intelligent Tracking Prevention (ITP), das Cross-Site-Tracking in Safari einschränkt, in dieser [ITP-Dokumentation](https://docs.kameleoon.com/de/developer-docs/web-experimentation/technical-concepts/itp-management.md). ## Ressourcen-Hosting Sie können wählen, ob Kameleoon seine öffentlichen Ressourcen hostet oder ob Sie diese selbst hosten möchten. * Schalten Sie im Schritt **Technical configuration** unter **Resource hosting** die Option **Self-host the script file**, **Self-host images** oder beide ein. * Geben Sie die URL Ihres Content Delivery Network (CDN) oder Servers in **Script file URL**, **Image base URL** oder beiden ein. Erfahren Sie mehr über Ressourcen-Hosting [hier](https://docs.kameleoon.com/de/developer-docs/web-experimentation/self-hosting/simple-self-hosting-and-on-premises-options.md). ## Das Kameleoon-Skript installieren Nachdem Sie die Hauptdomain Ihres Projekts definiert haben, generiert Kameleoon ein Skript zur Installation. Sie finden es auf dem **Setup**-Tab und in der Aufgabe **Add JavaScript snippet to your website** des Schritts **Checklist**. 1. Klicken Sie auf **Copy**, um den Code-Schnipsel zu kopieren. 2. Fügen Sie ihn **unmittelbar nach dem ``**-Tag im Quellcode Ihrer Site ein. 3. Speichern Sie Ihre aktualisierten Seiten und laden Sie sie auf Ihren Server hoch. 4. Klicken Sie in Kameleoon auf **Mark as completed**. > [!NOTE] > > Installieren Sie das Skript so früh wie möglich im Ladeprozess der Seite. ## Flackern verhindern Beim Laden einer Webseite sehen Benutzer möglicherweise kurzzeitig die Originalversion, bevor die Variation angewendet wird. Dieses kurze Aufblitzen wird als Flackereffekt oder Flickering bezeichnet. Flackern tritt auf, wenn die Änderungen der Variation verzögert werden, wodurch ein sichtbarer Wechsel zwischen dem Original- und dem geänderten Inhalt entsteht. Flackern kann die Benutzererfahrung und die Zuverlässigkeit von Experimenten beeinträchtigen, insbesondere bei A/B-Tests. ### Richtlinien zur Vermeidung von Flackern #### Implementierung Platzieren Sie das Kameleoon-Skript so weit oben wie möglich im ``-Tag. Stellen Sie sicher, dass das Skript in weniger als einer Sekunde geladen wird, idealerweise unter 500 ms. Verwenden Sie zur Überprüfung der Ladezeit von Kameleoon den Tab **Network** in den Entwicklertools Ihres Browsers. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/get-started/web-installation/dev-tools.png) Der effektivste Weg, ein schnelles Laden sicherzustellen, ist die direkte Installation von Kameleoon in Ihrem HTML-Quellcode, anstatt einen Tag Manager wie Google Tag Manager zu verwenden. Optional können Sie das Anti-Flicker-Skript als zusätzliche Schutzschicht gegen Flackern verwenden. Weitere Informationen finden Sie in der [Entwicklerdokumentation](https://docs.kameleoon.com/de/developer-docs/web-experimentation/technical-concepts/flicker-management-and-performance.md) von Kameleoon. Wenn Sie diese Option aktivieren, stehen Ihnen mehrere Konfigurationen zur Verfügung, um zu steuern, wie sich Kameleoon bei einem Timeout verhält. Die Timeout-Dauer ist im installierten Skript konfigurierbar und standardmäßig auf 750 ms eingestellt. Um die verfügbaren Optionen zu erkunden, sehen Sie sich den Screenshot unten an. ![Das Settings-Formular mit dem Dropdown Behavior if timeout occurs im Abschnitt Campaign display](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/manage-your-projects/edit-project-settings.png) Sie können auf das Dropdown-Menü **Behavior if timeout occurs** zugreifen, indem Sie auf **Admin** > **Projects** klicken, auf **Edit** in der Zeile Ihres Projekts klicken und den **Settings**-Tab öffnen. Klicken Sie auf **Edit** im Abschnitt **Campaign display**. Wenn Kameleoon spät geladen wird, kann die Seite angezeigt werden, bevor der Variationscode angewendet wird. In diesem Fall sind die unten beschriebenen Optimierungen wirkungslos. #### Einwilligung Wenn Ihre Einwilligungsrichtlinie auf **consent required** gesetzt ist, kann beim **ersten Seitenaufruf** ein Flackern auftreten, wenn der Besucher seine Einwilligung noch nicht erteilt hat. Dieses Flackern tritt auf, wenn Sie sich entscheiden, Kameleoon teilweise oder vollständig zu blockieren, wenn die Einwilligung unbekannt ist. Um Flackern zu vermeiden, sollten Sie Kameleoon nicht blockieren, sodass Experimente angezeigt werden können, bevor die Einwilligung auf der Landing-Page des Besuchers erteilt wird. Dieser Ansatz ist vollständig konform mit Datenschutzbestimmungen wie DSGVO, CCPA und anderen wichtigen Rahmenwerken im Vereinigten Königreich, in Kanada und in den USA, da vor der Einwilligung kein Tracking oder Datenspeicherung (`cookies`/`localStorage`) erfolgt. Um die verfügbaren Optionen zu erkunden, sehen Sie sich den Screenshot unten an. ![Der Consent-Tab mit den drei Abschnitten der Einwilligungsrichtlinie](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/manage-your-projects/consent-tab.png) Um auf das Dropdown-Menü **Behavior when consent is unknown** zuzugreifen, klicken Sie auf **Admin** > **Projects**, klicken Sie auf **Edit** in der Zeile Ihres Projekts und öffnen Sie den **Consent**-Tab. Klicken Sie auf **Edit** im Abschnitt **For A/B tests and feature experiments** oder **For personalizations** und wählen Sie dann **Consent required** in **Consent policy**. #### Targeting ##### Verwenden Sie Informationen, die beim Laden der Seite verfügbar sind Für optimale Leistung sollten Sie das Targeting auf Daten basieren, die sofort beim Laden der Seite verfügbar sind, wie z. B.: * Seiten-URL * Browser-Typ * Gerätetyp * `cookies`/`localStorage` Wenn möglich, vermeiden Sie das Targeting von Elementen, die spät geladen werden, wie z. B. **`dataLayer`**-Variablen. Da diese asynchron geladen werden können, kann ihre Verwendung für das Targeting die Ausführung der Variation verzögern. Wenn ein Segment auf einer benutzerdefinierten JS-Bedingung oder Custom Data basiert, die wiederum vom `dataLayer` abhängt, kann ebenfalls Flackern auftreten. Um Flackern zu minimieren, stellen Sie sicher, dass alle für das Targeting verwendeten Bedingungen so früh wie möglich im Seitenlebenszyklus aufgelöst werden. Weitere Informationen zu allen Targeting-Bedingungen im Segment Builder finden Sie in [diesem](https://docs.kameleoon.com/de/user-manual/assets/segments/create-a-segment.md) Artikel. #### Variationscode ##### Verwenden Sie CSS anstelle von JavaScript für visuelle Änderungen Die Verwendung von CSS anstelle von JavaScript sorgt für ein schnelleres und reibungsloseres Rendering. CSS sollte verwendet werden für: * Ausblenden oder Ändern von Elementen * Austausch von Blöcken * Ändern von Stilen oder Text ##### Optimieren Sie die JavaScript-Ausführung mit der Activation API Wenn JavaScript erforderlich ist, verwenden Sie die [Activation API](https://docs.kameleoon.com/de/developer-docs/apis/activation-api-js/api-reference/api-reference.md) von Kameleoon, um sicherzustellen, dass Variationen zum richtigen Zeitpunkt angewendet werden: * **`runWhenConditionTrue`:** Führt den Code aus, wenn eine bestimmte Bedingung erfüllt ist. * **`runWhenElementPresent`:** Stellt sicher, dass die Variation angezeigt wird, sobald das angesprochene Element auf der Seite geladen ist. Durch die Verwendung dieser Methoden werden Verzögerungen vermieden, die durch asynchron geladene Elemente verursacht werden. ##### Umgang mit Single-Page-Applications Wenn Ihr Experiment auf einer Single-Page-Application (SPA) oder einer dynamisch aktualisierten Seite läuft, sind spezielle Implementierungsschritte erforderlich. Folgen Sie [diesem](https://docs.kameleoon.com/de/user-manual/experimentation/web-experimentation/advanced-experiment-types/set-up-experiment-single-page-app.md) Leitfaden zur Einrichtung eines Experiments auf einer SPA für Best Practices. ## FAQ > [accordion] Problem: Anzeige in einem Frame verweigert (X-Frame-Options) > > Der Fehler **Anzeige in einem Frame verweigert** tritt auf, wenn Sie Cross-Domain-Tracking aktivieren, wofür Ihre Hauptdomain ein statisches iframe hosten muss. > > **Wie das Kameleoon-iframe funktioniert** > > Das iframe stellt die Datenkonsistenz über Subdomains hinweg sicher, indem es im `localStorage` der Host-Domain liest und schreibt. Dadurch kann Kameleoon denselben Besucher ohne zusätzliche Serveraufrufe verfolgen. Weitere Informationen finden Sie unter [Vereinheitlichung von Sitzungsdaten über Subdomains hinweg](https://docs.kameleoon.com/de/developer-docs/web-experimentation/technical-concepts/unify-session-data-storage-across-subdomains.md). > > Kameleoon sichert das iframe mit drei Maßnahmen: > > 1. **Eingeschränkter Zugriff:** Nur Domains in der Variablen `allowedDomains` können das iframe anfordern. > 2. **Sitecode-Überprüfung:** Nur der angegebene Sitecode kann das iframe anfordern. > 3. **Präfixierter Speicher:** Kameleoon greift nur auf Einträge zu, die mit `kameleoon` präfixiert sind. > > Kameleoon erfasst keine personenbezogenen Daten. Siehe die [Liste der erfassten Daten](https://docs.kameleoon.com/de/developer-docs/privacy-and-compliance/data-collection-backend.md#liste-der-erfassten-daten) und verwalten Sie die Einwilligung über [Kameleoons APIs zur Einwilligungsverwaltung](https://docs.kameleoon.com/de/developer-docs/privacy-and-compliance/consent-management.md). > > **Das Anzeigeproblem beheben** > > Der Header `X-Frame-Options` verhindert, dass Browser Seiten in Frames rendern, um Clickjacking zu vermeiden. Weitere Informationen finden Sie in der [Mozilla-Dokumentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options). > > Um Cross-Domain-Tracking zu aktivieren, dürfen Sie den Header `X-Frame-Options` nicht setzen. Sie können das iframe sichern, indem Sie eine eingeschränkte Liste von Domains in der gehosteten iframe-Datei bereitstellen. > [accordion] Problem: Skript-Laden verweigert > > Möglicherweise sehen Sie einen Fehler, der besagt, dass das Skript `https://xxxxxx.kameleoon.eu/kameleoon.js` Ihre [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) verletzt. > > Wenn Ihre Site Ressourcen über CSP-Header einschränkt, aktualisieren Sie Ihre Richtlinie, um Kameleoon-Ressourcen zuzulassen. Siehe die vollständige Liste der [zuzulassenden Kameleoon-Domains](https://docs.kameleoon.com/de/developer-docs/web-experimentation/implementation-and-deployment/standard-implementation.md#what-are-the-kameleoon-domains-that-i-need-to-whitelist). > [accordion] Funktioniert Kameleoon mit allen Webbrowsern? > > **Unterstützte Webbrowser** > > Kameleoon unterstützt einige ältere Browser nicht. Wenn ein Besucher einen nicht unterstützten Browser verwendet, sieht er die Originalseite anstelle des Experiments. Der Rückfall auf die Originalseite wirkt sich nicht negativ auf die Experimentergebnisse aus. > > Das Kameleoon-Skript unterstützt: > > * Chrome > * Firefox > * Microsoft Edge > * Opera > * Safari > > Kameleoon stellt die Kompatibilität mit den letzten drei Versionen jedes Browsers sicher. > > **Vom Graphic Editor unterstützte Browser** > > Informationen zu den Browsern, die der Graphic Editor unterstützt, finden Sie unter [Welche Browser unterstützt der Graphic Editor?](https://docs.kameleoon.com/de/user-manual/experimentation/web-experimentation/graphic-based-experiments/edit-a-variation.md#which-browsers-does-the-graphic-editor-support). > > **Kompatibilität mit responsive Websites** > > Sie können mit erweiterten Bearbeitungsfunktionen Experimente für responsive Websites erstellen. Die größten Herausforderungen sind typischerweise das Anpassen der Größe und das Neupositionieren von Inhaltsblöcken. > > Da Seiten je nach Auflösung oder Gerät angezeigt werden, sollten Sie beim Verschieben von Elementen vorsichtig sein. Heat Maps sind für diese Seiten nicht verfügbar, da sie keinen festen Rahmen haben. > > Kameleoon stellt erweiterte Tools zur Verfügung, um Sie beim Verschieben von Elementen zu unterstützen und Layout-Probleme zu vermeiden. > [accordion] Wie hoch ist die Cache-Ablaufzeit (TTL) für das Kameleoon-Skript? > > Wenn ein Besucher auf Ihrer Website landet, lädt sein Browser den Site-Code und das Kameleoon-Skript herunter. Die Seitenladezeit hängt von der Codelänge und externen Ressourcen ab. Caching verbessert die Leistung bei nachfolgenden Besuchen, indem statische Ressourcen im Browser-Cache gespeichert werden. > > Caching verbessert zwar die Benutzererfahrung, kann jedoch neue Experimente für wiederkehrende Besucher verzögern, die eine ältere Version des Skripts in ihrem Cache haben. > > Um dieses Problem zu beheben, enthält das Kameleoon-Skript ein Flag für die **Cache-Ablaufzeit (TTL: Time-to-live)**. Das Flag weist den Browser an, alle 1,5 Stunden eine neue Version des Skripts herunterzuladen. > > > [!NOTE] > > > > Einige mobile Browser ignorieren die TTL-Einstellungen möglicherweise, um die Leistung zu optimieren, je nach Browser-Richtlinie. > [accordion] Was ist der Flackereffekt? > > Der Flackereffekt, auch Flickering genannt, tritt auf, wenn ein Besucher kurz die Originalseite sieht, bevor die Variation geladen wird. Flackern kann auftreten, wenn das Kameleoon-Skript nach dem Seiteninhalt geladen wird, sodass der Browser die Änderungen der Variation zuletzt anwendet. Um Flackern zu reduzieren, platzieren Sie das Kameleoon-Skript so weit oben wie möglich im HTML-``. Vollständige Richtlinien finden Sie unter [Flackern verhindern](#flackern-verhindern). > [accordion] Kann Kameleoon mit anderen Skripten auf meiner Site in Konflikt geraten? > > Kameleoon gerät nur selten mit anderen Skripten in Konflikt. > > Kameleoon verwendet reines JavaScript und benötigt kein jQuery, wodurch Konflikte mit Sites vermieden werden, die jQuery verwenden. Es arbeitet unabhängig von serverseitigen Sprachen und vermeidet globale JavaScript-Variablen, um Inkompatibilitätsrisiken zu minimieren. > > **jQuery** > > Kameleoon kommt nicht in Konflikt mit jQuery, wenn Sie es auf Ihrer Website verwenden. Kameleoon verwendet jedoch die Bibliothek [Sizzle](http://sizzlejs.com/), die die CSS-Selektor-Engine ist, die jQuery verwendet. Sie können Sizzle beim Erstellen Ihrer Experimente verwenden.