Google Analyticsのディメンション設定をGoogle Tag Manager経由でする方法

## これは何
Google Analyticsのディメンション設定（ページビューに対して）をGoogle Tag Manger（タグマネージャー）で設定する方法が結構ややこしかったので記事として残しておきます。

## ステップ1: タグマネージャーのスクリプトにディメンションに使いたい値を格納する
タグマネージャーをページに仕込む場合、↓のようなスクリプトをHTMLのhead内に書いていると思います。

```html
<script>
  (function(w,d,s,l,i){
    w[l]=w[l]||[];
    w[l].push(
      {
        'gtm.start': new Date().getTime(), 
        event:'gtm.js'
      }
    );
    var f=d.getElementsByTagName(s)[0], j=d.createElement(s), dl=l!='dataLayer'?'&l='+l:'';
    j.async=true;
    j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
    f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','xxxxxx');
</script>

```

このスクリプト部分に、ディメンションの設定に使いたい値を設定します。

```diff_html
<script>
  (function(w,d,s,l,i){
    w[l]=w[l]||[];
    w[l].push(
+     {
+       dimension1: true, //何かしらの値。今回はとりあえずtrueを設定
+     },
      {
        'gtm.start': new Date().getTime(), 
        event:'gtm.js'
      }
    );
    var f=d.getElementsByTagName(s)[0], j=d.createElement(s), dl=l!='dataLayer'?'&l='+l:'';
    j.async=true;
    j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
    f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','xxxxxx');
</script>
```

これでページ側の設定は完了です。

## ステップ2: タグマネージャー側で設定した値の変数を定義する
次はタグマネージャー側で設定を行います。

タグマネージャーページに訪れると、サイドバーに「変数」というメニュがあると思います。
![スクリーンショット 2021-11-11 11.57.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158501/ebeb5072-c19d-4edc-d65a-4dcbc06ac15e.png)

変数のページに移動し、「ユーザー変数定義」から「新規」を選びましょう。
![スクリーンショット 2021-11-11 11.58.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158501/94e2fd10-b73c-724a-6b83-5a60b7dfc9f2.png)

新規を選ぶと、作成ページに飛ぶと思います。
↓のように設定を行い、保存をしてください（左上の名前に関しては、このあと参照するのでわかりやすいものにしましょう）
![スクリーンショット 2021-11-11 12.24.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158501/c07be893-42fa-f3c6-d4e9-a993cfd04e57.png)


これで変数の設定は完了です。

## ステップ3: タグマネージャーのディメンション設定に定義した変数を設定する
次はタグマネージャーのタグ設定側を変更していきます。
タグの画面を開くと、↓のようにアナリティクスの設定があると思います。赤枠のアイコンをクリックすると、ディメンションの設定を行うことができます
![スクリーンショット 2021-11-11 12.03.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158501/28807f47-ba9d-5817-60a0-f2e875fd2a81.png)

ディメンションの設定は以下のように行ってください
![スクリーンショット 2021-11-11 12.02.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158501/fc44e236-ae68-36a1-c80e-f1ba129ada63.png)

ここで指定しているディメンションの値は先ほど変数で設定した左上の名前を設定します。
また、左のインデックスはGoogle Analytics上のディメンション設定した時に設定されるインデックスを設定してください。

ここまででタグマネージャー上の作業は終了です。
編集結果を本番環境に反映させてください。

## ステップ4: Google Analytics上でディメンションの定義を行う
最後にGoogle Analytics上でディメンションの設定を行います。
サイドバーの「管理」を選びプロパティ→カスタム定義→カスタムディメンションを選択してください。
カスタムディメンションを開くと「新しいカスタムディメンション」というボタンがあるので、こちらをクリックしてください
![スクリーンショット 2021-11-11 12.16.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158501/667e23c0-a694-364a-2d92-a245766c59db.png)

クリックすると、ディメンションの設定画面が出るので、このように設定を行ってください。
![スクリーンショット 2021-11-11 12.17.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158501/9a89e794-726f-7040-9c42-96a3ae480a24.png)

これで作成を行うと、ディメンションの定義ができます。ディメンション作成後、「インデックス」という項目に数字が書いてあると思います。
この数字をステップ3で設定するインデックスに設定してください。
これで全ての設定が完了です。

## 最後に
Meetyもやっているので、ご興味あれば是非気になるをおねがいします！
サービス開発やチームビルディングなどの情報交換ができればと思っています。

https://meety.net/matches/JkVrBQmJVoST

Organizationのフォローもしていただけると嬉しいです！

https://qiita.com/organizations/increments