文件Journey OptimizerJourney Optimizer 指南

在 Web SDK 中設定內容卡支援 content-card-configuration-sdk

Last update: Tue Aug 26 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • 經驗豐富
  • 管理員

此範例示範如何使用Adobe Experience Platform從Adobe Journey Optimizer (AJO)擷取內容卡片。 藉由運用Adobe Experience Platform Web SDK，個人化內容完全在使用者端擷取及呈現。

初次載入頁面時，頁面會顯示其預設狀態。 但是，如果您與​ 存款基金 ​或​ 在社群媒體上分享 ​按鈕互動，將會顯示其他內容卡。 這些卡片是由使用者端條件觸發，以確保僅在採取特定動作時才會顯示。

執行範例 run-sample

PREREQUISITES
您必須安裝節點和npm。 請參閱此檔案

  1. 設定HTTPS的本機SSL憑證。 這些範例需要本機簽署的SSL憑證，才能透過HTTPS提供內容：

    1. 在您的電腦上安裝mkcert。

    2. 安裝之後，請執行mkcert -install以安裝mkcert root憑證。

  2. 將存放庫複製到本機電腦。

  3. 開啟終端機，並導覽至範例的資料夾。

  4. 執行npm install以安裝必要的相依性。

  5. 執行npm start以啟動應用程式。

  6. 開啟您的網頁瀏覽器，並移至https://localhost。

運作方式 setup

  1. 使用範例資料夾中檔案的設定，在頁面上包含並設定網頁SDK.env。

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

  2. 使用sendEvent命令擷取個人化內容。

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

  3. 使用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);
    },
});

  4. 使用interact中找到的display物件管理內容卡片的轉譯，並傳送contentCardsManager和script.js個事件。 從收到的主張中擷取、排序及處理內容卡片。

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

  5. 根據為每個行銷活動定義的詳細資料轉譯內容卡片。 每個卡片都包含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())
     );
};

  6. 叫用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

personalizationStorageEnabled命令中的true選項設定為configure。 這可確保儲存先前限定的內容卡片，並在使用者工作階段間繼續顯示。

觸發程序

內容卡支援在使用者端評估的自訂觸發器。 符合觸發規則時，會顯示其他內容卡片。 此範例使用四個不同的行銷活動，每個內容卡一個都共用相同的表面： web://alloy-samples.adobe.com/#content-cards-sample。 下表概述每個行銷活動的觸發程式規則以及如何滿足這些規則。

觸發程序規則
卡片
如何滿足觸發程式規則
None
sendEvent命令。 沒有使用者端規則可滿足。
None
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",
            },
        },
    });
});
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76