momokuri’s blog -ブログとyoutubeとITと雑記-

セミリタイアに憧れるアラフォーITエンジニアの雑記ブログ。

はてなブログにgoogle tag managerでadsense自動広告を設定してみた

f:id:momokuri777:20190420174939j:plain

google tag manager(GTM)を使ってみました。

ブログをやっていると、タグの管理が煩雑になってくるので、いつかこのGTMを使えるようになりたいと思ってました。

 

GTMでやりたいことはいろいろあるんですが、実際にやってみてできたことを、自分の備忘録も兼ねて、残しておくようにします。

 

 

ブログに貼るadsense広告タグをGTMで管理したい

やりたいことは、これです。

ブログを複数やっていたり、表示エリアごとに広告タグを発行していると、設定箇所が散らかってしまい、何をどこに設定したかがわからなくなります。

 

理想は、adsenseのタグはGTMに設定し、はてなブログにはGTMの設定のみすることです。

これでadsenseタグの管理は、GTMに集約することができます。

 

ブログにGTMの設定をする

GTMが使えるようになっている前提で書いていきます。

 

GTMの管理画面を見ると、「GTM-XXXXXXX」というコードが表示されています。

これが自分のGTMコードになります。

google tag manager

 

このコードを、はてなブログの「設定 > 詳細設定 > 解析ツール > Google タグマネージャ」に登録すれば完了です。

これでGTMの設定が、はてなブログに反映されるようになります。

 

はてなブログ側の設定はこれだけです。

 

GTMにadsenseの広告タグを設定する

次に、GTMにadsenseの広告タグを設定します。

今回は表示場所を指定せずに、手軽に導入できる「自動広告」のタグを貼ってみます。

 

GTMの「ワークスペース > タグ」メニューで、以下のようなタグを作成します。

  • タグの種類・・・「カスタムHTML」
  • HTML・・・adsenseの自動広告タグを張り付け
  • トリガー・・・All Pages

google tag manager



タグの名前は「adsense自動広告」として、保存しました。

これで設定はすべて完了です。

 

プレビューしてみる

GTMでは、設定したタグがすぐに反映されるわけではなく、「公開」する必要があります。

その前に、設定した内容が正しく反映されるかどうかを確かめることができる「プレビュー」機能があるので、まずはそれで確認してみます。

 

GTMの「ワークスペース」画面の右上に、「プレビュー」ボタンがあります。

これを押すと、以下のようにオレンジのエリアが表示されます。

これでプレビューモードになりました。

google tag manager

 

この状態で、はてなブログにアクセスします。

すると、画面下にGTMのデバッグ画面が表示されるので、その中に先ほど設定したタグの名前があれば、正しく設定されていることになります。

google tag manager

 

プレビューを確認したら、先ほどのオレンジのエリアの下に「プレビューモードを終了」のリンクがあるので、それを押してプレビューを終了します。

オレンジのエリアがなくなったら、プレビューボタンの右横にある「公開」ボタンを押し、設定をリリースします。

 

これで、すべての作業が完了しました。

ブログに自動広告がちゃんと配信されているか、確認してみてください。

 

というわけで

今回は、はてなブログにGTMでadsense自動広告を設定してみました。

 

ただ自動広告は表示する場所を指定できないので、次のステップとしては「記事の見出しの前に広告を表示する」ということをGTMで実現したいと思っています。

実はそれもやろうとしましたが、力不足ゆえに今回できませんでした。

 

次回リベンジし、できたら報告します。

 

参考にしたサイト

www.clrmemory.com