Added support for Adobe Journey Optimizer content cards in subscribeRulesetItems

[jasonwaters]

Description

This PR adds support for content-cards to alloy. A "content card" campaign can be created in AJO. Each content card is assigned a surface. That surface is then used in the web sdk to subscribe to content cards. Rendering content cards is an exercise left to the customer. see the alloy-samples sample for more details about usage and how-to.

Product and Technical Requirements

• PRD
• First release milestone
• Technical overview
• Decisioning Engine rules: support for sticky.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Improvement (non-breaking change which does not add functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

[ninaceban]

Hi Jason, is the new command subscribeContentCards related to subscribeRulesetItems command functionality and usage?

[jasonwaters]

Hi Jason, is the new command subscribeContentCards related to subscribeRulesetItems command functionality and usage?

They have some similarities, but subscribeContentCards offers some conveniences to users to make rendering content cards easier.

Functionality	subscribeRulesetItems	subscribeContentCards
callback payload	response object that contains propositions array.	array of content cards
method to collect display event	Build a payload based on propositions and items, then use sendEvent to send.	Call the rendered function with an array of content cards.
method to collect interact event	Build a payload based on propositions and items, then use sendEvent to send.	Call the clicked function with an array of content cards.
method to collect dismiss event	Build a payload based on propositions and items, then use sendEvent to send.	Call the dismissed function with an array of content cards.
Content cards ordering	Unpredictable sort from edge response. May be sorted manually by creating a list of all proposition items and manually sorting.	Sorted correctly every time.

The rendered, clicked and dismissed greatly simplify the work needed from the customer in order to implement content cards. And it prevents repeat events from being collected.

[jasonwaters]

Here is a comparison of subscribeContentCards vs subscribeRulesetItems to render content cards and collect appropriate exp edge events.

Using subscribeContentCards

      alloy("subscribeContentCards", {
        "web://aepdemo.com/contentCards",
        callback: ({ items = [], rendered, clicked, dismissed }) => {
          setClickHandler(() => clicked);
          setDismissHandler(() => dismissed);
          setContentCards(items);
          rendered(items);
        },
      });

Using subscribeRulesetItems.

I am assuming there may be some desire not to add a new command for content cards. But i'd like to provide as much convenience to our customers as possible. So one idea is to enhance subscribeRulesetItems with a collectEvent function that could be used in a similar fashion as the rendered, clicked and dismissed functions in subscribeContentCards. As you can see, there is a bit more legwork for the customer to use content cards using subscribeRulesetItems. But if the desire is to not add a new command, it could be done this way.

const createContentCard = (proposition, item) => {
  const { data = {} } = item;
  const {
    content = {},
    meta = {},
    publishedDate,
    qualifiedDate,
    displayedDate,
  } = data;

  return {
    ...content,
    meta,
    qualifiedDate,
    displayedDate,
    publishedDate,
    getProposition: () => proposition,
  };
};

alloy("subscribeRulesetItems", {
  surfaces: ["web://aepdemo.com/contentCards"],
  schemas: ["https://ns.adobe.com/personalization/message/content-card"],
  callback: (result, collectEvent) => {
    const { propositions = [] } = result;

    const contentCards = 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
      );

    setClickHandler(
      () => (items) =>
        collectEvent(
          "interact",
          items.map((item) => item.getProposition())
        )
    );

    setDismissHandler(
      () => (items) =>
        collectEvent(
          "dismiss",
          items.map((item) => item.getProposition())
        )
    );

    collectEvent("display", propositions);
    setContentCards(contentCards);
  },
});

[jfkhoury]

---->>> There are none! 🏆

This is my favorite! 😆

@jasonwaters The team will be reviewing this feature starting Monday.
Thank you

[jasonwaters]

This PR has been updated:

1. The subscribeContentCards command was removed.
2. The subscribeRulesetItems command was enhanced to include a collectEvent function passed into the callback function so there is some added convenience to collect events for propositions.. This is described in detail in a prior comment.

Todo:

• Add a new sample to alloy-samples to illustrate how to do content cards using the subscribeRulesetItems command.
• Add the content cards schema to the tags extension.

cc: @ninaceban @jfkhoury

[ninaceban]

Could you please provide more details why this is needed?

New options related to personalization should go under personalization block.

[jasonwaters]

thanks, good catch. it's actually already in personalization, looks like we just forgot to remove it from top level. i'll remove it

[ninaceban]

Message Feed Item was renamed to Content Card?

[jasonwaters]

Yep, "Feed item" isn't a thing anymore.

[jonsnyder]

Thanks for working with Nina! This looks great.

• Can you update the description of this PR to reflect the final state of the API?
• I see that message-feed-item is renamed to content-card. Is this backward compatible? Will customers need to do anything when they upgrade Web SDK?