プラグインを使用する

プラグインは、analytics.js の機能を強化して、ユーザーの接点の測定をサポートするスクリプトです。プラグインで追加されるのは、e コマースやクロスドメイン測定など、通常 Google アナリティクスの特定のユーザーのみが使用する機能です。そのため、デフォルトでは analytics.js に含まれていません。

このガイドでは、analytics.js プラグインを要求して使用する方法を説明します。

プラグインを要求する

require コマンドは、プラグインの名前を受け取って登録し、ga() コマンドキューでプラグインを使用できるようにします。プラグインに設定オプションを指定できる場合は、最後の引数として require コマンドに渡すことができます。

require コマンドの完全なシグネチャは次のとおりです。

ga('[trackerName.]require', pluginName, [pluginOptions]);

たとえば、デフォルトのトラッカーで拡張 e コマース プラグインを要求して使用する場合は、次のように指定します。

ga('require', 'ec');

また、「myTracker」という名前のトラッカーで広告向け機能プラグインを要求し、デフォルトの Cookie 名の値をオーバーライドする設定オプションを渡す場合は、次のように指定します。

ga('myTracker.require', 'displayfeatures', {
  cookieName: 'display_features_cookie'
});

プラグイン コードを読み込む

require コマンドは、プラグイン メソッドを初期化して、ga() コマンドキューで使用できるようにしますが、プラグイン スクリプトそのものは読み込みません。サードパーティのプラグインを使用したり、自分でプラグインを作成する場合は、手動でプラグイン コードをページに追加してください。

ページにプラグイン コードを追加するおすすめの方法は、async 属性を設定した <script> タグを使用することです。これにより、サイトの他の機能の読み込みがブロックされなくなります。

次のコードでは、リンク トラッキング プラグインという架空のプラグインを読み込んでいます。

<script>
ga('create', 'UA-XXXXX-Y', 'auto');
ga('require', 'linkTracker');
ga('send', 'pageview');
</script>

<!--Note: plugin scripts must be included after the tracking snippet. -->
<script async src="/path/to/link-tracker-plugin.js"></script>

プラグインが読み込まれるのを待つ

analytics.js ライブラリと analytics.js プラグインはどちらも非同期的に読み込まれるため、プラグインが完全に読み込まれ、使用準備が完了するタイミングを把握するのは困難です。

analytics.js ライブラリはこの問題を解決するため、まだ読み込まれていないプラグインの require コマンドを受け取ると、コマンドキューの実行を停止します。キューの実行は、プラグインが読み込まれると通常どおり続行します。

そのため、使用するプラグインをテストして、読み込みと実行が正しく行われることを確認することが非常に重要になります。プラグインの読み込みが失敗したり、エラーが発生したりすると、後続するすべての analytics.js コマンドが実行されなくなります。

プラグイン メソッドを呼び出す

プラグインを要求すると、ga() コマンドキューでプラグイン メソッドを使用できるようになります。プラグイン メソッドを呼び出すコマンドのシグネチャは次のとおりです。

ga('[trackerName.][pluginName:]methodName', ...args);

たとえば、拡張 e コマース プラグインの addProduct メソッドは、次のように呼び出すことができます。

ga('ec:addProduct', {
  'id': 'P12345',
  'quantity': 1
});

または、名前付きトラッカーの場合、コマンド文字列にトラッカー名を追加することで呼び出すこともできます。

ga('myTracker.ec:addProduct', {
  'id': 'P12345',
  'quantity': 1
});

次のステップ

このセクションのすべてのガイドを確認したら、analytics.js の学習はほとんど完了です。次のガイドでは、analytics.js の実装をデバッグして、より簡単にエラーを検出したり、コードの処理を正確に把握したりする方法を説明します。