A dynamic region is an element on your website that you'd like Persosa to swap out automatically when a visitor meets specific segment conditions. A region can be plain text, HTML, or an image. Any <div> , <span> , <img> , etc can be turned into a region.

Persosa will track visitors across your site and, as they fall into experiences you define, will change the content shown in these regions. This allows the visitors to feel a more personalized experience that's targeted to them specifically.

Create a dynamic region

Choose Personalize > Dynamic Regions from the navigation, then + REGION in the top-right. In the modal, enter a region name and the CSS selector that Persosa can use to identify the region. For example, if the region has an ID of "my-element" on your site (<div id="my-element"> ), the selector would be #my-element .

Read more about CSS selectors.

You may also choose for this region to be active only on specific pages. Read more about using regular expressions to personalize content on specific pages.

Manage Region Modifications

After creating the region, you'll be taken to a list of modifications for the region, each tied to an existing experience. 

To configure the modifications for an experience, click Edit next to the experience you wish to manage. From the "Add a Modification" dropdown, choose the type of content you wish to add. If the type is "Attribute", enter the attribute name and value you wish to add/modify on the region, otherwise use the text box to search your Library for the appropriate piece of content to use.

To remove a modification, hover over it and click the trash can icon on the right.

When you're finished editing, click "Save" to save all changes for that experience.

HTML Modifications

When creating an HTML modification, you must choose how you'd like Persosa to use the HTML snippet from the library, before choosing it:

Inner HTML
Replace the entire inside contents of the region with the HTML content item. Uses the innerHTML method in JavaScript to implement the change.

<div id="my-persosa-region">
  <div>HTML SNIPPET</div>

Replaces the entire region with the HTML content item. Similar to jQuery's replaceWith method.

Append Inside
Appends the HTML content at the end of all child elements inside the region:

<div id="my-persosa-region">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>APPENDED CHILD</div>

Prepend Inside
Prepends the HTML content before all child elements in the region:

<div id="my-persosa-region">
  <div>PREPENDED CHILD</div>
  <div>Child 1</div>
  <div>Child 2</div>

Insert Before
Inserts the provided HTML before the current region as a sibling:

<div>INSERTED HTML</div>
<div id="my-persosa-region"></div>

Insert After
Inserts the provided HTML after the current region as a sibling:

<div id="my-persosa-region"></div>
<div>INSERTED HTML</div>

Experience order

Each variation will be tied directly to an experience, so the order of priority will match that of the experiences. The order in which you see them in the interface will match the priority they'll be evaluated in.

Implement a dynamic region

Reference an existing element

You may reference an existing element on your website by its CSS selector. Here, you'll see we reference a region by h1 , which will show dynamic content in any region that matches that selector on any page. To narrow it down further, we set the regular expression ^/$ to apply this region only on the home page.

Insert a unique tag

If you wish, you may insert a custom element on your page rather than referencing an existing one by a CSS selector. In this case, create a dynamic content region and leave the CSS Selector field blank.

To get the element to insert, click Actions > View Code. You'll be shown a modal that contains the HTML to include on your site anywhere you'd like content to be dynamically shown by Persosa. You'll notice that there is no default HTML inside of the tag. Be sure to include some default content within your CMS or nothing will show for visitors not in an experience.

In our example, the code looks like this:

<span persosa-region="123"></span>

Although Persosa provides generic code to use for content regions, all that really matters is the hyver-region-id  attribute. You may include this on any existing HTML element on your website and it will still function the same. In our case, we've changed it to an H1 tag:

<h1 persosa-region="123">Increase ROI by targeting your website visitors</h1>

Did this answer your question?