アクセス解析公開日: 2020.07.13 更新日: 2023.02.22

イベントトラッキングが計測されない！？Google アナリティクスの設定に注意

Webサイトを運営していて、電話番号のクリック数や資料ダウンロード数などを計測するためにイベントトラッキングを集計するタグを設定している人は多いでしょう。

しかし、タグの設定方法を間違えると「タグを設置しているのにイベントトラッキングが計測されない…」という事態になることがあります。

イベントトラッキングが計測されない原因はトラッキングコードのバージョンとタグの書き方にあります。今回は、イベントトラッキングの設定方法について詳しく解説します。

この記事の目次

まずはGAのトラッキングコードをチェック！

イベントトラッキングを計測するためには、Google Analyticsのトラッキングコードとは別に集計用のタグを設定する必要があります。

Google Analyticsのトラッキングコードには「gtag.js」と「analytics.js」、2つのバージョンがあります。そして、トラッキングコードのバージョンにあった形式でタグを設定しないと、イベントトラッキングは計測できません。

トラッキングコードのバージョンをチェック！

トラッキングコードのバージョンを確認するためには「Google Analyticsの利用を開始した時期で判断する方法」と「Google Analyticsのトラッキングコードで判断する方法」の2つがあります。

トラッキングコードの最新版である「gtag.js」は2017年に公開されたため、2018年以降にGoogle Analyticsの利用を開始した方は、「gtag.js」になっているでしょう。一方、2017年以前に利用を開始していた場合は「analytics.js」のトラッキングコードになっているはずです。

より正確に判断するためには、サイトのソースに入っているトラッキングコードを確認しましょう。<head>タグ内に書かれているAnalyticsのトラッキングコードで判断できます。

イベントトラッキングの設定方法

それでは、実際にgtag.jsとanalytics.jsの場合のトラッキングコード設定方法と確認方法を見ていきましょう。

・Googleアナリティクスイベントトラッキングと目標設定の方法を紹介

gtag.jsの場合

「gtag.js」は、2017年から利用開始された、最新版のGoogleアナリティクスのトラッキングコードです。

一般的には以下の様に書かれています。

<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID”></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());

gtag(‘config’, ‘GA_TRACKING_ID’);
</script>

「https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID」の記述がある場合はgtag.jsバージョンのトラッキングコードになります。

gtag.jsバージョンの場合、計測したいリンクやボタンに以下のイベントトラッキング用のタグを追加することで、トラッキングを計測することが可能です。

onClick=gtag(‘event’, ‘event_name’, {[‘event_category’: ‘categoryName’], [‘event_label’: ‘labelName’], [‘value’: ‘actual_value’] })

「event_name」には、どのような行動か分類するための名称を入れます。名称は任意で構わないので、リンクのクリックなら「click」、動画再生なら「play」のように分かりやすい名称にしておくと良いでしょう。
ただし、event_nameは必須項目のため、必ず何か名称をつけてください。

「categoryName」には、イベントを分類するための名称を入れます。event_nameと同じく名称は任意です。電話番号のクリックなら「tel」、資料ダウンロードリンクの場合は「download」とするといいでしょう。
categoryNameも必須項目のため、必ず入れてください。

「labelName」には、イベントをより細かく分類するための名称をいれます。ボタンが複数ある場合などに、「head_button」、「bottom_button」などの任意の名称を付けることで、ボタン毎の数値を計測することができます。
labelNameは任意項目のため、必要なければ書かなくても大丈夫です。

「actual_value」には、1回のクリックに対する価格を整数で入れます。actual_valueを設定することで、見込み売上を計測することができます。
例えば、顧客単価5万円・電話問い合わせの成約率が20%の場合、1イベント（電話番号のクリック）の価値を1万円として設定することで見込み売上が計測できます。

ここでは、

電話番号のリンク
資料ダウンロード用リンク
広告リンク

の3つのパターンにおけるタグ記入例と実装した場合の例をご紹介します。

電話番号リンクのタグ記入例

onClick=”gtag(‘event’, ‘tap’, {‘event_category’: ‘tel’, ‘event_label’: ‘reservation’, ‘value’: ‘1’});”

上記を実装した場合、
<a href=tel:0123-45-6789 onClick=”gtag(‘event’, ‘tap’, {‘event_category’: ‘tel’, ‘event_label’: ‘reservation’, ‘value’: ‘1’});“> 0123-45-6789 </a>
のようになります。

資料ダウンロードのタグ記入例

onClick=”gtag(‘event’, ‘click’, {‘event_category’: ‘download’, ‘event_label’: ‘companyprofile’, ‘value’: ‘0’});”

上記を実装した場合、
<a href=”http://xxxxx/companyprofile.pdf” onClick=”gtag(‘event’, ‘click’, {‘event_category’: ‘download’, ‘event_label’: ‘companyprofile’, ‘value’: ‘0’});“>資料のダウンロードはこちら </a>
のようになります。

広告リンクのタグ記入例

onClick=”gtag(‘event’, click, {‘event_category’: ‘ad’, ‘event_label’: ‘bottom’, ‘value’: ‘0’});”

上記を実装した場合、
<a href=http://xxxxx/xxxxxxxxxxxxx” onClick=”gtag(‘event’, click, {‘event_category’: ‘ad’, ‘event_label’: ‘bottom’, ‘value’: ‘0’});” >製品紹介広告 </a>
のようになります。

analytics.jsの場合

「analytics.js」はユニバーサルアナリティクスと呼ばれており、2014年から利用されているトラッキングコードです。

一般的には以下の様に書かれています。

<!– Google Analytics –>
<script> (function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-XXXXX-Y’, ‘auto’);
ga(‘send’, ‘pageview’);
</script>
<!– End Google Analytics –>

「https://www.google-analytics.com/analytics.js」の記述がある場合はanalytics.jsバージョンのトラッキングコードになります。

analytics.jsバージョンの場合、計測したいリンクやボタンに以下のイベントトラッキング用のタグを追加することで、トラッキングを計測することが可能です。

onClick=ga(‘send’, ‘event’, [eventCategory], [eventAction], [eventLabel], [eventValue]);

「eventCategory」には、イベントを分類するための名称を入れます。電話番号のクリックなら「tel」、資料ダウンロードリンクの場合は「download」など、任意の名称を入れましょう。
eventCategoryは必須項目のため、必ず何か名称をつけてください。

「eventAction」にはどのような行動か分類するための名称を入れます。eventCategory と同じくeventActionは必須項目のため、必ず何か名称をつけなければいけませんが、内容は任意です。リンクのクリックなら「click」、動画再生なら「play」のようにするといいでしょう。

「eventLabel」には、イベントをより細かく分類するための名称をいれます。ボタンが複数ある場合などに、「head_button」、「bottom_button」などの任意の名称を付けることで、ボタン毎の数値を計測することができます。
eventLabelは任意項目のため、必要なければ書かなくても大丈夫です。

「eventValue」には、1回のクリックに対する価格を整数で入れます。eventValueを設定することで、見込み売上を計測することができます。
例えば、顧客単価5万円・電話問い合わせの成約率が20%の場合、1イベント（電話番号のクリック）の価値を1万円として設定することで見込み売上が計測できます。

以下、

電話番号のリンク
資料ダウンロード用リンク
広告リンク

の3つのパターンにおけるタグ記入例と実装した場合の例をご紹介します。

電話番号リンクのタグ記入例

onClick=”ga(‘send’, ‘event’, ‘tel’, ‘tap’, ‘reservation’, ‘1’);

上記を実装した場合、
<a href=tel:0123-45-6789 onClick=”ga(‘send’, ‘event’, ‘tel’, ‘tap’, ‘reservation’ , ‘1’);“> 0123-45-6789 </a>
のようになります。

資料ダウンロードのタグ記入例

onClick=”ga(‘send’, ‘event’, ‘download’, ‘click’, ‘companyprofile’);

上記を実装した場合、
<a href=”http://xxxxx/companyprofile.pdf” onClick=”ga(‘send’, ‘event’, ‘download’, ‘click’, ‘ companyprofile’);“>資料のダウンロードはこちら</a>
のようになります。

広告リンクのタグ記入例

onClick=”ga(‘send’, ‘event’, ‘ad’, ‘click’, ‘bottom’);

上記を実装した場合、
<a href=http://xxxxx/xxxxxxxxxxxxx” onClick=”ga(‘send’, ‘event’, ‘ad’, ‘click’, ‘bottom’);” >製品紹介広告 </a>
のようになります。

イベントトラッキングが計測できない場合の原因

イベントトラッキングを設定しているのにGoogle Analyticsで計測されていない場合にはどのような原因があるのでしょう。

よくある失敗例

イベントトラッキングが計測されない場合、主に以下の3つの原因が考えられます。

WebサイトとGoogle Analyticsの紐付けができていない

Google Analyticsアカウントを開設するだけでは、イベントとランキングを計測できません。
必ずWebサイトとの連携を行ってください。

トラッキングコードのバージョンが違う

これまでで紹介したように、トラッキングコードにはバージョンがあります。トラッキングコードのバージョンに合ったタグを設定しないと、計測することができません。

タグに記入ミスがある

タグはスペルミスやコンマが1つ抜けているだけでも正常に計測できません。タグの記入例を参考に、記入ミスがないか確認しながら、トラッキングコードに設定してみてください。

レアなミスケース

ワードで記入されたタグをコピー&ペーストで使う場合は注意が必要です。

ワードではオートコレクト機能の一つとして、「シングルクォーテーション（’）」「ダブルクォーテーション（”）」を2回入力すると、自動で「’‘」「“”」に変換される機能があります。

ワードでタグを書く場合は、このオートコレクト機能を無効にしておきましょう。オートコレクト機能は以下の手順で無効にできます。

［ファイル］タブの［オプション］をクリック
［Wordのオプション］ダイアログボックスが開いたら、［文章校正］を選択
［オートコレクトのオプション］ボタンをクリック
［オートコレクト］ダイアログボックスが表示されたら、”を‘’に変更するチェックをオフに変更

引き継ぎ資料や社内ドキュメントとして、ワードにタグを記入する際は注意してください。

タグマネージャーを使っている場合のイベントトラッキング設定

Googleタグマネージャーを使っている場合は、タグマネージャー側で設定をしなければ、イベントトラッキングを計測できないことがあります。

タグマネージャーでイベントトラッキングを計測するために、まず組み込み変数の設定を行います。組み込み変数とは、タグマネージャーに用意されている、イベントが発生したときにどの情報を返すかを指示するものです。

タグマネージャーの管理画面で左サイドメニューの「変数」を選択後、「設定」をクリックし、「ページ」と「クリック」にある項目すべてにチェックを入れます。

次に、左サイドメニューから「トリガー」を選択し、新規トリガーを作成します。
クリック計測のトリガーには「すべての要素」と「リンクのみ」の2種類があります。リンクのクリック数を計測したい場合は「クリック」の「リンクのみ」の項目を選択します。画像やテキストといったリンクではない何かのクリックを計測したい場合は「すべての要素」を選択してください。

トリガーのタイプが選択できたら、「タグの配信を待つ」にチェックを入れます。「待ち時間の上限」はデフォルトのままで大丈夫です。

続いて、トリガーの有効範囲を設定します。
「Page URL」「含む」をプルダウンから選択し、値の欄に参照サイトのURL（http://xxxxxx.jp）を入力します。これで全てのページでトリガーが有効になります。

「このトリガーの発生場所」で「すべてのリンククリック」を選択すると、リンクをクリックしたすべての情報が取得されます。「一部のリンククリック」を選択すると、指定したクリックが発生した場合のみ情報を取得できます。

有効範囲が設定出来たら、トリガーのタイミングを設定します。
電話の発信を計測する場合は、「Click URL」「含む」をプルダウンから選択し、値の欄に計測するaタグの電話番号「01-2345-6789」を入力します。
PDFのクリック数を測定したい場合は、「Click URL」「含む」をプルダウンから選択し、値の欄に「.pdf」を入力します。

トリガー名をわかりやすい名称に変更し保存すれば、トリガーの設定は完了です。

最後にタグの設定を行います。
左サイドメニューから「タグ」を選択し、「新規」ボタンをクリックします。タグタイプはこの記事で説明した、GoogleAnalyticsのトラッキングコードのバージョンを参考に選択してください。

「トラッキングタイプ」内で「イベント」をプルダウンから選択します。
イベントトラッキングパラメータの「カテゴリ」「アクション」「ラベル」では、枠の右側のファイル追加マークをクリックすると変数選択の画面が出てきます。組み込み変数で設定したもののうち、計測したい変数を選択してください。

トリガーの選択から先程作成したトリガーを選択します。

タグマネージャーでは、最後に「公開」ボタンをクリックしないと、情報が更新されません。すべての設定が完了したら、管理画面右上の「公開」ボタンを必ずクリックしてください。

まとめ

イベントトラッキングの設定を使えば、Webサイト上で行われたユーザーの様々な行動を可視化することができます。

例えば、資料のダウンロードボタンが複数あるサイトでは、どのページの閲覧がダウンロードに結びついているのか、電話番号への誘導がどれくらい成功しているのかが分かれば、コンバージョン導線の改善や広告の運用に活かすことができるでしょう。

イベントトラッキングを正しく計測して、よりよいサイト運営を目指してください。

執筆者：山本卓真

株式会社ヒトノテのSEOコンサルタント。中小企業から大企業まで様々な規模、業種のサイトのSEOに携わる。WEBマーケティングの広い知見と経験をもとにクライアントと伴走することが得意です。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。