In this section, you will find information about the Video Pre-Roll ad format, including how to get it, customize it, and where to place it.
A Video Pre-Roll is a short promotional video ad displayed before the main video content on a publisher's website. One of its main advantages is that users are more likely to engage with a video ad, especially if the creative (video clip) looks appealing, since their attention is already focused on the video player. Visitors are allowed to skip a promotional video no earlier than 5 seconds after it starts playing. The duration of a video clip can range from 15 to 30 seconds.
What is VAST and JS video code?
There are two options for implementing video pre-roll ads. We use the VAST protocol for pre-roll video ads, which is compatible with all JS and HTML video players. Additionally, our JavaScript Overlay code enables pre-roll placements on any website with video content, including those using embedded videos.
VAST is used to be placed directly in your player settings — note that this is only possible if you have access to the player settings.
The Video JS code can be placed on any website, allowing it to connect with a specific area and overlay our own player and ads within it.
Where can I get the VAST video pre-roll code?
Ready to place your video pre-roll code and start earning $$$? Here’s where you can find it.
First, ensure that you have at least one website accepted by Clickadu. If you haven't added a website yet, refer to the section on starting with Clickadu and add your first website for moderation.
If you already have an approved website with us, obtaining your video pre-roll code is very simple:
1. Go to the ‘Sites and Zones’ section of your Publisher SSP.
2. Once you’re there, choose the website you want to get the code for.
3. Select the ‘Create Zone’ tab.
4. Choose ‘Video’ as your desired ad format.
5. Now you can choose your ad feed (explicit content ads or mainstream content), your implementation option (VAST/JS), and customize the zone name.
6. All you need to do to complete the process is click "create," obtain the ad link, and implement it in your player. You're all set!
Once you have created this code, you can always get it in the ‘Sites and Zones’ section.
On the right side of the screen, you will find the 'Actions' section, which offers three options: ‘go to stats’, ‘get code’ and ‘archive the zone’. Click on the ‘get code’ symbol (2nd symbol).
If you are having troubles creating what you want, contact your personal manager for assistance.
Your personal manager’s contact details are located in the top right corner of your Publisher Platform.
If you have any further questions, feel free to contact our support via email at support@clickadu.com or through our help center at https://faq.clickadu.com/
How to add VAST to my player?
Where to paste your XML destination link for Video JS:
<script src="/your/path/for/videojs_5.vast.vpaid.min.js"></script>
<script>
videojs('my-player', {
"plugins": {
"vastClient": {
"adTagUrl": "put your vast url here",
"adsCancelTimeout": 5000,
"adsEnabled": true
}
}
});
</script>
Where to paste your XML destination link for MediaElement:
var player = new MediaElementPlayer('my-player', {
features: ['playpause','progress', 'controls', 'vast', 'ads'],
adsPrerollAdSkipSeconds: 3,
adsPrerollAdEnableSkip: true,
vastAdTagUrl: 'put your vast url',
vastAdsType: 'vast',
vastEnableSkip: true,
});Where to paste your XML destination link for JW Player:
<div id="my-video"></div>
<script type="text/javascript" >
jwplayer('my-video').setup({
advertising: {
client: 'vast',
schedule: {
"myAds": {
"offset": "pre",
"tag": "place your vast url here"
}
}
}
});
</script>
Where to paste your XML destination link for KVS:
Go to ‘Settings’ > ‘Player settings’.
Scroll down for VAST configuration.
Copy-paste your code there:
Now, you are all set and ready to start monetizing.
If you are having troubles creating what you want, contact your personal manager for assistance.
Your personal manager’s contact details are located in the top right corner of your Publisher Platform.
If you have any further questions, feel free to contact our support via email at support@clickadu.com or through our help center at https://faq.clickadu.com/
Where can I get the JS video pre-roll code?
Ready to place your video pre-roll code and start earning some $$$? Here’s where you can find it.
First, ensure that you have at least one website accepted by Clickadu. If you haven't added a website yet, refer to the section on starting with Clickadu and add your first website for moderation.
If you already have an approved website with us, obtaining your video pre-roll code is very simple:
1. Go to the ‘Sites and Zones’ section of your Publisher SSP.
2. Once you’re there, choose the website you want to get the code for.
3. Select the ‘Create Zone’ tab.
4. Choose ‘Video’ as your desired ad format.
5. Now you can select your ad feed (explicit content ads ads or mainstream content), choose your implementation option (VAST/JS), and customize the zone name.
6. When choosing ‘JS’, add the CSS selector of your player. If you don't know how to get your player CSS selector, read further.
7. After completing the steps, you can click ‘Create’ and get your code. You are all set!
If you don’t know how to get your player CSS selector, this article can be useful.
Once you have created this code, you can always get it in the ‘Sites and Zones’ section.
On the right side of the screen, you will find the 'Actions' section, which offers three options: ‘go to stats’, ‘get code’ and ‘archive the zone’. Click on the ‘get code’ symbol (2nd symbol).
If you are having troubles creating what you want, contact your personal manager for assistance.
Your personal manager’s contact details are located in the top right corner of your Publisher Platform.
If you have any further questions, feel free to contact our support via email at support@clickadu.com or through our help center at https://faq.clickadu.com/
How to get the CSS selector of 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)
1. How to get the CSS selector:
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 the <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:
Give the same selectors attribute: ‘class’ or ‘id’ to all of your video-players. 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:
Now you can create the zone and place it on your website.
If you are having troubles creating what you want, contact your personal manager for assistance.
Your personal manager’s contact details are located in the top right corner of your Publisher Platform.
If you have any further questions, feel free to contact our support via email at support@clickadu.com or through our help center at https://faq.clickadu.com/
How to add the JS Pre-Roll code to my website?
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!
If you are having troubles creating what you want, contact your personal manager for assistance.
Your personal manager’s contact details are located in the top right corner of your Publisher Platform.
If you have any further questions, feel free to contact our support via email at support@clickadu.com or through our help center at https://faq.clickadu.com/
Video Instruction for VAST
Here are a couple of videos to help you install VAST pre-roll on your player.