仕事辞めたい系投資ブログ

年収300万未満の投資生活

【nend】はてなブログの記事一覧に2個広告導入【アドセンスなにそれ旨いの^p^】


アドセンス審査合格できたとしても誰もクリックしてくれないから意味ないね(´・_・`)

 

◆アドセンスは一旦保留にしておいてnend導入

nendの申請方法や広告の貼り方は詳しく知りたい方はググってください。

 

 ネイティブドアの広告が貼れるようになったら、記事一覧に自然に広告を差し込めるようにグーグルタグマネージャを利用します。

詳しい設定方法やコードは下記の2つのサイトを参照してください。

 

はてなブログ無料版でnendのネイティブアドを導入してみた - ☆迷走記☆

【はてなブログ改造】Googleタグマネージャを利用して自動でnendネイティブアドの設定・導入方法 - 孤毒の果て

 

 無事グーグルタグマネージャで変数とトリガーを設定したらタグのカスタムHTMLに上記のサイトのコードを参考にnendの広告を貼れば記事一覧の広告にを差し込めることができます。

 

◆本題

ここで個人的に記事一覧に広告を別の行にも差し込みたいと思い、nendで新たにネイティブドアを申請しました。

 

同じ変数とタグを利用してもう一つ別にタグを作り、そこに別の広告のコードを貼って変数を変えるだけで記事一覧に別の別々の場所に広告が出せると思ってました。

 

結果ダメです!

 

色々やって広告が1つは指定した場所に表示させることは可能ですが、どうしてももう1個が記事一覧とは関係ないヘッダの下の下の方で表示されてしまいます。

 

タグを1つにしてそこに2つのコードを両方貼ってみましたがダメでした。

ググっても解決策が出てきません。

 

何が原因なのかまずは読めないHTMLを解読することにしました。

 

設定したグーグルタグマネージャ

グーグルタグマネージャ nend 広告 はてなブログ

 nend広告、これを弄っても意味はない。
下の数字が広告を挿入する数値らしい

 

そうすると一番上の

<div id="ad-list-nend">

 と一番下の

$('.list-entry-article:eq(0)').after($('#ad-list-nend'));

が何か影響していそうな気がします。

 数字を弄ると広告の位置が変わるということなので”list-entry-article:eq”の中の”list-entry-article”は、おそらく記事一覧の事を指していて、”eq(0)”で記事一覧の何記事目で広告を入れるかの指定のようです。

 その後に”after($('#ad-list-nend'))”と続いていますが、これは先ほど入れた”eq(0)”の(after)後に”($('#ad-list-nend'))”を入れている?的な意味だと思います。

  一番上のコードにdiv id=ad-list-nendと同じ文字列があることから何らかの関係がありそう。

 

divとは?

次にグーグル先生にdivについて調べると、これはブロック(区分)を意味するみたいです。

 

div は DIVision(区分)の略です。文章をブロックに区分します。

http://www.tohoho-web.com/html/div.htm

 

ということはdivで囲った範囲のnendの広告コードをad-list-nendって名前?IDに設定しているみたいです。

 それをlist-entry-article:eq(数字)で設定した記事一覧で指定した位置の(after)後に($('#ad-list-nend'))先ほどのdiv idで設定したnend広告コードを挿入するって感じみたいですね。

 

 そうすると、カスタムHTMLで参考にしたサイトのHTMLをのままコピペすると、違うnendの広告コードを貼り付けたとしても、div id=ad-list-nendで設定したad-list-nendって名前のものが2重に存在するため、タグを二つ用意したり、1つのタグにコードを二つ貼ったとしても同じIDで設定した名前があったため、うまくコードを参照でききず、別々の場所に広告を貼ることができなかったみたいです。

 

◆解決策

 ad-list-nendの所は、div /divで囲ったブロック単位の名前を自分で付けているだけなので本当は何でもいいみたいです。

 自分は一つのタグに1個目のnend広告は普通に参考コード通りに貼って(0)で1記事目の下、2個目のnend広告はコードの最初と最後のad-list-nendad-list-nend2に変更して、広告を載せる位置の数字を(5)で6記事目の下に広告が表示されるように変更しました。

 

nend 広告 記事一覧

nend 広告 記事一覧

 

これでスマホではたなブログの記事一覧に別々の広告を挿入できるはずです。

変更後時間を置いてもグーグルタグマネージャーの変更が反映されないようなら、スマホの該当のURLのキャッシュを削除すると広告が反映されるような気がしました。

 

注目記事