Decisioning Renderer

12 min

Showing personalized content (a banner, ribbon, or card from an Adobe Journey Optimizer campaign) directly on a real external website used to be genuinely hard to demo. Because the site isn't one of our own pages, the old way meant updating Data Collection (Adobe Launch) with a rule to request that content, and then writing actual code to render it correctly in the right location on the page — every time, for every site, before you could show anyone anything.

This feature removes both of those steps entirely. There's no Data Collection rule to build and no code to write — you just configure where the content should appear and how it should look, and it's ready to demo, in minutes instead of a full engineering effort. You can also demo it live: open the Profile Viewer widget on the site, click one button, and watch the personalized content appear.

Before you start

You’ll need a project built from the Luma - Advanced (External website) template.

Step 1: Create the project

Go to Quick Setup - https://dsn.adobe.com/quick-setup

Choose the Luma - Advanced (External website)

Finish creating the project as you normally would. This would set up the external website project. It would also set up ExD campaigns.For more information on ExD setup : https://dsn.adobe.com/docs/D0Yv-experience-decisioning

Note: ExD Campaign should be JSON-based, not HTML.

Open the data stream associated with web project in data collection. Check "Adobe Journey Optimizer"

Step 2: Open the project

Go to dsn.adobe.com.

Open the project you just created.

Step 3: Configure where the content should appear

Click the Decisioning Surfaces tab

Click Add Surface.

Fill in the row:

Surface — this must match the surface name set up on the Adobe Journey Optimizer campaign.

CSS Selector — this tells the page exactly where to put the content. Open the live website, right-click the location where you want the content to show, choose “Inspect”, and find a class name or ID on that element. Type that into this field (for example .hero-banner).

Render as — choose how the content should look:

Ribbon — a small strip with an image and one line of text.

Banner — a larger image with a headline and text overlaid on top.

Card — an image next to a headline, text, and an optional button.

Click Options next to the row to fine-tune it — background colour, text colour, alignment, size, and (for Banner) width and height. There’s also a Custom CSS box here for anything the standard options don’t cover.

Using the Custom CSS box

Each render type is always built with the same fixed class name, so you always know exactly what to target. Type one line per rule. A few examples:

Ribbon — push the text to the left instead of centered:

.ribbon { justify-content: flex-start; }

Banner — make the banner narrower than the default:

.banner { max-width: 700px; }

Card — give the card a light grey background instead of white:

.card { background: #f5f5f5; }

You can add more than one rule at a time — just put each on its own line.

Run the live website with script injected. You would see an icon on middle right of the screen for Decisioning Renderer.

a. Open Profile Viewer and click on the Utilities section. Click on Register to create a new profile.

b. Now the account is created. Click on the icon in the middle right of the screen to open the Decisioning Renderer. This will appear by default if surfaces are configured.

c.Click on Run Content Decision. It is going to run decisioning based on the surfaces configured. You will see content appear on the live website.

d. Provide Loyalty Level as Blue and click on Update Profile. It will update the profile, but make take a couple of seconds. Once done, then click on Run Content Decision; the content will update on the page.

Step 4: Turn on the Decisioning Simulator

Click the Profile Viewer tab

Look for the Decisioning

Check Show decisioning simulator section.

This adds a panel to the Profile Viewer widget on the live site. That panel is what lets you manually trigger and demo the personalized content.

Step 5: Decide when it should appear

Back in the Decisioning section (Step 3), there’s a second checkbox:

Automatically apply decisioning the content shows automatically for every real visitor, as soon as the page loads, with no one needing to do anything.

Unchecked: the content only shows after someone manually clicks Evaluate and Apply in the Profile Viewer widget. This is useful for demos, since it gives you full control over exactly when the content appears and it can be used in conjuction with profile updater. Changing profile attributes and then evaluating the response.

Step 6: Test it

Open the live website.

Open the Profile Viewer widget.

Click Evaluate and Apply.

- It shows the response right there in the Profile Viewer widget, under each surface you configured — so you can see exactly what content was found before it goes anywhere.

- It applies that content onto the live page, in the spot you set up with the CSS Selector.

Confirm the content shows up in the location you configured.

If nothing appears, double-check the Surface name matches the campaign exactly, and that the CSS Selector points at an element that actually exists on the page.

Note: If you use Automatic apply decisioning, it will be applied to the page independent of the profile viewer.