ワークスペースへ

導入ガイド

ネイティブ広告

Native ads

パーツ(タイトル、画像、テキスト)で構成され、サイトの見た目に合わせた、広告であることを示すラベルが必ず付く広告。

  • Ad Manager
  • モバイルとデスクトップ
フォーマットを学ぶ自分のサイトを確認する
デスクトップ
スマートフォン

1分でわかる

ネイティブ広告とは

ネイティブ広告は、完成した1枚の絵ではなく、ばらばらのパーツで届きます。広告主は、見出し、画像、短いテキストなどのパーツを送ってきます。見た目を決めるのはサイトです。各パーツの色、フォント、サイズ、位置を決めます。組み立てキットのようなもので、箱にはパーツが入っていて、部屋に合うように自分で組み立てます。そのため、記事一覧の中のもう1枚のカードのように、ページの一部に見えます。

Ad Manager には、この広告に見た目を与える方法が2つあります。1つ目はネイティブスタイルで、Ad Manager の中で作ります。テンプレートが用意されたガイド付きデザインエディタか、コードがわかる人向けの HTML と CSS を使います。Google によると、スタイルはウェブにもアプリにも使えます。2つ目は Android と iOS アプリ用のコードで、アプリの開発者が Google Mobile Ads SDK 経由でパーツを受け取り、アプリのコードですべてを描画します。サイトの場合は、ネイティブスタイルを使います。

ネイティブはコンテンツのように見えるため、Google は「訪問者に広告だとわかること」を特に厳しく求めています。ラベルと AdChoices アイコンが、そのカードが広告であることを示します。これらのラベルを隠したり、覆ったり、見えにくくしたりしてはいけません。広告はコンテンツとはっきり区別できる必要があります。お店の中に貼られたポスターのようなものです。きれいで内装になじんでいてもかまいませんが、広告だとわかるようにしなければなりません。

Google がこの形式を作ったのは、広告主が送った内容を変えずに、同じ広告をサイトの場所ごとに違う見た目で表示できるようにするためです。ウェブでは、Google はフレキシブル(fluid)サイズを推奨しています。列の幅いっぱいに広がり、高さは自動で調整されます。投稿一覧の項目の間のように、ページのデザインになじむ広告にしたいときに向いています。その場合も、広告ラベルは必ずはっきり見えるようにします。

手順

実装の方法

  1. ネイティブ フォーマットを選ぶAd Manager で「配信」、「ネイティブ」の順に進みます。必要なパーツが入った標準フォーマットを使います。プログラマティック広告では、Google は標準フォーマットしか受け付けません。
  2. スタイルを作成する「新しいネイティブスタイル」をクリックし、「ガイド付きデザインエディタ」か「HTML と CSS」を選びます。ガイド付きエディタでは、「テンプレートから始めてカスタマイズする」の流れで、従来型広告とプログラマティック広告の両方を配信できます。
  3. サイズとターゲティングを設定するネイティブを受け取る広告ユニットと同じサイズを選びます。Google はフレキシブルを推奨しています。スタイルがフレキシブルなら広告ユニットもフレキシブルにする必要があり、スタイルのターゲティングは広告申込情報のターゲティングと一致させます。
  4. ラベル付きの見た目を組み立てる広告ラベルを含め、フォーマットに必須のパーツをすべて表示してください。
  5. ページにタグを置くGPTでスロットをfluidサイズで定義し、divを幅がゼロより大きい列の中に置きます。

実装例

コードと画面での表示

GPTのスクリプトはheadに入れます。表示を呼び出すdivは、ネイティブ広告を表示したい列の中の、bodyに入れます。
<!-- No <head> -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    // Slot nativo com tamanho fluido.
    googletag
      .defineSlot("/1234567/exemplo", ["fluid"], "nativo-exemplo")
      .addService(googletag.pubads());
    googletag.enableServices();
  });
</script>

<!-- No <body>, dentro de uma coluna com largura -->
<div id="nativo-exemplo"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("nativo-exemplo");
  });
</script>
デスクトップサイトになじむカードの形で表示され、画像、見出し、テキスト、広告ラベルが入ります。フレキシブル(fluid)サイズなら、置いた列の幅いっぱいに広がります。
モバイル同じように表示され、画面幅に合わせて調整されます。プログラマティックのスタイルでは、AdChoicesアイコンが右上に表示されます。

Googleのガイダンス

できることとできないこと

してよいこと

  • Ad Manager の中で、ガイド付きデザインエディタまたは HTML と CSS を使ってネイティブスタイルを作ること。
  • Google が、ビジュアルの自由度が高いとして推奨しているフレキシブル(fluid)サイズを使うこと。
  • 読みやすさが保たれる限り、帰属表示ラベルの見た目をレイアウトに合わせて変える。
  • 同じ広告を、サイトの部分ごとに異なるレイアウトで表示する。
  • 従来型広告用のカスタム ネイティブ フォーマットを作成する。ただし、プログラマティック広告は配信されません。

してはいけないこと

  • 帰属表示ラベルやAdChoicesアイコンを隠したり、覆ったり、偽装したりする。
  • 広告をコンテンツと区別しにくくする。Googleは、広告がコンテンツと明確に分けられていることを求めています。
  • 広告のパーツを、ページのナビゲーションボタンに似せる。
  • 広告ラベルや見出しなど、フォーマットに必須のパーツを表示しないこと。
  • 画像や動画を切り抜いたり、縦横比を変えたり、パーツを重ねたりすること。
  • AdChoices用に確保された隅に、広告の別の部分を置く。

ヒント

正しく行うために

注意

よくあるエラー

スタイルのサイズが広告ユニットと異なる

スタイルがフレキシブルなら、広告ユニットもフレキシブルにする必要があります。Google は、サイズが同じである必要があるとしています。

プログラマティックを期待するカスタム フォーマット

カスタム ネイティブ フォーマットには、プログラマティック広告は配信されません。プログラマティックでは、標準フォーマットだけが有効です。

幅のないボックス、または高さが固定されたボックス

幅がゼロの列の中や、広告より小さい固定の高さのボックスの中にあるフルイド広告は、正しく表示されないことがあります。

よくある質問

ネイティブ広告は、本当に広告だと示す必要がありますか?

はい。帰属表示ラベルとAdChoicesは、広告がコンテンツと混同されないようにするためのもので、隠したり偽装したりしてはいけません。

Android と iOS アプリ用のコードはサイトで動きますか?

いいえ。Google は、この方法を Google Mobile Ads SDK を使う Android と iOS アプリ向けと説明しています。サイトの場合は、ネイティブスタイルを使います。

フルイドサイズをほかの広告にも使えますか?

GPTのドキュメントによると、現時点では、ネイティブ広告がAd Managerで対応している唯一のフルイドタイプです。

ライブラリ

Google の公式情報

このページの内容はすべて Google の公式ドキュメントに基づいています。原文で直接確認できます。

あなたのサイトは、このフォーマットを正しく使っていますか?

監査は、何もクリックせずに訪問者としてサイトを読み取り、修正すべき点を表示します。

監査を実行する