このページでは、gtag.js のコマンドを使ってサイトから Google アナリティクスにデータを送信する方法を説明します。
event
コマンドでデータを送信する
ウェブページにグローバル スニペットを追加後、event
コマンドを使って Google アナリティクスにデータを送信します。たとえば次の event
コマンドを使って、ユーザーが Google アカウントを使ってログインしたことを示します。
gtag('event', 'login', {'method': 'Google'});
event
コマンドについて詳しくは、API リファレンスをご覧ください。
グループとプロパティにデータをルーティングする
測定情報の種類によって、送信先の Google アナリティクス プロパティ ID を使い分けることができます。また、同じ種類のトラッキング情報を複数のプロパティ ID に送信することも可能です。プロパティはグループにまとめることができ、データのルーティングもグループ単位で行います。
たとえば次のコード例は、sign_in
イベントを「agency」グループにルーティングする方法を示したものです。このグループには Google アナリティクス プロパティが 2 つ含まれています。
// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });
// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });
イベントが送信されたときに通知を受ける
イベント発生後にすぐに対応できるよう、Google アナリティクスへのイベント送信が完了した時点で把握したいケースがあります。よくあるのは、ユーザーが現在のページから離れる特定の接点を記録する場合です。多くのブラウザでは、次のページの読み込みが始まった時点で JavaScript の実行が停止されるため、gtag.js の event
コマンドを実行するタイミングがない可能性があります。
たとえば、ユーザーがフォームの [送信] ボタンをクリックしたことを記録するために、Google アナリティクスにイベントを送信するとします。多くの場合、[送信] ボタンをクリックするとすぐに次のページの読み込みが始まり、event
コマンドは実行されません。
この問題を回避するには、イベントの発生を検出して次のページの読み込みを停止させ、まず Google アナリティクスへのイベント送信を行います。イベント送信が完了後、プログラムによって自動的にフォーム送信を再開します。
イベント コールバック関数を実装する
イベントが正常に送信されるとすぐに呼び出されるイベント コールバック関数を実装します。
次の例では、フォームのデフォルトの送信アクションをキャンセルし、Google アナリティクスにイベントを送信してから、イベント コールバック関数を使用してフォームを再送信する方法を示しています。
// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');
// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevent the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Send the event to Google Analytics and
// resubmit the form once the hit is done.
gtag('event', 'signup_form_complete', {
'event_callback': function() {
form.submit();
}
});
});
タイムアウトに対処する
この方法にはひとつ欠点があります。gtag.js ライブラリの読み込みに失敗すると、イベント コールバック関数が実行されず、ユーザーがフォームを送信できなくなることです。
サイトの重要な機能をイベント コールバック関数内に含める場合は、gtag.js ライブラリの読み込みに失敗したときのために、必ずタイムアウト関数を使用してください。
次の例は、上記のコードを改良してタイムアウト処理を組み込んだものです。ユーザーが [送信] ボタンをクリックしてから 1 秒経過してもイベント コールバック関数が実行されなければ、無条件でフォームが再送信されます。
// Gets a reference to the form element, assuming // it contains the ID attribute "signup-form". var form = document.getElementById('signup-form'); // Adds a listener for the "submit" event. form.addEventListener('submit', function(event) { // Prevents the browser from submitting the form // and thus unloading the current page. event.preventDefault(); // Creates a timeout to call submitForm after one second. setTimeout(submitForm, 1000); // Monitors whether or not the form has been submitted. // This prevents the form from being submitted twice in cases // where the event callback function fires normally. var formSubmitted = false; function submitForm() { if (!formSubmitted) { formSubmitted = true; form.submit(); } } // Sends the event to Google Analytics and // resubmits the form once the hit is done. gtag('event', 'signup_form_complete', { 'event_callback': submitForm }); });
上のパターンをサイト全体で使用する場合は、タイムアウト処理のためのユーティリティ関数を作成しましょう。
次のユーティリティ関数は、入力として関数を受け取り、新しい関数を返します。返された関数がタイムアウト(デフォルトでは 1 秒後)までに呼び出されると、タイムアウトがクリアされ、入力された関数が呼び出されます。タイムアウトまでに呼び出されなかった場合でも同様に、入力された関数が呼び出されます。
function createFunctionWithTimeout(callback, opt_timeout) {
var called = false;
function fn() {
if (!called) {
called = true;
callback();
}
}
setTimeout(fn, opt_timeout || 1000);
return fn;
}
これにより、すべてのイベント コールバック関数をタイムアウトでラップできるようになり、イベントの送信に失敗した場合や、gtag.js ライブラリが読み込まれなかった場合でも、サイトを正常に動作させることができます。
// Gets a reference to the form element, assuming // it contains the ID attribute "signup-form". var form = document.getElementById('signup-form'); // Adds a listener for the "submit" event. form.addEventListener('submit', function(event) { // Prevents the browser from submitting the form // and thus unloading the current page. event.preventDefault(); // Sends the event to Google Analytics and // resubmits the form once the hit is done. gtag('event', 'signup_form', { 'event_callback': { createFunctionWithTimeout(function() { form.submit(); }) }}); });
別のトランスポート メカニズムを指定する
デフォルト状態では、ヒットの送信に使用する最適な HTTPS メソッドとトランスポート メカニズムを、gtag.js が自動的に選択します。その際の選択肢は次の 3 つです。
- 'image'(
Image
オブジェクトを使用) - 'xhr'(
XMLHttpRequest
オブジェクトを使用) - 'beacon'(
navigator.sendBeacon
メソッドを使用)
最初の 2 つの方法には、前のセクションの説明と同様に、別ページへの遷移が始まるとヒットが送信されない問題があります。navigator.sendBeacon
メソッドでは、ヒット コールバックを設定せず、非同期的にヒットをウェブサーバーに送信することができるため、この問題は発生しません。
次のコードでは、ブラウザが対応している場合にトランスポート メカニズムが 'beacon'
に設定されます。
gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});