Knowledgebase
How to add and manage JS Pre-Roll tag to your website
Posted by Demian Mash on 13 May 2019 04:18 PM

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

 

What is JS PreRoll?

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.

How to create a JS Pre-Roll ad zone

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. Select the player type or tick 'other' if you're running none of the mentioned video-player types.

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

up↑

How to get CSS selector of your video-player

In case you're running none of the suggested players and selected 'other' you need to add CSS selector fo 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.

Chrome (F12/Right mouse button click + Inspect)

Opera (Ctrl+Shift+C/Right mouse button click + Inspect element)

FireFox (Right mouse button click + Q / Right mouse button click + Inspect element)

Safari (Ctrl+Opt+I/Right mouse button click + Inspect)

No matter the Inspector you use, just choose your video-element to get it selectors: class or id.



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:

up↑

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

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!

up↑

(0 vote(s))
Helpful
Not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments: