# Googleアナリティクスのイベントトラッキングの設定方法 URL: https://webrandum.net/google-analytics-event-tracking/ 公開日: 2020-10-13 更新日: 2020-10-13 カテゴリー: アクセス解析・サイト運用タグ: Googleアナリティクス出典: Webrandum（著者: サイトウマサカズ） ## この記事の要約とにかくある程度知識があってコピペだけしたい方は、設定したいサイトがgtag.jsかanalytics.jsなのか判断して、下記のコードをベースにサイトに合わせて修正して利用ください。 ``` // gtag.jsの場合はこちら資料のダウンロード // analytics.jsの場合はこちら資料のダウンロード ``` Googleアナリティクスで特定のボタンをどれくらいクリックしたかを取得したい場合は、「イベントトラッキング」という方法でaタグに属性を仕込む必要があります。タグの種類によってやり方が違ったり、ややこしいので、今回はイベントトラッキングの方法についてまとめておきます。 ## Googleアナリティクスのイベントトラッキング方法 Googleアナリティクスのイベントトラッキングは、トラッキングコードによって記述が変わるのと、最近はGoogle タグマネージャーでも設定ができるようになっています。 - gtag.jsのパターン（2017年以降にGoogleアナリティクスを設置した場合） - analytics.jsのパターン（2017年より前にGoogleアナリティクスを設置した場合） - Google タグマネージャーで設定するパターン Google タグマネージャーで設定するパターンに関しては、別途記事にするので、今回はGoogleアナリティクス単体で設定する方法について紹介します。 ## Googleアナリティクスのトラッキングコードを確認する 2017年以降か、それより前かでGoogleアナリティクスのトラッキングコードが違っています。トラッキングコードを見て、設定するサイトがどちらのバージョンなのか確認するようにしましょう。 gtag.js（グローバルサイトタグ）の場合は下記のようなコードになっています。「gtag」というキーワードが入っているので、検索して確認ができます。 ``` ``` 逆に、下記のように「gtag」というキーワードが入っていない場合は、analytics.js（ユニバーサルサイトタグ）という1つ前の世代のGoogleアナリティクスです。 ``` ``` 運用しているサイトのタグがどちらなのか確認できたら、イベントトラッキングの設定をします。 ## イベントトラッキングの設定方法イベントトラッキングを設定するためには、設定したいリンクのHTMLにトラッキング用のコードを追加します。 gtag.jsの場合とanalytics.jsの場合で書き方が違っていて、使用しているGoogleアナリティクスと対応していないと正常に動作しないので注意しましょう。 ### gtag.jsの場合 gtag.jsの場合は下記のようにコードを設定します（`a`タグ以外でも使えますが、実際に使うときは`a`タグの場合がほとんどのはずです）。 ``` 資料のダウンロード ``` ### analytics.jsの場合 analytics.jsの場合は下記のコードを設定します。 ``` 資料のダウンロード ``` ### 各設定項目イベントトラッキングを設定するときに必要な項目は下記の5つで、これはgtag.jsでもanalytics.jsでも同じですが、指定する順番が違うので、上記のコードをよく見て、間違えないように設定しましょう。 - イベントハンドラ（必須） - アクション（必須） - カテゴリ（必須） - ラベル（省略可能） - 値（省略可能） #### イベントハンドラ先ほどのサンプルで、「onclick」となっている部分のことで、ここに指定したアクションが実行されたときにGoogleアナリティクスにイベントが計測されます。基本的には「onclick」を指定して、クリックしたときに発火するようにしておきます。 #### アクションアクションには「download」や「open」「call」などの「クリックしたときに起こる○○」のようなアクション名を書きます。ただし、何を書くかは自由なので、後から自分が見るときに分かりやすいアクション名にします。自分の場合は、なんとなく「動詞を記述する」イメージがあります。 #### カテゴリカテゴリにはアクションの対象を入力します。アクションが動詞なのに対して、カテゴリはその目的語になるイメージがあります。具体的な例としては、アクションが「download」の場合は「pdf」「image」などの何のファイルをダウンロードするのかを記述したり、「open」なら「contact」、「call」なら「tel」のようなイメージです。とはいえ、こちらも何を書くかは自由なので、後から自分が見るときに分かりやすければOKです。 #### ラベルラベルには、カテゴリの詳細情報を書いたり、イベントをより細かく分類したいときに記入します。例えば、ダウンロードする資料のファイル名や、別ページに遷移するリンクには「link」というラベルを付けて、あとで集計をしやすくしたりします。省略可能なので、分類が不要な場合は省略してしまっても問題ありません。 #### 値値が少し分かりにくいのですが、1回のアクションの回数や価値を数字で記述します。基本的には単純に1クリックという意味で「1」を記述することが多いです。他にも、値段を数字で記述したり、資料ダウンロードが複数ある場合は「その後のユーザーの行動に貢献しそうな資料は価値を上げる」「それ以外の資料請求は価値を下げる」という風に、入力する数字を変えておいたりもできます。こちらも省略可能ですが、とりあえず「1」を設定しておいてよさそうです。 ### 具体例完全にコピペで使える例を用意しておきます。 gtag.jsの場合は下記になります。 ``` 資料のダウンロード ``` analytics.jsの場合は下記になります。 ``` 資料のダウンロード ``` ## イベントトラッキングの確認方法イベントトラッキングの確認は、Googleアナリティクスの［行動］→［イベント］→［概要］で確認ができます。 ![Googleアナリティクスの［行動］→［イベント］→［概要］](https://webrandum.net/mskz/wp-content/uploads/2020/10/image_1-4-1024x583.png) リアルタイムで確認したい場合は、［リアルタイム］→［イベント］で確認ができるので、本当に設定できているのか自分で確認したい場合は、試しにクリックして反映されるか見ればOKです。