最近Googleタグマネージャの使い方を覚えてきました。
これかなりリテラシー高い人じゃないと使いこなせないだろうな……というのがタグマネージャを触った率直な感想です。
さて、今回はGoogleタグマネージャを使ってサイト内の特定URLのクリック数を計測する方法を紹介します。使用シーンとしては、サイト内のリンクからあるURLへの流入がどれだけあるか調べたい場合など。
今回紹介するやり方は2種類です。
（１）すべてのURLクリックを計測し、Googleアナリティクス上でフィルタをかけて特定URLを抜き出す
（２）計測したいURLにCSSクラスを付与してそれだけを計測する
特定URL以外も計測が必要になりそうな人は（１）を、特定のURLの計測だけで良い人は（２）をやってみてください。
目次
Googleタグマネージャで計測する理由
※計測方法を早く知りたい！という方はこの項目を読み飛ばしてください。
従来より、URLクリック数の計測については、リンクにパラメータを付与するという方法があります。
aタグに以下のようにパラメータを付与することで、Googleアナリティクスのイベントとして計測できるというものですね。
<a href="遷移先のURL" onclick="ga('send', 'event', 'カテゴリ指定', 'アクション指定', 'ラベル指定', '1')">
計測したいURLの数が少ない場合は正直この方法でも良いのですが、個別リンクのHTMLを編集するので以下のようなデメリットがあります。
- 計測したいリンクすべてにパラメータを設定する必要がある
- メンテナンス性が悪い
- コード記述ミスがあった時に分かりづらい
例えば5つくらいのURLのクリック数を計測する場合、その中の1つだけ記述が誤っていて正確に計測ができていなくても、他のデータが取れているので気づきにくいです。
もちろんテストはすると思いますが、こうした計測を行っていることをよく分かっていない人がリンクのあるページを編集した際に、うっかりパラメータを消してしまうこともあるかもしれません。
タグマネージャですべてのURLクリックを計測している場合、設定が間違っていれば全部計測できないので気づきやすいです。修正もタグマネージャで行えば良いだけなので手間がかかりませんし。
また、トップページやサイドバー、個別ページなど複数の場所から同一のURLにリンクを送っている場合、すべてのリンクにパラメータを付与するのは一苦労です。
その点も、タグマネージャなら一気に設定できるので簡単です。
CSSクラスを付与する方法だと、クラスを付与する手間はありますが、それでもパラメータ付与よりは簡単でしょう。
こうした理由から、僕はクリック数の計測では基本的にタグマネージャを使うのが良いと思います。
（１）すべてのURLクリックを計測し、アナリティクス上でフィルタをかける方法
では実際の設定方法を見ていきましょう。
以下はGoogleアナリティクスがすでに導入済みであることが前提なので、まだアナリティクスの設定が済んでいない人は先にそっちを行いましょう。
大まかな流れは以下の通りです。
- タグマネージャにアクセスする
- コンテナを新規作成する
- 変数を設定する
- トリガーを設定する
- タグを設定する
- プレビューモードでテストを行う
- 問題なければ公開する
- Googleアナリティクスで確認する
それぞれ順を追って説明していきます。
タグマネージャにアクセスする
GoogleタグマネージャのURLは下記です。
https://www.google.com/intl/ja/analytics/tag-manager/use-policy/
アクセスすると、以下のような画面になります。
最初はアカウントの作成が必要なので、「アカウントを作成するにはここをクリックしてください」をクリックして作成を進めましょう。
アカウント名は自分で分かりやすいものを入力し、国は日本を選択すれば良いです。「Googleや他の人と匿名でデータを共有」のチェックは任意なので、好きな方を選んでください。
コンテナを新規作成する
まずはタグの入れ物である「コンテナ」を作成します。
アカウントを新しく作成した場合、そのままコンテナの設定を行う画面になります。
「コンテナ名」はサイトアドレスで良いです。「コンテナの使用場所」は、サイトに埋め込む場合は「ウェブ」でOKですね。
「作成」をクリックし、利用規約に同意したらスニペットが表示されるので、これをサイトに埋め込みます。
<head>内に埋め込むものと<body>直後に埋め込むものの2種類があるので注意してください。
WordPressの場合、子テーマを作成してheader.phpのファイルに記述すれば良いでしょう。
テーマによってはタグマネージャのIDを管理画面から入力できるものもあります（Cocoonとか）。
変数を設定する
コンテナの中に入ったら、まずは変数の設定をします。
この先の手順で変数を指定できる箇所があるのですが、変数の設定で有効化されていない変数は選択できないので、このタイミングで有効化しておく必要があります。
画面左のメニューから「変数」を選択し（①）、「組み込み変数」エリアの「設定」をクリック（②）した後、右側に出てくるメニューから必要な変数にチェックを入れていきます（③）。
必要な変数は「ページ」と「クリック」に関するものですが、ページ系の変数はデフォルトでチェックが入っていると思います。逆にクリック系はチェックが入っていないので、スクロールしてクリック系の変数すべてにチェックを入れておきます。
これで「Click URL」などの変数が使えるようになりました。
トリガーを設定する
変数の設定ができたら、タグの発火条件（トリガー）を設定していきます。
ワークスペース左のメニューから「トリガー」を選び、「新規」をクリックしましょう。
このような画面が出てくるので、「トリガーのタイプを選択して設定を開始…」のエリアをクリックして設定画面に入ります。
最初にトリガーのタイプを選択します。今回はURLのクリックを計測したいので、「クリック」セクションの「リンクのみ」を発火条件として選択します。
そうすると、トリガーのタイプとして「クリック – リンクのみ」が挿入され、残りの設定が行えるようになります。
続いて上記画像のように、以下を設定してください。
- タグの配信を待つ → チェックを入れる
- 妥当性をチェック → チェックを入れる
- 「これらすべての条件がtrueの場合にこのトリガーを有効化」 → 【Page URL】、【正規表現に一致】、【.*】
- 「このトリガーの発生場所」 → すべてのリンククリック
これで、サイト内のどのページでもリンクのクリックを計測できるようになります。設定ができたら右上の「保存」をクリックしましょう。
最後に、トリガーの名前を設定する画面が出てきます。どういったトリガーなのか分かれば、どんな名前でもOKです。入力して「保存」をクリックすればトリガーの設定は完了です。
タグを設定する
トリガーが設定できたら、次にタグの設定を行います。
左のメニューから「タグ」を選択し、「新規」をクリックしましょう。
このような画面が出てくるので、「タグタイプを選択して設定を開始…」をクリックして進みます。
タグタイプはGoogleアナリティクスを選択しましょう。
さらに細かく設定できるようになるので、各項目を入力していきます。
それぞれの項目を以下の通り入力します。
- トラッキングタイプ → イベント
- カテゴリ → 自分で分かるように入力（例：サイト内の全リンク）
- アクション → 自分で分かるように入力（例：リンクのクリック）
- ラベル → {{Click URL}} ※変数から選択
- 値 → 1 ※半角数字で入力
- 非インタラクションヒット → 偽
ここまでできたら、「Googleアナリティクス設定」のプルダウンで「新しい変数…」を選択します。すると右側にメニューが出てきます。
タグマネージャでクリック数を計測したいサイトのGoogleアナリティクスのトラッキングIDを入力したら、右上の「保存」をクリックします。名前を付ける画面も出てきますので、自分で分かる名前を付けましょう。
次に、タグとトリガーを紐づけます。
タグの設定を行ったエリアの下部にある「トリガー」の領域で、「トリガーを選択してこのタグを配信…」をクリックします。
現れるメニューから、先ほど作成したトリガーを選択すればOKです。
最後にタグの名前を付けたら（分かるものならOK）、タグの設定も完了です。
プレビューモードでテストを行う
ここまで設定できたらクリック数の計測を行う準備はバッチリですが、公開前にプレビューモードを使って本当に問題なく動くかチェックしておきましょう。
画面右上に「プレビュー」というボタンがありますので、それを押します。
その上で、タグマネージャのスニペットを入れたサイトに同じブラウザでアクセスすると、画面の下半分にタグマネージャのログなどを表示する画面が現れます。
今回はクリック数の測定なので、サイト内にあるリンクをCtrlキーを押しながらクリックして別タブで開いてみましょう（画面遷移するとログが確認できないので）。
設定に問題がなければ、「Tag fired on this page」の箇所に設定したタグが表示されます。
問題なければ公開する
プレビューモードで設定に問題ないことが確認できたら、いよいよ公開です。
タグマネージャの画面からプレビューモードを終了し、「公開」ボタンをクリックします。
この時バージョンの名前と説明を記述する画面が現れますので、自分で分かりやすい名前と説明を書いておきましょう。
公開したら、その瞬間からクリック数の測定が始まります。
Googleアナリティクスで確認する
測定したクリック数はGoogleアナリティクスで確認することができます。
今回のクリック数は「イベント」として計測しているので、アナリティクスで「行動」＞「イベント」＞「概要」と進みます。
※設定直後の場合は「リアルタイム」＞「イベント」からクリック数を確認してみましょう。
測定されたクリックがある場合、この画面で設定したイベントカテゴリが出てきます。
設定したイベントカテゴリをクリックすると、そのカテゴリ全体のクリック数が見れますが、これではどのURLがクリックされたか分かりませんので、イベントラベルの表示に切り替えましょう。
イベントラベルには{{Click URL}}の変数を設定したので、これでURLごとのクリック数が見れるはずです。
Tips：特定ページにおけるクリック数だけ確認する方法
「サイトの複数のページに同じリンクを貼っているけど、特定のページから何クリックあったかを確認したい」というシーンもあるでしょう。
これはGoogleアナリティクス上でフィルタをかけることで確認できます。
まず、どのページからのクリックか分かりやすくするため、セカンダリディメンションで「ページ」を追加します。
クリックが少ない場合などは、これだけでも各ページでのクリック数が確認できます。
さらに特定ページに絞り込む場合は、右側にある「アドバンスフィルタ」を使います。
アドバンスフィルタで「ページ」「完全一致」「/」と指定すれば、トップページでのクリック数が確認できるようになります。
もちろん「/」の部分を変えれば他のページも確認できます。日本語スラッグの場合、ピュニコードではうまくいかないので注意してください。
これで、「このページからこのURLへのクリック数を教えてくれ」みたいな上司からの依頼にも対応ができますね。
（２）計測したいURLにCSSクラスを付与してそれだけを計測する方法
こちらの方法ではCSSクラスを使って計測するので、まずは計測用のクラスを用意して計測したいaタグに付与しておきましょう。
その上で、先ほど同様に以下の順序で設定を行っていきます。
- タグマネージャにアクセスする
- コンテナを新規作成する
- 変数を設定する
- トリガーを設定する
- タグを設定する
- プレビューモードでテストを行う
- 問題なければ公開する
- Googleアナリティクスで確認する
変数を設定するところまでと、「プレビューモードでテストを行う」「問題なければ公開する」は全く同じなので割愛します。
トリガーを設定する
設定内容は基本的にすべてのURLクリックを計測する場合と同じですが、「このトリガーの発生場所」で「一部のクリック」を選択する必要があります。
すると更なる設定箇所が現れるので、【Click Classes】、【等しい】、【計測したいCSSクラス】と指定を行います。画像では例として「click_banner」というクラスを指定しています。
タグを設定する
タグの設定では、ラベルを{{Click Classes}}にします。また、カテゴリ名も分かりやすいものにしましょう。
ここまでできたら、プレビューモードでテストを行った後に公開しましょう。
Googleアナリティクスで確認する
クリックがあればアナリティクスの「行動」＞「イベント」＞「概要」でイベントカテゴリが出てくるので、一旦表示してからイベントラベル表示に切り替えましょう。ここまではすべてのURLクリックを計測する場合と同じです。
ただし、今回はイベントラベルを{{Click URL}}ではなく{{Click Classes}}で指定したので、イベントの画面でもクラス名で表示されます。
まとめ
これでクリック数の計測ができるようになったかと思いますが、タグマネージャにはまだまだできることがたくさんあるようです。
使いこなすことができれば、痒い所に手が届く計測がもっとできるようになるかもしれませんね。
Googleタグマネージャは触っているとどんどん好きになってくるので、ぜひ活用してみてください。