# How to create a new "Ad Zone"

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

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FQNCSEJDWLr8Q02OW2F8n%2Fimage.png?alt=media\&token=381e6942-3640-4a3f-bdc0-b6561b829fef)

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

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2Fa8f6fs8rQ6bFAReYwlb1%2Fimage.png?alt=media\&token=dc5f8928-306f-4326-a0f9-fe52ef383466)

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

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FxsOHO782FROWbmjQgLzJ%2Fimage.png?alt=media\&token=06ef5ed6-51ee-4616-96b1-d603c60867f7)

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

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FLh4corZKFvVf5G5VQa6K%2Fimage.png?alt=media\&token=3d5c9979-9da8-475a-8cf9-5bca962d5121)

<table><thead><tr><th width="215">Field</th><th>Description</th></tr></thead><tbody><tr><td>Ad Zone name</td><td>Input the name that you want</td></tr><tr><td>Ad Zone domain</td><td>Input your website domain </td></tr><tr><td>Ad Zone Code</td><td>Code of new Zone is automatically added by the system but you can edit it</td></tr><tr><td>Ad Zone type</td><td><p><strong>Get Zone script:</strong> 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 <a href="#get-the-zone-script">here</a>.</p><p><strong>Use CSS Selector:</strong> 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 <a href="#get-id-or-class-on-the-websites">here </a></p><p><img src="https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2F1E5YKf2YaoiPtSSD0wMt%2Fimage.png?alt=media&#x26;token=39dbbde7-8e4d-4a54-bad1-686a2de260b7" alt="" data-size="original"></p></td></tr></tbody></table>

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

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2F7VeRalzVFdz4Q7RZtjci%2Fimage.png?alt=media\&token=dce03b6a-8f50-4a5c-a6c4-c54f3788dc63)

### **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 ![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2F4KSnyo0EC9LVExAiYRyD%2Fimage.png?alt=media\&token=45738ebd-eb3d-4b41-baf0-97da638da74d)icon

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2F6D53zcJy8zCHBUmq4Kuq%2Fimage.png?alt=media\&token=d75d9bd1-e480-4393-b266-d7709f07e48d)

&#x20;   3\.  Click "**Copy to clipboard"** to copy your Zone Script

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FsWRT5vVWJT7VLM2KQTzW%2Fimage.png?alt=media\&token=25875c62-a9ab-42cf-bc68-a7b41667eba5)

### **Get id or class on the Website**

1. &#x20;Go to your website
2. Press **"F12"** to open **"Developer Tools"**
3. Click ![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FqsGynDU0bjLorLXIlPUR%2Fimage.png?alt=media\&token=add71280-c169-442c-be9b-9736d30214c9) icon

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FZAxlC3pcMyjP4iNCwDiH%2Fimage.png?alt=media\&token=cdff7117-1ec8-4531-8828-ca590448ac28)

&#x20;  4\.  Find the location where you want to display the Ad, then click on that location to display **"id" or "class"**

For example:

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FZI3oAE4P7IlA4maeY1Qd%2Fimage.png?alt=media\&token=8d731155-904b-4478-a020-9778738bbbe8)

&#x20;   5\.  Copy the **"id"** or **"class"** into the **"Create Ad Zone"** interface.&#x20;

&#x20;   **NOTE:**&#x20;

&#x20;        **+ Add "#" in front of  the "id"** (Example: "#maincontent")

&#x20;        **+ Add "." in front of the "class"** (Example: ".page-maint")

&#x20;   **For example:**&#x20;

&#x20;       &#x20;

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2F7Uss0mLNzirpfgQXlbgr%2Fimage.png?alt=media\&token=d1218326-0096-462f-8b91-45c3be8bbff3)

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

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FU88HdQJMmgAlrbGamBQ7%2Fimage.png?alt=media\&token=672ba075-be51-439e-8d4f-16023b645720)

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

&#x20; \- Right click on the div tag -> Copy -> Copy selector

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FtrNi7LiqSbElV8rftIOR%2Fimage.png?alt=media\&token=91259657-301f-403a-ba55-72fa314e2502)

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

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FFPudIy1xJSd1PhOD9pl6%2Fimage.png?alt=media\&token=2200ac99-798b-4b87-90b1-01fb1e1b711d)

**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 **"**&#x63;lass-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

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2F7nd5cBxx7F34XbG685sC%2Fimage.png?alt=media\&token=22d0bf1b-933e-4a11-ac43-7699f01c2500)

&#x20;   4\.  Input id or class that you want

&#x20;  5\.  Search results will be highlighted, hover over the search results to see the location on the website &#x20;

![](https://3576497809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmECwNqMNUmu6OXHSYgDv%2Fuploads%2FQCoSqcjrNPcr0WLaLtiA%2Fimage.png?alt=media\&token=d381e107-e36b-49ec-a5ba-ab946c80a581)