GTMのJavaScriptエラートリガーとページ速度計測の正しいやり方｜未経験から100日後にGTMのプロになる話【Day 34】

GA4や広告タグの基本計測だけでは、「表示が遅いせいで離脱しているのでは」「特定のブラウザでエラーが出て購入できていないのでは」といった、サイトの技術的な問題は見えてきません。今日は、ページ表示速度とJavaScriptエラーの計測を扱います。

ページ表示速度：古いAPIを使わない

ページの読み込み時間を取得するコードとしてwindow.performance.timingを使った例をよく見かけますが、これはNavigation Timing APIの旧バージョン（レベル1）で、現在は非推奨（deprecated）です。現在のブラウザでは、より正確な情報が取れる新しいAPIに置き換えるのが適切です。

function() {
  var nav = performance.getEntriesByType('navigation')[0];
  if (!nav) return undefined;
  return Math.round(nav.loadEventEnd - nav.startTime);
}

カスタムJavaScript変数としてこのコードを登録し、GA4イベントタグのパラメータに使えば、ページごとの読み込み時間を計測できます。ただし、細かいパフォーマンス分析（Core Web Vitalsなど）が目的であれば、GA4に無理に載せるより、専用のパフォーマンス計測ツールを使う方が本来は適切です。GTMでの計測は「大まかな傾向をコンバージョンデータと突き合わせる」程度の位置づけで考えてください。

JavaScriptエラーの計測は「組み込みトリガー」を使う

JavaScriptエラーを検知するために、独自にwindow.onerrorを設定するカスタムJavaScript変数のコードを見かけることがありますが、GTMのカスタムJavaScript変数は「値を返す関数」としてしか機能しないため、そこにイベントリスナーの登録処理を書いても正しく動作しません。関数はreturn文で処理が終わるため、その後に書いたコードは実行されずに終わってしまいます。

この用途には、GTMが標準で用意している「JavaScript エラー」というトリガータイプを使うのが正解です。

1. 「変数」→「組み込み変数の設定」で、Error Message・Error URL・Error Lineにチェックを入れる
2. 「トリガー」→「新規」→種類は「JavaScript エラー」
3. トリガー名を付けて保存

あとはGA4イベントタグを作成し、イベント名をjs_errorにして、パラメータにerror_message={{Error Message}}、error_url={{Error URL}}を設定し、このトリガーに紐付けるだけです。独自のエラーハンドリングコードを書く必要は一切ありません。

1つ注意点があります。外部CDNから読み込んでいるJavaScriptファイルでエラーが発生した場合、ブラウザのセキュリティ制限により、詳細なエラーメッセージや行番号が取得できず、単に「Script error.」、行番号0とだけ記録されることがあります。この場合、CDN側のスクリプトタグにcrossorigin属性を付け、CDN側が適切なCORSヘッダーを返しているかを確認する必要があります。エラー内容が「Script error.」ばかりで役に立たないときは、まずここを疑ってください。

今日のまとめ

ページ速度の計測は非推奨APIを避けて新しいNavigation Timing APIを使うこと、JavaScriptエラーの計測はカスタムコードではなくGTM標準の「JavaScript エラー」トリガーを使うことがポイントです。次回は、他ツールとのデータ連携を扱います。