How to create a new "Display Zone"

1. Hover your mouse over Settings and go to the Web Personalize menu

2. Click + to create a Display Zone

3. Input the necessary information to create a Display Zone

Field	Description
Display Zone name	Input the name that you want
Domain	Input your website domain
Zone Code	Code of new Zone is automatically added by the system but you can edit it
Zone type	Get Zone script: After creating Zone successfully, the system will generate Zone script. Put this Zone script in the position where you want to display the ad on the website. You can see how to get the Zone script here. Use CSS Selector: Input Class or ID of the div tag where you want to show the Ad. You can see how to get the class or id here

4. After filling in the info, click Save button to finish creating the Display Zone

Get the Zone script

1. Hover your mouse over Settings -> Choose Web Personalize

2. At the Display Zone listing, hover your mouse over the zone you want to get the script -> Click icon

3. Click Copy to clipboard to copy your Zone Script

Get id or class on the Website

1. Go to your website

2. Press F12 (or Fn + F12) to open Developer Tools

3. Click icon

4. Find the location where you want to display the Ad, then click on that location to display id or class

For example:

5. Copy the id or class into the Create Display Zone interface.

NOTE:

+ Add "#" in front of the id (Example: #maincontent)

+ Add "." in front of the class (Example: .page-main)

For example:

Note: If there are many classes in a div tag, you must replace the space with a "."

Get the "CSS selector" - this way is used when the class names are duplicated in many places on this page

- Right click on the div tag -> Copy -> Copy selector

Paste the content you just copied into the CSS Selector field in the Create Display zone interface

In case the level of div is not determined, you can use the following way:

Code example:

<div class="class-cha class-cha-02">
  <div class="class-con class-con-02">
    <div class="class-chau class-chau-02"></div>
  </div>
</div>

Like the above example, there are ways to get the "class-chau" div

1. .class-cha.class-cha-02 > .class-con > .class-chau

2. .class-cha.class-cha-02 .class-chau

Locate class or id on the website

1. Go to your website

2. Press F12 (or Fn + F12) to open Developer Tools

3. Press Ctrl + F to open search box at Elements tab

4. Input id or class that you want

5. Search results will be highlighted, hover over the search results to see the location on the website