はじめまして。Webサービス開発グループの2019年度新入社員の村松です。
みなさんは、Googleタグマネージャーを知っていますか？
私はつい最近まで知りませんでした。ですが、使ってみると便利なツールだったので、今回はWebアクセス計測のタグをGoogleタグマネージャを使って、配信を行うやり方について書きたいと思います。
Googleタグマネージャーとは
タグマネージャーはWebページのアクセス計測タグなどのタグを一括管理するツールです。
通常、利用したいタグを対象のWebページのHTMLごとに埋め込みます。その時に、埋め込むべき対象のWebページが多いと大変です。そこで、タグマネージャーのタグをWebページのHTMLに埋め込み、利用したいタグをタグマネージャーに追加することで、タグを利用したいページに配信することが出来ます。
Googleタグマネージャーはタグマネージャーツールの一つで、無料で利用でき、Googleアナリティクスなどが連携しやすいです。他にはYahoo!タグマネージャー、Adobe Dynamic Tag Managementがあります。
アカウント
アカウントは会社や部署、グループなどの組織ごとに追加し、コンテナを保持します。
コンテナ
コンテナはドメインやサービスごとに作成し、タグや変数、トリガーなどタグ配信の設定を保持します。
コンテナには
- ワークスペース
- タグ
- トリガー
- 変数
といった主な機能があります。
ワークスペース
ワークスペースは3つ作成することができ、コンテナの変更が記録されます。ワークスペースの変更内容は公開すると全て反映されます。そのため、複数人での変更や複数の機能の追加の際は、ワークスペースを分けて作業を行うと他の作業の完成を待つことなく、変更を公開することが出来ます。
タグ
Webページに追加したいタグを追加することが出来ます。タグによってGoogleタグマネージャーが対応しているタグ、対応していないタグではカスタムHTMLでタグを追加することが出来ます。
トリガー
トリガーはタグを配信する条件を設定できます。特定のページを見たとき、ボタンをクリックしたときなど様々な条件を設定できます。
変数
変数ではWebページから取得したcookieやDOM要素や何度も使う文字列などを設定することが出来ます。
初期設定
GoogleタグマネージャーはGoogleアカウントでログインすることが出来ます。ログイン後にまずはアカウントとコンテナの作成を行います。
アカウントとコンテナ追加
アカウント名(Sample)の入力と国(日本)を選びます。
続いて、コンテナ名(example.com)の入力とターゲットプラットフォーム(ウェブ)を選びます。
作成を押すとアカウントとコンテナが追加されます。
Googleタグマネージャータグの埋め込み
アカウントとコンテナを追加するとWebページのHTMLに埋め込むGoogleタグマネージャーのタグが作成されます。タグには2種類存在し、<head>タグに埋め込むタグとJavaScriptが動かない環境用の<body>タグに埋め込むタグです。タグはプレビューボタンの左のコンテナIDを押すと取得できます。
タグの追加
変数の追加
ここではGoogleアナリティクスを利用するので、タグを追加する前にまず、変数をGoogleアナリティクスのトラッキングIDを変数として追加します。
変数の追加でGoogleアナリティクス設定を選び、トラッキングIDと変数名を入力し保存します。
タグの追加
続いて、タグを追加します。
タグの追加でGoogleアナリティクス – ユニバーサル アナリティクスを選びます。トラッキングタイプ(ページビュー)、Googleアナリティクス設定で先ほど作成した変数を選び、設定します。
トリガーではページビューを選び、タグ名を入力し、保存します。
プレビューと公開
プレビュー
プレビューを使うことで公開前のテストを行う事ができます。プレビューはプレビューをしたブラウザだけで、編集しているワークスペースの変更を適用することが出来ます。
公開
公開ではバージョン名を設定し、公開します。
公開した後に不具合があった場合に、前のバージョンに戻すことも可能です。
これでサイトのWebページアクセス数をGoogleアナリティクスで確認できるようになりました。
おわりに
今回紹介した機能はGoogleタグマネージャーの初歩の機能でまだまだ、様々な機能があります。例えば、JavaScriptを追加して、条件に応じてHTMLの内容を変えたり、タグや変数のテンプレートを作成することも出来ます。
これからも、こういったツールを上手く使って、作業を楽にしていきたいと思っています。
