はてなブログにGoogle タグマネージャを導入する方法

今回の記事では、Googleタグマネージャをはてなブログに導入する方法をご紹介したいと思います。
本ブログでは、開設からこれまではてなカウンターと通常のGoogleアナリティクスを設置して計測をしていましたが、行動心理を適用したバナーの広告効果検証をするにあたり色々な広告タグ設置が必要でしたので、管理作業軽減のためGoogleタグマネージャの導入をしました。

今回ご紹介する方法は、どこに設置すれば簡単で管理が楽かの観点で色々試した結果のご紹介です。これ以外にもっと良い方法があると思いますので、あくまで参考までにご覧いただければ嬉しいです。

Googleタグマネージャとは

既にご存知の方もたくさんいらっしゃると思いますが念の為。
Googleタグマネージャは、Goolgeアナリティクス、Google Adwordsのコンバージョンタグ、リマーケティングタグやLinkd inなど様々な媒体タグを一括管理できます。

また、サイトの内部リンククリック数や外部リンククリック数をGoogleタグマネージャの設定だけで計測ができるなど、便利な機能がたくさんあるサービスです。詳しくは下記URLのGoogleタグマネージャ公式サイトにてご確認ください。

・Googleタグマネージャ公式サイト
http://www.google.com/intl/ja/tagmanager/

Googleタグマネージャのコードを取得

Googleタグマネージャのコード取得までの手順は、分かりやすくまとめた記事を既にたくさんの方が書かれておりますので本記事では省きます。分からないという方は下記記事を参考にしてみてください。

sumaho-design.hatenablog.com

ちなみに、Googleタグマネージャの計測コードは下記の様になっています。
自分用の計測コードが発行されたら、メモパッドにコピペするや計測コードが記載されたブラウザを閉じないなど、すぐに使えるようにしておいてください。

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-**"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-**');</script>
<!-- End Google Tag Manager -->

※**はアカウント毎に違う英数字が入ります。

グーグルタグマネージャの計測コード設置

※ここからははてなブログでの作業です。あわせて、Googleタグマネージャ管理画面でアナリティクスの設定をしたとして進めていきます。

先に書かせていただくと、PC版への設定だけでもGoogleアナリティクスの計測はできておりました。
ただ、内部リンククリック数の計測や外部リンククリック数の計測、その他Googleタグマネージャを活用する機会が多そうな方は、PC版とSP版の両方に設定した方が良いと思います。

PCの手順

では、まずPC版へのGoogleタグマネージャのコードの設置方法を記載します。はてなブログにログイン後、ダッシュボートに進み、以下の手順で「モジュール追加」まで進んでください。

ログイン→ダッシュボード→デザイン→（スパナのマーク）→サイドバー→モジュールを追加

モジュールを追加画面が展開された、HTMLを選択してください。
そうするとHTMLが入力できる枠が出ます。「モード」HTMLのままで、Googleタグマネージャから発行された計測コードを枠内にコピペします。

タイトルは付けてもいいですが、わざわざ付けなくても良いと思うのでこちらは皆さまにお任せします。
計測コードをコピペしたら、「適用」をクリック。そして、「変更を保存する」をクリックして変更を保存したらPCは完了です。

念のため設置した計測コードがちゃんと反応しているかGoogleアナリティクスの「リアルタイム」で確認してください。アナリティクスのフィルタ設定などで自分のアクセスを除外している方は、一時的に解除をする必要があります。

SPの手順

続いて、SP版に計測コードを設置します。
PC版と手順は違いますが、計測コードをコピペするだけなのは変わりません。

PC版と同じくログイン後に「デザイン」ページまで行き、スマートフォンのマークをクリックしてください。一覧の中の「記事」をクリックすると記事の設定が展開されます。その中にある記事上をクリックして、Googleタグマネージャの計測コードをコピペします。

コピペの際に、コード入力枠に「×」が表示されますが、計測に不備が出るなどは無いようです。何か影響が出た際にはこちらの記事でお知らせしたいと思います。

変更を保存したら計測コードの設置は完了ですが、こちらも念のため設置した計測コードがちゃんと反応しているかGoogleアナリティクスの「リアルタイム」で確認してください。

まとめ

以上が、Googleタグマネージャをはてなブログに導入する方法となります。
恐らく、今回紹介させていただいた方法はあくまで一例で、はてなブログPROであれば、HTMLを記述できる範囲も広がりますので、色々試してみてご自身のブログに合う場所を探してみるのもひとつの楽しみになるのではないでしょうか。

Web行動心理学研究所ブログでは、引き続きマーケティング領域で活用できそうな行動心理の紹介や、行動心理を適用したバナーの広告効果の検証レポートなどを引き続き行っていくのとあわせて、はてなブログのカスタマイズも定期的にご紹介できればと思います。

著：Web行動心理学研究所　諸永