文档 Journey Optimizer Journey Optimizer 指南

在 Web SDK 中配置内容卡支持 content-card-configuration-sdk

最近更新： 2026年9月13日

创建对象：

Experienced
管理员

在此页面上：设置并运行用于Adobe Experience Platform Web SDK获取和呈现内容卡的示例，以便在您的网页上提供客户端个性化内容。

style

shade-box

此示例展示了如何使用Adobe Experience Platform从Adobe Journey Optimizer (AJO)中检索内容卡片。通过使用Adobe Experience Platform Web SDK，可以在客户端完全获取和呈现个性化内容。

在初始页面加载时，页面显示其默认状态。但是，如果您与 存款资金 或 在社交媒体上共享 按钮交互，则将显示其他内容卡片。这些信息卡由客户端条件触发，确保仅在执行特定操作时显示。

运行示例 run-sample

PREREQUISITES

您需要安装node和npm。请参阅此文档

要将鉴别规则与内容卡结合使用，需要Web SDK版本2.28.0或更高版本。

为HTTPS设置本地SSL证书。这些示例需要本地签名的SSL证书来通过HTTPS提供内容：
1. 在计算机上安装mkcert。
2. 安装后，运行mkcert -install以安装mkcert root证书。
将存储库克隆到本地计算机。
打开终端并导航到示例的文件夹。
通过运行npm install安装所需的依赖项。
运行npm start启动应用程序。
打开Web浏览器并转到https://localhost。

工作原理 setup

使用示例文件夹中.env文件的设置包含并配置页面上的Web SDK。

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
});

使用sendEvent命令获取个性化内容。

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

使用subscribeRulesetItems命令订阅特定界面的内容卡。每次评估规则集时，处理回调中的结果对象，该回调将包含propositions和内容卡数据。

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);
    },
});

管理内容卡片的呈现，并使用script.js中找到的contentCardsManager对象发送interact和display事件。从收到的建议中提取、排序和处理内容卡片。

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);

根据为每个营销活动定义的详细信息呈现内容卡片。每个卡片都包含一个title、body、imageUrl和其他自定义数据值。

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())
     );
};

在调用subscribeRulesetItems回调时，还会提供一个名为collectEvent的方便函数。此函数用于发送Experience Edge事件，以跟踪交互、显示和其他用户操作。在此示例中，collectEvent在单击内容卡片时进行跟踪。此外，如果单击内容卡上的按钮，则浏览器将被定向到营销活动指定的actionUrl。

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;
        }
    }
};

主要意见 key-observations

personalizationStorageEnabled

configure命令中的personalizationStorageEnabled选项设置为true。这可确保存储以前限定的内容卡片，并在用户会话间继续显示这些卡片。

触发器

内容卡支持在客户端评估的自定义触发器。满足触发器规则时，将显示其他内容卡片。此示例使用四个不同的营销活动，每个内容卡一个活动，所有活动共享同一表面： web://alloy-samples.adobe.com/#content-cards-sample。下表概述了每个活动的触发器规则以及如何满足这些规则。

触发器规则

卡片

如何满足触发器规则

无

sendEvent命令。没有要满足的客户端规则。

无

sendEvent命令。没有要满足的客户端规则。

在单击“存款资金”和“在社交媒体上分享”按钮时，会触发evaluateRulesets命令。每个按钮都指定了相关的decisionContext以履行为各个营销活动定义的规则。

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