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

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

Last update: Mon Aug 25 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 経験者
  • 管理者

このサンプルでは、Adobe Experience Platform を使用して Adobe Journey Optimizer（AJO）からコンテンツカードを取得する方法を示します。Adobe Experience Platform Web SDK を活用すると、パーソナリゼーションコンテンツが取得され、完全にクライアントサイドでレンダリングされます。

ページの初回読み込み時に、ページにはデフォルトの状態が表示されます。ただし、「入金」または「ソーシャルメディアで共有」ボタンを操作すると、追加のコンテンツカードが表示されます。これらのカードはクライアントサイドの条件によってトリガーされ、特定のアクションが実行された場合にのみ表示されます。

サンプルの実行 run-sample

PREREQUISITES
node と npm をインストールする必要があります。詳しくは、このドキュメントを参照してください。

  1. HTTPS 用のローカル SSL 証明書を設定します。これらのサンプルでは、HTTPS 経由でのコンテンツの提供に、ローカルに署名された SSL 証明書が必要です。

    1. コンピューターに mkcert をインストールします。

    2. インストール後、mkcert -install を実行して mkcert root 証明書をインストールします。

  2. リポジトリをローカルマシンにクローンします。

  3. ターミナルを開き、サンプルのフォルダーに移動します。

  4. npm install を実行して、必要な依存関係をインストールします。

  5. npm start を実行してアプリケーションを起動します。

  6. Web ブラウザーを開き、https://localhost に移動します。

仕組み setup

  1. サンプルフォルダーの .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
});

  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. コンテンツカードのレンダリングを管理し、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);

  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

configure コマンドで personalizationStorageEnabled オプションを true に設定します。これにより、以前に認定されたコンテンツカードが確実に保存され、ユーザーセッションをまたいで引き続き表示されます。

トリガー

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