Set Up Content Zones

Use content zones to designate areas on web pages across your website as targets for rendering personalized content from Personalization. You can define content zones in the Interactions SDK Sitemap either globally or for a specific page type. The content zones that you define in the Sitemap are then made available to personalization experience developers via Web Personalization Manager (WPM).

Content Zone Fields

A content zone contains two fields — a name and a selector.

Field Name	Type	Required	Description
`name`	String	Yes	The name of the content zone. For example, `global_popup` and `product_detail_recommendations`.
`selector`	String	No	The CSS selector of the web page element that the content zone targets.

Define a Content Zone

You can define content zones in the Interactions SDK Sitemap globally using the global configuration. Alternatively, you can define content zones for specific page types using the pageTypes configuration.

Example: Defining content zones in the global configuration of the Sitemap.

1const config = {
2  global: {
3    contentZones: [
4      { name: "global_popup" },
5      { name: "global_infobar" },
6      { name: "global_footer", selector: "footer.global-footer" },
7    ],
8  },
9};

Example: Defining content zones in the pageTypes configuration of the Sitemap.

1...
2pageTypes: [
3  {
4    name: "home",
5    isMatch: () => /^\/$/.test(window.location.pathname),
6    interaction: {
7      name: "Homepage",
8    },
9    contentZones: [
10      { name: "recommendations_1", selector: "section.product_recs" },
11      { name: "recommendations_2", selector: "div#customer-stories" },
12    ],
13  },
14],
15...