Googleタグマネージャのデータレイヤーで、Googleアナリティクスのカスタムディメンションをいれてみた

##経緯
「WordPressサイトの、記事のPV（ページビュー）ランキングがみたい」という要望をもらった。
Googleアナリティクスじゃダメなのか聞いたら、「公開日」も一緒に見たいからダメだとのこと。

WordPressのシステムはページビュー数が計測されないんで、
一番手っ取り早いのは、PVランキングが出せるプラグイン（[WP-PostViews](https://ja.wordpress.org/plugins/wp-postviews/)とか）を入れて、
管理画面の投稿一覧画面でソートかけて見てもらうのがすぐできる！...と思ったが、
自分たちが見ても計測されてしまい、IPアドレスとかでフィルターもかけられないので意味がない。

結局、Google アナリティクスに公開日のデータを飛ばして、アナリティクス内で見ることはできないのか？
...と、私物WordPressで実験としてやってみた...というそんなメモ記事。

##やりたいこと(目次)
手順1.Googleアナリティクスでカスタムディメンションの設定
手順2.WordPressの記事ページにデータレイヤーを配置する
手順3.Googleタグマネージャでカスタムディメンションの設定
手順4.Googleタグマネージャでプレビューして公開
手順5.Googleアナリティクスでちゃんと取得できているかチェック

※すでにGoogleタグマネージャーでGoogleアナリティクスを計測している前提の話です。


##手順1.Googleアナリティクスでカスタムディメンションの設定

###Googleアナリティクスにログインして、「アナリティクス設定」へ進む
![「アナリティクス設定」へ進む](https://qiita-image-store.s3.amazonaws.com/0/40940/3da0d889-bb15-19f1-4e83-a157dde355a9.png)


###「カスタムディメンション」メニューへ
プロパティ＞カスタム定義をクリックすると、
「カスタムディメンション」と「カスタム指標」がでてくる

![「カスタムディメンション」と「カスタム指標」](https://qiita-image-store.s3.amazonaws.com/0/40940/8b0ff431-dada-c37c-30a4-beea7aea5f8d.png)


今回は文字を引っ張ってきたいので、カスタムディメンションを持ってきます。
（カスタム指標は、数値を持たせるものだそうです。）


###「+新しいカスタムディメンション」をクリック
![「+新しいカスタムディメンション」をクリック](https://qiita-image-store.s3.amazonaws.com/0/40940/8fd424d7-3316-0db5-36cb-5fe4530799f4.png)


###カスタムディメンションを編集して保存
![カスタムディメンションを編集して保存](https://qiita-image-store.s3.amazonaws.com/0/40940/c3c58932-1933-f8a2-38c3-e7f7349b91b3.png)

>名前：記事公開日
>範囲：範囲はページビューごとにデータを飛ばしたいので「ヒット」にしました。
>アクティブ：チェック

そして保存をクリックすると、サンプルコードが出てきます。
一番上の「JavaScript」が該当します。
![サンプルコード](https://qiita-image-store.s3.amazonaws.com/0/40940/f67c60a2-76b4-afa9-332c-b02195b5e2ea.png)

ここの「dimension1」っていう"1"の番号を覚えておくこと。


##手順2.WordPressサイトにデータレイヤーを配置する

※公開日データの取得は、普通にDOM要素指定でも良かったのですが、好奇心でデータレイヤーにしてみました。

コンテナ（タグマネージャーのコード）の上に配置しないといけないので、
header.phpに設置しました。

```php:header.php
<?php if ( is_single() ) : ?>
<script>
dataLayer = [{
  'release_date': '<?php echo esc_js(get_post_time('Y年n月j日')); ?>'
}];
</script>
<?php endif; ?>
```

>###上記コードについて
>- 記事詳細ページにしか表示されない
>- 「release_date」という変数の名前をつけた
>- get_post_time()で公開日を表示して、esc_js()でエスケープ


###参考にしたサイト（その1）
[アナリティクス ヘルプ「カスタム ディメンションやカスタム指標を設定、編集する」](https://support.google.com/analytics/answer/2709829?hl=ja)
[使い分けしよう！WordPressで投稿日時の表示に使える関数まとめ](http://liginc.co.jp/web/wp/62896)
[WordPress codex データ検証](https://wpdocs.osdn.jp/%E3%83%87%E3%83%BC%E3%82%BF%E6%A4%9C%E8%A8%BC)



##手順3.Googleタグマネージャでカスタムディメンションの設定
###Googleタグマネージャにログイン。

コンテナに入り、サイドカラムの「タグ」をクリック


![コンテナ](https://qiita-image-store.s3.amazonaws.com/0/40940/fb9b2432-ae7a-e310-553a-ebfbe140b395.png)


###ユニバーサルアナリティクスを選ぶ
![GTM.png](https://qiita-image-store.s3.amazonaws.com/0/40940/f365db73-1c12-727b-e3a4-2fb3e79428c7.png "GTM.png")


###「タグを設定」をクリック
![GTM2.png](https://qiita-image-store.s3.amazonaws.com/0/40940/9840229a-919e-9c81-079f-967e8a0393ed.png "GTM2.png")

###「タグを設定」が切り替わるので、「その他の設定」をクリック
![GTM3.png](https://qiita-image-store.s3.amazonaws.com/0/40940/eba3f0a8-e585-6c0a-8257-cb492f162e49.png "GTM3.png")

###「カスタムディメンション」をクリック
![GTM4.png](https://qiita-image-store.s3.amazonaws.com/0/40940/e7cb8565-a100-380d-4ce6-c406ff3ce445.png "GTM4.png")

###「+カスタムディメンション」をクリック
![GTM5.png](https://qiita-image-store.s3.amazonaws.com/0/40940/7212dbb3-7381-a2cc-d090-641d7f9ca353.png "GTM5.png")

###番号と変数を入力
>- 「インデックス」→手順1「アナリティクス設定」で作成したカスタムディメンションのナンバー（今回は"dimension1"の1）
>- 「ディメンションの値」”新しい変数”をクリックします。

![スクリーンショット 2016-02-12 15.45.18.png](https://qiita-image-store.s3.amazonaws.com/0/40940/777348fc-f43e-080d-382d-a54d54598eeb.png)

####”新しい変数”をクリックすると、変数作成画面に行きます。
![スクリーンショット 2016-02-12 15.45.43.png](https://qiita-image-store.s3.amazonaws.com/0/40940/4088f553-1182-eb08-3711-05a693ebbdc3.png "スクリーンショット 2016-02-12 15.45.43.png")

#####※ちなみに、左メニューの「変数」からでもいけます。
![GTM7.png](https://qiita-image-store.s3.amazonaws.com/0/40940/1beffa38-606a-1601-1f74-3d623d5e04d9.png "GTM7.png")


####「データレイヤーの変数」をクリック
![GTM6.png](https://qiita-image-store.s3.amazonaws.com/0/40940/ef59bb99-239b-7ac1-b688-b3d2abb86f12.png "GTM6.png")


####変数の設定を入力
>- 「データレイヤーの変数名」に、手順2で決めた変数名「release_date」
>- 下図一番上の変数タイトルを入力（今回は”公開日”）

入力したら、保存をクリック

![スクリーンショット 2016-02-12 15.48.56.png](https://qiita-image-store.s3.amazonaws.com/0/40940/89b02939-dfa5-547a-9acb-e38cf8b83c3e.png "スクリーンショット 2016-02-12 15.48.56.png")

これで変数が入れ終わるので、インデックスとディメンションの値を入れ終わったら、「続行」と「タグを保存」する。

![GTM8.png](https://qiita-image-store.s3.amazonaws.com/0/40940/1959a28a-25ee-cad9-9dae-73b2fad0c311.png "GTM8.png")



##手順4.Googleタグマネージャでプレビューして公開
公開を押さないと、反映されないのがGoogleタグマネージャー。
（これ、基本中の基本なのに分かってなかった...）
###公開タブをクリック
![GTM9.png](https://qiita-image-store.s3.amazonaws.com/0/40940/4cdbc5c6-2e34-285d-c345-e31a2c1bfbf3.png "GTM9.png")

###プレビューをクリック
![GTM10.png](https://qiita-image-store.s3.amazonaws.com/0/40940/63063355-eaad-cfd9-50f8-31b670b66ae0.png "GTM10.png")


###同じブラウザで、計測したいサイトを開くと、下に出てきてくれます。
![GTM11.png](https://qiita-image-store.s3.amazonaws.com/0/40940/b8b53b38-1647-2de7-d718-30327274f7d7.png "GTM11.png")


###Googleタグマネージャーに戻って「今すぐ公開」！
![GTM12.png](https://qiita-image-store.s3.amazonaws.com/0/40940/55af752c-e64a-9f87-2d0b-21581c5288ef.png "GTM12.png")
（※本当はボタンが赤いです。）

##手順5.Googleアナリティクスでちゃんと取得できているかチェック
夕方か明日になれば上手く出てる...はず

###Googleアナリティクスにログイン
レポート＞行動＞サイトコンテンツ＞すべてのページ
でセカンダリディメンションで「公開日」（手順1の、アナリティクスのカスタムディメンション設定で自分が付けた名前）を設定

でたー！
![スクリーンショット 2016-02-15 13.16.17.png](https://qiita-image-store.s3.amazonaws.com/0/40940/bcc97735-cee3-5289-6fa0-c8eb8be9fce5.png)




##参考にしたサイト（その2）
[カグア！Googleアナリティクス解説Blog 「カスタムディメンションの設定～UA・GTM対応＜2015年完全版＞」](http://www.kagua.biz/help/customdimension.html)
[Google Developers「カスタム ディメンションとカスタム指標」](https://developers.google.com/analytics/devguides/collection/analyticsjs/custom-dims-mets?hl=ja)
[アナリティクス ヘルプ 「Google タグマネージャとカスタム ディメンション」](https://support.google.com/analytics/answer/6164990?hl=ja)
[Google Developers「Google Tag Manager for Web Tracking」](https://developers.google.com/tag-manager/devguide)