Edited at

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

More than 3 years have passed since last update.

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等で仮想ページビューを計測する必要がある場合に dataLayerpush して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