INO'S BLOG

投資している会社員のブログ

Googleタグマネージャーを使ってi-mobileのPC用広告とスマホ用広告を使い分ける方法

Googleアドセンスに挑戦中ですが、合格までの期間(あるいはあきらめるまでの期間)に無収益なのはもったいないので、現在i-mobile Ad Networkの広告を利用しています。


i-mobile Ad Networkの簡単な使い方について知りたい人は、こちらの記事をご覧ください。

 


レスポンシブデザインのサイトの場合はPCタグを貼れば良いのですが、公式によるとSPタグはスマホに特化した広告サイズや機能があるらしく、できればスマホにはスマホ用のタグを利用したいと思っていました。

ただしi-mobile Ad Networkは、

  • PCとスマホの広告タグが分れていて
  • 広告タグを異なるプラットフォームで使うことが禁止されている
  • かつ、広告タグの改変禁止

つまり、レスポンシブデザインのサイトだとPCとスマホで広告が使い分けることが難しいという問題があります。


広告タグの改変ができないので何か良い方法がないかと探していたところ、次の記事にたどり着きました。

こちらで紹介されている方法を応用したところ、デバイスごとに広告タグを変更することに成功しました。ただ、紹介されている方法では上手くいかなかったところ、説明不足なところがありますので、i-mobile用に直しつつ紹介をします。なお、i-mobile以外の広告でも同じようにできるはずですので良ければ試してみてください。

f:id:toushi-ino:20200905232405j:plain

レスポンシブデザインサイトでスマホ用広告を配信する方法を紹介します

レスポンシブデザインのサイトにi-mobileスマホ用広告を導入する方法

「孤独の果て」にて紹介されているように、次の手順で導入をしていきます。

  • Googleタグマネージャーの登録
  • 変数の設定
  • トリガーの設定
  • タグの設定
  • 公開

Googleタグマネージャーの登録をしていない人は、登録をしてください。登録の方法は「孤独の果て」にて紹介されているので省略します。

変数の設定【デバイス判断】

ここから少し変更しなければいけないことがあります。


変数>ユーザー定義変数>新規>変数の設定>カスタムJavaScriptから変数の設定をします。変数の名前は分かりやすく「デバイス判断」としておくと良いでしょう。

貼り付けるコードを少し変えて、次のものを貼り付けます。

function(){
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
    return 'sp';
}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
    return 'tab';
}else{
    return 'other';
}
}

これは必要ないかも知れませんが、コードを貼り付ける部分の直下にある「値の形式」を「小文字」にしておきます。

変数の設定【ページ判断】

同様にページの判断をする変数も作ります。こちらは「孤独の果て」にて紹介されているコードを貼り付けます。値の形式は特に何もしなくて大丈夫です。


リンク切れ対策のために、こちらにもコードを書いておきます。

function() {
return document.getElementsByTagName("html")[0].dataset.page;
}

トリガーの設定

PCとタブレットはPCタグを、スマホの時のみSPタグを利用するので複数のトリガーを準備する必要があります。また、デバイス判断を変更しているので、設定も少し違います。


トリガー>新規>トリガーの設定>DOM Readyから設定をします。

PC、タブレットの記事ページのみ配信したいときは、次のようなトリガーを作ります。これらも分かりやすい名前をつけておくと後で便利です。

f:id:toushi-ino:20200905221232j:plain

PC、タブレットのときのトリガー

PCとタブレットのときに配信したいので、sp以外のときに発動するようにすれば良いわけです。また、記事下などに配信する場合は、記事一覧ページには配信する必要がないのでindex以外とします。


同様にスマホの記事ページのときだけ配信するためのトリガーを作ります。想像できるかもしれませんが、次のようなトリガーになります。

f:id:toushi-ino:20200905222147j:plain

スマホ用のトリガー

応用すると他にも色々できそうです。必要なら試してみてください。

タグの設定

これで最後の設定になります。

タグ>新規>タグの設定>カスタムHTMLから設定をします。次のコードを貼り付けます。

<div id="add-imobile">
ここに広告コードを貼り付け
</div>
<script>$('.entry-footer-section').before($('#add-imobile'));</script>

広告コードの部分には、自分のPC用またはスマホ用広告コードを貼り付けます。

また、次の部分を必要に応じて変更してください。

  • add-imobile⇒広告枠ごとにidを変える(ダブらなければ何でも良い)
  • before($(''))の中は、上で決めたidと同じにすること
  • .entry-footer-section⇒広告を入れたいところの一つ後の要素に変更

広告のあとのscriptで広告を表示する位置を変更しています。最初の要素(ここでは.entry-footer-section)の前(before)に要素を入れるようになっています。後に入れたい場合はbeforeをafterに変更するとできます。

また、「document.write をサポートする」に必ずチェックを入れてください。入れないと広告が表示されません。

次にトリガーの設定をします。PC用広告ならPCの場合に表示するためのトリガーを、スマホ用広告ならスマホの場合に表示をするためのトリガーにします。間違えると異なるプラットフォームに配信されることになりますので注意してください。


配信したい広告に応じて、必要な分だけ同様に作っていきます。

公開

最後に公開を押せば完了です。 

Googleアドセンスがうらやましい

この方法でスマホのときだけSPタグで広告を配信することができます。また、これを利用すればデバイスごとに表示する場所を変更することができます(サイドバーにはPCのみ広告を表示など)。


なお、i-mobile Ad Networkのスマホ用広告はPC用とは別の広告が表示されていて、導入は大変でしたが変更して良かったと思います。


しかし、調べれば調べるほど広告配信のロジックや広告設定の面でGoogleアドセンスのほうが優れていることが分かってうらやましくなります。

合格目指して頑張ります。

 

以上、参考になれば幸いです。

まだ、i-mobile Ad Networkに登録をしていない人は登録をしましょう。 

toushi-ino.hatenablog.com

ネイティブワイドを使うと、広告を2つ横並びで表示することができます。 

toushi-ino.hatenablog.com