web-dev-qa-db-ja.com

JavaScriptによる動的AdSense挿入

これを見つけるのがどれほど難しいかは信じられませんが、Googleの開発者向けドキュメントでさえ、見つけることができません。 JavaScript挿入AdSenseで動的にのみできるようにする必要があります。 StackOverflowも確認しましたが、他の人からはこれが尋ねられましたが、応答はありませんでした。うまくいけば、これがより良い説明になり、いくつかの返信が得られるでしょう。

基本的に、ユーザーは自分のスクリプトを挿入し、それをmy.jsと呼びます（現時点では具体的に何を言っているかはわかりません）。my.jsがロードされ、my.jsに埋め込まれたメディアが表示されます彼らのページから、私は何とかして生成されたHTMLを追加する必要があります：

<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxx";
/* my.js example Ad */
google_ad_slot = "yyy";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

特定の<div>（または何でも）要素内。何か案は？

P.S。 jQueryのようなライブラリはありません。JavaScriptを使用して、特定の<div> iに挿入する必要がある場合を除いて、ページにHTMLを挿入することはできません（私は Sizzle を使用していますそれが役立つ場合はJSライブラリ）

javascriptapiadsensesizzle
29
Oscar Godson

GoogleがAdSenseスクリプト内でdocument.write()を使用しているため、他の回答によって提案されたAdSenseスクリプトを非同期でロードするために使用される単純な手法は機能しません。 document.write()はページの作成中にのみ機能します。非同期に読み込まれたスクリプトが実行されるまでに、ページの作成は既に完了しています。

これを機能させるには、document.write()を上書きする必要があります。これにより、AdSenseスクリプトが呼び出したときに、自分でDOMを操作できるようになります。次に例を示します。

_<script>
window.google_ad_client = "123456789";
window.google_ad_slot = "123456789";
window.google_ad_width = 200;
window.google_ad_height = 200;

// container is where you want the ad to be inserted
var container = document.getElementById('ad_container');
var w = document.write;
document.write = function (content) {
    container.innerHTML = content;
    document.write = w;
};

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://pagead2.googlesyndication.com/pagead/show_ads.js';
document.body.appendChild(script);
</script>
_

この例では、最初にネイティブdocument.write()関数をローカル変数にキャッシュします。次に、document.write()を上書きし、その内部でinnerHTMLを使用して、Googleがdocument.write()に送信するHTMLコンテンツを挿入します。それが完了すると、ネイティブのdocument.write()関数が復元されます。

このテクニックは、ここから借用されました： http://blog.figmentengine.com/2011/08/google-ads-async-asynchronous.html

20
Johnny Oshika

私のページには既にAdSenseがありますが、ブログ記事のプレースホルダーに新しい広告を挿入しています。広告挿入が必要な場合、「adsense-inject」のクラスを持つdivを追加します。次に、ドキュメントの準備ができて、他の広告用のAdSenseスクリプトが既にロードされていることがわかったときに、このスクリプトを実行します。

    $(document).ready(function()
    {
        $(".adsense-inject").each(function () {
            $(this).append('<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3978524526870979" data-ad-slot="6927511035" data-ad-format="auto"></ins>');
            (adsbygoogle = window.adsbygoogle || []).Push({});
        }); 
    });
8
Stephen Garside

ここに更新された実装があります。これは、一般的な外部JavaScriptインクルードを使用して広告を管理する必要がない場合に役立ちます。私の場合、多くの静的HTMLファイルがあり、うまく機能します。また、AdSenseスクリプトを一元管理できます。

var externalScript   = document.createElement("script");
externalScript.type  = "text/javascript";
externalScript.setAttribute('async','async');
externalScript.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.getElementsByTagName('body')[0].appendChild(externalScript);

var ins   = document.createElement("ins");
ins.setAttribute('class','adsbygoogle');
ins.setAttribute('style','display:block;');/*add other styles if required*/
ins.setAttribute('data-ad-client','ca-pub-YOUR-CLIENTID');
ins.setAttribute('data-ad-slot','YOUR-SLOTID');
ins.setAttribute('data-ad-format','auto');
document.getElementsByTagName('body')[0].appendChild(ins);

var inlineScript   = document.createElement("script");
inlineScript.type  = "text/javascript";
inlineScript.text  = '(adsbygoogle = window.adsbygoogle || []).Push({});'  
document.getElementsByTagName('body')[0].appendChild(inlineScript);

使用例：

<script type="text/javascript" src="/adinclude.js"></script>
4
Matteo Conta

常にvars（google_ad_clientなど）を先頭に置き、次のように他の部分を動的に追加します。

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';
myDIV.appendChild(script);
2
Torsten Becker

このページ によると、スクリプトタグを生成してその場でsrcフィールドに入力することが可能です-これは@noivが示唆することです（私のバージョンは自己完結型である必要があります。外部のhtmlまたはjsライブラリはありません）必須）。これを試しましたか？それほど難しくはないようです...

function justAddAdds(target_id, client, slot, width, height) {
  // ugly global vars :-P
  google_ad_client = client;
  google_ad_slot = slot;
  google_ad_width = width;
  google_ad_height = height;
  // inject script, bypassing same-source
  var target = document.getElementById(target_id);
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';
  target.appendChild(script);
}
1
tucuxi