WordPress サイト運営

【Stinger8】関連記事にインフィード広告を入れてみた

投稿日:

インフィード広告 を入れてみました。最近、AdSenseの広告の作り方が変わって、結構簡単に広告を作れるようになりました。(最近でもないか・・・)入れた場所は関連記事の間です。Stinger8を使っている方でインフィード広告に興味があったら読んでください。

bus

<スポンサーリンク>

1. インフィード広告とは?

Google曰く、以下の通り。

インフィードは、フィードの内部に広告を表示してサイトの収益とユーザー エクスペリエンスを向上するフォーマットです。たとえば、フィードには記事のフィード(ニュースや記事の一覧など)やリスティング(商品やサービスの情報の一覧など)があります。インフィード広告は、コンテンツのデザインやスタイルに合わせて広告をカスタマイズするという意味では、ネイティブ広告と言えます。

Google ヘルプより抜粋

分かりやすく言うと、「一覧に溶け込ませる広告」です。

メリットはGoogle曰く、以下の通り。

  • ユーザー エクスペリエンスの向上: インフィード広告は、サイト訪問者のエクスペリエンスを高めます。ユーザーのフローの一部として、サイトのデザインやスタイルに合った広告が表示されます。
  • 新しい広告スペースの収益化: インフィード広告は、これまで掲載先として使われたことがないフィード内に表示されるため、ページの収益機会をさらに広げることができます。
  • モバイルに最適: インフィード広告は、モバイル デバイスの小さな画面で収益を上げることに適した、モバイル向けの広告です。

Google ヘルプより抜粋

私が思うに「新しい広告スペースの収益化」が一番のメリットです。

「モバイルに最適」かと言われるとそうでもないような・・・感じがします。。

2. インフィード広告の作り方

インフィード広告は簡単に作れます。

Google AdSenseにログインして、以下を選択します。

広告>広告ユニット

2.1. インフィード広告を選択する

インフィード広告を選択します。

infeed

2.2. 作成方法を選択する

作成方法を選択します。

「自動で広告スタイルを作成する」が楽なので、そちらを選択します。

URLはインフィード広告を入れたいページのURLを適当に選んで入力してください。

Desktopとモバイルが選択できますが、まずはDesktopで作っていきましょう。後で同様の手順でモバイルでも作ります。

infeed

2.3. 場所を選択する

1分ぐらい待つとどこに合わせたインフィード広告を作るのか聞いてきます。

赤い点線で囲まれた場所が、インフィード広告を作ろうとしている場所です。

infeed

点線の四角の場所を関連広告の場所に指定します。(クリック)

 

infeed

右下の次へを選択します。

2.4. 広告の設定

ほとんどデフォルトで良いです。

後で、パディングの設定とかをいじります。

「広告ユニット名」だけは必須なので、入力します。(後で変えられる)

infeed

「選択したディスプレイ広告を許可する」オプションなのですが、「インフィード広告エリアにディスプレイ広告を表示する(こともある)」オプションです。

モバイルの場合、これを必ずオフにしましょう。オフにしないとスクエアタイプの画像広告が(多分)ほとんど表示されます。インフィード広告している意味が無くなりますので、注意してください。

3. インフィード広告の挿入

これに凄く時間がかかりました。

Ad Inserterで出来ると思ったのですが、結果は以下の通り。

infeed

ずれてしまうのですよね。色々できないかとトライしてみたのですが、ダメでした。Ad Inserterの意外な弱点。。。。

結局、PHP、CSSで直接書くことにしました。

以下はStinger8の人じゃないと意味わからないかも。

3.1. お世話になったページ

まず、関連記事の横にボタンを付けようと思いました。

続きを読むボタンはどこだ?STINGER8で表示させるカスタマイズ方法

この記事通りにやってできました。ありがとうございます。

インフィード広告ではボタン付きで表示されるのでフォーマットを合わせてあげようかと。表示される文字列は毎回異なるので、ちょっと微妙ですが、形を合わせてあげるだけで、見栄えが良いかと思います。

次にインフィード広告を入れるものです。

関連記事の中にアドセンスのインフィード広告を表示する-[stinger plus2]

この記事通りにやってできました。ありがとうございます。

3.2. 続きを読むボタンの追加

style.cssの追加をしました。

以下は私が設定した内容です。ほとんどパクリです

colorはデフォルトで白地に黒なので、color、border、background-colorの設定をそのように。

文字のサイズですが、出てくる広告の文字の大きさが大体12pxだったので、font-sizeを12pxにしました。

ホバーはそのまま採用です。

それとfunction.phpの編集を行います。(間違えると危ないので注意)

returnの行を置き換えています。言葉は「もっと見る」にしました。

これで完成です。「もっと見る」が私の作ったボタンです。「サイトを見る」が広告の表示です。

どうでしょう?近いでしょ?

infeed

3.3. インフィード広告の挿入

ようやくインフィード広告を入れます。

いじるのはkanren.phpです。こちらもパクリです

まず定義だけ。$ads_infeedと$ads_infeed_2ndは固定値です。$ads_infeedは1になっていますが、1番目の関連記事の下の挿入するという意味です。同様に2ndの方は3番目の関連記事の下に挿入します。

$ads_infeed_countはカウンターです。

上1行と下2行は場所がわからないと困るので入れています。

次に実際に広告を入れているところです。

ちょっと長ったらしいのですが、4枚の広告を入れています。data-ad-clientとdata-ad-slotは”X”に置き換えています。

”<?php if($ads_infeed_count == $ads_infeed){ ?>”から”<?php $ads_infeed_count++; ?>”が挿入したところです。

デスクトップで2広告、携帯で2広告入れています。判断はwp_is_mobile()で行っています。

これで、インフィード広告が表示されます。

インフィード広告は設定(保存)から30分ぐらい経たないと、反映されないとのことなので、その点だけ注意してください。(体感5分ぐらい?)

3.4. 微調整

インフィード広告は、ほとんどデフォルトで良いと書きましたが、ほんのちょっと微調整を行いました。

グローバル オプションのパディングは全て0にしました。但しモバイル用のbottomだけ20pxにしています。

見出し、説明のフォントサイズをデスクトップは17px、14px、モバイルは16px、13pxにしました。

そして、モバイル用の広告は「選択したディスプレイ広告を許可する」をオフにしてください

インフィード広告のオプションは様子を見て調整してください。

<スポンサーリンク>

まとめ

いや、ほんとに凄い疲れましたね

挿入されたインフィード広告には満足しています。細かいこと言うと色々あるかもしれませんが、贅沢は言わない。

この2つの記事の作成者の方には感謝です。

続きを読むボタンはどこだ?STINGER8で表示させるカスタマイズ方法

関連記事の中にアドセンスのインフィード広告を表示する-[stinger plus2]

-WordPress, サイト運営
-,

執筆者:

<スポンサーリンク>

comment

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

*

関連記事

YoastSEO-logo

WordPress Slimstat Analytics は AMP をサポートするのか?

WordPressのSlimstatはAMP解析をサポートしていません。皆さんも「サポートしたらいいだろう」と思っているでしょう?私はちょっと思っています。本稿ではSlimstatがAMPをサポートす…

もっと見る

portsoy

WordPress リンク切れチェック Broken Link Checker

「あ、このリンク切れてた」なんてことありませんか?この Broken Link Checker はそんなリンク切れをチェックしてくれるプラグインです。入れてあげるだけで、URLや画像に対するリンク切れ…

もっと見る

hand-and-key

意外に簡単?WordPress環境のSSL化 (エックスサーバー)

エックスサーバーでは無償で独自SSLを使用できます。 近年、あらゆるサイトがSSL化しているので、本サイトもSSL化してみました。 ついでに手順を記録しておきます。 実施した際、本サイトは複雑な構造を…

もっと見る

jibun_sagashi_man

WordPress 自分の投稿で自分の投稿に勝手にコメントさせない方法

WordPress環境で、自分の投稿にリンクを張っている投稿をすると勝手にコメントがついたりしませんか?いままでは一つ一つ手で削除していたのですが、面倒になり調べました。どうやら、WordPressの…

もっと見る

サイト内の検索はこちらから

サイト内の検索はこちらから

サイト内の検索はこちらから

カテゴリー

アーカイブ

最近の投稿
Scroll Up