Kameleoon.API.Core - Kameleoon Documentation

Dieses Modul enthält Funktionen zur Umsetzung von Frontend-A/B-Test-Varianten ohne Flackern. Es umfasst außerdem Methoden zur Initialisierung der Engine, einschließlich derjenigen für Datenschutzgesetze und die Erfassung der gesetzlichen Einwilligung.

enableLegalConsent

Rufen Sie die Methode enableLegalConsent() auf, nachdem Sie die gesetzliche Einwilligung des Besuchers eingeholt haben, um Kameleoon zu aktivieren. Diese Methode aktiviert den normalen Betriebsmodus von Kameleoon. Weitere Informationen finden Sie im Artikel Einwilligungsverwaltung.

var agreedButton = Kameleoon.API.Utils.querySelectorAll("#agreed")[0];

Kameleoon.API.Utils.addEventListener(agreedButton, "mousedown", function (event) {
  Kameleoon.API.Core.enableLegalConsent();
});

Arguments

Name	Type	Description
module	String	Name des zu aktivierenden Moduls: `PRODUCT_RECOMMENDATION`, `AB_TESTING`, `PERSONALIZATION` oder `BOTH`. Beispielsweise führt `PRODUCT_RECOMMENDATION` den Einstiegspunkt ausschließlich mit den Funktionen zur Produktempfehlung aus. `AB_TESTING` aktiviert A/B-Tests und Produktempfehlungen (sofern die benutzerdefinierte Option zur getrennten Einwilligung nicht aktiv ist). `BOTH` aktiviert alle Funktionen. Wenn der Parameter weggelassen wird, aktiviert die Methode die gesetzliche Einwilligung standardmäßig für alle Module (`BOTH`).

Eine benutzerdefinierte Option ist ebenfalls verfügbar, die die separate Verwaltung der Zustimmung zu Produktempfehlungen ermöglicht. Wenn diese Option aktiv ist, rufen Sie explizit enableLegalConsent("PRODUCT_RECOMMENDATION") auf, um das Modul zu aktivieren. Wenden Sie sich an den Customer Success Manager, um diese Funktion zu aktivieren.

disableLegalConsent

Rufen Sie die Methode disableLegalConsent() auf, wenn ein Besucher die Nutzung von Kameleoon ablehnt. Diese Methode deaktiviert den normalen Betriebsmodus. Weitere Informationen finden Sie im Artikel Einwilligungsverwaltung.

var disableButton = Kameleoon.API.Utils.querySelectorAll("#disable")[0];

Kameleoon.API.Utils.addEventListener(disableButton, "mousedown", function (event) {
  Kameleoon.API.Core.disableLegalConsent();
});

Arguments

Name	Type	Description
module	String	Name des zu deaktivierenden Moduls: “AB_TESTING”, “PERSONALIZATION” oder “BOTH”. Wenn weggelassen, deaktiviert die Methode die rechtliche Zustimmung für alle Module (`BOTH`).

Eine benutzerdefinierte Option ist ebenfalls verfügbar, die die separate Verwaltung der Zustimmung zu Produktempfehlungen ermöglicht. Wenn diese Option aktiv ist, rufen Sie explizit disableLegalConsent("PRODUCT_RECOMMENDATION") auf, um das Modul zu deaktivieren. Wenden Sie sich an den Customer Success Manager, um diese Funktion zu aktivieren.

enableSinglePageSupport

Die Methode enableSinglePageSupport() lädt die Kameleoon-Engine neu, wenn sich die aktive URL ändert, unabhängig von Seitenneuladungen im Browser. Verwenden Sie diese Methode für Single-Page-Anwendungen (SPAs) mit mehreren URLs und einem einzelnen anfänglichen Laden. Kameleoon behandelt jede URL-Änderung als eine neue Seite, wodurch URL-Targeting und genaue Verfolgung von Metriken wie Seitenaufrufen ermöglicht werden.

if (location.href.indexOf("mySPAWebsitePart") != -1) {
  Kameleoon.API.Core.enableSinglePageSupport();
}

Kameleoon entfernt beim Neuladen der SPA außerdem automatisch alle Elemente, die der Seite hinzugefügt wurden und HTML-IDs verwenden, die mit „kameleoonElement“ oder „kameleoonStyleSheet“ beginnen.

enableDynamicRefresh

Die Methode enableDynamicRefresh() erkennt Elementänderungen und wendet Änderungen des Graphic Editors erneut an. Diese Methode unterstützt SPAs, die das DOM ohne URL-Änderungen oder Seitenneuladungen dynamisch ändern, und verhindert, dass dynamische Aktualisierungen Experimente entfernen. Siehe enableSinglePageSupport() für andere SPA-Typen.

if (location.href.indexOf("cart") != -1) {
    Kameleoon.API.Core.enableDynamicRefresh();
}

getConfiguration

Die Methode getConfiguration() gibt einen Verweis auf das Configuration-Objekt zurück, das globale Konstantenwerte für die Kameleoon-Konfiguration der Website enthält.

var configuration = Kameleoon.API.Core.getConfiguration();

if (configuration.siteCode == "abcde12345") {
  document.cookie = "MyMainSite=true;";
} else if (configuration.siteCode == "12345abcdef") {
  document.cookie = "MySubSite=true;";
}

Rückgabewert

Name	Type	Description
configuration	Object	Configuration object.

load

Die load() Methode initialisiert die Kameleoon-Engine. Während die Initialisierung normalerweise automatisch beim Laden der Anwendungsdatei erfolgt, müssen Sie möglicherweise manuelle Aufrufe durchführen. Um Kameleoon nach jeder URL-Änderung in einer Single-Page-App neu zu laden, verwenden Sie enableSinglePageSupport(), anstatt die URL selbst zu überwachen.

Kameleoon.API.Core.load();

processRedirect

Die processRedirect() Methode leitet den Browser zu einer anderen URL um, typischerweise für Split-A/B-Tests. Verwenden Sie diese Methode anstelle von window.location.href = redirectionURL;, um genaues Hintergrund-Tracking zu gewährleisten.

var experiment = Kameleoon.API.Experiments.getByName("RedirectExperiment");

if (experiment.associatedVariation.id == 123456) {
  Kameleoon.API.Core.processRedirect("https://www.mywebsite.com?variation=A");
}

Wenn die Weiterleitungs-URL auf einer anderen Domain liegt als die Basis-URL und die Kameleoon-Installation die einheitlichen Sitzungsdaten nicht enthält, fügt die Engine der Ziel-URL den Parameter kameleoonRedirect-{experimentID} hinzu, um eine genaue Nachverfolgung sicherzustellen.

Arguments

Name	Type	Description
redirectionURL	String	URL für die Umleitung. Dieses Feld ist erforderlich.

runWhenConditionTrue

Die Methode runWhenConditionTrue() führt die Callback-Funktion aus, wenn die Bedingungsfunktion conditionFunction true zurückgibt. Die Methode verwendet einen Polling-Mechanismus, der zu Flimmern führen kann. Verwenden Sie stattdessen runWhenElementPresent() für bessere Leistung. Siehe die Beschreibung von runWhenElementPresent() für Details.

Kameleoon.API.Core.runWhenConditionTrue(function () {
  return typeof jQuery != "undefined";
}, function () {
  jQuery("#bloc-2345").text("Mon nouveau texte");
}, 200);

Arguments

Name	Type	Description
conditionFunction	Function	JavaScript-Funktion, die true oder false zurückgibt. Dieses Feld ist erforderlich.
callback	Function	JavaScript-Funktion, die ausgeführt wird, wenn die conditionFunction true zurückgibt. Dieses Feld ist erforderlich.
pollingInterval	Number	Die Engine führt die conditionFunction regelmäßig in diesem Intervall aus. Wenn `runWhenElementPresent()` nicht verfügbar ist, reduziert ein niedrigeres pollingInterval das Flimmern, erhöht aber die CPU-Auslastung. Wenn weggelassen, wird die Methode standardmäßig auf 200 Millisekunden gesetzt.

runWhenElementPresent

Die Methode runWhenElementPresent() führt die Callback-Funktion aus, sobald ein bestimmtes Element im DOM erscheint. Diese Methode verwendet Mutation Observer, um die Anti-Flicker-Technologie zu betreiben. Ermitteln Sie die Schlüsselelemente einer Variante und rufen Sie runWhenElementPresent() mit dem Element als erstem Argument und dem Implementierungscode als Callback auf. Dieser Aufruf sorgt dafür, dass die Änderungen ausgeführt werden, sobald das Element erscheint, noch bevor der Browser einen Anzeige-Aktualisierungszyklus startet. Um auf mehrere Elemente einzuwirken, rufen Sie runWhenElementPresent() separat für jedes Element auf, anstatt nur das erwartete endgültige Element anzusteuern. Ein einzelner Aufruf kann zu Flimmern führen, wenn ein Aktualisierungszyklus zwischen dem Erscheinen verschiedener Elemente auftritt.

// With mutation observers management.
Kameleoon.API.Core.runWhenElementPresent("#bloc-2345", function (elements) {
 elements[0].innerText = "My new Text";
});

// Mit mehreren CSS-Selektoren. Wird ausgeführt, wenn eines der Elemente vorhanden ist.
Kameleoon.API.Core.runWhenElementPresent("#bloc-567, .cta-button, #bloc-789", function (elements) {
 elements[0].innerText = "More new text";
});

// Ohne Verwaltung von Mutations-Observern prüft Kameleoon alle 200 ms, ob sich das Element auf der Seite befindet.
Kameleoon.API.Core.runWhenElementPresent("#MyPopup.showed", function (elements) {
 Kameleoon.API.Events.trigger("popup displayed");
}, 200);

// Mit Mutations-Observer-Verwaltung und Single-Page-App-Unterstützung wendet Kameleoon Änderungen an, wenn neue Elemente zum DOM hinzugefügt werden oder wenn eine dynamische Aktualisierung der Single-Page-App vorherige Änderungen entfernt.
Kameleoon.API.Core.runWhenElementPresent(".product-button", function (elements) {
 elements.forEach(element => {
  element.innerText = "Add To Cart";
 });
}, null, true);

Wenn Sie diesen Wert angeben, werden Mutation Observer und Anti-Flimmer deaktiviert, und das System kehrt zu Polling-Verfahren zurück. Verwenden Sie dieses Argument nur in bestimmten Fällen, etwa bei komplexen Selector-Abfragen mit hohem CPU-Verbrauch.

Arguments

Name	Type	Description
selector	String	CSS-Selektor des Elements. Um mehrere CSS-Selektoren anzugeben, stellen Sie eine einzelne kommagetrennte Zeichenkette bereit. Der Callback wird ausgeführt, wenn ein oder mehrere Elemente vorhanden sind. Dieses Feld ist erforderlich.
callback	Function	JavaScript-Funktion zum Ausführen, wenn das Element im DOM angezeigt wird. Dieses Feld ist erforderlich.
pollingInterval	Number	Wenn Sie diesen Wert angeben, werden Mutation Observer deaktiviert und die Engine kehrt zu Polling-Verfahren zurück, was zu Flimmern führen kann. Dieses Feld ist optional.
isDynamicElement	Boolean	Wenn aktiv, verfolgt Kameleoon den Selektor, wenn er nicht sofort beim Seitenladen gefunden wird, und führt den Callback aus, wenn Elemente angezeigt werden. Der Callback wird erneut ausgelöst für jedes neue Element, das dem Selektor entspricht. Diese Einstellung unterstützt dynamische Menüs, unendliches Scrollen und Pop-ups. Dieses Feld ist optional.

runWhenShadowRootElementPresent

Die Methode runWhenShadowRootElementPresent() führt die Funktion callback aus, wenn ein bestimmtes Element in einem Shadow DOM angezeigt wird, das auf mode: open gesetzt ist.

const wrapper = document.querySelector(".shadow-wrapper");
const shadow = wrapper.attachShadow({ mode: "open" });
const span = document.createElement("span");
span.classList.add("selector-inside-wrapper");
span.textContent = "I'm in the shadow DOM";
shadow.appendChild(span);

Kameleoon.API.Core.runWhenShadowRootElementPresent('.shadow-wrapper', '.selector-inside-wrapper', (elements) => {
    elements[0].innerText = "New text" 
});

Arguments

Name	Type	Description
parentSelector	String	CSS-Selektor für das übergeordnete Element. Dieses Feld ist erforderlich.
shadowRootElementSelector	String	CSS-Selektor im Shadow DOM. Dieses Feld ist erforderlich.
callback	Function	JavaScript-Funktion zum Ausführen, wenn das Element im Shadow DOM angezeigt wird. Dieses Feld ist erforderlich.
isDynamicElement	Boolean	Wenn aktiv, verfolgt Kameleoon den Selektor, wenn er nicht sofort gefunden wird, und führt den Callback aus, wenn Elemente angezeigt werden. Der Callback wird erneut ausgelöst für jedes neue Element, das dem Selektor entspricht. Diese Einstellung unterstützt dynamische Menüs, unendliches Scrollen und Pop-ups.

APIs

​enableLegalConsent

​disableLegalConsent

​enableSinglePageSupport

​enableDynamicRefresh

​getConfiguration

​load

​processRedirect

​runWhenConditionTrue

​runWhenElementPresent

​runWhenShadowRootElementPresent

enableLegalConsent

disableLegalConsent

enableSinglePageSupport

enableDynamicRefresh

getConfiguration

load

processRedirect

runWhenConditionTrue

runWhenElementPresent

runWhenShadowRootElementPresent