Googleタグマネージャーで、SWELLの色んなボタンのクリック数を計測設定してみた

ブログのいろんな数字が気になって悶々
ブログを運営していると、「どのくらいの人がアクセスしてくれてるか」ってのはすごく気になるもの。
意味もなく一日に何回もアナリティクスやサーチコンソールを見たり…ってのはブロガーさんあるあるじゃないでしょうか。(あるよね…?)
で、長いことブログを運営してると、もっと細かい部分が気になってくるんです。
例えば以下のような。
- ここに設定したリンク、意味あるのかな…
- ちゃんと最後まで記事読まれてるのかな…
- 広告置いてみたけど、どれくらいクリックされてるんだろう…
これらはアナリティクスやサーチコンソールといった定番ツールじゃ計測することができないので、悶々とした日々を過ごしておりました。
しかし最近、『Google Tag Manager』なるツールを使い始めまして、ブログの様々な場所のクリック数を計測できるようになったんです。
これメチャクチャに便利なので、今回はその設定方法について共有していこうと思います。

Googleタグマネージャーって?
『Google Tag Manager』は、Googleが無料で提供しているタグ一括管理ツール。

「タグ」ってのは"トラッキング コードや関連するコードの総称"らしいんですが、、正直なんのこっちゃ?って感じ。
よく分からないんで、「ウェブサイトに含まれる色んな要素」くらいのニュアンスで理解しちゃってます。(合ってるかは不明)
で、そのウェブサイトの要素もろもろを無料で管理・計測できちゃうよ〜という、なかなかすごそうなツールです。
具体例を挙げると、以下のようなことが計測できるようになります。
- ユーザーがWEBページでどのくらいスクロールしたか?
- ユーザーがボタンやリンクを何回クリックしたか?
- 内部リンク、外部リンクそれぞれどのくらいクリックされてるか?
ブロガーさん的にはどれも知っておきたい内容のはず。これを活用しない手はありません。
タグマネージャーの設定方法
タグマネージャーを使うには、ちょっとした事前設定が必要。
ぼくは以下2つの動画を参考に設定しました。
新しい「Google Analytics 4」を使う場合は以下。(ユニバーサルアナリティクスは2023年7月に使えなくなるため、先のことを考えるとこちらで設定した方が良さそうです)
一応ここでもざーっくりした手順をお伝えしておくと、以下の通り。
- タグマネージャーにアクセス、アカウントを作成。
- GTMコードをheadタグ終了直前とbodyタグ直後に貼り付け。(SWELLの場合は"外観>カスタマイズ>高度な設定"画面にあります)
- タグマネージャー上で、GoogleアナリティクスのトラッキングIDを設定したタグを作成。
- もしGoogleアナリティクスのコードを既に設定していた場合は削除する。(タグマネージャーとの二重計測になるため。SWELL推奨のプラグイン「SEO SIMPLE PACK」をお使いの場合は、"SEO PACK > GOOGLEアナリティクス > 「トラッキングID」または「測定ID」"の欄にあると思います)


詳しくは上記動画や他サイトを参照いただければと思います。
任意の場所のクリック数を計測する設定方法(SWELL以外も可)
先述した通り、タグマネージャーを使えば様々な数字を計測できるようになりますが、今回は任意の場所のクリック数を計測する設定方法をお伝えしていきます。
設定にあたって、下記リンクを参考にさせていただきました。

一応ですが、これからご紹介する内容はぼくが自分なりに調べて試行錯誤したもの、ってことはご了承ください…笑(ぼくが見えてる範囲では影響起きてないですが、もしお気付きの点などあればご連絡ください)
今回は例として、ロゴのクリック数を計測する設定を進めてみます。

- Google Chrome ブラウザで計測したい対象があるページ上で右クリック→「検証」をクリック。

- 下記スクショの矢印マークをクリック(Command+Shift+Cでも可)。

- 計測したい部分をクリック。

- クリックすると検証ツールが該当部分に移動するので、そこの記述を右クリック>「Copy」>「Copy Selector」をクリック。(文字列がコピーされるので、メモ帳などに控えておく)

- 検証ツールの上部分でConsoleをクリック。

- 「document.querySelectorAll(‘XXXX‘)」のXXXXの部分に、項番4の「Copy Selector」でコピーした値を入れて、Console上に貼り付け&Enter。(今回は「#header > div > div.l-header__logo > h1 > a > img」です)

- 結果に「length=X」という値があるので、Xの値が計測したいリンク数と一致していることを確認する。(今回はロゴのリンク1個なのでlength=1でOK。数が合わない場合は選択箇所が間違ってるので、項番3〜4でクリックする場所を変えてみる)

- タグマネージャーにアクセスしてトリガーを新規追加。

- 「クリック-すべての要素」を選択。

- 「一部のクリック」を選択。

- 左から「Page URL」、「正規表現に一致する」、「.*」を入力して、右端の+をクリック。(全てのページで、という意味)

- 左から「Click Element」、「CSSセレクタに一致する」、項番4でコピーした値を貼り付け。

- トリガーの名前を任意の名前に変更して、保存をクリック。

- タグから新規をクリック

- タグの設定で、ご自身の環境に合わせて「Googleアナリティクス:ユニバーサルアナリティクス」もしくは「Googleアナリティクス:GA4イベント」を選択。

- それぞれ以下のように入力。

- トリガーは先ほど作成したトリガーを選択。

- タグの名前を任意の名前に変更して、保存をクリック。

- 公開をクリック。

- バージョン名の変更画面が現れるので、任意の名前と説明を入力。(空欄でもOK)


これでタグマネージャーの計測設定は終わり。お疲れ様でした。
正しく設定されているか確認するには、設定したリンク(ボタン)を実際に押した後に"Googleアナリティクスにアクセス>リアルタイム>イベント欄"を確認します。(反映までに少し時間かかるので待ちます。15秒くらい?)


ここにタグマネージャーで設定した名前があればOK。今回はそれぞれうまくいってるようで安心。(自分のIPを除外している場合などは別回線からお試しください)
※自分の環境では、WEBブラウザのユニバーサルアナリティクスだと、なぜかリアルタイムのイベントに反映されませんでした。非インタラクションの設定が関係してると思うけど、iOSアプリ版のユニバーサルアナリティクスだとリアルタイム反映されてたので、同じ事象に見舞われた方はご参考。(GA4では反映されるし、翌日にはWEBブラウザでも結果に反映されてました。謎。)
また、計測の集計結果については、
- ユニバーサルアナリティクスの場合
行動>イベントをクリック - GA4の場合
レポート>イベント数の欄まで下スクロール
で確認できます。

ぼくがクリック数を計測しているSwellのボタン
これまでお伝えした内容で好きな場所のクリック数を計測できるはずですが、一応ご参考として、クリック計測している『SWELL』のボタンの設定について共有しておきます。
ぼくがクリック計測している(していた)ボタンは以下です。
- 右下のトップに戻るボタン
- モバイルヘッダーの各ボタン
- モバイル固定フッターの角ボタン

『SWELL』をお使いであれば、先述した手順の項番12で次の値をコピペすれば計測できるようになるはず。(※環境差異などあるかもなので、気になる場合はご自身で確認いただければと思います)

- 右下のトップに戻るボタン
-
#pagetop > i
- モバイルヘッダー メニューボタン
-
#header > div > div.l-header__menuBtn.sp_ > div > i
- モバイルヘッダー 検索ボタン
-
#header > div > div.l-header__customBtn.sp_ > div > i
- モバイル固定フッター メニューボタン
-
#fix_bottom_menu > ul > li.menu-item.menu_btn > i
- モバイル固定フッター 検索ボタン
-
#fix_bottom_menu > ul > li:nth-child(2) > i
※メニューをカスタマイズしている場合、↑の(2)の数字が変わるっぽい?です - モバイル固定フッター 目次ボタン
-
#fix_bottom_menu > ul > li:nth-child(3) > i
※メニューをカスタマイズしている場合、↑の(3)の数字が変わるっぽい?です - モバイル固定フッター トップに戻るボタン
-
#fix_bottom_menu > ul > li.menu-item.pagetop_btn > i
「それぞれどのくらいクリックされてたか?」ってのは別の機会にでもお伝えしますね。
まとめ:気になってた数字が分かってスッキリ
以上、Googleタグマネージャーでクリック数を計測するための設定方法を共有してきました。
色んな箇所のクリック率が分かったことによって、より意味のあるブログデザインをできるようになったと思います。
そして、「このボタン、設定した意味あったのかな…?」と悩み続けてた日々にサヨナラ。心穏やかに眠ることができそうです。
ブログの数字が気になって仕方ないブロガーさんは、ぜひ安眠のために設定しておくのをオススメします。

以上です。
ご覧いただきありがとうございました。

