【Javascript】Ajaxでロードしたページに含まれるAdsenseを表示させる | Wood-Roots:blog

2013
10/25

Ajaxでロードしたページに含まれるAdsenseを表示させる

当記事で紹介しているスクリプトについて、Googleの公式なドキュメントや解説が見つけられませんでした。もしかしたらAdsense For Ajaxと呼ばれていたものかもしれません。
現時点では動作はしていますが、近い将来廃止や動かなくなる可能性もありますのでご注意ください。
また、google.load(“ads”, “3”)で呼べるAPIについて詳細をご存知の方はよろしければ教えて下さい。

AjaxでAdsenseを含むページをロードした際、そのロードした先のページに含まれるAdsense広告が表示されません。
これはAjaxでロードしたあとにAdsenseを出力するJavascriptが実行されないためですが、その解決策を調べました。

ADs

サンプル

普通にload()しただけの例（Adsenseが表示されていない）
Adsenseの出力を工夫した例（Adsenseが表示されている）

HTML

head内で以下のようにGoogle Adsense API用のライブラリをロードします。
また、広告挿入用の要素（以下の例ではdiv#ad）を配置します。

1
2
3
4
<script src="https://www.google.com/jsapi"></script>
<script>google.load("ads", "3");</script>
 
<div id="ad"></div>

Javascript

次に以下のようなJavascriptを書きます。
google.ads.Adという関数の部分でクライアントID、広告を挿入する要素、オプション値を渡してAdsenseを表示させます。

formatに指定している広告サイズについては、こちらを参照してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
(function($){
//設定
google_ad_client = "pub-0596916800718129"; //Adsenseコード内「data-ad-client」となっている文字列
gAds = new Object();
//呼び出す関数
var doAdsense = function(opts,container){
var spotId = opts.format + "_" + container.id;
gAds[spotId] = new google.ads.Ad(google_ad_client, container, opts);
}
$(function(){
//Ajax完了後に実行
$('#loading').load('load.html #import',function(){
//第一引数にオプション、第二引数に広告を設置するIDをDOM要素で指定
//（jQuery使わなくてもgetElementByIdでいいです）
doAdsense({
'format' : google.ads.SMALL_SQUARE,//大きさを指定しないとレイアウトが崩れるときがある
'ad_slot' : "5608069824" //Adsenseコード内「data-ad-slot」となっている文字列
},$('#ad').get(0));
});
});
})(jQuery);

なお、この方法だとHTML内のコンテンツと関連した広告ではなく個人の閲覧履歴のみを参照して広告が表示されているように見えます。
Adsenseのクリック単価を意識している場合はよくないかもしれません。何でもいいからAdsenseを出したい、という場合ぐらいしか使えないかも。

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。

Category

Archive

Search

Social