はてなブログにGTMを設置する方法
現在、勤めている会社でちょこちょこ触っているGTM。
便利だな〜っと感じてたのでこのブログにも設置してみました。
はてなブログへの設置方法として、有益な記事がなかったので簡単に記載しておきます。
GTMって何が便利なの？
ブログとかWebサイトとか運営していると、Google Analyticsやヒートマップツールなど、様々な解析ツールを導入することが多いです。そういったツールを導入するためにはツールのタグを都度HTMLに書かないといけないので、面倒ですしサイトを直に触るのでリスクが伴います。(ツールを削除する時も然りです。)
また、そういったコードはどこに書いたか把握できなくて辛くなってきます。
GTMは管理画面で登録したタグを動的に挿入してくれるツールです。
サイトを直接触ることなく、タグをサイト上に挿入することができ、削除も数クリックで行えます。また、全てのタグをGTM上で管理しておけば、対象ツールがどこのコードに書かれているかといったことを把握する必要もありません。
このブログでいうと、現時点ではページタイトル下のmenu部分をGTMで管理しています。
(こういったmenuとかははてなブログの基本機能にないものです。はてなブログの設定でカスタムHTMLで挿入するといった機能でHTMLを作成し挿入することができますが、管理がめんどくさいので、こういったものもGTMで管理してしまうことで、煩雑にならずいい感じにデザイン適用することが可能です。)
何はともあれGTMに登録する
www.google.com
サイト上部の「お申し込み」をクリックしてGTMに登録します。
基本無料なので安心して申し込んでください。
GTMのタグを設置する
登録が完了すると、
1.このコードは、次のようにページの 内のなるべく上のほうに貼り付けてください。 2.また、開始タグ の直後にこのコードを次のように貼り付けてください。
の2つのコードを設置しろと言われるので、設定します。
1ははてなブログの[設定]→[詳細設定]→[headに要素を追加]にぺたっと貼り付けます。
2に関しては、[デザイン]→[レンチマークのカスタマイズ]→[ヘッダ]→[タイトル下]に、ペタッと貼ります。
(※なんかエラー出るけど、正常に動作します。)
試しにGoogle Analyticsとか設定してみる
こんな感じでGoogle Analyticsタグを設置し、保存します。
GTMは保存しただけではサイトに適用されない仕様です。右上の「公開」を忘れずクリックしましょう。
最後にGAのリアルタイムでアクセス数が更新されていることを確認して完了です(´・ω・`)b
おわりに
GTMとかやりだすと、どんなサイトでも自分好みにカスタマイズしていくことが可能です。
はてなブログのデザイン周りのコードが煩雑でなんとかしたい！そんな気持ちを持っている方は、javascriptの動的挿入「insertAdjacentHTML」あたりを理解してGTM触れば幸せになれると思うので、気になった人は調べてみるといいかもです。
