GoogleTagManagerでGoogleAnalyticsのトラッキングをたたく場合、
特定の変数をクエリパラメータに埋め込みたいという要望があるかと思います。
そんなときに便利なレイヤー変数の導入方法について、簡単にまとめてみたのでメモしておきます。
GTM側の設定
コンテナを選択
Google タグマネージャ公式サイト からログインし、自分のアカウントにアクセスしてください。
ここでは、GTMのバージョン2の管理画面で説明していきます。
上部タブからコンテナを選択します。
レイヤー変数の定義
レイヤー変数として扱う変数を定義します。
左側のペインから変数
をクリック
ここで、変数名は自由につけられます。(今回はdltest
としました)
続いて種類を選択
からデーターレイヤーの変数
を選択
データレイヤーの変数名
を設定(今回はdltest
としました)
データレイヤーのバージョンですが、今回はシンプルなバージョン1を使います。
タグ名は自由に設定できます。(dltest
としました)
最後に変数を作成
をクリックしてください。
これで変数の定義はできました。あとは使うだけです。
データレイヤー変数をタグから使用する
ゼロからタグを作成します。
左側のペインから`タグを選択。
右側のペインから新規をクリック。
タグ名は自由につけられます。(今回はGA_TESTとしました)
今回はGoogle Analytics(ユニバーサルアナリティクス)を使うので、以下のように選択。
1.Google Analytics を選択
2.ユニバーサルアナリティクスを選択
続いて測定したいGAのトラッキングコードを貼付けます。
PV計測をしたいので、トラッキングタイプはページタイプにします。
こんな感じになるかと思います。
その他の設定、設定するフィールドと順に開き、+フィールド
と書かれているボタンをクリックします。すると以下のような画面になったかと思います。
ここで、フィールド名には送信したいクエリパラメータのkeyを指定、値にはvalueを指定します。
フィールドパラメータの先頭には&を付加してください。でないとうまく計測されません。
さて、ここで送信するvalueに、先ほど定義したレイヤー変数を使いたいので、
値の右の +ボタンをクリックし、出てくるモーダルから先ほど定義した変数名を選択します。すると以下のようになります。
今回はページロード時にトラッキングを送信するので、すべてのページ
を選択します。
最後にタグの作成
をクリック。これでGTM側の設定は終了です。
作成したタグは右上の公開
ボタンから公開しましょう。
注)SPA(Single Page Application)などの場合、すべてのページ( All Pages)
ではファーストランディング時しかトラッキングされません。この場合は自分でトリガーを設定して任意のイベント時にトラッキングするように設定が必要です。
ソース側の設定
dataLayerにpushする時にパラメータを追加します。
トラッキングを行うページに以下のようなタグを設定します。
注)GTMワンタグよりも前に宣言してください。
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'dltest': 'hogehoge'
});
</script>
これでdataLayerに値がpushされます。
確認
ページリロード時に、以下のようなリクエストが飛んでいれば成功です。
http://www.google-analytics.com/collect?...&dltest=hogehoge...
レイヤー変数の値さえ送ってしまえば、GTMの設定次第で、計測するパラメータを変更できるので、色々試してみると良いと思います。