最先端技術即席実装(SSJ)

最先端技術即席実装(SSJ)

いかに時間をかけないで、最新技術を使いこなすかを目標にした活動記録

AdSense動画広告を手軽に始めるには? | Video.js を利用してみた

 

背景

枠を提供するからには高単価で販売したい。

動画ばかり流れるようにすれば良いのでは・・・と思い立ったので調べてまとめた。

 

AdSenseのバナーに動画を出せないのか

サポートには下記の表記があるが、レクタングルに動画が流れているのを見たことがない。

対応している広告サイズを使用している場合は、ページに動画広告を表示できます。 

動画広告 - AdSense ヘルプ

 

AdWordsから動画を出稿するには

バナーに動画配信できないのかAdWordsに入って調べてみた。ディスプレイネットワーク(a.k.a GDN:AdSenseADXの在庫)に配信ができると書かれているので詳細を読んだが、動画プレーヤーに入っている在庫の説明しか出てこない。

f:id:tetsuyaimagawa:20170416135320p:plain

 

動画プレーヤーを導入する

実質誰も出稿しない…ようなので技術的に可能か検証するのにこれ以上時間を割くのはやめましょう、ということでセオリー通り動画在庫を用意することにした。

下記の対応プレーヤーを入れればよいのだが、今回は無料のVideo.jsを利用した。

動画技術パートナー - DFP Small Business ヘルプ

 

Video.jsの設定

サンプルダウンロード

例によってサンプルを引っ張ってきて動かします。example内のsimpleというものを利用。

github.com

足りないjs, css補完

利用されている下記jsとcssが足りなかったので、下のサンプルページからパクってきました。

  • "../../third_party/videojs-ads/videojs.ads.js"
  • "../../third_party/videojs-ads/videojs.ads.css"

IMA SDK Plugin for Video.js

 

コード書き換え

ads.jsのoptionsを下記のように書き換えます。

var options = {

id: 'content_video',
adTagUrl:'http://googleads.g.doubleclick.net/pagead/ads?ad_type=video&client=ca-video-pub-4968145218643279&videoad_start_delay=0&description_url=http%3A%2F%2Fwww.google.com&max_ad_duration=40000&adtest=on'
};

index.html内のsourceを用意した動画に変えます。

 <source src="xxx.mp4"

type="video/mp4" ></source>

 

完成品

Video.js Test

自分で用意した動画の再生時に広告が出るようになりました。

 

申請

AdSenseから申請します。まともなサイトだと連絡がくるらしいですが、私のサンプルサイトは通りませんでした。

f:id:tetsuyaimagawa:20170416142912p:plain

 

まとめ

動画広告は技術的にはタダでできるが、まともな動画コンテンツが必要。