DocumentatieJourney OptimizerHandleiding voor Journey Optimizer

Ondersteuning voor inhoudskaarten configureren in Web SDK content-card-configuration-sdk

Last update: Fri Nov 07 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • Ervaren
  • Beheerder

In dit voorbeeld ziet u hoe u inhoudskaarten kunt ophalen van Adobe Journey Optimizer (AJO) met Adobe Experience Platform. Door het ​ Web SDK van Adobe Experience Platform ​ leveraging, wordt de verpersoonlijkingsinhoud opgehaald en volledig op de cliëntkant teruggegeven.

Als de pagina voor het eerst wordt geladen, wordt de standaardstatus van de pagina weergegeven. Nochtans, als u met de Fondsen van de Aanhouding of Aandeel op sociale media knopen in wisselwerking staat, zullen de extra inhoudskaarten verschijnen. Deze kaarten worden geactiveerd door omstandigheden aan de clientzijde, zodat ze alleen worden weergegeven wanneer specifieke handelingen worden uitgevoerd.

Het voorbeeld uitvoeren run-sample

PREREQUISITES
U moet knooppunt en npm installeren. ​ verwijs naar deze documentatie ​

  1. Stel lokale SSL-certificaten in voor HTTPS. Voor deze voorbeelden zijn lokaal ondertekende SSL-certificaten vereist om inhoud via HTTPS te kunnen leveren:

    1. Installeer mkcert op de computer.

    2. Voer na de installatie mkcert -install uit om het mkcert root -certificaat te installeren.

  2. Kloont de opslagplaats naar uw lokale computer.

  3. Open een terminal en navigeer naar de map van het voorbeeld.

  4. Installeer de vereiste afhankelijkheden door npm install uit te voeren.

  5. Start de toepassing door npm start uit te voeren.

  6. Open uw webbrowser en ga naar https://localhost .

Werking setup

  1. Omvat en vorm ​ SDK van het Web ​ op de pagina gebruikend montages van het .env dossier in de steekproefomslag.

    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. Gebruik de opdracht sendEvent om persoonlijke inhoud op te halen.

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

  3. Abonneren op inhoudskaarten voor een specifiek oppervlak met de opdracht subscribeRulesetItems . Telkens wanneer linialen worden geëvalueerd, handelt u het resultaatobject in de callback af. Deze bevat propositions met inhoudskaartgegevens.

    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. Het renderen van inhoudskaarten beheren en interact - en display -gebeurtenissen verzenden met behulp van het contentCardsManager -object in script.js . Extraheer, sorteer en verwerkt inhoudskaarten van de ontvangen voorstellen.

    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. Render de inhoudskaarten op de details worden gebaseerd die voor elke campagne worden bepaald. Elke kaart bevat een title , body , imageUrl en andere aangepaste gegevenswaarden.

    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. Wanneer de callback van subscribeRulesetItems wordt aangeroepen, wordt ook een gebruiksfunctie met de naam collectEvent opgegeven. Deze functie wordt gebruikt om Experience Edge-gebeurtenissen te verzenden om interacties, weergaven en andere gebruikersacties bij te houden. In dit voorbeeld volgt collectEvent wanneer op een inhoudskaart wordt geklikt. Als u bovendien op de knop op de inhoudskaart klikt, wordt de browser omgeleid naar de actionUrl die door de campagne is opgegeven.

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

Belangrijke opmerkingen key-observations

personalizationStorageEnabled

De optie personalizationStorageEnabled wordt ingesteld op true in de opdracht configure . Dit zorgt ervoor dat eerder gekwalificeerde inhoudskaarten worden opgeslagen en over gebruikerszittingen blijven worden getoond.

Triggers

Inhoudskaarten ondersteunen aangepaste triggers die aan de clientzijde worden geëvalueerd. Wanneer aan een triggerregel wordt voldaan, worden extra inhoudskaarten weergegeven. In dit voorbeeld worden vier verschillende campagnes gebruikt, één voor elke inhoudskaart, die allemaal hetzelfde oppervlak delen: web://alloy-samples.adobe.com/#content-cards-sample . In de onderstaande tabel staan de triggerregels voor elke campagne en de manier waarop u hieraan kunt voldoen.

Triggerregel
Kaart
De triggerregel naleven
Geen
sendEvent, opdracht. Geen clientregel om tevreden te zijn.
Geen
sendEvent, opdracht. Geen clientregel om tevreden te zijn.

De opdracht evaluateRulesets wordt geactiveerd wanneer u op de knoppen "Stortingsfondsen" en "Delen op sociale media" klikt. Elke knop geeft de relevante decisionContext aan om te voldoen aan de regels die voor de respectievelijke campagnes zijn gedefinieerd.

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