Google Analytics (Universal Analytics) のカスタム ディメンションを作成する手順を紹介します。

Google Analytics の設定(カスタム ディメンションの作成)

Google Analyticsのレポート画面を表示し、左側のメニューの[管理]をクリックします。


管理画面が表示されます。


中央の[プロパティ]のエリアを下にスクロールして、[カスタム定義]のセクションをクリックします。子要素が開きますので、 [カスタム ディメンション]の項目をクリックします。


カスタム ディメンションの画面が表示されます。右側のエリアの上部の[+ 新しいカスタム ディメンション]のボタンをクリックします。


[カスタム ディメンションを追加]画面が表示されます。[名前]の欄にカスタム ディメンションの名称を設定します。名称はカスタムディメンション名と合わせた名称にします。(今回の場合は "Color")


[範囲]を設定します。コンボボックスをクリックすると下図のドロップダウンリストが表示されます。今回は"セッション"を選択します。
設定ができたらページ下部の[作成]ボタンをクリックします。


カスタム ディメンションが作成できました。[インデックス]の列の値がカスタム ディメンションの番号になります。

Webページのトラッキングタグ

Webページにトラッキングタグを配置します。 グローバル サイトタグ（gtag.js）を配置する場合、デフォルトでは下記のタグが発行されます。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=(トラッキングID)"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '(トラッキングID)');
</script>

カスタムディメンションを設定する場合、トラッキングにカスタムディメンションを結び付けるコードと、カスタムディメンションの値を送信するコードを設定します。
一例として利用者のカラー設定に応じてトラッキングタグを出し分けしてカスタムディメンションを設定します。
タグのフォーマットの詳細については(https://developers.google.com/analytics/devguides/collection/gtagjs/custom-dims-mets)を参照してください。

カスタムディメンションのイベント送信部分の dimension[n] にはカスタムディメンションのIDが入ります。先のディメンション作成で、 Color のカスタム ディメンションのインデックス番号が 1 ですので、dimension1 をカスタムディメンションのイベント送信に与えます。

  gtag('config', '(トラッキングID)', { 'custom_map': { 'dimension(カスタムディメンションのID)': 'Color'}});

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=(トラッキングID)"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '(トラッキングID)', { 'custom_map': { 'dimension1': 'Color'}});
  gtag('event', 'ColorInfo', { 'non_interaction': true, 'Color': 'Light'});
</script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=(トラッキングID)"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '(トラッキングID)', { 'custom_map': { 'dimension1': 'Color'}});
  gtag('event', 'ColorInfo', { 'non_interaction': true, 'Color': 'Dark'});
</script>

カスタム ディメンションでレポートをフィルタする

Google Analyticsのレポートをカスタム ディメンションの値でフィルタする手順を紹介します。
レポート画面を表示します。セグメントでフィルタを設定できる、[ユーザー]画面の[概要]レポートを表示します。下図のページが表示されます。


右側エリアの上部[+ セグメントを追加]のタイルをクリックします。下図のドロップダウンメニューが表示されます。
メニューの左上の[+ 新しいセグメント]ボタンをクリックします。


下図の新しいセグメントの作成画面が表示されます。


セグメント作成画面の左側の[条件]の項目をクリックします。下図の画面に切り替わります。


セグメント作成画面の右側の[条件]のエリアの[フィルタ]のコンボボックスをクリックします。下図のドロップダウンウィンドウが表示されます。 ウィンドウ内の[他のディメンション]のセクション内の[カスタムディメンション]のセクションをクリックします。 カスタムディメンションの一覧が表示されます。先ほど作成した "Color" のカスタムディメンションの項目をクリックして選択します。


[フィルタ]の欄に選択したカスタムディメンションが設定できました。条件式のコンボボックスで値と一致する条件を設定します。 今回は[完全一致]を選択しています。また、右側のテキストボックスに条件に一致するカスタムディメンションの値を入力します。 今回はトラッキングタグで dark, light のどちらかの値を送信していますのでどちらかの値を入力します。が例として、light を入力します。
設定ができたら[保存]ボタンをクリックします。


セグメントが保存できると、一覧にセグメントが追加されます。


レポート画面を表示すると、設定したセグメントのレポートが表示されます。カスタムディメンジョンの値でフィルタされた結果が表示できます。