Web Personalization Content Editing

Note: This feature is currently released under our Controlled Availability program. To request access to this feature, please log in to My Oracle Support and create a service request. Availability for this feature is specific to product trim. Contact your account representative for more information.

Web content templates

When designing your new content, you can choose the type of personalization from the following web content templates:

  • Standard lightbox - a window overlay that overlays a site page and contains an image, text message, and a button;
  • Image only lightbox - a lightbox containing an image and a link, without additional text;
  • Sticky bar - a bar with a message that is positioned at the top or bottom of a page, that remains fixed as users scroll through the site;
  • Custom code - a template with empty HTML, CSS, and JS that could be used to create any custom experience;
  • JSON - an empty JSON template to be run on any app.

After selecting an appropriate template, it's opened in the Content Editor where you can:

  • edit HTML, CSS or JavaScript code;
  • customize the default set of template's properties;
  • preview HTML, CSS;
  • set locations to define where the code will be run.

For more details, refer to Visual editing and Content Locations.

Content editing

Personalization supplies content directly into a web browser and runs it as soon as the preceding conditions (set in trigger and decision nodes) are met. A content node comprises of the following connected code blocks:

  • HTML
  • CSS
  • JavaScript

Where the JavaScript code block is responsible for rendering the entire content node on a web page. The HTML and CSS code alone do not get onto a web page autonomously.

The instant content preview on the left reflects changes made to the HTML and CSS code. To focus on code editing, switch to the full-screen code editor and hide the preview by clicking the "expand" icon next to the JS tab.

There’s no post-processing applied to any of the code, so it’s just standard HTML, CSS, and JavaScript.

Content JavaScript

The main purpose for the JavaScript code is to render the associated HTML with CSS and capture the relevant Infinity Analytics events. To assist with that there are two auto-populated objects available in the JavaScript code:

The data object holds the HTML and CSS data of the Content as text:

Property

Type

Description

data.html

String

Content HTML code

data.css

String

Content CSS code

The info object contains generic information on the personalization:

Property

Type

Description

info.campaign.name

String

Personalization’s name as set in the Web Personalization UI

info.block.name

String

Content node name

info.isProduction

Boolean

Indicates if the personalization is served from the Production

The JavaScript of default templates box consists of three fundamental sections:

  1. Content rendering. Performed by the render() function.
  2. Interactions with the content. Handled with attachEvents() and onclick() functions.
  3. Analytics. Captured by the track() function.

  • displayed event parameter fires when the content shows up in the web browser.
  • dismissed fires when the widget box is closed.
  • accepted fires when the user proceeds with the offer.
  • triggered fires whenever the content node is activated.

These events are captured into Analytics and also contribute to the visitor session, allowing personalization to utilize these events in subsequent triggers and decisions.

Learn more

Web Personalization Canvas - Learn more on setting up a web personalization

Users Evaluation Scope - To learn more about personalization conditions

Content Locations - To know about content locations

Visual Editing - To know about visual editing capabilities