Google Tag Manager の命名規則に沿って実装してみた [変数の実装編]

Google Tag Manager の命名規則を考えてみた [設計編] の記事で策定した命名規則の実践編として、今回は実際に実装した変数をいくつか紹介します。

Variable - Domain

種類を選択

定数

値

example.com

Variable - Page Title

種類を選択

カスタム JavaScript

カスタム JavaScript

/**
 * ページタイトルを返す
 *
 * @return {String}
 */
function() {
  return document.title;
}

Variable - User Agent

種類を選択

カスタム JavaScript

カスタム JavaScript

/**
 * ユーザーエージェントを返す
 *
 * @return {string}
 */
function() {
  return navigator.userAgent;
}

Variable - Click URL Hostname

種類を選択

自動イベント変数

変数タイプ

要素 URL

要素タイプ

ホスト名

「www.」を削除

真

Variable - Search Query

設定した検索結果ページのクエリパラメータを取得するために定義しています。(クエリキーはサイトに合わせて修正して下さい)
以下の設定だと http://example.com/?query=test でアクセスされた時に値として test が入ります。

種類を選択

URL

要素タイプ

クエリ

クエリキー

query

Variable - Social Action - Like

ソーシャルタグを追加する際に指定するアクションの値を定数化したものを用意しました。タグの編集ページで直接入力してもいいですが、定数にすることで、値の一括置換や補完候補に出すことができるようになり、入力間違いもなくなるので、何回も使う値に関しては定数にしています。似たようなものとして、Variable - Social Action - Fan, Variable - Social Action - Tweet もあります。

種類を選択

定数

Configure Variable

Like

Variable - Social Network - Facebook

ソーシャルタグを追加する際に指定するネットワークの値を定数化したものを用意しました。

種類を選択

定数

Configure Variable

Facebook

GA - Variable - Tracking ID - Production

本番用のトラッキングコードを定義しています。

種類を選択

定数

値

UA-12345678-9

GA - Variable - Tracking ID - Staging

ステージング環境用のトラッキングコードを GA - Variable - Tracking ID - Production と同じ要領で定義しています。

GA - Variable - Tracking ID - Develop

デベロップ環境用のトラッキングコードを GA - Variable - Tracking ID - Production と同じ要領で定義しています。

GA - Variable - Tracking ID

種類を選択

ルックアップ テーブル

ルックアップ テーブルは入力に対して、マッチしたものを出力として返すので、環境ごとのGAトラッキングコードを自動で設定されるようにしています。
例として、あるタグに設定したトラッキングコードは example.com では GA - Variable - Tracking ID - Production で定義した値が展開されて設定されて配信されます。

変数を入力

{{Page Hostname}}

ルックアップ テーブル

Input	Output
example.com	{{GA - Variable - Tracking ID - Production}}
staging.example.com	{{GA - Variable - Tracking ID - Staging}}
develop.example.com	{{GA - Variable - Tracking ID - Develop}}

GA - Variable - Virtual Page View

SPA等で仮想ページビューを計測する必要がある場合に dataLayer に push してGTMが受け取るために定義しています。ページングとかでページ遷移が発生せずにページが切り替わる場合以下のようにします。

dataLayer.push({
  virtualPageView: '/page/2'
});

種類を選択

データレイヤーの変数

データレイヤーの変数名

virtualPageView

GA - Variable - Utm Source

種類を選択

URL

要素タイプ

クエリ

クエリキー

utm_source

GA - Variable - Utm Campaign

種類を選択

URL

要素タイプ

クエリ

クエリキー

utm_campaign

GA - Variable - Utm Content

種類を選択

URL

要素タイプ

クエリ

クエリキー

utm_content

GA - Variable - Utm Medium

種類を選択

URL

要素タイプ

クエリ

クエリキー

utm_medium

GA - Variable - Utm Term

種類を選択

URL

要素タイプ

クエリ

クエリキー

utm_term