ウェブマスターがウェブのことを書いたら

ウェブマスターとして働いている管理人がウェブで躓いたこと、ググったことを備忘録として書いています。主に技術的なこと、WEBサイト設計のこと

Googleタグマネージャでカスタムディメンションを設定する方法(データレイヤー変数)

   

 - Googleアナリティクス

GoogleタグマネージャでGoogleアナリティクスのカスタムディメンションを設定する方法をまとめます。カスタムディメンションはデータレイヤー変数を使ってデータの受け渡しをする方法です。

例えば、求人サイトだとすべての求人票のページにデータレイヤーを記述して、企業名やIDなどをアナリティクスに送ることができ、その軸でアクセス解析したり、レポートを作成したりできます。

サイトのページにデータレイヤーを記述する

まず受け渡ししたいページにデータレイヤー変数を記述します。Googleタグマネージャにデータを送るには、data layer pushを使います。

<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
 job_id: "GOOGUK2341",
 job_locid: "UK-LON",
 job_pagetype: "offerdetail",
 企業名: "株式会社〇〇",
 担当者名: "木村拓哉"
})
</script>

緑字の箇所は自由に変更します。日本語でも構いません。(上記サンプルは求人のリマケなどに使う変数の下に独自の変数をいれてます)

job_idの部分がカスタムディメンション名にあたります。””ダブルクォーテーションの中がページごとに可変する値を入れます。

使い方は例えば、求人サイトの場合だったら、求人票のページに記述します。受け渡ししたい情報を変数で書きます。

データレイヤーの設置場所

データレイヤーの記述する位置ですが、これはタグマネージャーのタグよりも上のhead内に記述します。

Googleのヘルプページでは、『コンテナ スニペットより上の、ページの<head>セクション』に追加します。と書かれています。

タグマネージャーよりも先に読み込ませる必要があるようです。

<head>
<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
 job_id: "GOOGUK2341",
 job_locid: "UK-LON",
 job_pagetype: "offerdetail",
 企業名: "株式会社〇〇",
 担当者名: "木村拓哉"
})
</script>
<!-- Google Tag Manager -->
<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','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
</body>

 
古いタイプのタグマネージャのコードでも上に書きます。上に書かなくても動作しますが、一瞬しかページを開いてない場合などはタグマネージャのコードしか読まれないこともあるので、正しくトラッキングできないかもしれません。上に書いた方が良いと思います。

Googleアナリティクスでカスタムディメンションの設定をする

次に、アナリティクスでカスタムディメンションの設定を行います。

「管理」のページの「プロパティ」の「カスタム定義」の「カスタムディメンション」をクリックします。
アナリティクスのカスタムディメンションの設定

「新しいカスタムディメンション」をクリックします。
カスタムディメンションの新規追加

カスタム ディメンションを追加の画面で、「名前」にカスタムディメンション名を入力します。(データレイヤーに記述した名称を入れます。)「範囲」は「ヒット」、「アクティブ」にチェックを入れます。作成をクリックすると完了です。
カスタムディメンションの新規追加

必要な分だけ作成したのが↓この状態です。
カスタムディメンションの新規追加

1回作ったものは削除はできません。状態のアクティブのチェックを外すと無効にはできます。アナリティクスの設定は以上です。

Googleタグマネージャでカスタムディメンションの設定をする

Googleタグマネージャでは、アナリティクスのデータ取得のタグにカスタムディメンションの設定を追加します。

すでに設定がある場合は↓このような内容だと思います。
タグマネージャのアナリティクスのタグ

アナリティクスのデータ取得ダグを設定していない場合の設定方法

いちから作る場合は、タグの新規作成でタグの設定の「タグの種類」を「Google アナリティクス – ユニバーサル アナリティクス」、「トラッキングタイプ」を「ページビュー」にします。「このタグでオーバーライド設定を有効にする」にチェックを入れて、「トラッキング ID」にアナリティクスのトラッキングIDを入力します。

下の方の詳細設定をクリックし、「タグの呼び出しオプション」を「無制限」、「配信トリガー」を「All Pages」にします。(これでアナリティクスのデータ取得タグは完了)
タグマネージャのアナリティクスのタグの新規追加

アナリティクスのデータ取得のタグにカスタムディメンションの設定を追加していきます。タグの「詳細設定」をクリックします。「カスタムディメンション」の項目をクリックすると設定を追加することができます。「⁺カスタムディメンション」をクリックしてアナリティクスで設定した内容を設定します。
タグマネージャのアナリティクスのタグ詳細設定1

インデックスとディメンションの値を入力します。(両方ともアナリティクスで設定した内容)
タグマネージャのアナリティクスのタグ詳細設定2

ディメンションの値は、カスタムディメンション名を{{}}でくくります。

以上で保存して公開すれば完了です。

アナリティクスで1時間もすれば反映

問題なく設定できていればアナリティクスで1時間もすれば反映できました。これは場合によって変わるとは思います。

アナリティクスでカスタムディメンションディメンションの項目で呼び出せるようになりますし、カスタムレポートでも使用できます。
アナリティクスでカスタムディメンションが使える

同様にカスタム指標も設定すれば、カスタム指標も使えるようになります。