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

此範例示範如何使用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物件管理內容卡片的轉譯,並傳送contentCardsManagerscript.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. 根據為每個行銷活動定義的詳細資料轉譯內容卡片。 每個卡片都包含titlebodyimageUrl和其他自訂資料值。

    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