- In-Feed Advertisement
- For Using DFP (DoubleClick for Publisher)
- Name space
- Q&A
You set ad spots from admin UI. You need to set up your account to admin UI.
You draft ad template from admin UI. Assign a placeholder by coding {{click_url}} as below and then the area is shown as ad spot.
Please refer here to know which placeholders you can use.
<div class="article">
<div class="icon">
<a href="{{click_url}}">
<img src="{{main_image_url}}" />
</a>
</div>
<div class="contents">
<h3>{{title}}</h3>
<p><span {{optout_click}}>【PR】</span>{{description}}</p>
<span class="source">{{displayed_advertiser}}</span>
</div>
</div>Issue tags from admin UI. Insert tags like as below to place you want to show ad in a page.
<div data-advs-adspot-id="Ad Spot ID" style="display:none"></div>Insert tag like as below to before </body> tag.
<script src="http://js.mtburn.com/advs-instream.js"></script>
<script type="text/javascript">MTBADVS.InStream.Default.run({immediately:true})</script>Additional load of ads is available when user arrives the lower part of website and read extra feed (UI) on feed-typed website.
- Include designating element of ad position, which is the same as initial state on DOM inserted when reading extra feed.
<div data-advs-adspot-id="MjQzOjIw" style="display:none"></div>- Call for
MTBADVS.InStream.Default.reloadAds()method of SDK after reading extra feed. Acquire and display ads cases after calling.
// Example of function called after reading extra feed
function onAdditionalFeedLoaded() {
// ...
// Call for “reloadAds” method of SDK
MTBADVS.InStream.Default.reloadAds();
}If you configured at admin UI, you can reduce ad title, explanation and advertiser’s name in order to optimize for each media. Please refer to the UI manual for details.
Giving the callback functions allows you to adjust the length of the string in your optional manner. Callback functions will be called right before displaying ads. The content of ads and location will be given as an argument. At this point, you can describe the process to edit the content. And also, you can edit the number of characters of item according to the position. Callback functions should be given to before_render option. This before_render option overwrites length configurations of admin UI.
The following, place [PR] at the head of title. The number of characters of ad spots A should be within 30, and ad spots B should be within 40 including ellipses at the end of sentence.
MTBADVS.InStream.Default.run({
before_render: function(ad_info, placement_info) {
// Insert `[PR]` at the head of the title.
ad_info.title = '[PR] ' + ad_info.title;
// Assign the maximum length of description for each ad spots.
var desc_max_len = 30;
if (placement_info.adspot_id === 'ADSPOT_A') {
desc_max_len = 30;
} else if (placement_info.adspot_id === 'ADSPOT_B') {
desc_max_len = 40;
}
// Keep the number of characters of description within maximum length, and add ellipses at the end of text
if (ad_info.description.length > desc_max_len) {
ad_info.description = ad_info.description.substr(0, desc_max_len - 1) + '…';
}
// Return the edit result
return ad_info;
}
});- Object of ads content will be given for the first argument of
before_render. Please refer to ads parameter for object’s property. - Object of placement position will be given for the second argument of
before_render. Object’s property isadspot_id(ad spots ID). - As for callback functions, the edited contents of ads object should necessarily be given back by
return.
You can enable immediately option to display ads faster.
This below is an example to enable this option.
MTBADVS.InStream.Default.run({
immediately: true
});The option is disabled if not specified.
If immediately option is enabled, the ad loading and rendering process is executed immediately after MTBADVS.InStream.Default.run() function is called. For this reason, an ad call script must be inserted after the definition of ad template unit and elements of ad display position. And perhaps, also for this reason, other scripts may affect the M.T.Burn (Hike) ad display.
If immediately option is disabled, the ad loading and rendering process is executed after the page load is finished. In this way, the ads may be displayed correctly in most cases but it should take longer time to display.
Using raw API of JavaScript SDK, calling and rendering ads are available in the intended timing. Using the following explanation of API, extra implementation is needed.
Create an instance of controller class to manage ads. Assigning ad spots ID is necessary to have constructor.
var ad_controller = new MTBADVS.InStream.AdController({ adspot_id: 'MjQzOjIw' });Sending request of ads contents, and then get the information by using loadAds() method. Set down callback functions showed as argument after completed.
The First argument of callback functions is returned error object. If it works well, it returns null.
var on_ad_loaded = function(error) {
if (error) {
// error handling
}
// ...
};
ad_controller.loadAds(on_ad_loaded);It is possible to receive ads contents which was got from server by using loadAds() by using getLoadedAds() method.
var ads = ad_controller.getLoadedAds();A response value of getLoadedAds() is as below.
[
{
"title": "testAd",
"description": "This is test ad.”
"click_url": "http://...",
"main_image_url": "http://...",
"icon_image_url": "http://...",
"ad_id": 123,
"displayed_advertiser": "Provided by test advertiser",
"optout": "http://...",
"optout_click": " onClick=..."
},
...
]If you want to know about more details of each parameter, please refer to clause of ads parameter.
You can show ads recieved by using getLoadedAds(). It needs to manage display processing.
After showing ads, it is necessary to notice impression by using notifylmp() and passing ad_id as parameter.
var ad_id = ads[0].ad_id;
ad_controller.notifyImp(ad_id);You can load more ads contents in case of reloaded feed.
Every time calling for loadAd() method, you can get new ads content. GetLoadedAds() returns all of ads had been got so far.
It needs to use an controller instance, at first. If you keep using the only one instance, duplicate advertisements are never returned.
var ad_controller = new MTBADVS.InStream.AdController({ adspot_id: 'MjQzOjIw' });
var on_ad_loaded = function(error) {
if (error) {
// Error handling
}
// Recieving
var ads = ad_controller.getLoadedAds();
ads.forEach(function(ad) {
// showing ads according to ads content
ShowAd(ad);
// Notification of Ads impression
var ad_id = ad.ad_id;
ad_controller.notifyImp(ad_id);
});
};
ad_controller.loadAds(on_ad_loaded);- Every time reading pages, get ads contents from server. Please refrain from keep using cash that you had got.
- Ads contents you get from server are arranged to profitable order. It is better to show superior ads at the top.
| Parameter name | Explanation | Example |
|---|---|---|
| title | title words | TestAd |
| description | description | This is an test ad. |
| click_url | URL of transition destination when click the ads | http://click.mtburn.com/… |
| icon_image_url | URL of icon style of quadrate picture | http://banner.dspcdn.com/… |
| main_image_url | URL of banner style rectangular picture | http://banner.dspcdn.com/… |
| ad_id | ID of ads content | 123 |
| displayed_advertiser | Name of advertiser | Provided by test advertiser |
| optout | URL of optout | http://mtburn.jp/privacy_policyopt_out/ |
| optout_click | script forwarding to optout URL | onClick="function(e){... |
It is possible to deliver through DFP. Insert tags you used, because how to implemented tags are different; whether tags are synchronized or not.
- Add creatives to the order you want, and set the type of creatives
third party. - Insert M.T.Burn (Hike) JavaScript Tag as Creative.
- Insert JavaScript tags, ads unit template and, empty element that assigns display placement of ads.
- In addition, it needs to insert CSS for display.
- Insert click macro of DFP. Insert it accurately, and then it is possible to measure screen transitions and the clicks.
- You must implement template to tags if you using DFP click macro.
<!-- About reading CSS. It needs to customize. -->
<link rel="stylesheet" type="text/css" href="http://yourodmain/sampale.css">
<!-- Template od ads unit -->
<script type="text/advs-instream-template" data-adspot-id="NzYzOjEyMg">
<div class="article">
<div class="icon">
// Insert click macro of DFP, and then write down click URL of M.T.Burn (Hike) just beneath of click macro of DFP.
<a href="%%CLICK_URL_UNESC%%{{click_url}}" target="_blank">
<img src="{{icon_image_url}}" />
</a>
</div>
<div class="contents">
<h3>{{title}}</h3>
<p>{{description}}</p>
<span class="source">{{displayed_advertiser}}</span>
</div>
</div>
</script>
<!-- Assigning display location of ads -->
<div data-advs-adspot-id="NzYzOjEyMg" style="display:none"></div>
<!-- Calling for ads script. -->
<script src="https://js.mtburn.com/advs-instream.js"></script>
<script>
MTBADVS.InStream.Default.run({
before_render:function(ad_info, placement_info) {
// You must implement this step in order to connect DFP macro.
ad_info.click_url = encodeURIComponent(ad_info.click_url);
// If you want, it needs to implement like wrap up description.
// It is better to follow the procedure; otherwise the text’s jumbled.
var desc_max_len = 30;
if (ad_info.description.length > desc_max_len) {
ad_info.description = ad_info.description.substr(0, desc_max_len - 1) + '…';
}
return ad_info;
}
});
</script>It needs to read a CSS additionally because of displaying ads in iframe.
- Add creatives to the order you want, and set the type of creatives
Tthird party. - Insert JavaScript of M.T.Burn (Hike) as creative.
- Insert JavaScript such as advertisement unit template, empty element that assigns display placement of advertisement.
- Insert click macro of DFP. Insert it accurately, and then it is possible to measure screen transitions and clicks.
- You must implement template to tags if you using DFP click macro.
<!-- Template of ads units. -->
<script type="text/advs-instream-template" data-adspot-id="NzYzOjEyMg">
<div class="article">
<div class="icon">
<!-- Insert click macro of DFP, then put click URL of “M.T.Burn (Hike) ” right after -->
<a href="%%CLICK_URL_UNESC%%{{click_url}}" target="_blank">
<img src="{{icon_image_url}}" />
</a>
</div>
<div class="contents">
<h3>{{title}}</h3>
<p>{{description}}</p>
<span class="source">{{displayed_advertiser}}</span>
</div>
</div>
</script>
<!-- Assigning display placement of ads. -->
<div data-advs-adspot-id="NzYzOjEyMg" style="display:none"></div>
<!-- Calling for ads script -->
<script src="https://js.mtburn.com/advs-instream.js"></script>
<script>
MTBADVS.InStream.Default.run({
before_render:function(ad_info, placement_info) {
// You must implement this step in order to connect DFP macro.
ad_info.click_url = encodeURIComponent(ad_info.click_url);
// Depending on media, it needs to implement like wrap up description.
// It is better to follow the procedure; otherwise the text’s jumbled.
var desc_max_len = 30;
if (ad_info.description.length > desc_max_len) {
ad_info.description = ad_info.description.substr(0, desc_max_len - 1) + '…';
}
return ad_info;
}
});
</script>If you use synchronized tags, it doesn’t need to call for style sheets.
If you use template which draft from Admin UI, dfp click macro would not work correctly. You should use this only if you does not need to measure clicks by DFP.
In this case, the lines below must be removed.
// You must implement this step in order to connect DFP macro.
ad_info.click_url = encodeURIComponent(ad_info.click_url);It creates MTBADVS argument just beneath window object. Use MTBADVS argument, and then global namespace pollution never happens.
It has same role as In-Feed in the guide.