はてなブログの魔改造
最近、Webマーケティングにかかわる比重が高くなったので、基本知識としてGoogle Analyticsの機能は理解しておかないとなーと思っている。 ただなかなか実務で触る機会がないので、それなら自分で遊んでしまえということでブログを始めることにした。
投稿がいつまで続くか大変怪しいけれど（笑）、ひとまず作成するにあたっていろいろと設定を行ったので、備忘録として書いておく。 まだ計測が機能していないので、詳細はまたあとで確認することにする。はるか昔に使っていたMarkdown記法の復習もついでの気持ちで。
１．計測系
Google Analytics
- Google Analyticsの設定→Google Tag Managerの設定とすすめていったが、そもそもどの順番が正解なのかはよくわからない*1
- 参考：Googleタグマネージャーの使い方
- 生成されるタグは2種類あり、貼り付け位置も指定される*2が、はてなブログではタグのIDだけ入れればよい*3
下のコードをコピーして、ウェブサイトのすべてのページに貼り付けてください。
このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。
<!-- Google Tag Manager -->
<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','[タグのID]');</script>
<!-- End Google Tag Manager -->
また、開始タグ <body> の直後にこのコードを次のように貼り付けてください。
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=タグのID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
- HTMLを確認してみると、1つ目のタグしか反映されていないが、調べてみると後者のタグはJavaScriptが正常に動作しないときのためのようで、今どきそんなのはほとんどないので問題ないということなのだろうか・・・
- 参考：Googleタグマネージャのスニペットタグが更新されました
- そのほか、はてなブログではいくつかカスタムディメンションを設定するとより使えるらしい（未検証なので詳しくはまだわからない）
- 参考：はてなブログで Google アナリティクス 4の設定が可能になりました
Google Search Console
- こちらはほぼ瞬殺だった
- 参考：はてなブログにグーグルサーチコンソールを導入する方法
- ひとつ注意点としては、前述の通りはてなブログではGA（GTM）はタグのIDだけで設定する形になっていて、noscriptのタグは埋め込まれないようなので、Search Console用のタグでサイトの所有権の確認をする必要がある
２．表示系
Twitterタイムライン埋め込み
- Twitter Publishで埋め込みタイムラインのコードを生成
- デザイン＞カスタマイズ＞サイドバー＞モジュールを追加＞HTMLで埋め込む
- デフォルトだと長すぎてしまうので、
data-tweet-limit="7"などでツイート数を制限するとよい - コードはこんな感じ
<a class="twitter-timeline" href="https://twitter.com/[TwitterのID]?ref_src=twsrc%5Etfw" data-tweet-limit="7">Tweets by [TwitterのID]</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
３．泥沼（沼）
- いろいろめんどくさいのですべて無料で済ませようとしたところ、Notion／STUDIO／WixはGAを埋め込めないので除外、Jimdoはなんとなく気が進まないのでやめて、WordPressかはてなブログで考えることに
- どちらも昔使っていたことがあるのでなじみがあり、WordPressにでもしようかと思ったら、今はローコード編集の仕様になっているので、タグの埋め込みがうまくできず
- 結局はてなブログに落ち着くのだが、計測系の対応が楽でとてもよかった
- Twitter埋め込みがぜんぜんうまくいかずに泣きそうになっていたところ、原因はFirefoxがはじいていたことのようで、Safariなら表示されるというオチであった・・・
- GAの反映がやたら遅いなと思っていたら、これもFirefox／Safariでトラッカーをブロックしているというオチであった・・・
- 自分で自分をブロックしないように注意しましょう（苦笑）
魔改造とかタイトルにつけておきながら大したことをしていないですが、私が触っていたころのはてなブログは計測などあまりない牧歌的な時代だったのです。
