Welche Szenarien lösen die folgenden Tipps?
- Wenn Änderungen, die Sie an den Varianten eines Experiments im grafischen Editor vorgenommen haben, nicht erscheinen, obwohl Sie sie gespeichert und simuliert haben.
- Wenn Bearbeitungen, die Sie an allen Seiten mit dem grafischen Editor vorgenommen haben, nach dem Live-Schalten eines Experiments nicht erscheinen.
- Wenn der grafische Editor nicht geladen wird.
Wie funktionieren grafische Editoren?
Während das Vornehmen von Änderungen mit dem grafischen Editor einfach erscheint, kann die Architektur Ihrer Webseite (z. B. wie sie codiert ist) die Bearbeitung komplizieren. Wie die meisten visuellen Editoren, die für die Erstellung von Experimenten gebaut sind, verwendet der grafische Editor von Kameleoon CSS-Selektor-Pfade, um die Elemente zu identifizieren, die Sie bearbeiten. Selektoren sind der Eckpfeiler jeder Aktion, die Sie im grafischen Editor ausführen. Kameleoon verwendet zwei Arten von CSS-Selektorpfaden:- Einfache Selektoren, wie die eindeutige ID des Elements: Da sie einzigartig ist, kann sie nicht auf einer Seite wiederholt oder einem anderen Element auf derselben Seite zugewiesen werden. Daher sind Änderungen an diesem Element im grafischen Editor auf dieses Element beschränkt.
- Kombinator-Selektoren: Das Element wird basierend auf einer bestimmten Beziehung zu seinen übergeordneten Elementen ausgewählt.
- Wenn Kameleoon eine ID für das ausgewählte Element findet: Kameleoon verwendet die ID standardmäßig, um das Element beim Laden der Seite zu identifizieren, und wendet die Änderungen an.
- Wenn Kameleoon keine ID für das ausgewählte Element findet: Kameleoon erstellt einen Kombinator-Selektor vom nächstgelegenen übergeordneten Element mit einer ID. Wenn beispielsweise einem Produktnamenelement eine ID fehlt, der Header jedoch eine ID hat, erstellt Kameleoon einen eindeutigen Pfad vom Header-Element zum Produktnamen.
Was verursacht Probleme?
Im Allgemeinen werden IDs, die Elementen auf Single-Page Applications zugewiesen sind, dynamisch generiert, was bedeutet, dass sich ihre Werte und Selektorpfade kontinuierlich ändern. Kameleoon kann diese Änderungen jedoch verfolgen. Um die Tracking-Option zu aktivieren, müssen Sie eine Element-Auswahlmethode auf einer Seite festlegen, indem Sie ein benutzerdefiniertes Attribut angeben. Gehen Sie dazu wie folgt vor:- Klicken Sie auf Admin > Project.
- Klicken Sie auf das Bleistift-Symbol für das Projekt, das Sie bearbeiten möchten.
- Klicken Sie im Menü Configuration auf General.
- Unter Advanced settings schalten Sie Enable support for dynamic websites (Single Page App, Progressive Web App…) auf ON.
- Unter Set a custom attribute (optional) definieren Sie Ihr gewünschtes benutzerdefiniertes Attribut (z. B.
data-id,data-qa).
Der verwendete Selektorpfad erlaubt keine präzise Auswahl eines Elements
Nicht alle Elemente haben eine ID. Wenn die ID fehlt, generiert Kameleoon einen eindeutigen Pfad vom nächstgelegenen übergeordneten Element mit einer ID bis zu dem Element, das Sie ändern möchten. Hier ist ein Beispiel für einen Selektorpfad, der den Block identifiziert, der Produkt-Miniaturbilder enthält:#ProductSection-product-template > div:first-child > div:first-child > div:nth-of-type(6) > div:first-child > ul:nth-of-type(1) > div:first-child.
Dieser Pfad beginnt beim übergeordneten Block, ProductSection-product-template, und durchläuft fünf weitere untergeordnete Blöcke, bevor er den Miniaturblock erreicht. Der Selektor folgt also Product section template > block1 > block2 > block3 > block4 > block5 > thumbnail.
Generell gilt: Je breiter der Selektorpfad, desto wahrscheinlicher ist es, dass der Selektor nicht alle Anwendungsfälle auf der Website abdeckt. Da jede Website einzigartig ist, stellt die Selektor-Einschränkung unterschiedliche Herausforderungen für grafische Editoren dar.
Produktseiten können unterschiedliche Layouts haben (z. B. verschiedene HTML-Auszeichnungen); daher benötigen sie unterschiedliche Selektoren. Beispielsweise können einige Produktseiten einen Block für Bewertungen haben, während andere dies nicht tun. Die Inkonsistenz in der Anwesenheit von Elementen bricht den ursprünglichen Selektorpfad, den Kameleoon bei der Erstellung der Variante gefunden hat.
Das Risiko inkonsistenter Elementänderungen innerhalb eines Experiments wächst proportional zur Länge und Breite des von Kameleoon identifizierten Selektorpfads und hängt von der dynamischen Natur des Produkt-Webseiten-Layouts ab. Wenn das Risiko zu groß ist, verwenden Sie andere Auswahloptionen, die Kameleoon in der Hierarchie-Symbolleiste anbietet. Sie können eine HTML-Klasse finden, die sicherer zu verwenden ist, oder einen Entwickler oder CSM bitten, einen CSS-Selektor zu erstellen oder eine Wahl zu validieren.
Alternativ können Sie die KI einen Pfad für ein Element generieren lassen.
- Wählen Sie ein Element aus.
- Klicken Sie in der linken Seitenleiste auf Edit selector.
- Klicken Sie auf AI generation > Validate.
Widersprüchliche Änderungen
Einer der Gründe für die Beliebtheit und weit verbreitete Nutzung grafischer Editoren ist die Leichtigkeit, mit der sie es Ihnen ermöglichen, mit der Experimentation zu beginnen, ohne Code zu benötigen. Änderungen sind im grafischen Editor unkompliziert; Sie müssen jedoch vorsichtig sein, widersprüchliche Änderungen an Ihren Varianten einzuführen. Widersprüchliche Änderungen beziehen sich im Allgemeinen auf Bearbeitungen an einem untergeordneten Element, die Bearbeitungen an einem übergeordneten Element überschreiben. Ein Beispiel beinhaltet das Bearbeiten der Farbe eines Textelements (das untergeordnete), dann das Auswählen des übergeordneten und das erneute Ändern der Farbe. Kameleoon wendet die Änderungen nicht korrekt an oder zeigt sie nicht korrekt an, da die Änderung am untergeordneten Element zuerst gerendert wird. Um widersprüchliche Änderungen zu vermeiden, befolgen Sie diese Regeln:- Kombinieren Sie niemals HTML-Code mit anderen nativen Bearbeitungsfunktionen des grafischen Editors, es sei denn, Sie verstehen die genauen Ergebnisse.
- Wenn Sie planen, Änderungen am gleichen Element vorzunehmen, stellen Sie sicher, dass Sie das Element immer mit dem gleichen CSS-Selektor auswählen. Achten Sie auf Elemente, die aus mehreren Elementen bestehen.
Der grafische Editor wird nicht geladen
Es gibt mehrere Gründe, warum der grafische Editor möglicherweise nicht geladen wird.Der grafische Editor wird für niemanden geladen
Schritt 1: Überprüfen Sie die Installation des Kameleoon-Skripts
Wenn der grafische Editor nicht geladen wird und Sie zur Anmeldeseite oder einem anderen Ziel weitergeleitet werden, überprüfen Sie, ob das Kameleoon-Skript korrekt auf der Seite installiert ist. Gehen Sie dazu wie folgt vor:- Öffnen Sie die Entwicklerwerkzeuge Ihres Browsers.
- Drücken Sie auf Mac Command + Option + I
- Drücken Sie auf Windows Control + Shift + C
- Navigieren Sie zum Tab Elements und drücken Sie Command + F (Mac) oder Control + F (Windows) und suchen Sie nach Kameleoon im DOM.
- Den Tab Network öffnen.
- Nach Kameleoon filtern, nachdem Sie die Seite aktualisiert haben, um zu bestätigen, ob das Skript geladen wird.
- Wenn das Kameleoon-Skript vorhanden ist: Fahren Sie mit dem nächsten Schritt der Fehlerbehebung fort.
- Wenn das Kameleoon-Skript nicht vorhanden ist: Sie müssen das Skript auf der Website installieren, um fortzufahren.
- Klicken Sie in den Developer tools auf die Doppelpfeile > Kameleoon.
- Klicken Sie auf Dev tools > Tag injection.
- Geben Sie Ihren Sitecode unter Sitecode to inject ein.
- Klicken Sie auf Inject tag.
Schritt 2: Überprüfen Sie die Domain- und Subdomain-Konfiguration
Stellen Sie sicher, dass die Domain und alle relevanten Subdomains korrekt in Kameleoon konfiguriert wurden.- Klicken Sie auf Admin > Project.
- Wählen Sie Setup für das relevante Projekt.
- Klicken Sie auf Modify setup.
- Navigieren Sie zum Abschnitt Domain configuration und fügen Sie alle notwendigen Domains und Subdomains hinzu.
- Verwenden Sie für Subdomains ein Sternchen (
*). Zum Beispiel*.mywebsite.com.
- Verwenden Sie für Subdomains ein Sternchen (
- Nach dem Hinzufügen der erforderlichen Domains validieren Sie Ihre Konfiguration.
- Klicken Sie oben auf der Seite auf das Bleistift-Symbol neben Ihrem Projekttitel, um die Domain-URL bei Bedarf zu ändern.
Schritt 3: Auf CORS-Richtlinienfehler prüfen
Um sicherzustellen, dass der grafische Editor ordnungsgemäß funktioniert, überprüfen Sie die Konsole Ihres Browsers auf CORS-Richtlinienfehler (Cross-Origin Resource Sharing).- Öffnen Sie die Konsole mit den folgenden Shortcuts:
- Auf Mac:
Command + Option + J - Auf Windows:
Control + Shift + J
- Auf Mac:
- Suchen Sie nach CORS-bezogenen Fehlern in Rot, wie im Bild unten gezeigt.
*.kameleoon.com*.kameleoon.eu*.kameleoon.io
Der grafische Editor lädt für einige Benutzer und für andere nicht
Schritt 1: Cache leeren
Möglicherweise sehen Sie eine veraltete Version Ihrer Website, was das Laden des grafischen Editors verhindern könnte. Um dieses Problem zu lösen:Option 1: Cache leeren
- Öffnen Sie den Browser-Inspektor mit einem dieser Shortcuts:
- Auf Mac:
Command + Option + I - Auf Windows:
Control + Shift + C
- Auf Mac:
- Klicken Sie mit der rechten Maustaste auf die Aktualisierungsschaltfläche des Browsers und wählen Sie Empty cache and hard reload.
Option 2: Privates Surfen (Inkognito-Modus) verwenden
Sie können auch versuchen, den grafischen Editor in einem privaten Browsing-Fenster zu öffnen, um sicherzustellen, dass keine zwischengespeicherten Dateien stören.Schritt 2: Cookies von Drittanbietern zulassen
Stellen Sie sicher, dass Ihr Browser Cookies von Drittanbietern zulässt, da diese für das ordnungsgemäße Funktionieren des grafischen Editors unerlässlich sind. Um Cookies von Drittanbietern zu aktivieren:- Gehen Sie zu den Einstellungen Ihres Browsers.
- Navigieren Sie zu Privacy & Security.
- Suchen Sie den Abschnitt Third-party Cookies und stellen Sie sicher, dass sie zugelassen sind.
Schritt 3: Werbeblocker deaktivieren
Werbeblocker können manchmal mit dem ordnungsgemäßen Funktionieren des grafischen Editors interferieren. Um dieses Problem zu lösen, versuchen Sie eine dieser Lösungen:- Deaktivieren Sie Ihren Werbeblocker und starten Sie den grafischen Editor neu.
- Öffnen Sie ein privates Browsing-Fenster, in dem der Werbeblocker möglicherweise nicht aktiv ist, und starten Sie den grafischen Editor neu.
- Versuchen Sie, einen anderen Browser ohne Werbeblocker zu verwenden, und sehen Sie, ob der grafische Editor dort funktioniert.
Schritt 4: Andere Browser-Erweiterungen deaktivieren
Überprüfen Sie, ob Sie Browser-Erweiterungen aktiviert haben, die das ordnungsgemäße Laden des grafischen Editors stören könnten. Erweiterungen für den Datenschutz (wie Ghostery) oder Leistungsoptimierer (z. B. uBlock Origin) können das Laden des Editors verhindern.Schritt 5: VPN deaktivieren
Überprüfen Sie die Einstellungen Ihrer VPN-Anwendung oder die Taskleiste auf aktive Verbindungen und deaktivieren Sie sie, wenn sie aktiviert ist. Das Trennen vom VPN ermöglicht den direkten Zugriff auf Ihr Netzwerk ohne Umleitung durch einen anderen Server, was helfen kann, den grafischen Editor von Kameleoon korrekt zu laden.Schritt 6: Zu einem anderen WLAN-Netzwerk wechseln
Wenn der grafische Editor immer noch nicht startet, könnte es netzwerkbezogene Probleme geben. Versuchen Sie, sich mit einem anderen Netzwerk zu verbinden und den Editor neu zu starten.Schritt 7: Den Chrome Dev-Browser verwenden
Der Chrome Dev-Browser ist oft kompatibler mit Tools wie dem grafischen Editor von Kameleoon. Wenn Sie Probleme mit dem Standard-Chrome-Browser haben, wechseln Sie zu Chrome Dev.Schritt 8: Die Grafischer Editor-Erweiterung installieren
Die Installation der Kameleoon Grafischer Editor-Erweiterung kann helfen, häufige Fehler wie CORS-Richtlinienprobleme zu umgehen und die Ladeleistung des Editors zu verbessern.Schritt 9 – Firewall oder Sicherheitstools (wie Edgesuite oder WAF) überprüfen
Wenn Ihr Unternehmen eine Firewall, eine Web Application Firewall (WAF) oder ein Proxy-Tool wie Edgesuite/Akamai verwendet, können die Anfragen des grafischen Editors von Kameleoon blockiert werden. Um dies zu lösen: Kontaktieren Sie Ihr IT-Team und bitten Sie es, die Kameleoon-Domains in der Firewall-/WAF-Konfiguration auf die Whitelist zu setzen. Die im FAQ-Artikel aufgeführten Domains und Subdomains müssen zugänglich sein. Stellen Sie sicher, dass sowohl HTTPS-Verkehr (GET, POST, OPTIONS) als auch WebSocket-Verbindungen zu diesen Domains erlaubt sind. Nach der Aktualisierung der Firewall-Konfiguration starten Sie den grafischen Editor neu, um zu bestätigen, ob das Problem gelöst ist.