In this article you'll find:

- What is JS Pre-Roll?

- How to create a JS Pre-Roll ad zone

- How to get CSS selector of your video-player

- How to add JS Pre-Roll ad zone to your website

JS Pre-Roll is an in-house Clickadu ad tag solution that integrates a video over the website content and allows publishers to monetize video-traffic without any additional video-player licenses and works perfectly on any kind of video players.

To create a JS Pre-Roll ad zone in a few steps:

1. First, go to the 'sites and zones' section and choose a website you'd like to create a new zone.

2. Click 'Create zone' and choose 'video zone' direction and choose JS (Pre-Roll).

3. Add the CSS selector of your player. If you don't know how to get your player CSS selector read further.

4. Click 'create' to save the new ad zone, you'll get your new code automatically.

In case you're running none of the suggested players and selected 'other' you need to add CSS selector for your video-player.

There are several types of CSS selectors you can use:
​
Class - .class (use stop right before the class)

Id - #id (use hash right before the id)

How to get the CSS selector:

1. Use browser extensions/add-ons like:

Chrome (SelectorGadget)

Opera (WebScraper)

FireFox (Devtools-highlighter)

2. Search through the source code.

Note #1: It's better to choose <div> tag where the video-player is placed.

Note #2: If you're using iframes choose the <div> tags right before the video-content iframe.

Note #3: If you're running several players at once you have two options:
​
A. Give the same selectors attribute: class or id to all of your video-players.

B. You can add selectors to your ad zone using a comma. Example: .class, #id

Copy your class or id selector and paste it to your ad zone options:

In order to get the video ads running, you need to add the received tag to your website.

1. Copy the received ad tag.

2. Go to your website source code.

3. Paste the JS Pre-Roll ad tag right after the video player tag just like in the case below:

4. Save your code modifications and you're all set. Enjoy your shiny new JS Pre-Roll ad tag!