Googleタグマネージャを使ってみました

はじめまして。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の内容を変えたり、タグや変数のテンプレートを作成することも出来ます。

これからも、こういったツールを上手く使って、作業を楽にしていきたいと思っています。