web-dev-qa-db-ja.com

レスポンシブデザインでグーグルアドセンスのサイズを変更する方法はありますか？

私はレスポンシブwordpressデザイン（Twitterブートストラップを使用しています。）でグーグルアドセンスを使用しています。

これを支援するために私にできることはありますか？小さな画面で広告のサイズを変更しているように見えるサイトを実際に見ました... Javaスクリプトなので、これがどのように可能かわかりませんよね？

フィードバックは非常に役立ちます。ありがとう！

csswordpresstwitter-bootstrapresponsive-designadsense
23
Rick Smith

理想的には、CSSメディアクエリは広告を自動的に縮小し、完璧な世界では、広告は新しいサイズに基づいてレイアウトを自動的に変更します。ただし、Google広告はnotこれをサポートしていません。また、allow thisもサポートしていません。広告のコンテンツを変更したり、広告の一部を非表示にしたりすることはできません。 利用規約 （[...]でマークされたテキストを削除）によると、Googleからの明示的な許可がある場合を除きます。

5。禁止されている使用。お客様は、第三者に次のことを許可または奨励してはなりません。（i）[...]（ii）広告に含まれる情報の順序を編集、変更、フィルタリング、切り捨て、または変更、リンク、広告ユニット、検索結果、または紹介ボタン、または広告を削除、隠蔽、または最小化、リンク、広告ユニット、検索結果、または紹介ボタンとにかくGoogleの許可なし; [...]

別の解決策は、条件付きでJavaScriptを介して広告を配信することです。たとえば、ページが読み込まれると、 ブラウザのビューポートのサイズを取得します ブラウザのビューポートの幅が優先広告の幅よりも小さい場合は、代わりに小さい広告を配信します。これはCSSメディアクエリと同様に機能するはずですが、しないユーザーがブラウザのサイズを変更したときに新しい広告を配信します。これにより、誤ったインプレッション（1ページに複数のインプレッションが表示され、更新されない）が生成されます。また、彼らに対して 利用規約 ：

5。禁止されている使用。お客様は、第三者に以下を許可または奨励してはなりません。（i）直接的または間接的にクエリ、紹介イベント、またはインプレッションを生成するまたは広告、リンク、検索結果、または紹介ボタン（動画広告の[再生]をクリックすることを含むがこれに限定されない）自動化されたものを介して =、欺瞞的、詐欺的、またはその他の無効な手段。これには、手動クリックの繰り返し、ロボットまたはその他の自動クエリツールおよび/またはコンピューターで生成された検索リクエストの使用、および/または他の検索エンジン最適化サービスおよび/またはソフトウェアの不正使用。 [...]

10
0b10011

既存の回答は時代遅れです。 Google 2013年7月にレスポンシブ広告を導入 ：

新しいレスポンシブ広告ユニットを使用すると、レスポンシブデザインのウェブページを操作して、さまざまなデバイスをサポートできます。配信される広告のサイズを動的に指定して、サイトが特定のデバイスでページをレンダリングする方法に合わせて調整できるようになりました。

レスポンシブ広告は、固定された流動的でレスポンシブなレイアウトで機能します。広告を表示する場所に「スマートサイジング」バージョンのコードを配置するだけです。広告は水平方向に伸びて利用可能なすべてのスペースを占有し、垂直方向に伸びて最適な標準サイズの広告を表示します。ウェブサイトがデバイスの向きに応じてレイアウトを変更した場合、デバイスの向きの変更イベントで広告のサイズが自動的に変更されます。 CSSおよびHTML5データ属性を使用して事前のカスタマイズが可能です。

6
Salman A

Googleは現在、レスポンシブ広告を正式にサポートしています（現在ベータ版）。ここには、公式のGoogleドキュメントへのリンクを含む機能の優れた記述があります。

http://exisweb.net/using-google-adsense-async-tags-for-responsive-design

これは機能しますが、ビューポートのサイズを変更しても、広告のサイズが自動的に変更されないという欠点があります。私の理解では、ビューポートのサイズが変更されたときにアドサーバーを呼び出そうとするのはTOSに反します。

2
NightOwl888

レスポンシブアドセンスというプラグインがあります。 5つの広告フィールドを持つウィジェットを追加し、それらにpub idとad idを入力します。次に、画面のサイズに基づいて、5つの広告のうちの1つをレンダリングします。モバイルブラウザで試してみたところ、モバイルではなくブロックサイズの広告が表示されました。

1
Equilibrium3

ページのレスポンシブを維持するために、次のようにしました。

<div class="table table-responsive">    
        <div class="text-center text-muted">
            <hr><br>
            <small>advertisement</small>
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- bottom -->
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client=""
                 data-ad-slot=""
                 data-ad-format="auto"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).Push({});
            </script>  
            <br>
        </div>       
</div>
1
Andrew

Equilibrium3が投稿した内容に同意します。広告サイズ=レスポンシブ広告ユニット（ベータ版）を選択します。広告コードを取得したら、それを<div class="span12">内に配置できます。これも<div class="row">内にあります。これは、横長の広告を配置し、それを中央に配置するのにも役立ちました。

これは私がその水平広告を持っているページです-> http://www.espaciodigital.mx/

ここで、広告コードをサイドバーに配置する場合は、上記と同じようにしますが、たとえば、サイドバーに<div class="span3">を使用し、ページの残りの部分に<div class="span9">を使用してページを分割します。 。

次のページでそれを行いました。左側に正方形の広告があります-> http://www.espaciodigital.mx/quienes_somos.html

モバイルデバイスで表示すると、どちらの広告も正常に機能します。試してみる。お役に立てば幸いです。

0
Miguel Angel