はてなブログでgoogleアナリティクスのイベントトラッキングを導入
ググってもググっても方法が分からなかったのでここに記載しておく。
1.はてなブログ謹製のgoogleアナリティクスを削除
はてなブログは
googleアナリティクスを簡単に導入するために
トラッキングIDを埋めるだけでPVを計測できる機能が用意されています。
イベントトラッキングを導入する際にはこれは利用しません。
(PVの計測も継続して可能ですので焦らず次の手順に進んでください)
2.googleタグマネージャーのアカウントを作る
今後のアナリティクス計測は
googleタグマネージャーという機能を利用して行います。
まずはアカウントを作成しましょう。
3.管理→タグマネージャーをインストールに進む
4.それぞれのボックスの中身を所定の場所に貼り付ける
このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。
まずは<head>内に貼り付けるというボックス
これははてなブログの編集画面の
「headに要素を追加」という部分に貼り付けます。
また、開始タグ <body> の直後にこのコードを次のように貼り付けてください。
これは少々複雑な位置に貼り付ける事になります。
デザイン→詳細設定→サイドバーから
モジュールを追加、を選択しそこに内容を貼り付けます。
タイトルは空欄でOKです。
スマートフォンタブで「PCと同じHTMLを表示する」にもチェックしておきましょう。
5.googleアナリティクスを導入する
次にタグマネージャーの画面からgoogleアナリティクスを設定します。
最初の手順でgoogleアナリティクスを削除しましたが
ここで設定をすれば再び計測が始まるので安心して下さい。
googleアナリティクス設定
ワークスペース→変数→ユーザー定義変数→新規の順にクリック
変数のタイプで「googleアナリティクス設定」を選択します。
ここに自分のトラッキングIDを貼り付けてください。
「UA-○○○～」の事です。
組み込み変数の設定
同じようにワークスペース→変数から組み込み変数を設定します。
「ページ」の全項目にチェック
「ユーティリティ」のEventにチェック
「クリック」の全項目にチェック
次にタグの設定をします。
もう一息です、頑張りましょう。
ワークスペース→タグ→新規をクリック
文字で説明しても分かりにくいので
下の画像のように設定してください。
トリガーの部分はこのようになっています。
新規で作成しましょう。
設定をいったん保存
上記の設定が終わったら、一度ワークスペースに戻り
右上の送信から一度設定を保存しましょう。
これによりPV計測が再開されます。
6.イベントトラッキングを導入
いよいよ本番です。
準備が非常に長かったですね。
これまでの作業の応用で実現するのであと一歩ですよ。
ワークスペース→タグ→新規をクリック
もう一度新しいタグを作成します。
タグの設定は下の画像のようにします。
この後でトリガーの設定も行うのでまだ保存はしないでください。
トリガーの設定
次にトリガー部分の設定です。
ヘロヘロだと思いますがあと一歩なので頑張りましょう。
トリガーは上の画像のように設定します。
特に丸の中の部分は忘れがちなので気を付けましょう。
私はこの部分の設定忘れでしばらく稼働せずにググりまくる日々が続きました。
保存して送信
上記の一連のタグ設定が終わったら
設定を保存して、ワークスペースから送信します。
ひたすら待つ
設定が終わっても即時反映される訳ではありません。
とりあえずPV計測が出来ているかを確認しておいて
PVが計測できていれば、後はすこし待てばクリック計測もスタートします。
私は丸1日程度掛かったので気長に待ちましょう。
