はてなブログの魔改造

だいず @SoySoySoyB

※noteの動きも見てみたいので、はてなブログに書いた記事をこちらにも掲載

最近、Webマーケティングにかかわる比重が高くなったので、基本知識としてGoogle Analyticsの機能は理解しておかないとなーと思っている。
ただなかなか実務で触る機会がないので、それなら自分で遊んでしまえということでブログを始めることにした。

投稿がいつまで続くか大変怪しいけれど（笑）、ひとまず作成するにあたっていろいろと設定を行ったので、備忘録として書いておく。
まだ計測が機能していないので、詳細はまたあとで確認することにする。はるか昔に使っていたMarkdown記法の復習もついでの気持ちで。

１．計測系

Google Analytics

  • Google Analyticsの設定→Google Tag Managerの設定とすすめていったが、そもそもどの順番が正解なのかはよくわからない((タグの数が爆発していない今の状況では、GTMの価値を実感はできないがなんとなく理解できた))

  • 参考：Googleタグマネージャーの使い方

  • 生成されるタグは2種類あり、貼り付け位置も指定される((どちらも「次のように」と書かれているが、事例は記載されていないのは謎))が、はてなブログではタグのIDだけ入れればよい((ところでバッククオートははじめて打った・・・Shift＋＠のキーで打てる))

下のコードをコピーして、ウェブサイトのすべてのページに貼り付けてください。 

このコードは、次のようにページの <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) -->

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でトラッカーをブロックしているというオチであった・・・

  • 自分で自分をブロックしないように注意しましょう（苦笑）

魔改造とかタイトルにつけておきながら大したことをしていないですが、私が触っていたころのはてなブログは計測などあまりない牧歌的な時代だったのです。

この記事が気に入ったらサポートをしてみませんか？