"Personalize" Button for Adobe Audience Manager

[trieloff]

In the context of https://github.com/adobe/express-website-issues/issues/158 we should add a "Personalize" button to the Sidekick, which will work like this:

Preview/Live/Production

Clicking the button will open a dropdown that allows the user to select or reset an audience. The list of audiences is pulled from /_audiences.json at the site root, which is populated by a table consisting of the columns:

• name: display name of the audience, e.g. "returning visitor"
• description: optional description of the audience, shown as tooltip, e.g. "visitors who have been to adobe.com before in the last two weeks"
• id: ID of the audience manager audience, e.g. 1738236

Upon selecting an audience, the button will:

• set the window.hlx.audience variable to the selected ID
• fire a window.dispatchEvent(new CustomEvent('helix-audiencechanged', { detail: audienceId })); event
• persist the selected audience in a cookie or session storage

An (upcoming) personalization component will be able to listen to these events or read the values and display the matching content.

Edit

The same dropdown will be shown, but without an option to clear or set the audience, instead clicking an audience name will copy the audience ID so that it can be used in the first column of the personalization block's table

Edit 2

Incorporated @rofe's suggestions from below: #64 (comment)

[rofe]

@trieloff A few suggested changes:

• set the window.helix.audience variable to the selected ID

I would (re)use window.hlx object for this which is already being used by the Sidekick. On the other hand, do we really need this variable if the selected audience is also broadcast via event and stored in localStorage?

• fire a window.helix.on('audiencechanged') event

I would propose to fire the event on the window instead, as listening to an event on an object that may or may not exist (before the Sidekick is initialized, window.hlx yet would be cumbersome:

window.dispatchEvent(new CustomEvent('helix-audiencechanged`, { detail: audienceId }));

Then blocks can register listeners like this:

window.addEventListener('helix-audiencechanged', (evt) => console.log(evt.detail);

And a few questions:

1. Who is the persona authoring the _audiences sheet, and where would they get the correct IDs from?
2. In the production (i.e. non-simulation) scenario, where would the event be fired and the audience ID be stored in localStorage? I imagine we'd need a few helper functions to trigger this in a project's martech.js based on real data from EC...

cc @davidnuescheler

[trieloff]

Who is the persona authoring the _audiences sheet, and where would they get the correct IDs from?

The same person that defines audiences in AudienceManager. They get it from the AudienceManager UI.

In the production (i.e. non-simulation) scenario, where would the event be fired and the audience ID be stored in localStorage? I imagine we'd need a few helper functions to trigger this in a project's martech.js based on real data from EC...
On the other hand, do we really need this variable if the selected audience is also broadcast via event and stored in localStorage?

Oddly enough, this is the same question, asked twice.

The window.hlx.audience variable + helix-audiencechanged event shall be the main interface to use when building a compontent that interacts with audiences or uses targeting. The value will be populated from two sources:

1. the AudienceManager JSON API (by using the Experience Cloud ID Cookie)
2. the Cookie/LocalStorage/Sidekick UI

(2) overrides (1), so that a user with the sidekick can select audiences at any time.

[rofe]

Oddly enough, this is the same question, asked twice.

Sorry 😄

I figured we'd need some sot of "connecive tissue" between Audience Manager running on a page and blocks using personalization, to make sure that window.hlx.audience is set and/or the helix-audiencechanged event gets fired...

[kptdobe]

I agree with the first sentence of the issue description: we need a button in the sidekick. For the rest, I do not know. Talking about implementation details of the simulation without having defined the things which need to be simulated feels strange to me ;)
And apart from the button, I am also not sure if this really belongs to the sidekick.

I am going to create an issue for the personalised content.