インフィード広告を作成したら、次のステップとしてフィードの HTML 内にコードを配置します。
インフィード広告コードを配置する場所
インフィード広告コードは、フィード内コンテンツの途中、先頭、または末尾に配置します。これを行うには、フィードの HTML コードを直接編集するか、コンテンツ管理システム（CMS）をお使いの場合はプラグインを使用してコードを挿入します。
次に、インフィード広告の設定例を示します。
|
コンテンツ ブロック 1: |
 |
|
コンテンツ ブロック 2: |
 |
|
ネイティブ インフィード広告: |
 |
|
コンテンツ ブロック 3: |
|
|
コンテンツ ブロック 4: |
|
インフィード広告を配置する方法
通常 CMS には、1）コンテンツを保存するデータベース、2）コンテンツをループによって配信してフィードを作成するためのコードがあります。コードは、CMS のテンプレート フォルダ（またはテーマフォルダ）に格納されているテンプレート ファイル内にあります。
テンプレート ファイル内のコードを変更する
インフィード広告を配置するには、次の手順でテンプレート ファイル内のコードを変更します。
- フィードがあるページのテンプレート ファイルを開きます。
- フィードの作成元のループを見つけます（ヒント: ループコードには、多くの場合に「while」または「for each」のコマンドが使われているので、それを手がかりにできます）。
- ループコードを変更して、フィードにインフィード広告を挿入します。具体的な手順は次のとおりです。
- ループにカウンターがない場合はカウンターを追加して、インフィード広告を挿入する頻度を設定します。
- ループ内に「if」文を追加して、カウンターで定義した頻度でインフィード広告が表示されるようにします。
擬似コードを以下にいくつか示します。実際のコードは以下の擬似コードと構造が似ていますが、お使いのプログラミング言語によって実装が異なる場合があります。
Posts[] posts;
Var count=1; // If your code does not include a counter define one
While (count < posts.length) // Increase the value of "count" by 1 until the final post in the database
{
If (count%3=0) //If the value of "count" equals 3 or 6 or 9 insert the ad
{
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous">
</script>
<ins class="adsbygoogle" style="display:block"
data-ad-format="fluid"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
}
<h3>{{ post.title }}</h3> // for all count values insert the content block title
<p>{{ post.body }}<p> //Insert the content block body
<img src="{{ post.thumbnail}}"> //Insert the content block image
}
重要
広告コードは必ず、次の設定の親コンテナ（<div>、<iframe>など）内に配置します。
- 幅が有効。幅が明示的に設定されていない親コンテナ（フローティング要素など）内に広告コードを配置した場合、広告は表示されません。広告の幅は、親コンテナの幅に基づいて算出されます。なお、インフィード広告の最小幅は 250 ピクセルです。
- 高さが変更可能。高さが固定されている親コンテナ内に広告コードを配置した場合、広告が正しく表示されない可能性があります。
