ドキュメント Journey Optimizer Journey Optimizer ガイド

Web SDK でのコンテンツカードのサポート設定 content-card-configuration-sdk

最終更新日： 2026年9月16日

作成対象：

Experienced
管理

このページ： Adobe Experience Platform Web SDKでコンテンツカードを取得およびレンダリングするサンプルを設定して実行し、web ページでクライアント側のパーソナライズされたコンテンツを配信できるようにします。

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 証明書を設定します。これらのサンプルでは、HTTPS 経由でのコンテンツの提供に、ローカルに署名された SSL 証明書が必要です。
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 に設定します。これにより、以前に認定されたコンテンツカードが確実に保存され、ユーザーセッションをまたいで引き続き表示されます。

トリガー

コンテンツカードは、クライアントサイドで評価されるカスタムトリガーをサポートします。トリガーのルールが満たされると、追加のコンテンツカードが表示されます。このサンプルでは、4 つの異なるキャンペーン（コンテンツカードごとに 1 つ）を使用し、すべて同じサーフェスを共有します：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",
            },
        },
    });
});

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