How to create a new "Ad Zone"

1. Access the "MARKETING HUB" app and go to the "Customer Journeys" menu

2. Select "Web Personalization" channel, then access "Advertising Zones" tab

3. Click "+" to create an "Ad Zone"

4. Input the necessary information to create an "Ad Zone"

Field	Description
Ad Zone name	Input the name that you want
Ad Zone domain	Input your website domain
Ad Zone Code	Code of new Zone is automatically added by the system but you can edit it
Ad 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

5. Click "Save" button to finish creating an "Ad Zone"

Get the Zone script

1. Access "MARKETING HUB" app -> "Customer Journeys" ->"Web Personalization" channel -> "Advertisings Zones" tab

2. At the "Ad 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" 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 Ad Zone" interface.

NOTE:

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

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

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 Ad 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" 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