Zum Hauptinhalt springen
In der Kameleoon App gibt es mehrere Einstiegspunkte, an denen Sie benutzerdefiniertes JavaScript hinzufuegen koennen, das auf Ihrer Website ausgefuehrt wird. Dieser Artikel enthaelt spezifische Empfehlungen fuer jeden verfuegbaren Einstiegspunkt. Bitte beachten Sie, dass alle Kameleoon-Skripte einmal pro Seitenladevorgang ausgefuehrt werden. Bevor Sie benutzerdefinierte Skripte implementieren, sollten Sie die Verwendung der Kameleoon Command Queue fuer eine optimierte Ausfuehrung in Betracht ziehen.

​
Kameleoon Command Queue

Die effizienteste Art, mit der API von Kameleoon zu interagieren — sei es zum Konvertieren von Zielen, Setzen benutzerdefinierter Daten oder Ausloesen von Ereignissen — besteht darin, bestehende Trigger in Ihrem Tag Manager (z. B. Google Tag Manager) zusammen mit der Kameleoon Command Queue zu nutzen. Dies sollte Ihr primaerer Ansatz beim Hinzufuegen von JavaScript zu Kameleoon sein. Anstatt langen JavaScript-Code direkt in Kameleoon zu schreiben, koennen Sie dieselben Ergebnisse mit nur zwei Codezeilen in Ihrem Tag Manager erreichen.

​
Beispiele

- Ein Umsatzziel konvertieren Erstellen Sie in Ihrem Tag Manager einen Trigger auf der Bestaetigungsseite, um den Umsatz zu erfassen, und fuegen Sie folgenden Code hinzu: 
// Replace kameleoonGoalID and {{revenue}} with your actual values
window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(['Goals.processConversion', kameleoonGoalID, {{revenue}}])
Anleitungen zum Erstellen einer Zielkonvertierung aus GTM finden Sie in dieser Dokumentation. -Einen Custom-Data-Wert setzen, wenn sich der Besucher anmeldet Anstatt benutzerdefiniertes JS in Kameleoon zu schreiben, setzen Sie den Wert direkt ueber Ihren Tag Manager: 
// Replace "customDataName" and "customDataValue" with your actual values
window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(['Data.setCustomData', "customDataName", "customDataValue"]);
- Ein Ereignis ausloesen, wenn ein Produkt in den Warenkorb gelegt wird Verwenden Sie dies, um Besucher basierend auf bestimmten Aktionen anzusprechen: 
// Replace "customEventName" with your actual event name
window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(['Events.trigger', "customEventName"]);
Falls kameleoonQueue nicht verwendet werden kann, lesen Sie bitte die spezifischen Empfehlungen fuer jedes verfuegbare Skript, die unten aufgefuehrt sind.

​
Globales Skript und Variationsskripte

​
JavaScript-Ausfuehrung mit der Activation API optimieren

Verwenden Sie die Activation API von Kameleoon, um Variationen zum geeigneten Zeitpunkt anzuwenden. Dieser Ansatz hilft, Leistungsprobleme zu vermeiden und sorgt fuer ein reibungsloses Erlebnis der Besucher. Im Folgenden finden Sie einige wesentliche Funktionen der Activation API, mit denen Sie das Besuchererlebnis verbessern koennen:
  • runWhenConditionTrue: Fuehrt den Code aus, wenn eine bestimmte Bedingung erfuellt ist. Standardmaessig wird sie alle 200 Millisekunden ausgefuehrt. Seien Sie jedoch vorsichtig mit Bedingungen, die moeglicherweise nie aufgeloest werden, da dies zu unnoetigen Schleifen fuehren kann. Beachten Sie, dass die Schleife weiterlaeuft, bis die Funktion explizit true zurueckgibt. Das Zurueckgeben von false oder undefined stoppt die Schleife nicht und loest den Callback nicht aus.
❌ Falsche Verwendung (Risiko einer Endlosschleife): Das folgende Beispiel gibt auf allen anderen Seiten als der Produktseite niemals true zurueck, sodass die Schleife unbegrenzt laeuft: 
Kameleoon.API.Core.runWhenConditionTrue(() => {
    return window.dataLayer && window.dataLayer.find(layer => layer.pageType === "product");
}, () => {
    // Product page logic here
});
✅ Empfohlener Ansatz: Geben Sie immer true zurueck, um die Schleife zu verlassen, und behandeln Sie dann die Logik innerhalb des Callbacks: 
let pageTypeLayer;
Kameleoon.API.Core.runWhenConditionTrue(() => {
    pageTypeLayer = window.dataLayer && window.dataLayer.find(layer => layer.pageType);
    return pageTypeLayer; 
}, () => {
    if (pageTypeLayer?.pageType === "product") {
        // Product page logic here
    }
});
Es ist vorzuziehen, Informationen ueber die URL oder Cookies/localStorage abzurufen, anstatt sich auf runWhenConditionTrue zu verlassen, um auf das dataLayer oder andere spaet ladende Objekte zu warten, etwa beim Versuch, Informationen ueber den Seitentyp zu erhalten. Dieser Ansatz sorgt fuer schnellere Ausfuehrung und bessere Leistung.
  • runWhenElementPresent: Diese Methode stellt sicher, dass Ihr Code nur dann ausgefuehrt wird, wenn ein bestimmtes Element im DOM vorhanden ist, und vermeidet unnoetige Verzoegerungen durch dynamisch geladene Elemente.

​
Wichtige Hinweise

  • Verwendet standardmaessig Mutation Observers (empfohlen fuer die Leistung).
  • Wenn Mutation Observers auf Ihrer Website deaktiviert sind, koennen Sie ein Polling-Intervall als drittes Argument dieser Methode angeben.
  • Wenn das Element dynamisch in das DOM eingefuegt wird, setzen Sie isDynamicElement als viertes Argument dieser Methode auf true:
Verwenden Sie den folgenden Code sparsam und nur, wenn unbedingt notwendig. Beschraenken Sie seine Verwendung auf eine minimale Anzahl von Faellen und vermeiden Sie es, ihn gleichzeitig auf mehrere Elemente anzuwenden, um eine optimale Seitenleistung zu erhalten.Achten Sie auf das Risiko einer Endlosschleife, wenn der Quellcode der Seite das Element bei jeder Aktualisierung aendert.
Kameleoon.API.Core.runWhenElementPresent('#myDynamicElement', ([elem]) => {
	// Logic once the element loaded
}, null, true); // isDynamicElement is set to true

​
Begrenzen Sie den Geltungsbereich Ihres Codes auf bestimmte Seiten

Um die Leistung zu optimieren, stellen Sie sicher, dass Ihr Code nur auf den relevanten Seiten ausgefuehrt wird. Dies ist besonders wichtig bei der Verwendung von schleifenbasierten Methoden wie runWhenConditionTrue und runWhenElementPresent, da das Ausfuehren dieser Methoden auf der gesamten Website zu unnoetigen Ausfuehrungen fuehren und die Leistung beeintraechtigen kann. Wenn Sie beispielsweise auf Umsatzinformationen im dataLayer warten, kapseln Sie Ihren Code in eine Bedingung, die prueft, ob die URL der Bestaetigungsseite entspricht. Dieser Ansatz stellt sicher, dass der Code nur auf der Bestaetigungsseite ausgefuehrt wird, anstatt seitenweit ausgeloest zu werden. Beispiel: Ansprechen einer bestimmten Bestaetigungsseite, bevor eine Schleife ausgefuehrt wird 
if (document.location.href.includes('/confirmation')) {
    let revenueLayer;
    Kameleoon.API.Core.runWhenConditionTrue(() => {
        revenueLayer = window.dataLayer && window.dataLayer.find(layer => layer.revenue);
        return revenueLayer;
    }, () => {
        Kameleoon.API.Goals.processConversion(goalId, revenueLayer.revenue);
    });
}
Wenn Sie auf das Laden eines Elements auf der Seite warten, stellen Sie ebenso sicher, dass das Element zu einem bestimmten Zeitpunkt angezeigt werden soll, und fuehren Sie das Skript nur auf der relevanten Seite aus. 
if (document.location.href.includes('/subscription')) {
    Kameleoon.API.Core.runWhenElementPresent("#form", () => {
        // Add the rest of your logic here
    });
}

​
3. Bevorzugen Sie CSS fuer visuelle Aenderungen anstelle von JavaScript, insbesondere beim Umgang mit Variationen in Skripten

Die Verwendung von CSS anstelle von JavaScript fuehrt zu schnellerem und gleichmaessigerem Rendering. CSS kann verwendet werden, um Elemente auszublenden oder zu veraendern, Bloecke auszutauschen sowie Stile oder Text zu aendern.

​
Umgang mit Single Page Applications (SPAs)

Wenn ein Experiment auf einer Single-Page-Application (SPA) oder einer dynamisch aktualisierten Seite ausgefuehrt wird, sind besondere Implementierungsschritte erforderlich. Im Gegensatz zu herkoemmlichen Websites laden SPAs keine ganzen Seiten neu, sodass Kameleoon erkennen muss, wann Inhaltsaktualisierungen stattfinden. Beste Vorgehensweisen finden Sie im Leitfaden zum Einrichten eines Experiments auf einer Single-Page-Application.

​
Segmente / Trigger

Die erste bewaehrte Vorgehensweise besteht darin, das Targeting auf Daten zu stuetzen, die beim Laden der Seite sofort verfuegbar sind. Dazu gehoeren Informationen wie die Seiten-URL, der Browsertyp, der Geraetetyp und alle in Cookies oder im lokalen Speicher abgelegten Daten. Wenn Ihr Targeting Daten erfordert, die nicht sofort zugaenglich sind, befolgen Sie diese Richtlinien, um eine effiziente Ausfuehrung zu gewaehrleisten und unnoetige Verzoegerungen zu vermeiden.

​
1. Benutzerdefinierte JavaScript-Bedingung

Mit dieser Bedingung koennen Sie benutzerdefiniertes JavaScript verwenden, um Besucher anzusprechen. Es gibt zwei Hauptoptionen: ####- a. Die Bedingung sofort pruefen Dieses Skript wird alle 75 Millisekunden ausgefuehrt, bevor das DOM vollstaendig geladen ist, und danach alle 250 Millisekunden. Standardmaessig gibt es undefined zurueck, wodurch das Skript in einer Schleife weiterlaeuft, bis es explizit true (zum Einschliessen des Besuchers) oder false (zum Ausschliessen) zurueckgibt. Stellen Sie immer sicher, dass Ihre Bedingung schliesslich zu true oder false aufgeloest wird, um unnoetige Schleifen zu vermeiden. Hier ein optimiertes Beispiel: 
if (window.dataLayer && window.dataLayer.some(layer => layer.pageType == "homepage")) return true; 

else if (window.dataLayer && window.dataLayer.some(layer => layer.pageType != "homepage")) return false;
####- b. Die Bedingung asynchron ausfuehren Verwenden Sie dieses Skript, wenn Sie auf eine Antwort eines externen Webdienstes oder einer API warten muessen, bevor der Besucher angesprochen wird. Sobald Sie die Antwort erhalten, rufen Sie setTargeting(true) oder setTargeting(false) auf. Siehe den Code unten.
  • Wenn Sie ein bestimmtes Element ansprechen moechten, verwenden Sie stattdessen die native Bedingung “Element auf der Seite”.
  • Wenn Sie auf Informationen auf der Seite warten moechten, verwenden Sie die obige Option “Bedingung sofort pruefen”.
const userId = localStorage.getItem("user_id"); 
if (!userId) {
   setTargeting(false);
}
// Example API endpoint - replace with your actual endpoint
const apiUrl = `https://api.example.com/check-segment?userId=${userId}`;

fetch(apiUrl, { method: "GET", headers: { "Content-Type": "application/json" } })
  .then(response => response.json())
  .then(data => {
    if (data && data.isInSegment) {
      setTargeting(true);
    } else {
      setTargeting(false);
    }
  })
  .catch(error => {
    setTargeting(false);
  });

​
2. Benutzerdefiniertes Ereignis

Die Verwendung benutzerdefinierter Ereignisse ist eine effektive und passive Moeglichkeit, Besucher anzusprechen. Anstatt Bedingungen kontinuierlich zu ueberwachen, wartet diese Methode auf ein bestimmtes von Ihnen definiertes benutzerdefiniertes Ereignis und loest das Targeting aus, wenn dieses Ereignis eintritt. Dieser Ansatz ist besonders nuetzlich in zwei wichtigen Szenarien:

​
Szenario 1: Wenn die Targeting-Logik komplex ist

Es ist besser zu vermeiden, die gesamte Logik direkt in eine JavaScript-Bedingung innerhalb des Targetings einzubetten. Stattdessen koennen Sie ein benutzerdefiniertes Ereignis im globalen Skript definieren. Wenn Sie beispielsweise Besucher auf der Warenkorbseite ansprechen moechten, die mindestens drei Produkte in ihrem Warenkorb haben und einen Gesamtbetrag von ueber 30 $ erreichen, wuerden Sie ein Ereignis im globalen Skript ausloesen, sobald diese Bedingungen erfuellt sind, anstatt die gesamte Logik in der JavaScript-Segmentbedingung zu schreiben.

​
Szenario 2: Wenn mehrere Segmente eine aehnliche Logik teilen

Wenn mehrere Segmente die gleiche oder leicht unterschiedliche Variationen derselben Bedingung erfordern, verhindert die Verwendung eines benutzerdefinierten Ereignisses redundanten Code und verbessert die Wartbarkeit. Beispiel: Sie muessen Besucher basierend auf unterschiedlichen Warenkorbsummen ansprechen. Anstatt die Logik in mehreren Segmenten zu duplizieren, definieren Sie ein einziges Skript im globalen Skript und loesen unterschiedliche benutzerdefinierte Ereignisse fuer jedes Segment aus: 
if (document.location.href.includes('/cart')) {
    Kameleoon.API.Core.runWhenElementPresent("#cartContainer", ([cartContainer]) => {
        if (cartContainer.length >= 3) {
            const totalAmount = Number(cartContainer.querySelector('#totalAmount').innerText);
          
            if (totalAmount >= 90) 
                Kameleoon.API.Events.trigger("3ArticlesAbove90"); // Segment 1
            else if (totalAmount >= 60) 
                Kameleoon.API.Events.trigger("3ArticlesAbove60"); // Segment 2
            else if (totalAmount >= 30) 
                Kameleoon.API.Events.trigger("3ArticlesAbove30"); // Segment 3
        }
    });
}

​
Benutzerdefinierte Daten

Benutzerdefinierte Daten helfen, wie benutzerdefinierte Ereignisse, doppelten Code zu vermeiden, indem Sie Werte speichern und wiederverwenden koennen. Sie koennen benutzerdefinierte Daten im globalen Skript oder in anderen Skripten definieren und dann innerhalb von Segmenten nutzen. Benutzerdefinierte Daten unterscheiden sich jedoch in zwei wesentlichen Punkten von benutzerdefinierten Ereignissen:

​
a. Anhand der Geltungsbereich-Optionen: “Seite”, “Besuch” oder “Besucher”

Im Gegensatz zu benutzerdefinierten Ereignissen, die nur fuer die aktuelle Seite gelten, koennen benutzerdefinierte Daten ueber mehrere Seiten und Sitzungen hinweg bestehen bleiben:
  • Besuchsbereich: Behaelt den Wert waehrend der gesamten Sitzung eines Besuchers bei.
  • Besucherbereich: Speichert den Wert je nach Cookie-Richtlinie bis zu 365 Tage.
Wenn Sie zum Beispiel ein Banner auf allen Seiten anzeigen moechten, sobald sich ein Besucher angemeldet hat, koennen Sie einen benutzerdefinierten Datenwert auf “true” mit Besuchsbereich setzen. Dies stellt sicher, dass der Besucher waehrend seiner Sitzung nach der Anmeldung auf allen Seiten mit dem Banner angesprochen wird.

​
b. Durch erweiterte Experiment-Einblicke

Benutzerdefinierte Daten koennen als Filter und Aufschluesselungskriterien auf der Ergebnisseite von Experimenten dienen. Dies ermoeglicht tiefere Einblicke und eine effektivere Analyse des Besucherverhaltens. Um alle verfuegbaren Targeting-Bedingungen im Segment-Builder zu entdecken, lesen Sie bitte diese Dokumentation.