こんにちは。
アメーバ統括本部でウェブアナリストをしている枝川です。
アメブロにGoogle タグマネージャを実装をしてみて、特に気に入った機能や設定をGoogle Analyticsとの連携に絞って紹介させていただきます。
サイト上の管理画面から簡単に変更を加える事もできるので、HTMLやJavaScriptなどのコード修正とリリース作業が軽減されます。
より詳しく知りたい方は、「Google タグマネージャ ヘルプセンター」をご確認ください。
変数にGoogle AnalyticsのトラッキングIDを保存します。
仮にトラッキングIDを変更することになっても、この変数のみを変更するだけで済むのがメリットです。
全ファイルからGoogle AnalyticsのトラッキングIDを検索・置換、大量のファイルのレビューが必要なくなり、作業工数の大幅削減につながります。
2.ルックアップ テーブルで条件によって値を変える
条件によって値を出し分けした変数を作ることができます。
サブドメインによって、トラッキングIDを変える。ということも可能になります。
これはかなりお気に入りです。
■{{Page Hostname}}によって、トラッキングIDを出し分けするサンプル
種類：ルックアップ テーブル
変数：{{Page Hostname}}
入力1：ameblo.jp
出力1：UA-11111111-1
入力2：s.ameblo.jp
出力2：UA-22222222-2
入力3：official.ameba.jp
出力3：UA-33333333-3
3.JavaScriptが管理画面で使えちゃう
カスタム JavaScriptは、JavaScriptで取得できる値を変数に保存することができます。
ユーザーエージェント情報を変数に保存して、ページビューのセカンダリディメンションとして計測することもできます。
■ユーザーエージェントを取得するサンプルコード
※functionを使って、returnで値を返す必要があります。
4.とりあえずdataLayerに
Google タグマネージャの管理画面だけでは取得できないデータは、グローバル変数のdataLayerという名前の配列にpushします。
ページの特定位置までスクロールしたときに、イベントを発火させたいときなどはdataLayerに必要な情報を送らなければなりません。
Google Analyticsのイベント以外にも、カスタムディメンションなどにページやユーザーに関する属性情報を付与したい場合も、dataLayerへ値を送って管理画面で設定することも可能です。
■イベントを取得するサンプルコード
5.sampleRateもできる
Google Analyticsだけでは、該当ファイルのトラッキング コードにsampleRateをセットしなければいけませんでしたが、Google タグマネージャなら管理画面の設定だけでできます。
頻繁にsampleRateの値を変えることは望ましくないと思いますが、PV数の大幅な増減があっても、迅速に対応することができます。
■トラッキング対象ユーザーの割合を80%に設定
タグ＞その他の設定＞設定するフィールド
フィールド名：sampleRate
値：80
6.デバッグが強力
Google タグマネージャの変更を本番に公開する前に、プレビュー（動作確認）は必須です。
初めにプレビューボタンを押し、変更内容を反映するために更新のテキストを押すと本番公開する前に、ブラウザ上で動作確認をすることができます。
デバッグ画面一番左のSummaryで、Pageviewやgtm.click（クリック）の適用状況が確認できます。
Tagsは、ページビューやイベントが計測できているかが確認できます。計測できている場合は、「Tags Fired On This Event:」に管理画面のタグで作成した内容が配置されています。
逆に計測ができていないタグは、「Tags Not Fired On This Event:」に配置されます。
計測できてないタグをクリックして詳細をみると、どこが条件と合致せずに計測できていないかが分かります。
赤いバツになっているところが計測の条件に合致しなかったところです。
Variableで、変数にどのような値が入っているか、Data Layerで、dataLayerの中に何が入っているかが確認できます。
これらを駆使して、どこの設定が間違っていて計測できていないかをデバッグすることができます。
確認して、問題がないようであれば公開しましょう。
7.Google タグマネージャの拡張機能も使える
Google Chromeをお使いの方なら、Tag AssistantとGTM Sonarという拡張機能がオススメです。
Tag Assistantは、どんなタグが実装されているかがわかり、簡単なコーディングミスを検知してくれたりします。
GTM Sonarは、gtm.linkClick（a要素のクリック）をデバッグしたいときに使えます。
Link Click Listenerにチェックを入れて、Switch Onにすると、a要素をクリックしてもページ遷移がしなくなり、リンククリックのイベントをデバッグできるようになります。
Google タグマネージャの導入を検討している方に、少しでもお役に立てたのであれば幸いです。
素敵なGoogle タグマネージャライフを。
アメーバ統括本部でウェブアナリストをしている枝川です。
アメブロにGoogle タグマネージャを実装をしてみて、特に気に入った機能や設定をGoogle Analyticsとの連携に絞って紹介させていただきます。
Google タグマネージャとは？
Google AnalyticsやGoogle AdWordsなど、さまざまなツールのタグを一元管理することができます。サイト上の管理画面から簡単に変更を加える事もできるので、HTMLやJavaScriptなどのコード修正とリリース作業が軽減されます。
より詳しく知りたい方は、「Google タグマネージャ ヘルプセンター」をご確認ください。
お気に入り機能紹介
1.変数でトラッキングIDを管理する変数にGoogle AnalyticsのトラッキングIDを保存します。
仮にトラッキングIDを変更することになっても、この変数のみを変更するだけで済むのがメリットです。
全ファイルからGoogle AnalyticsのトラッキングIDを検索・置換、大量のファイルのレビューが必要なくなり、作業工数の大幅削減につながります。
2.ルックアップ テーブルで条件によって値を変える
条件によって値を出し分けした変数を作ることができます。
サブドメインによって、トラッキングIDを変える。ということも可能になります。
これはかなりお気に入りです。
■{{Page Hostname}}によって、トラッキングIDを出し分けするサンプル
種類：ルックアップ テーブル
変数：{{Page Hostname}}
入力1：ameblo.jp
出力1：UA-11111111-1
入力2：s.ameblo.jp
出力2：UA-22222222-2
入力3：official.ameba.jp
出力3：UA-33333333-3
3.JavaScriptが管理画面で使えちゃう
カスタム JavaScriptは、JavaScriptで取得できる値を変数に保存することができます。
ユーザーエージェント情報を変数に保存して、ページビューのセカンダリディメンションとして計測することもできます。
■ユーザーエージェントを取得するサンプルコード
function() {
var ua = navigator.userAgent;
return ua;
}
4.とりあえずdataLayerに
Google タグマネージャの管理画面だけでは取得できないデータは、グローバル変数のdataLayerという名前の配列にpushします。
ページの特定位置までスクロールしたときに、イベントを発火させたいときなどはdataLayerに必要な情報を送らなければなりません。
Google Analyticsのイベント以外にも、カスタムディメンションなどにページやユーザーに関する属性情報を付与したい場合も、dataLayerへ値を送って管理画面で設定することも可能です。
■イベントを取得するサンプルコード
dataLayer.push({
'event': 'analyticsEvent',
'eventCategory': analyticsCategory,
'eventAction': analyticsAction,
'eventLabel': analyticsLabel
});
5.sampleRateもできる
Google Analyticsだけでは、該当ファイルのトラッキング コードにsampleRateをセットしなければいけませんでしたが、Google タグマネージャなら管理画面の設定だけでできます。
頻繁にsampleRateの値を変えることは望ましくないと思いますが、PV数の大幅な増減があっても、迅速に対応することができます。
■トラッキング対象ユーザーの割合を80%に設定
タグ＞その他の設定＞設定するフィールド
フィールド名：sampleRate
値：80
6.デバッグが強力
Google タグマネージャの変更を本番に公開する前に、プレビュー（動作確認）は必須です。
初めにプレビューボタンを押し、変更内容を反映するために更新のテキストを押すと本番公開する前に、ブラウザ上で動作確認をすることができます。
デバッグ画面一番左のSummaryで、Pageviewやgtm.click（クリック）の適用状況が確認できます。
Tagsは、ページビューやイベントが計測できているかが確認できます。計測できている場合は、「Tags Fired On This Event:」に管理画面のタグで作成した内容が配置されています。
逆に計測ができていないタグは、「Tags Not Fired On This Event:」に配置されます。
計測できてないタグをクリックして詳細をみると、どこが条件と合致せずに計測できていないかが分かります。
赤いバツになっているところが計測の条件に合致しなかったところです。
Variableで、変数にどのような値が入っているか、Data Layerで、dataLayerの中に何が入っているかが確認できます。
これらを駆使して、どこの設定が間違っていて計測できていないかをデバッグすることができます。
確認して、問題がないようであれば公開しましょう。
7.Google タグマネージャの拡張機能も使える
Google Chromeをお使いの方なら、Tag AssistantとGTM Sonarという拡張機能がオススメです。
Tag Assistantは、どんなタグが実装されているかがわかり、簡単なコーディングミスを検知してくれたりします。
GTM Sonarは、gtm.linkClick（a要素のクリック）をデバッグしたいときに使えます。
Link Click Listenerにチェックを入れて、Switch Onにすると、a要素をクリックしてもページ遷移がしなくなり、リンククリックのイベントをデバッグできるようになります。
最後に注意点
イベントをたくさん計測しようとすると、タグ・トリガー・変数それぞれが乱雑になりがちです。しっかり整理するためにも、うまくフォルダを活用しましょう。Google タグマネージャの導入を検討している方に、少しでもお役に立てたのであれば幸いです。
素敵なGoogle タグマネージャライフを。