Dokumentation Journey Optimizer Handbuch für Journey Optimizer

Konfigurieren der Unterstützung für Inhaltskarten in Web-SDK content-card-configuration-sdk

Letzte Aktualisierung: 7. Oktober 2026

Erstellt für:

Erfahren
Admin

Auf dieser Seite Richten Sie das Beispiel ein, mit dem Inhaltskarten mit der Adobe Experience Platform Web SDK abgerufen und gerendert werden, damit Sie Client-seitige personalisierte Inhalte auf Ihren Web-Seiten bereitstellen können, und führen Sie es aus.

style

shade-box

Dieses Beispiel zeigt, wie Inhaltskarten aus Adobe Journey Optimizer (AJO) mithilfe von Adobe Experience Platform abgerufen werden. Mit dem Adobe Experience Platform Web SDK werden die Personalisierungsinhalte vollständig auf der Client-Seite abgerufen und gerendert.

Beim ersten Laden der Seite wird der Standardzustand der Seite angezeigt. Wenn Sie jedoch mit den Schaltflächen Mittel einzahlen oder In Social Media freigeben interagieren, werden zusätzliche Inhaltskarten angezeigt. Diese Karten werden durch Client-seitige Bedingungen ausgelöst, sodass sie nur angezeigt werden, wenn bestimmte Aktionen ausgeführt werden.

Ausführen des Beispiels run-sample

PREREQUISITES

Sie müssen node und npm installieren. Weitere Informationen finden Sie in dieser Dokumentation

Um Disqualifikationsregeln mit Inhaltskarten zu verwenden, ist die Web SDK-Version 2.28.0 oder höher erforderlich.

Richten Sie lokale SSL-Zertifikate für HTTPS ein. Diese Beispiele erfordern lokal signierte SSL-Zertifikate, um Inhalte über HTTPS bereitzustellen:
1. Installieren Sie mkcert auf Ihrem Computer.
2. Führen Sie nach der Installation mkcert -install aus, um das mkcert root-Zertifikat zu installieren.
Klonen Sie das Repository auf Ihren lokalen Computer.
Öffnen Sie ein Terminal und navigieren Sie zum Ordner des Beispiels.
Installieren Sie die erforderlichen Abhängigkeiten, indem Sie npm install ausführen.
Starten Sie die Anwendung, indem Sie npm start ausführen.
Öffnen Sie Ihren Webbrowser und gehen Sie zu https://localhost.

Funktionsweise setup

Fügen Sie das Web SDK auf der Seite ein und konfigurieren Sie es mithilfe der Einstellungen aus der Datei .env im Beispielordner.

code language-none

<script src="https://cdn1.adoberesources.net/alloy/2.18.0/alloy.min.js" async></script>
alloy("configure", {
    defaultConsent: "in",
    edgeDomain: "{{edgeDomain}}",
    edgeConfigId: "{{edgeConfigId}}",
    orgId:"{{orgId}}",
    debugEnabled: false,
    personalizationStorageEnabled: true,
    thirdPartyCookiesEnabled: false
});

Verwenden Sie den Befehl sendEvent, um personalisierten Inhalt abzurufen.

code language-none
`alloy("sendEvent", { renderDecisions: true, personalization: { surfaces: ["web://alloy-samples.adobe.com/#content-cards-sample"], }, });`

Abonnieren Sie Inhaltskarten für eine bestimmte Oberfläche mit dem Befehl subscribeRulesetItems. Handhaben Sie bei jeder Auswertung von Regelsätzen das Ergebnisobjekt im Callback, das propositions mit Inhaltskartendaten enthält.

code language-none

const contentCardManager = createContentCardManager("content-cards");

alloy("subscribeRulesetItems", {
    surfaces: ["web://alloy-samples.adobe.com/#content-cards-sample"],
    schemas: ["https://ns.adobe.com/personalization/message/content-card"],
    callback: (result, collectEvent) => {
        const { propositions = [] } = result;
        contentCardManager.refresh(propositions, collectEvent);
    },
});

Verwalten Sie die Darstellung von Inhaltskarten und senden Sie die Ereignisse interact und display mithilfe des Objekts contentCardsManager in script.js. Extrahieren, sortieren und verarbeiten Sie Inhaltskarten aus den empfangenen Vorschlägen.

code language-none

const createContentCard = (proposition, item) => {
    const { data = {}, id } = item;
    const {
        content = {},
        meta = {},
        publishedDate,
        qualifiedDate,
        displayedDate,
    } = data;

    return {
        id,
        ...content,
        meta,
        qualifiedDate,
        displayedDate,
        publishedDate,
        getProposition: () => proposition,
    };
};

const extractContentCards = (propositions) =>
    propositions
        .reduce((allItems, proposition) => {
        const { items = [] } = proposition;

        return [
            ...allItems,
            ...items.map((item) => createContentCard(proposition, item)),
        ];
    }, [])
    .sort(
        (a, b) =>
            b.qualifiedDate - a.qualifiedDate || b.publishedDate - a.publishedDate
    );

const contentCards = extractContentCards(propositions);

Rendern Sie die Inhaltskarten basierend auf den für jede Kampagne definierten Details. Jede Karte enthält einen title, einen body, eine imageUrl und andere benutzerdefinierte Datenwerte.

code language-none

const renderContentCards = () => {
    const contentCardsContainer = document.getElementById(containerElementId);
    contentCardsContainer.addEventListener("click", handleContentCardClick);

    let contents = "";

    contentCards.forEach((card) => {
        const { id, title, body, imageUrl, meta = {} } = card;
        const { buttonLabel = "" } = meta;

        contents += `
            <div class="col">
                <div data-id="${id}" class="card h-100">
                    <img src="${imageUrl}" class="card-img-top" alt="...">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${body}</p>
                        <a href="#" class="mt-auto btn btn-primary">${buttonLabel}</a>
                    </div>
                </div>
             </div>
         `;
    });

    contentCardsContainer.innerHTML = contents;
    collectEvent(
        "display",
        contentCards.map((card) => card.getProposition())
     );
};

Wenn der Rückruf subscribeRulesetItems aufgerufen wird, wird auch eine Hilfsfunktion namens collectEvent bereitgestellt. Diese Funktion wird zum Senden von Experience Edge-Ereignissen verwendet, um Interaktionen, Anzeigen und andere Benutzeraktionen zu verfolgen. In diesem Beispiel verfolgt collectEvent, wenn auf eine Inhaltskarte geklickt wird. Wenn außerdem auf die Schaltfläche auf der Inhaltskarte geklickt wird, wird der Browser zu der actionUrl weitergeleitet, die von der Kampagne angegeben wurde.

code language-none

const handleContentCardClick = (evt) => {
    const cardEl = evt.target.closest(".card");

    if (!cardEl) {
        return;
    }

    const isAnchor = evt.target.nodeName === "A";
    const card = contentCards.find((card) => card.id === cardEl.dataset.id);

    if (!card) {
        return;
    }

    collectEvent("interact", [card.getProposition()]);

    if (isAnchor) {
        evt.preventDefault();
        evt.stopImmediatePropagation();
        const { actionUrl } = card;
        if (actionUrl && actionUrl.length > 0) {
            window.location.href = actionUrl;
        }
    }
};

Wichtige Beobachtungen key-observations

personalizationStorageEnabled

Die Option personalizationStorageEnabled ist im Befehl configure auf true gesetzt. Dadurch wird sichergestellt, dass zuvor qualifizierte Inhaltskarten gespeichert werden und weiterhin über Benutzersitzungen hinweg angezeigt werden.

Trigger

Inhaltskarten unterstützen benutzerdefinierte Trigger, die auf der Client-Seite ausgewertet werden. Wenn eine Trigger-Regel erfüllt ist, werden zusätzliche Inhaltskarten angezeigt. In diesem Beispiel werden vier verschiedene Kampagnen verwendet, eine für jede Inhaltskarte, die alle dieselbe Oberfläche aufweisen: web://alloy-samples.adobe.com/#content-cards-sample. In der folgenden Tabelle werden die Trigger-Regeln für jede einzelnen Kampagnen und deren Erfüllung erläutert.

Trigger-Regel

Karte

Erfüllen der Trigger-Regel

Keine

sendEvent command. Keine Client-seitige Regel zu erfüllen.

Keine

sendEvent command. Keine Client-seitige Regel zu erfüllen.

Der Befehl evaluateRulesets wird durch Klicken auf die Schaltflächen „Mittel einzahlen“ und „In Social Media freigeben“ ausgelöst. Jede Schaltfläche gibt den relevanten decisionContext an, um die für die jeweiligen Kampagnen definierten Regeln zu erfüllen.

document.getElementById("action-button-1").addEventListener("click", () => {
    alloy("evaluateRulesets", {
        renderDecisions: true,
        personalization: {
            decisionContext: {
                action: "deposit-funds",
            },
        },
    });
});

document.getElementById("action-button-2").addEventListener("click", () => {
    alloy("evaluateRulesets", {
        renderDecisions: true,
        personalization: {
            decisionContext: {
                action: "social-media",
            },
        },
    });
});

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

TL;DR: This page walks through a sample that uses the Adobe Experience Platform Web SDK to fetch and render Adobe Journey Optimizer content cards entirely on the client side of a web page.

Intents:

Set up and run the Web SDK content card sample locally over HTTPS
Configure the Web SDK (alloy) on a page and fetch personalized content with the sendEvent command
Subscribe to content cards for a surface using the subscribeRulesetItems command
Render content cards and send display and interact events
Trigger additional content cards client side using evaluateRulesets and a decisionContext
Persist qualified content cards across user sessions with personalizationStorageEnabled

Glossary:

Surface: The identifier a content card subscription and events are scoped to, for example web://alloy-samples.adobe.com/#content-cards-sample (product-specific)
subscribeRulesetItems: The Web SDK command used to subscribe to content cards for a surface; its callback returns propositions containing content card data (product-specific)
evaluateRulesets: The Web SDK command triggered on client-side actions to evaluate rulesets using a decisionContext (product-specific)
decisionContext: The context passed with evaluateRulesets that supplies the values needed to satisfy a campaign’s client-side trigger rules (product-specific)
collectEvent: A convenience function provided in the subscribeRulesetItems callback used to send Experience Edge events to track displays, interactions, and other user actions (product-specific)
personalizationStorageEnabled: A configure option that, when set to true, stores previously qualified content cards so they continue to be displayed across user sessions (product-specific)
Trigger rule: A client-side condition that, when met, causes additional content cards to be displayed (product-specific)

Guardrails:

To use disqualification rules with content cards, Web SDK version 2.28.0 or later is required.
You need to install node and npm to run the sample.
The samples require locally signed SSL certificates to serve content over HTTPS.
In this sample, four campaigns are used, one per content card, all sharing the same surface web://alloy-samples.adobe.com/#content-cards-sample.

Terminology:

Canonical name: Configure content cards support in Web SDK — Acronym: SDK — variants: Web SDK content card sample, Content cards configuration Web SDK
Synonyms: “Web SDK” = “alloy”
Do not confuse: “sendEvent” (fetch personalized content) ≠ “subscribeRulesetItems” (subscribe to content cards for a surface) ≠ “evaluateRulesets” (evaluate rulesets on a client-side action)
Do not confuse: “display” event (content card shown) ≠ “interact” event (content card clicked)

FAQ:

Q: What Web SDK version is needed for disqualification rules? — Web SDK version 2.28.0 or later is required to use disqualification rules with content cards.
Q: Why do the samples require SSL certificates? — The samples serve content over HTTPS, so they require locally signed SSL certificates; the page uses mkcert to create and install them.
Q: How are qualified content cards kept across sessions? — Setting personalizationStorageEnabled to true in the configure command stores previously qualified content cards so they continue to be displayed across user sessions.
Q: How are additional content cards triggered? — Content cards support custom triggers evaluated on the client side; the sample calls evaluateRulesets with a decisionContext when the Deposit Funds or Share on social media buttons are clicked.
Q: What happens when a content card button is clicked? — The collectEvent function tracks the interaction, and if the button is an anchor, the browser is directed to the actionUrl specified by the campaign.

recommendation-more-help

journey-optimizer-help