【全8パターン】GoogleアナリティクスでクライアントIDを取得する方法の全て

Googleアナリティクス
実装

記事公開日:

【全8パターン】GoogleアナリティクスでクライアントIDを取得する方法の全て

Googleアナリティクスでは、ユニバーサル・アナリティクスの時代も、Googleアナリティクス4の時代も、ブラウザのCookie上に記録された「クライアントID」を軸にユーザー識別を行っています。Googleアナリティクス4では、Googleシグナルの活用が強く言われていますが、しかしながら「クライアントID」によるユーザー識別がなくなるわけではなく、クライアントIDを補完するためのGoogleシグナルであり、クライアントIDの重要性は依然として変わりません。

そんなクライアントIDですが、標準の状態ではGoogleアナリティクスのサーバー側で処理されてしまい、ユーザー自身が自由に扱える状態にはなっていません。このクライアントIDをユーザー自身が自由に使うためには、タグのカスタマイズを行いカスタムディメンションに連携したり、他ツールに連携する必要があります。

本記事では、そんなカスタムディメンションを活用するためのカスタマイズ方法の全パターンを網羅して解説したいと思います。


クライアントIDの2つの取得方法

クライアントIDを取得するには、取得した後の連携先で分類すると大きく2パターンの方法があります。1つ目のパターンは、設置しているGoogleアナリティクスにカスタムディメンション(GA4の場合は、イベントパラメーターやユーザーパラメーター)として利用できるようにするパターンです。2つ目のパターンは、Googleアナリティクス以外のツールにクライアントIDを連携し、後でクライアントIDをキーにしてユーザー統合を行うパターンです。

これらは、似ているように見えますが、それぞれ注意が必要です。

また、Googleアナリティクスの利用方法は、現在

  • シーン1: 直接設置によるユニバーサル・アナリティクスタグ(analytics.js)
  • シーン2: 直接設置によるグローバル・タグ(gtag.js)
  • シーン3: Googleタグマネージャーのテンプレートタグ設置によるユニバーサル・アナリティクス
  • シーン4: Googleタグマネージャーのテンプレートタグ設置によるGoogleアナリティクス4タグ

の4パターンがあるため、それぞれ考える必要があります。自身がどのようにGoogleアナリティクスをサイトに導入しているかを確認してから、読み進めるようにしましょう。

では、それぞれのシーンを見ていきましょう。

シーン1: analytics.jsタグによる設置

パターン1: カスタムディメンションに設定する

色々な設置方法がありますが、ga関数のコールバック形式で実装するのが良いでしょう。コードにすると、以下のようになります。

<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(function (tracker) {
  ga('set', 'dimension1', tracker.get('clientId'));
  ga('send', 'pageview');
});
</script>

パターン2: 他のマーケティング・ツールで利用する

コードはパターン1とほとんど同じ内容となります。注意しなければいけないのは、クライアントIDの取得が非同期で実行され、コールバック関数の中でのみ、クライアントIDが利用できることです。実際に他のマーケティング・ツールで利用する際は、ツールベンダーから提供されたタグを頼りに、自身でどこにどのコードを設置すべきか、考える必要があります。

ga(function (tracker) {
  var clientId = tracker.get('clientId');
  // 取得したクライアントIDをここで利用する。
});

シーン2: gtag.jsタグによる設置

パターン3: カスタムディメンションに設定する

SEM Technologyの過去記事【最新】gtag.jsでクライアントIDをカスタムディメンションに設定する方法が参考になります。カスタムマップ(custom_map)機能を使うことで、通常のトラッキングコードに数行コードを加えるだけでカスタムディメンションにクライアントIDを連携できます。

具体的には、以下のようなコードになります。

gtag('js', new Date());
gtag('config', 'UA-xxxxxxxx-y', {
  'custom_map': {
    'dimension1': 'clientId'
  }
});

パターン4: 他のマーケティング・ツールで利用する

gtagのgetコマンドを使ってクライアントIDを取得することができます。getコマンドは非同期で動作するコマンドのため、実装には注意が必要です。

基本的な考え方は、パターン2と同じです。

gtag('get', 'トラッキングID', 'clientId', function(clientId) {
  // 取得したクライアントIDをここで利用する。
});

シーン3: GTMによるUAタグの設置

現在一番スタンダードなGoogleアナリティクスの導入パターンはこちらになります。

パターン5: カスタムディメンションに設定する

Googleタグマネージャーを使っている場合、カスタムディメンションに設定するだけであれば、カスタムJavaScript変数を1つ作成し、Googleアナリティクス設定変数の設定を1カ所変えるのみとなります。

作成するカスタムJavaScriptは以下のようになり、ユニバーサル・アナリティクスの「タスク機能」を使っています。タスク機能の機能説明は、開発者向けドキュメント - タスクをご覧ください。

function () {
  return function (model) {
    model.set('dimension1', model.get('dimension1'));
  };
}

Googleアナリティクス設定変数の設定箇所は以下の通りです。「設定フィールド」の中に、フィールド名として「customTask」を指定し、値には上で作成したカスタムJavaScript変数を指定します。フィールド名「customTask」は、候補としては表示されないので注意してください。

パターン6: 他のマーケティング・ツールで利用する

Googleタグマネージャーを利用する場合、クライアントIDを他のマーケティング・ツールで利用するには少し複雑な手順が必要になります。特に、ページ読み込み時にGoogleアナリティクスの実行と同じタイミングで利用したい場合には注意が必要です。

方法としては、カスタムHTMLで最初にGoogleアナリティクスタグを読み込み、トラッカーが生成できた後にデータレイヤー変数に設定し、かつカスタムイベントでクライアントIDの取得完了をトリガーできるようにすることです。

まずは、クライアントIDを取得したり、カスタムイベントを送信するためのカスタムHTMLです。以下のキャプチャのように設定します。

HTMLコードのみを抜き出すと以下のようになります。処理内容としては、仮のトラッキングIDとトラッカー名を使って、Googleアナリティクスのトラッカーを生成し、トラッカー生成のコールバック関数にて、クライアントIDの取得とカスタムイベントの送信を行なっています。

<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-99999999-99', 'auto', 'tmpTracker', {
  allowLinker: true
});
ga(function (tracker) {
  dataLayer.push({
    event: 'ga.initialized',
    clientId: tracker.get('clientId')
  });
});
</script>

続いて、変数を作成します。変数は、データレイヤー型の変数を利用し、変数名は「clientId」とします。具体的には以下のキャプチャのような設定となります。

次はトリガーを作成します。トリガーは、カスタムイベントを利用し、以下のような設定で作成します。

最後は、クライアントIDを利用するマーケティング・ツールへの連携です。以下は、HubSpotタグにクライアントIDを連携するコードになります。

実装は、個々のツールによって異なるため、各ツールのドキュメントを参照するようにしてください。ポイントは、クライアントIDをセットしたい部分を、GTMの変数「{{GA Client ID}}」に置き換えること、そしてトリガーを「GA Initialized」以降に発生するトリガーに設定することです(もちろん、タグの実行タイミングがページ読み込み時ではない場合は、それに合わせて設定する必要があります)。

シーン4: GTMによるGA4タグの設置

GA4固有のクライアントID取得方法は現在公開されていませんが、パターン4のgtagのgetコマンドを利用することができます。また、GoogleタグマネージャーからGA4を設置する場合は、Simo氏が開発・提供しているテンプレート・タグである「GTAG GET API」を利用するのが良いでしょう。以下のパターン7・8でも「GTAG GET API」の利用を前提としています。

「GTAG GET API」の使い方は、Simo氏のブログ記事「#GTMTIPS: WRITE CLIENT ID AND OTHER GTAG FIELDS INTO DATALAYER」も合わせてご覧ください。

前準備: GTAG GET APIの追加

Googleタグマネージャーのタグ・テンプレートから、「GTAG GET API」をワークスペースに追加します。

続いて、追加したタグ・テンプレートを使ったタグを作成します。「Measurement ID」にGA4の測定IDを設定しましょう。

次に、GTAG GET APIタグは、動作完了時にカスタムイベント「gtagApiGet」が送信されるため、このカスタムイベントに対応するトリガーを作成します。

そして取得したクライアントIDは、データレイヤー変数「gtagApiResult.client_id」に設定されているため、このデータレイヤー変数から値を取得する変数を作成します。

パターン7: カスタムディメンションに設定する

「前準備: GTAG GET APIの追加」さえ終わってしまえば、残りは簡単です。GA4に関するページ読み込み時に実行したいタグを、「ペジビュー」トリガーから作成したトリガー「gtagApiGet」に変更し、イベントプロパティ(ユーザー・プロパティ)に変数「gtagApiResult.client_id」を設定すれば完了です。

パターン8: 他のマーケティング・ツールで利用する

パターン7と同様に、「前準備: GTAG GET APIの追加」さえ終わってしまえば、残りは簡単です。ページ読み込み時に実行したいタグであればトリガーを「ページビュー」トリガーから作成したトリガー「gtagApiGet」に変更(要素クリックなど、ページ読み込み時以降の実行であれば変更不要)し、変数「gtagApiResult.client_id」を利用します。

まとめ

今回は、ユニバーサル・アナリティクス、GA4の両方を対象に、Googleアナリティクスでユーザーを特定するために使われるキーである「クライアントID」を取得する方法を、「GAタグの実装方法」「取得したクライアントIDの使い方」の組み合わせで計8パターンに分けて解説しました。

クライアントIDを取得してしまえば、その後さまざまなCRMの情報などと統合することで、より深い分析ができるようになるため、試してみると良いでしょう。