Googleタグマネージャの導入から確認方法

大変ご無沙汰しております。
WEBの佐野でございます。

早いもので今年も残すところごくわずか、正月休みに浮足立ちつつも年内の仕事に追われている方が多いのではないでしょうか？

そんな中、今回はGoogleタグマネージャ（以下、GTM）を初めて使ってみたので、その話をしたいと思います。
普段からGoogleアナリティクス（以下、GA）は使っていますが、よくセットで耳にするGTMが具体的にどういう事ができるのかが曖昧だったので、実際にやってみた事や感覚など共有できたらと思います。

これからGTMを導入される方や、参考程度に触ってみようかとご検討されている方々のお役に立てれば幸いです！
※GAの導入手順については割愛しています。

Googleタグマネージャとは？

GAなど、HTMLに直接記述が必要だったタグをWEB上で一元管理する為のサービスです。
新規のタグ追加やタグの削除など、今までHTMLでの修正が必要だった作業が、ブラウザから出来る様になるため、修正依頼～反映までの細々とした工程を簡略化できる様になります。

GTM導入のメリット

GTM導入にあたってのメリットをいくつか紹介します。

タグの管理が楽になる

ページ数が多いサイトだと、「どこにどのタグが設定されているか」や「資料に残しているけど最終更新されているか自信がない・・・」と言う様な状況が想定される場合でも、GTMだと、用意しているタグの状況をブラウザから見る事ができるので状況把握が簡単に行えます。

更新作業が簡単に行える

サイト更新を委託されている方にとっては、一番嬉しいメリットになるのではないでしょうか。
今までは、”修正依頼”・”ソース修正”・”動作確認”・”反映”と言う流れの中に双方の連絡時間や委託先の作業時間の確保等々、色々と時間が掛かっていた作業がWEBの担当者側で全て出来るようになるので、かなりの時間短縮が期待できます。

ページの表示速度が速くなる

今まで直接書いていたタグをGTMで管理する為、ページ読み込み時に動くJavaScriptの数が減るので、表示の速度アップが期待できます。
この速くなる仕組みは”非同期タグ”について検索してもらうとたくさん記事が出てきますので、気になる方は調べてみてください。

GTM導入のデメリット

便利なGTMですが、導入でのデメリットもあります。

GTMの導入コスト

新規サイトであれば、比較的導入しやすいとは思いますが、既存サイトとなると、恐らく全ソースに手を加える必要が出てくるため、少々大きな話になってしまいます。
ですので、サイトのリニューアルなど他の話と併せたタイミングでの導入をオススメします。

HTMLの把握が必要

担当者で作業が出来るメリットがあると言いましたが、設定したいタグに特定できるIDやClassが設定されているか把握している必要があります。
ない場合はソースの修正が必要になるため、ある程度のページの構造を理解しておいた方がいいかもしれません。

今回の試してみた事

冒頭でも触れていますが、導入から確認までの手順を書いていきます。
今回はサイト内に用意した下記２つのボタンのクリックイベントを取得することを目標にしたいと思います！

■通常のaタグ
　一般的な別ぺージへ遷移する為のリンクになります。
■JavaScriptを実行する為のaタグ
　モーダルを出力するJavaScriptを設定しており、別ページへの遷移を行いません。

Googleタグマネージャの登録

まずは下記のサイトから無料登録を行ってください。
https://www.google.com/intl/ja/analytics/tag-manager/

アカウントの作成～アカウント名～

【無料登録】を押してもらうと、下の様な画面へ進みます。

ここではアカウント登録行いますので、任意のアカウント名を入力して【続行】をクリックしてください。

アカウントの作成～コンテナの設定～

次はコンテナの設定です。
コンテナとは、GTMで管理する範囲を表す単位になります。
ぼかしを入れていますが、今回は弊社のテストサーバーのドメインを入力しています。

そして、”コンテナの使用場所”はウェブを選択して【作成】をクリックしてください。
この項目はどの環境下で閲覧されるサイトなのかを選択するものなので、実際は必要に応じて選択をお願いします。

アカウントの作成～ GTMタグの設定～

登録が完了すると、上の様なポップアップが表示されます。
表示されているコードをGTMで管理するHTMLファイルに貼り付けてください。

これでGTMの登録が完了です！

Googleタグマネージャの設定

ここからはGTMの設定を行っていきます。

変数の設定

まず、変数の設定です。
変数とは後述するトリガーの設定で使用する項目になりますが、取得したい情報を持つ入れ物の名前になります。
その変数を設定する画面が下の様な画面です。

“組み込み変数”の項目に出ている内容が現在使える変数になります。
ここに今回使う変数を追加するため、【設定】を押します。

この右に表示された一覧がGTMで用意されている変数の一覧となっており、チェックを付ける事で使える様になります。
ここではクリック項目の中の”Click ID”にチェックをつけます。

これで変数の設定は終わりです！

トリガーの設定

続いてトリガーの設定にうつります。
トリガーとは、サイト閲覧時のどのタイミングで情報を取得するかを管理する項目です。
“ページを表示した”や”一定量のスクロールが行われた”などの条件はここで設定を行います。

右のメニューから【トリガー】 > 【新規】 > 【トリガーの設定】まで進みます。

“トリガーのタイプを選択”がでてきますので、まずは上の”リンクのみ”を選びます。
JS用のトリガー設定については最後の載せています。

“リンクのみ”を選択すると、この様な設定画面がでてきますので、画像の様な設定を行ってください。

タグの配信を待つ

GTM側の処理が中断され無い様に、指定秒数の間隔を空けるオプションになります。
デフォルトが2000ミリ秒となっていますので、そのままで大丈夫かと思います。

これらすべての条件がtrueの場合にこのトリガーを有効化

このトリガーが設定されたタグ(後述)が実行される条件を設定します。
今回は特に条件もない為、GTMで管理する全てのページで実行される様に画像の様な設定を入れています。

入力が完了したら任意の名前を付けて【保存】をしてください。
通常のaタグ　：　普通のリンク
JS用のaタグ　：　モーダル用のリンク
と言う様な名前で作成しています。

こちらが、JS用に作ったトリガーの設定内容になります。
・表示された(モーダルで表示される)コンテンツのIDを指定する
・クリック数を取得する為に、起動のタイミングを”各要素が画面に表示されるたび”を選択

以上でトリガー設定の完了です！

タグの設定

GTM側、最後の設定はタグの設定です。
タグとは、どういった情報を取得するかを設定する項目になります。
イベントの対象となった要素のテキストやID、Classを取得する設定ができます。

まずは、右メニュから【タグ】 > 【新規】 > 【タグタイプを選択して設定を開始】を選びます。

タグタイプの一覧から”ユニバーサルアナリティクス”を選択。

設定項目が出てきますので、必要箇所の入力を行います。
ここで設定した内容がGAに表示されます。
今回は対象要素のIDを取得したいので、ラベルの項目に先ほど追加をした変数{{Click ID}}を設定します。
各項目横にあるアイコンをクリックすると変数の一覧がでてくるので、そこから選択してください。

そして、GAと連携させるために”このタグでオーバーライド設定を有効にする”にチェックを付けます。
トラッキングIDを入力する項目がでてきますので、そちらにUA-xxxxxxxxx-xの様なGAのIDを入力してください。

タグの設定が完了したら、トリガーの選択です。
トリガー一覧の中に、先ほど作成したトリガーが出ていますので、そちらを選択します。

最後に作成したタグに名前を付けて設定完了です！

Googleアナリティクスで確認

実際にデータが取得出てきているか見たいと思います。
確認の方法としては下記の２つがあります。

プレビューモード

確認作業は、基本的にプレビューモードで良いかと思います。
プレビューモードにすると、実行したPCでのみGTMの動作確認ができます。
発火したタグや、タグに設定されているパタメーターなどが確認できるようになります。

公開

実際に稼働させてしまう方法です。
公開してしまうと対象のサイトへアクセスがある度にイベントがとられるため、よほどの理由がない限りはプレビューモードで確認を行ってからすることをオススメします。

今回はプレビューモードで確認をしてみたいと思います！

【プレビュー】ボタンをクリックするとプレビュー中のワークスペースと大きく出てくれるので、状態がわかりやすいですね。

次に今回サンプルで用意した2つのaタグを用意したサイトです。
左が普通のリンク、右がモーダル表示を行うリンクとなっています。

画面の下側にはプレビューモードの場合のみ表示されるコンソールの様なものがでています。
ここで発火した・していないタグであったり、タグのパラメーターを確認することができます。

ちなみにモーダルはこんな感じで出る様にしています。

それぞれ、IDを載せている要素がGTMでトリガーの対象となっている要素になります。
GAに、これらのIDがイベントに表示されていれば成功です！

と言う事でクリックした結果がこちら！

GAの【リアルタイム】 > 【イベント】から設定したイベントの情報が取れているのが確認できました。

以上でGTMの導入から確認までが完了です！

使ってみた感想

ソースを触らなくてもGAのイベントを追加できるのは非常に便利だと感じました。
変数など、どこを対象にした情報を取得してくるのか最初は把握が難しく、感覚だけで導入するには少しハードルが高いかと思ったところもありますが、使ってみると案外簡単ですぐに慣れるかと思います。
開発を委託されている場合などは業務の効率化にも繋がるかと思いますので、この機会に一度GTMを試してみてはいかがでしょうか。

それでは良いお年を！