ご無沙汰しております。WEBの佐野でございます。早いもので今年も残すところごくわずか、正月休みに浮足立ちつつも年内の仕事に追われている方が多いのではないでしょうか?そんな中、今回はGoogleタグマネージャ(以下、GTM)を初めて使ってみたので、その話をしたいと思います。普段からGoogleアナリティクス(以下、GA)は使っていますが、よくセットで耳にするGTMが具体的にどういう事ができるのかが曖昧だったので、実際にやってみた事や感覚など共有できたらと思います。これからGTMを導入される方や、参考程度に触ってみようかとご検討されている方々のお役に立てれば幸いです!※GAの導入手順については割愛しています。使ってみた感想Googleタグマネージャとは?GAなど、HTMLに直接記述が必要だったタグをWEB上で一元管理する為のサービスです。新規のタグ追加やタグの削除など、今までHTMLでの修正が必要だった作業が、ブラウザから出来る様になるため、修正依頼~反映までの細々とした工程を簡略化できる様になります。GTM導入のメリットGTM導入にあたってのメリットをいくつか紹介します。タグの管理が楽になるページ数が多いサイトだと、「どこにどのタグが設定されているか」や「資料に残しているけど最終更新されているか自信がない・・・」と言う様な状況が想定される場合でも、GTMだと、用意しているタグの状況をブラウザから見る事ができるので状況把握が簡単に行えます。更新作業が簡単に行えるサイト更新を委託されている方にとっては、一番嬉しいメリットになるのではないでしょうか。今までは、”修正依頼”・”ソース修正”・”動作確認”・”反映”と言う流れの中に双方の連絡時間や委託先の作業時間の確保等々、色々と時間が掛かっていた作業がWEBの担当者側で全て出来るようになるので、かなりの時間短縮が期待できます。ページの表示速度が速くなる今まで直接書いていたタグをGTMで管理する為、ページ読み込み時に動くJavaScriptの数が減るので、表示の速度アップが期待できます。この速くなる仕組みは”非同期タグ”について検索してもらうとたくさん記事が出てきますので、気になる方は調べてみてください。GTM導入のデメリット便利なGTMですが、導入でのデメリットもあります。GTMの導入コスト新規サイトであれば、比較的導入しやすいとは思いますが、既存サイトとなると、恐らく全ソースに手を加える必要が出てくるため、少々大きな話になってしまいます。サイトのリニューアルなど他の話と併せたタイミングでの導入をオススメします。担当者で作業が出来るメリットがあると言いましたが、設定したいタグに特定できるIDやClassが設定されているか把握している必要があります。ない場合はソースの修正が必要になるため、ある程度のページの構造を理解しておいた方がいいかもしれません。冒頭でも触れていますが、導入から確認までの手順を書いていきます。今回はサイト内に用意した下記2つのボタンのクリックイベントを取得することを目標にしたいと思います!■通常のaタグ一般的な別ぺージへ遷移する為のリンクになります。■JavaScriptを実行する為のaタグモーダルを出力するJavaScriptを設定しており、別ページへの遷移を行いません。Googleタグマネージャの登録まずは下記のサイトから無料登録を行ってください。https://www.google.com/intl/ja/analytics/tag-manager/アカウントの作成~アカウント名~【無料登録】を押してもらうと、下の様な画面へ進みます。ここではアカウント登録行いますので、任意のアカウント名を入力して【続行】をクリックしてください。~次はコンテナの設定です。コンテナとは、GTMで管理する範囲を表す単位になります。ぼかしを入れていますが、今回は弊社のテストサーバーのドメインを入力しています。”コンテナの使用場所”はウェブを選択して【作成】をクリックしてください。この項目はどの環境下で閲覧されるサイトなのかを選択するものなので、実際は必要に応じて選択をお願いします。~登録が完了すると、上の様なポップアップが表示されます。表示されているコードをGTMで管理するHTMLファイルに貼り付けてください。これでGTMの登録が完了です!Googleタグマネージャの設定ここからはGTMの設定を行っていきます。変数の設定まず、変数の設定です。変数とは後述するトリガーの設定で使用する項目になりますが、取得したい情報を持つ入れ物の名前になります。その変数を設定する画面が下の様な画面です。“組み込み変数”の項目に出ている内容が現在使える変数になります。ここに今回使う変数を追加するため、【設定】を押します。この右に表示された一覧がGTMで用意されている変数の一覧となっており、チェックを付ける事で使える様になります。ID”にチェックをつけます。続いてトリガーの設定にうつります。トリガーとは、サイト閲覧時のどのタイミングで情報を取得するかを管理する項目です。“ページを表示した”や”一定量のスクロールが行われた”などの条件はここで設定を行います。【トリガーの設定】まで進みます。“トリガーのタイプを選択”がでてきますので、まずは上の”リンクのみ”を選びます。JS用のトリガー設定については最後の載せています。“リンクのみ”を選択すると、この様な設定画面がでてきますので、画像の様な設定を行ってください。タグの配信を待つGTM側の処理が中断され無い様に、指定秒数の間隔を空けるオプションになります。デフォルトが2000ミリ秒となっていますので、そのままで大丈夫かと思います。これらすべての条件がtrueの場合にこのトリガーを有効化このトリガーが設定されたタグ(後述)が実行される条件を設定します。今回は特に条件もない為、GTMで管理する全てのページで実行される様に画像の様な設定を入れています。入力が完了したら任意の名前を付けて【保存】をしてください。モーダル用のリンクと言う様な名前で作成しています。こちらが、JS用に作ったトリガーの設定内容になります。以上でトリガー設定の完了です!タグの設定GTM側、最後の設定はタグの設定です。タグとは、どういった情報を取得するかを設定する項目になります。イベントの対象となった要素のテキストやID、Classを取得する設定ができます。【タグタイプを選択して設定を開始】を選びます。タグタイプの一覧から”ユニバーサルアナリティクス”を選択。設定項目が出てきますので、必要箇所の入力を行います。ここで設定した内容がGAに表示されます。ID}}を設定します。各項目横にあるアイコンをクリックすると変数の一覧がでてくるので、そこから選択してください。GAと連携させるために”このタグでオーバーライド設定を有効にする”にチェックを付けます。トラッキングIDを入力する項目がでてきますので、そちらにUA-xxxxxxxxx-xの様なGAのIDを入力してください。タグの設定が完了したら、トリガーの選択です。トリガー一覧の中に、先ほど作成したトリガーが出ていますので、そちらを選択します。実際にデータが取得出てきているか見たいと思います。確認の方法としては下記の2つがあります。プレビューモード確認作業は、基本的にプレビューモードで良いかと思います。プレビューモードにすると、実行したPCでのみGTMの動作確認ができます。発火したタグや、タグに設定されているパタメーターなどが確認できるようになります。実際に稼働させてしまう方法です。公開してしまうと対象のサイトへアクセスがある度にイベントがとられるため、よほどの理由がない限りはプレビューモードで確認を行ってからすることをオススメします。今回はプレビューモードで確認をしてみたいと思います!【プレビュー】ボタンをクリックするとプレビュー中のワークスペースと大きく出てくれるので、状態がわかりやすいですね。次に今回サンプルで用意した2つのaタグを用意したサイトです。左が普通のリンク、右がモーダル表示を行うリンクとなっています。画面の下側にはプレビューモードの場合のみ表示されるコンソールの様なものがでています。ここで発火した・していないタグであったり、タグのパラメーターを確認することができます。ちなみにモーダルはこんな感じで出る様にしています。それぞれ、IDを載せている要素がGTMでトリガーの対象となっている要素になります。【イベント】から設定したイベントの情報が取れているのが確認できました。以上でGTMの導入から確認までが完了です!使ってみた感想ソースを触らなくてもGAのイベントを追加できるのは非常に便利だと感じました。変数など、どこを対象にした情報を取得してくるのか最初は把握が難しく、感覚だけで導入するには少しハードルが高いかと思ったところもありますが、使ってみると案外簡単ですぐに慣れるかと思います。開発を委託されている場合などは業務の効率化にも繋がるかと思いますので、この機会に一度GTMを試してみてはいかがでしょうか。~2019~ピックアップPHPExcelでファイル作成から値の取得2018/3/22【ゲームプランナー】企画書を作る工程や...2018/8/8メニューを閉じるCONTACTゲーム開発、Webサイト制作に関するご相談等ございましたら、お気軽にお問い合わせください。