Weitere Informationen zur Kameleoon Graphic editor-Erweiterung finden Sie im Artikel getting started with the Graphic editor.
Installation der Erweiterung
- Fügen Sie die Erweiterung zu Chrome hinzu. Sie kann hier im Chrome Web Store heruntergeladen werden.
- Öffnen Sie die Webkonsole (F12 auf PC oder command+option+I auf Mac).
- Klicken Sie auf den Kameleoon-Tab in der Webkonsole.
- Klicken Sie auf den Link, um sich mit dem Chrome-Erweiterungssymbol anzumelden.
- Klicken Sie auf das Kameleoon-Symbol in der Chrome-Symbolleiste. Ein Pop-up wird geöffnet, das Ihnen die Anmeldung ermöglicht. Weitere Informationen finden Sie in Vereinfachte Authentifizierung.
Vereinfachte Authentifizierung
Sie können auch das Kameleoon-Symbol der Erweiterung verwenden, um den Authentifizierungsprozess zu starten:- Klicken Sie auf das Kameleoon-Symbol und ein Pop-up wird angezeigt.
- Klicken Sie auf Open Login Pop-up, um das Anmelde-Pop-up anzuzeigen. Sie können das Anmelde-Pop-up verwenden, um Ihre E-Mail und Ihr Passwort einzugeben und sich anzumelden.
Cookie-Authentifizierung
Klicken Sie auf das Kameleoon-Symbol, und ein Pop-up wird angezeigt. Falls Sie bereits in Ihrem Browser angemeldet sind, wird unter der Schaltfläche Open Login Pop-up ein Abschnitt angezeigt, der es Ihnen ermöglicht, sich mit Ihrer aktuellen Sitzung anzumelden. Klicken Sie auf Log in as….Das Abmelden erfolgt nach denselben Schritten wie das Anmelden. Klicken Sie einfach auf das Kameleoon-Symbol > Log out.
Berechtigungen
Die Seite My Sites wird geöffnet. Die Erweiterung wird aktiviert und gewährt Ihnen die Berechtigungen, die Erweiterung auf allen in Ihrem Kameleoon-Konto konfigurierten Websites zu verwenden. Wenn Sie die Erweiterung zum ersten Mal aktivieren, werden Sie auf Ihre Website weitergeleitet, um die Erweiterung sofort zu verwenden. Wenn Sie Ihrem Kameleoon-Konto eine neue Website hinzufügen, erhalten Sie die Meldung, dass Sie keine Berechtigung zur Verwendung der Erweiterung auf der Website haben. Klicken Sie auf Proceed to tag injection. Die Schaltfläche führt Sie direkt zum Tag Injector. Aktualisieren Sie dann Ihre Berechtigungen. Eine Meldung bestätigt die Aktualisierung.Falls Sie Ihrem Kameleoon-Konto eine neue Website hinzufügen, können Sie Ihre Berechtigungen auch aktualisieren, indem Sie unten im Dashboard der Erweiterung auf Update list of sitecodes klicken.
Struktur
Die Erweiterung bietet mehrere Tabs:- Campaigns
- Assets
- Timeline
- Dev tools
- Options
Dashboard
Das Dashboard wird standardmässig angezeigt, wenn Sie die Erweiterung öffnen. Klicken Sie auf das Symbol +, um das Dashboard zu erstellen und anzupassen, sodass es die wesentlichen Informationen enthält. Jedes Widget kann vergrössert, verkleinert und geschlossen werden. Sie können die Anzahl der Zeilen erhöhen, indem Sie auf das Drei-Punkte-Menü oben links klicken. Die Ihnen zur Verfügung stehenden Einsätze sind die folgenden:- Consent: Gibt an, ob Sie Ihre Zustimmung für Experiments oder Personalizations gegeben haben (true bedeutet, dass Sie zugestimmt haben oder dass keine Zustimmung erforderlich ist; false bedeutet, dass Sie die Zustimmung verweigert haben oder dass Kameleoon die Experimente in Erwartung Ihrer Zustimmung blockiert hat).
- Custom data: Listet die aktiven Custom Data auf der Seite mit ID und Wert auf.
- Experiments: Listet alle auf der Seite laufenden Experimente auf, gibt deren ID an, bewertet das Targeting (true/false) und zeigt die ID der registrierten und der angezeigten Variation an.
- Personalizations: Dasselbe für alle auf der Seite laufenden Personalisierungen.
- Site Code: Zeigt den relevanten Sitecode an.
- Visitor Code: Gibt den Ihnen zugewiesenen Visitor Code an, der unter anderem die Überwachung von Besuchen ermöglicht.
Campaigns
Experiments
Auf dem Tab Experiments finden Sie alle auf der Seite laufenden Experimente.- ID: ID des Experiments. Klicken Sie, um Details anzuzeigen.
- Name: Name des Experiments.
- Triggered: True, wenn das Experiment auf der Seite ausgelöst wurde, sonst false.
- Triggered In Visit: True, wenn das Experiment im aktuellen Besuch ausgelöst wurde, sonst false.
- Active: True, wenn das Experiment auf der Seite aktiv ist, sonst false.
- Activated In Visit: True, wenn das Experiment im aktuellen Besuch aktiviert wurde, sonst false. Beachten Sie, dass ein ausgelöstes Experiment nicht zwangsläufig bedeutet, dass Kameleoon das Experiment aktiviert hat, da mehrere zusätzliche Faktoren die Aktivierung beeinflussen können (z. B. der Besucher gehört zum aus dem Experiment ausgeschlossenen Traffic oder es sind Capping-Optionen festgelegt).
- Displayed Variation: ID der angezeigten Variation (No variation, wenn nicht angesprochen; 0, wenn angesprochen, aber der Referenz zugewiesen).
- Associated Variation: ID der Variation, die Ihnen mit Ihrem Visitor Code zugewiesen wurde (0, wenn nicht angesprochen). Sie können eine Variation erzwingen, indem Sie sie in der Dropdown-Liste auswählen. Mit dem Augensymbol auf der rechten Seite können Sie sie in der Vorschau anzeigen.
- Date Modified: Datum der letzten Änderung am Experiment.
- Assignment Time: Wann Sie der Variation zugewiesen wurden. Wenn die Variation das Original ist und Sie nicht angesprochen wurden, lautet der Wert Not assigned yet.
- Online since: Das Datum, an dem das Experiment online ging.
Variations
Wenn Sie auf die ID eines Experiments klicken, öffnet sich ein Menü mit drei Registerkarten: Variations, Configuration und Targeting. Die Registerkarte Variations zeigt den JavaScript- und CSS-Code an, der mit jeder Variation verbunden ist. Wechseln Sie zwischen Variationen, indem Sie auf die Variations-ID in der linken Liste klicken.
Configuration
Die Registerkarte Configuration zeigt die gesamte Konfiguration des Experiments als JSON-Baum an, einschließlich seiner ID, seines Namens, der Basis-URL, der Ziele und der Variationen. Sie finden die gleichen Informationen, die normalerweise in der Konsole angezeigt werden.
Targeting
Die Registerkarte Targeting zeigt die Targeting-Bedingungen mit logischen Verknüpfungen zwischen ihnen an.
Feature Flags
Der Tab Feature flags enthält alle Feature Flags, die Kameleoon auf der Seite erkennt.
- ID: ID des Feature Flags. Klicken Sie auf die ID, um detaillierte Informationen anzuzeigen.
- Name: Name des Feature Flags.
- Triggered: True, wenn das Flag auf der Seite ausgelöst wurde.
- Triggered in visit: True, wenn das Flag während des aktuellen Besuchs ausgelöst wurde.
- Active: True, wenn das Flag auf der Seite aktiv ist.
- Activated in visit: True, wenn das Flag in der aktuellen Sitzung aktiviert wurde.
- Displayed variation: ID der angezeigten Variation. No variation bedeutet, dass der Benutzer nicht angesprochen wird. 0 bezieht sich auf die Referenzvariation.
- Associated variation: Die Variation, der Kameleoon den Besucher zuweist. Verwenden Sie die Dropdown-Liste, um eine Variation zu erzwingen. Mit dem eye-Symbol können Sie diese Variation in der Vorschau anzeigen.
- JavaScript- oder CSS-Code, der für jede Variation injiziert wird (falls vorhanden)
- Targeting- und Segmentierungsbedingungen
- Zeitstrahl und letztes Änderungsdatum
Personalizations
Auf diesem Tab finden Sie alle auf der Seite laufenden Personalisierungen- ID: ID der Personalisierung. Klicken Sie, um Details anzuzeigen.
- Name: Name der Personalisierung.
- Triggered: Ob Sie angesprochen werden.
- Triggered In Visit: True, wenn die Personalisierung im aktuellen Besuch ausgelöst wurde, sonst false.
- Active: True, wenn die Personalisierung auf der Seite aktiv ist, sonst false.
- Associated Variation: ID der Variation, die Ihnen mit Ihrem Visitor Code zugewiesen wurde (0, wenn nicht angesprochen). Sie können eine Variation erzwingen, indem Sie sie in der Dropdown-Liste auswählen. Mit dem Augensymbol auf der rechten Seite können Sie sie in der Vorschau anzeigen.
- Activated In Visit: True, wenn die Personalisierung im aktuellen Besuch aktiviert wurde, sonst false. Beachten Sie, dass eine ausgelöste Personalisierung nicht zwangsläufig bedeutet, dass das zugehörige Ereignis eingetreten ist, da mehrere zusätzliche Faktoren die Ausführung beeinflussen können. Beispielsweise können Capping-Optionen die Ausführung verhindern, oder der Besucher kann Teil einer Kontrollgruppe für die Personalisierung sein (in diesem Fall zeigt Kameleoon die Personalisierung nicht an).
-
Not Exposed Reason: Falls die Personalisierung ausgelöst, aber nicht angezeigt oder aktiviert wurde, gibt das Feld Not Exposed Reason den Grund für die Nicht-Exposition an. Mögliche Werte sind:
GLOBAL_EXCLUSION(der Besucher gehört zur global aus allen Personalisierungen ausgeschlossenen Population).PERSONALIZATION_EXCLUSION(der Besucher gehört zur Population, die von der aktuellen Personalisierung ausgeschlossen ist. Zum Beispiel befindet sich der Besucher in der Kontrollgruppe).PRIORITY(eine andere Personalisierung hat höhere Priorität).SCHEDULE(die Personalisierung ist gemäss ihrem Zeitplan ausgeschaltet).PERSONALIZATION_CAPPING(die Personalisierung hat ihr globales Capping in Bezug auf Besucher erreicht).VISITOR_CAPPING(der Besucher hat ein Capping erreicht, das die Anzeige der Personalisierung verhindert).SCENARIO(die Personalisierung wird nicht angezeigt, weil die Szenariobedingungen nicht erfüllt sind).SIMULATION(im Simulationsmodus erzwingt Kameleoon die Nicht-Exposition, was in der Produktion nicht passieren kann; der Grund ist verfügbar, wenn die Personalisierung auf der aktuellen Seite ausgelöst wurde und die Eigenschaft active false ist, andernfalls ist der Wert null).
- Date Modified: Datum der letzten Änderung an der Personalisierung.
Variations
Wenn Sie auf die ID einer Personalisierung klicken, öffnet sich ein Menü mit drei Registerkarten: Variations, Configuration und Targeting. Die Registerkarte Variations zeigt den JavaScript- und CSS-Code an, der mit jeder Variation verbunden ist. Wechseln Sie zwischen Variationen, indem Sie auf die Variations-ID in der linken Liste klicken.Configuration
Die Registerkarte Configuration zeigt die gesamte Konfiguration der Personalisierung als JSON-Baum an, einschließlich ihrer ID, ihres Namens, der Basis-URL, der Ziele und der Variationen. Sie finden die gleichen Informationen, die normalerweise in der Konsole angezeigt werden.Targeting
Die Registerkarte Targeting zeigt die Targeting-Bedingungen mit logischen Verknüpfungen zwischen ihnen an.Assets
Segments
Im Tab Segments finden Sie alle aktiven Segmente auf der Seite, um Parameter und Targeting zu überprüfen. Das Segment ist Triggered, wenn Ihr Besuch die Bedingungen zu einem bestimmten Zeitpunkt erfüllt hat. Wenn Sie auf die Segment-ID klicken, können Sie auf die Details der Bedingungen zugreifen.Custom Data
Im Tab Custom Data finden Sie alle Konfigurationsparameter von Custom Data, um die Einstellungen zu überprüfen.- ID: ID der Custom Data.
- Name: Name der Custom Data.
- Value: Falls einer oder mehrere Werte mit der Custom Data verknüpft wurden.
- Format: String/Boolean/Number
- Type: Unique/List
- Scope: Page/Visitor/Visit
- Local: Gibt an, ob die Custom Data den lokalen Browser des Besuchers verwendet.
- Mapping Identifier: Gibt an, ob die Custom Data eine eindeutige Kennung auf Ihrer Seite verwendet, z. B. eine Konto-ID oder eine E-Mail-Adresse.
- Learnable: Gibt an, ob Sie die Funktion “learnable” für die Custom Data aktiviert haben.
Goals
Der Tab Goals enthält Konfigurationen von Zielen, um die ordnungsgemässe Konvertierung zu überprüfen.- ID: Die ID des Ziels.
- Name: Der Name des Ziels.
-
Type:
- Click
- Scroll
- URL
- Engagement
- Time spent
- Page views
- Converted: Ob das Ziel während des aktuellen Besuchs konvertiert wurde.
- Conversions: Die Gesamtzahl der Konvertierungen dieses Ziels durch Sie.
- Revenue: Der mit diesem Ziel verbundene Gesamtumsatz (falls zutreffend).
Globales benutzerdefiniertes Skript
Hier finden Sie das globale Skript (entspricht dem Skript-Tracking in der App).Timeline
Der Tab Timeline zeigt alle Kampagnenereignisse und deren Zeitstempel an.- Load event: Wenn Kameleoon zu laden beginnt.
- Consent initialized: Zustimmung für A/B Testing oder Personalization initialisiert.
- Consent enabled: Zustimmung für A/B Testing und/oder Personalization aktiviert.
- Consent disabled: Zustimmung für A/B Testing und/oder Personalization deaktiviert.
- Custom data set: Die Custom Data erscheint mit dem Wert XXXX.
- Global script executed: Das globale Skript wurde ausgeführt.
- Experiment triggered: Das Experiment mit der ID XXX wurde ausgelöst.
- Experiment activated: Das Experiment mit der ID XXX wurde aktiviert.
- Variation displayed: Die Variation mit der ID XXX erschien.
- Personalization activated: Die Personalisierung mit der ID XXX wurde aktiviert.
- Personalization triggered: Die Personalisierung mit der ID XXX wurde ausgelöst.
- Loading aborted: Laden aus Grund XXX oder aus Opt-out-Gründen abgebrochen.
- Conversion triggered: Das Ziel XXXX mit der ID XXX wurde ausgelöst.
Dev tools
Performance-Analyse
Verwenden Sie den Tab Performance analysis, um die Zusammensetzung des Skripts zu analysieren und Teile zu identifizieren, die die Website verlangsamen könnten.- Script size: Skriptgrösse laut CDN.
- Script size (uncompressed): Gesamtgrösse.
- Last updated: Datum der letzten Aktualisierung des Skripts.
- Skriptgrösse < 120 KB
- Keine Experimente (Experimente, die seit mehr als drei Monaten laufen)
- Weniger als 50 Segmente
- Weniger als 50 Ziele
- Globales benutzerdefiniertes Skript < 30 KB
Request-Analyse
Der Tab Request analysis ermöglicht das einfache Debuggen aller Anfragen.Visits-Analyse
- Die Anzahl der Besuche
- Der Zeitstempel des Beginns jedes Besuchs
- Die Anzahl der während jedes Besuchs aufgerufenen Seiten
- Die Dauer jedes Besuchs
Code-Synchronisierung
Sie können Microsoft Visual Studio (VS Code) mit der Chrome-Erweiterung synchronisieren. Die Synchronisierung sendet automatisch Updates an Chrome über einen WebSocket zwischen VS Code und der Kameleoon-Chrome-Erweiterung, um JS- und CSS-Code zu testen. Chrome injiziert dann den neuen Code in die Kameleoon-Engine und lädt die Seite neu. Weitere Informationen finden Sie im Artikel zur VS Code-Erweiterung.Benutzerdefinierte Code-Injektion
- Öffnen Sie die Kameleoon-Chrome-Erweiterung.
- Klicken Sie auf Custom code injection, um auf die Seite zur Verwaltung Ihres benutzerdefinierten JavaScript-Codes zuzugreifen.
- Schreiben Sie Ihren Code in das Textfeld oder fügen Sie ihn ein.
- Klicken Sie auf Inject code.
Tag-Injektion
So injizieren Sie das Kameleoon-Tag auf einer Website:- Wählen Sie Ihre Umgebung aus (development, preview, test, production).
- Geben Sie den Code ein, den Sie injizieren möchten.
- Klicken Sie auf Inject tag.
Options
Es stehen zwei zusätzliche Optionen zur Verfügung.Kameleoon-Skript blockieren
Diese Option ist nützlich für Entwickler, die auf ihrer Website arbeiten müssen, ohne dass Kameleoon-Experimente oder Personalisierungen auf der Seite laufen.Kameleoon-Tracking-Anfrage blockieren
Diese Option ist nützlich, wenn Sie nicht möchten, dass Ihre eigenen Besuche und Konvertierungen die Ergebnisse beeinflussen.Fehlerbehebung: Die Erweiterung lädt nicht alle Daten oder funktioniert nicht
In Ausnahmefällen muss die Kameleoon-Chrome-Erweiterung neu installiert werden. Befolgen Sie diese Schritte:- Melden Sie sich von Kameleoon ab, indem Sie auf Ihren Avatar in der oberen rechten Ecke klicken und sich abmelden.
- Schliessen Sie alle Fenster und öffnen Sie Chrome erneut.
- Gehen Sie hierher und entfernen Sie die Kameleoon-Erweiterung.
- Laden Sie die Erweiterung erneut herunter.
- Klicken Sie auf Install und navigieren Sie dann zu Ihrer Website.
- Klicken Sie auf das Kameleoon-Symbol in der Chrome-Symbolleiste und melden Sie sich mit dem Pop-up an. Weitere Informationen finden Sie in Vereinfachte Authentifizierung.
- Gehen Sie zur Seite My Sites, um die Installation abzuschließen.
- Schliessen Sie Ihre Website und öffnen Sie sie erneut.
Bitte beachten Sie, dass die Installation möglicherweise nicht funktioniert, wenn Sie nicht abgemeldet sind.
Web-Plugin
Das Web-Plugin ist eine “leichte” Version der Chrome-Erweiterung, die in anderen gängigen Browsern wie Safari und Firefox funktioniert. Das Web-Plugin ist responsive und funktioniert auf mobilen Geräten. Derzeit liefert das Plugin Informationen zu Experimenten, Personalisierungen, Segmenten, Custom Data und Performance-Metriken von Zielen. Um das Plugin zu verwenden, fügen Sie “/?kameleoonLightExtension=true” nach der URL der Website hinzu. Zum Beispiel:
https://www.yourwebsite.com/?kameleoonLightExtension=true