ミギムキ

[Googleタグマネージャー] リンクのクリック回数をカウントしたい

サイト上で公開しているカタログなどのpdfファイルがどれくらいクリックされたかカウントして、Google Analytics上で集計したい場合があります。

従来まではaタグにjavascriptのコードを書いてGoogle Analyticsと連携させていましたが、Googleタグマネージャーを利用することでhtmlには手を入れることなく、管理画面上でリンククリックの計測ができるようになります。

クリックカウント設定手順

変数を設定する

はじめに、タグマネージャー上で使用する変数の追加を行います。変数の追加によって、Google Analyticsのイベント情報として「クリックされたURL」といったデータを送信できるようになります。

メニューから変数の設定画面へ

管理画面左メニューの「変数」をクリックします。

変数の設定

組み込み変数の「設定」をクリックします。

追加する変数を選ぶ

「クリック」の分類にある各変数にチェックを入れて「×」をクリックします。

トリガーを追加する

次に、トリガーを追加します。トリガーの追加によって、タグをいつ、どこで発生させるか決めることができます。

トリガーの追加

管理画面左メニューの「トリガー」をクリックし、「新規」をクリックします。

トリガーの名前を入力&詳細設定へ

トリガーの名前を入力して、トリガーの設定エリアをクリックします。

トリガーのタイプを選択

トリガーのタイプとして「リンクのみ」をクリックします。

タグの配信制御

「タグの配信を待つ」にチェックを入れます。これにより、リンクがクリックされたときにまだタグの準備ができていない場合、設定した待ち時間分ページ遷移を待つようになります。
正確なカウントをする上で必要な設定ですが、ユーザー操作に遅延が発生する場合があることを留意しておきましょう。

「妥当性をチェック」にチェックを入れます。これは、ページ遷移が発生した正常なクリック操作だけをカウントするようチェックする、という設定になります。特に理由がない限り有効にしておきましょう。

トリガーの有効条件を設定

このトリガーを有効にする条件を設定します。

上図のサンプルでは、URLが「/catalog/」で終わるページでのみトリガーを有効にしています。

不要なタグ配信を避けるように、なるべく条件は設定するようにした上で、きちんと動作確認を行うようにしましょう。

トリガーの発生場所を設定

どのリンク(aタグ)でトリガーを発生させるかの条件を設定します。

ページ内にはナビゲーションメニューやフッターなどにもたくさんのリンクが配置されています。

不要なリンクでトリガーが発生しないように、カウント対象とするリンクの条件を指定します。

上図のサンプルでは、aタグに設定したリンク先のURLが「.pdf」で終わるものが対象となるように、正規表現「^.*\.pdf$」を使って指定しています。

トリガーの発生条件には、先ほど追加した「変数」を使うこともできます。クリックした要素やクラス名、id名といった指定が可能ですので、適宜活用してください。

タグを追加する

最後に、タグを追加します。連携するGoogle Analyticsの設定を行い、追加したトリガーとの紐付けを行います。

管理画面左メニューの「タグ」をクリックし、「新規」をクリックします。

タグの名前を入力&詳細設定へ

タグの名前を入力して、タグの設定エリアをクリックします。

タグのタイプを選択

タグのタイプとして「Google アナリティクス:ユニバーサル アナリティクス」をクリックします。

トラッキングタイプ、カテゴリ、アクションの設定

トラッキングタイプに「イベント」を選択します。

イベントトラッキングパラメータの「カテゴリ」には、Google Analytics上で表示させたいイベント名を指定します。

「アクション」には、入力欄の「+」ボタンをクリックすることで、各種変数の値を設定することができます。

上図サンプルでは、aタグのhref属性に設定されたリンク先(ファイル名を含んだフルパス)を設定するようにしています。

GA上でのカテゴリ、アクションの表示

このように設定を行うと、Google Analytics上では上図のようにイベント情報が表示されます。

トラッキングIDの設定

「このタグでオーバーライド設定を有効にする」にチェックを入れ、紐付けするGoogle AnalyticsのトラッキングIDを入力します。

タグとトリガーの紐付け

先ほど追加したトリガーをタグに紐付けます。まずはトリガーの設定エリアをクリックして

タグに紐付けるトリガーを選ぶ

追加したトリガーを選択します。

タグの保存

最後に保存をして、タグの追加は完了です。

タグの動作確認・公開

ここまででタグの設定は完了です。一度プレビューで指定したページでタグが発行されていること、指定していないページでタグが発行されていないことをそれぞれ確認しましょう。

プレビュー&公開

プレビューの確認が終わったら、忘れずに「公開」してください。

GA上で計測状況をチェック

公開後は、Google アナリティクス上でカウントの計測ができているかも確認しましょう。

メニューの「リアルタイム」→「イベント」で直近のクリックカウントの状況が確認できます。イベントカテゴリにカテゴリ名が、イベントアクションにクリックしたファイルのパスが表示されていればOKです。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。