Cara memasang iklan Vast HiltopAds terbaru menggunakan VideoJS Plugin
HiltopAds adalah salah satu platform periklanan alternative selain adsense, hiltop merupakan situs web penyedia layanan periklanan. DIsini kamu bisa menjadi sebagai penayang iklan dan menghasilkan uang dari iklan, serta bisa juga memasang iklan atau advertiser.
HiltopAds menyediakan beberapa jenis iklan, sementara untuk iklan nativ banner sekarang jarang tersedia. Sebagai gantinya ada iklan vast atau iklan dalam bentuk video, kemudian yang kedua ada iklan dalam bentuk popunder.
Iklan jenis popunder tidak cocok bila kita ingin memasang di blog biasa, blog biasa konten nya merupakan konten teks untuk di nikmati. Sementara iklan popunder merupakan iklan dengan event mengarahkan visitor ke halaman lain melalui window baru ketika terjadi aksi, misalnya user melakukan schroll halaman.
Iklan video ads adalah jenis iklan berbasis video, iklan ini hanya bisa di pasang pada HTML yang mengandung video player. Dan tentunya cukup ribet, tapi buat website ini sudah sepenuhnya mendukung. Kalau kamu menyadari, 30% iklan adsense sekarang sudah banyak yang jadi iklan nativ video dan di putar otomatis saat kita menjelaha sauatu halaman.
Hal ini merupakan tanda kalau perkembangan teknologi web browser sudah semakin maju. Selain google web berita media nasional juga sering banget menayangkan iklan vidoe yang di putar otomatis ke pengguna.
HiltopAds punya iklan vast tersendiri yang masih di aktifkan, jenis iklan ini hanya cocok di pasang pada web yang merupakan website video streaming. Namun kali ini saya hanya akan menggunakan video sampel dengan durasi 2 menit saja, nanti iklan akan di pasang pada saat awal sebelum video sampel di putar.
Cara pasang iklan video stream dengan link vast
Untuk memasangnya kamu hanya membutuhkan source code berikut ini. Perhatikan kamu harus memahami jenis HTML5 tag video, dimana tag source merupakan tag untuk menyematkan musik ataupun aliran video dalam sebuah pemutar video. Disini kamu membutuhkan sampel video, dengan link langsung yang sudah di unggah ke cloud/penyimpanan online.
Video sampel harus rendah, ukuranya nggak boleh gede. Buat saja video sampel yang kamu mau, kemudian upload video tersebut di CDN ImageKit atau CDN lain yang menurut kamu bagus. Nah untuk iklan, kita letakan di bagian Plugin VAST.
Sebenarnya semua jenis iklan VAST bisa di pasang disini, tautan iklan vast hanya berisi sebuah dokumen XML. Sususnan nya merupakan tautan video, audio, dan tautan tracking untuk memantau sudah sebatas mana video di putar ketika di Streaming. Berikut ini kode yang bisa kamu gunakan. :
<!DOCTYPE html>
<html>
<body>
Video Sample
<!-- videojs must be included first -->
<link rel="stylesheet" href="//vjs.zencdn.net/5.9.2/video-js.css">
<script type="text/javascript" src="//vjs.zencdn.net/5.9.2/video.js"></script>
<!-- videojs-vast-vpaid -->
<link href="//cdn.rawgit.com/MailOnline/videojs-vast-vpaid/master/bin/videojs.vast.vpaid.min.css" rel="stylesheet">
<script src="//cdn.jsdelivr.net/gh/MailOnline/videojs-vast-vpaid@master/bin/videojs_5.vast.vpaid.min.js"></script>
<script src="//cdn.viblast.com/vb/stable/viblast.js"></script>
<!-- body -->
<video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay
data-setup='{
"plugins": {
"vastClient": {
"adsCancelTimeout": 3000,
"adsEnabled": true,
"preferredTech":"html5",
"vpaidFlashLoaderPath": "//bostopago.com/dNm/F/zwd.GiNVvOZLGzUG/-esmn9/u_ZcUyl/kdPTTmQszXOTTuAM1FMlTeMDtMNkDyMb5gMUDpUDx/NHAG"
}
}}'
width='640'
height='400'
data-viblast-key="N8FjNTQ3NDdhZqZhNGI5NWU5ZTI="
>
<source src="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type='video/mp4'>
</video>
</body>
</html>Kamu pasti membutuhkan video sample yang lain sebagai video test atau video source nya, ini saya sediakan. Silakan salin saja salah satu tautan video, sebelum di gunakan coba tempel ke browser apakah video masih tersedia atau sudah di hapus. Soalnya ini tautan sudah lama banget.
Kalau video masih tersedia, biasanya browser akan langsung mengunduh. Sedangkan kalau sudah di hapus maka halaman google akan menampilkan notif 404 tidak tersedia, silakan di comot saja:
var mediaJSON = { "categories" : [ { "name" : "Movies",
"videos" : [
{ "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ],
"subtitle" : "By Blender Foundation",
"thumb" : "images/BigBuckBunny.jpg",
"title" : "Big Buck Bunny"
},
{ "description" : "The first Blender Open Movie from 2006",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ],
"subtitle" : "By Blender Foundation",
"thumb" : "images/ElephantsDream.jpg",
"title" : "Elephant Dream"
},
{ "description" : "HBO GO now works with Chromecast -- the easiest way to enjoy online video on your TV. For when you want to settle into your Iron Throne to watch the latest episodes. For $35.\nLearn how to use Chromecast with HBO GO and more at google.com/chromecast.",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" ],
"subtitle" : "By Google",
"thumb" : "images/ForBiggerBlazes.jpg",
"title" : "For Bigger Blazes"
},
{ "description" : "Introducing Chromecast. The easiest way to enjoy online video and music on your TV—for when Batman's escapes aren't quite big enough. For $35. Learn how to use Chromecast with Google Play Movies and more at google.com/chromecast.",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" ],
"subtitle" : "By Google",
"thumb" : "images/ForBiggerEscapes.jpg",
"title" : "For Bigger Escape"
},
{ "description" : "Introducing Chromecast. The easiest way to enjoy online video and music on your TV. For $35. Find out more at google.com/chromecast.",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4" ],
"subtitle" : "By Google",
"thumb" : "images/ForBiggerFun.jpg",
"title" : "For Bigger Fun"
},
{ "description" : "Introducing Chromecast. The easiest way to enjoy online video and music on your TV—for the times that call for bigger joyrides. For $35. Learn how to use Chromecast with YouTube and more at google.com/chromecast.",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" ],
"subtitle" : "By Google",
"thumb" : "images/ForBiggerJoyrides.jpg",
"title" : "For Bigger Joyrides"
},
{ "description" :"Introducing Chromecast. The easiest way to enjoy online video and music on your TV—for when you want to make Buster's big meltdowns even bigger. For $35. Learn how to use Chromecast with Netflix and more at google.com/chromecast.",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4" ],
"subtitle" : "By Google",
"thumb" : "images/ForBiggerMeltdowns.jpg",
"title" : "For Bigger Meltdowns"
},
{ "description" : "Sintel is an independently produced short film, initiated by the Blender Foundation as a means to further improve and validate the free/open source 3D creation suite Blender. With initial funding provided by 1000s of donations via the internet community, it has again proven to be a viable development model for both open 3D technology as for independent animation film.\nThis 15 minute film has been realized in the studio of the Amsterdam Blender Institute, by an international team of artists and developers. In addition to that, several crucial technical and creative targets have been realized online, by developers and artists and teams all over the world.\nwww.sintel.org",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" ],
"subtitle" : "By Blender Foundation",
"thumb" : "images/Sintel.jpg",
"title" : "Sintel"
},
{ "description" : "Smoking Tire takes the all-new Subaru Outback to the highest point we can find in hopes our customer-appreciation Balloon Launch will get some free T-shirts into the hands of our viewers.",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4" ],
"subtitle" : "By Garage419",
"thumb" : "images/SubaruOutbackOnStreetAndDirt.jpg",
"title" : "Subaru Outback On Street And Dirt"
},
{ "description" : "Tears of Steel was realized with crowd-funding by users of the open source 3D creation tool Blender. Target was to improve and test a complete open and free pipeline for visual effects in film - and to make a compelling sci-fi film in Amsterdam, the Netherlands. The film itself, and all raw material used for making it, have been released under the Creatieve Commons 3.0 Attribution license. Visit the tearsofsteel.org website to find out more about this, or to purchase the 4-DVD box with a lot of extras. (CC) Blender Foundation - http://www.tearsofsteel.org",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" ],
"subtitle" : "By Blender Foundation",
"thumb" : "images/TearsOfSteel.jpg",
"title" : "Tears of Steel"
},
{ "description" : "The Smoking Tire heads out to Adams Motorsports Park in Riverside, CA to test the most requested car of 2010, the Volkswagen GTI. Will it beat the Mazdaspeed3's standard-setting lap time? Watch and see...",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/VolkswagenGTIReview.mp4" ],
"subtitle" : "By Garage419",
"thumb" : "images/VolkswagenGTIReview.jpg",
"title" : "Volkswagen GTI Review"
},
{ "description" : "The Smoking Tire is going on the 2010 Bullrun Live Rally in a 2011 Shelby GT500, and posting a video from the road every single day! The only place to watch them is by subscribing to The Smoking Tire or watching at BlackMagicShine.com",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4" ],
"subtitle" : "By Garage419",
"thumb" : "images/WeAreGoingOnBullrun.jpg",
"title" : "We Are Going On Bullrun"
},
{ "description" : "The Smoking Tire meets up with Chris and Jorge from CarsForAGrand.com to see just how far $1,000 can go when looking for a car.The Smoking Tire meets up with Chris and Jorge from CarsForAGrand.com to see just how far $1,000 can go when looking for a car.",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4" ],
"subtitle" : "By Garage419",
"thumb" : "images/WhatCarCanYouGetForAGrand.jpg",
"title" : "What care can you get for a grand?"
}
]}]};
Silakan ganti sendiri tautan VAST di atas dengan tautan vast yang kamu dapatin dari HiltopAds, untuk playernya silakan di kreasikan sendiri menggunakan CSS atau apa saja. Video di atas playernya saya gunakan autoplay, jadi iklan akan terputar sendiri pada video opening.
Iklan hanya bisa di skip setelah 3000Ms, tapi tidak setiap kita akses iklan tayang. Iklan jarang tayang, untuk hiltop ads jenis iklan nya cenderung lebih sensitif mungkin kamu bisa mencoba kode ini dengan iklan vast lain.
Oh iya, tempatkan video pada bagian yang mudah di jangkau oleh pembaca. Bisa di tengah paragraf atau related post. Yang jelas kita hanya memaksa user menonton iklan senilai 3000Ms, selanjutnya yang di putar adalah video sample.
Setelah sampai ke video sample, jadi tergantung visitor mau lanjut atau nggak. Kita sudah mendapatkan masukan dari sejak awal iklan di putar, tapi ketika iklan tidak muncul yang di putar di awal hanya video sampel saja.
