Google Tag Manager を用いて Google Analytics を導入する手順をなるべく丁寧に説明する

　初級者の方が（私もまだまだ使い始めたばかりなのですが、、）簡単に Google Analytics を Google Tag Manager を用いて導入できるように、手順をまとめようと思います。この記事は Google Analytics Advent Calendar 2017 - Qiita の2日目分として投稿させていただきます。

はじめに

Google Analytics とは

　Google Analytics (GA)は、サイトへの流入数やサイト内での行動をトラッキングするツールです。どのページで利用者が離脱しているかなどを分析し、より良いサイトを作るための材料にします。

　GAはタグというJavascriptコードをページに挿入し、ページがロードされたときに情報をサーバに飛ばすことでトラッキングを実現します。

Google Tag Manager とは

　GA以外にも各社さまざまなトラッキングツールを提供しています。それらを併用する場合は、サイトのコンテンツにいくつものコードを埋め込む必要があり、やや煩雑になってしまいます。

　また、埋め込んだコードを増やしたり、修正したりする場合、プログラムに直接タグを埋め込んでいる場合は、プログラムのリリース作業をしなくてはなりません。現場では分析をする役割の方がこの変更をしたいと思うことが多いはずですが、その都度プログラマの方にリリースをお願いするのは大変です。

　そこで、このようなタグを管理するツールとして Google Tag Manager（以下、GTM）があります。GTM用のコードをプログラムに貼り付けておけば、そのGAなどのトラッキング用のコードはGUI上でGTMに紐付けるだけでよくなるため、GUIで簡単にタグの修正作業を行うことが可能になります。

設定手順

　　では、設定作業を始めていきます。今回は、先日投稿した記事で作成した静的コンテンツに対して、GA、GTMの設定をする例を取り上げたいと思います。

www.ketancho.net

GA設定

　まずはじめにGAの設定をおこないます。GA画面に遷移し、「プロパティ」列から新たにプロパティを作成します。

f:id:ketancho_jp:20171209103824p:plain

すると次のようなプロパティの設定画面になりますので、必要な項目を入力してください。

f:id:ketancho_jp:20171209103829p:plain

プロパティの入力が終わると、GAのトラッキングIDを手に入れることができます。こちらは後ほど必要になりますので、IDだけコピーしておいてください。

f:id:ketancho_jp:20171211074047p:plain

GTMの設定

　続いてGTMの設定です。下記の画面から「アカウントを作成」リンクを押下し、アカウントを作成します。

f:id:ketancho_jp:20171209103912p:plain

アカウント名、コンテナ名は任意のものを付けていただいて構いません。「コンテナの設置場所」については、各サイトの用途に応じて選択してください。ここでは「Web」を選択します。 f:id:ketancho_jp:20171209103917p:plain f:id:ketancho_jp:20171209103922p:plain

　アカウントを作成できたら、下記のようなコードが表示されます。このコードは最後にプログラム側に貼り付けますので、控えておいてください。

f:id:ketancho_jp:20180508131324p:plain

　その後、下記のようなタグを管理する画面に遷移するので、ここにGA用のタグを設定していきたいと思います。タグの「新規」ボタンをクリックしてください。

f:id:ketancho_jp:20171211074622p:plain

すると下記の画面になりますので、左上に適当な名前をつけていただき、タグの設定エリアをクリックします。

f:id:ketancho_jp:20171211074837p:plain

タグの種類を選択する画面になりますが、ここでは「ユニバーサルアナリティクス」を選択します。

f:id:ketancho_jp:20171211074953p:plain

トラッキングタイプはデフォルトの「ページビュー」のままで構いません。Googleアナリティクス設定の方は、新たに変数を作ってください。 f:id:ketancho_jp:20171211075102p:plain

下記のような変数を作る画面になりますので、先ほどGAの画面で作成したトラッキングIDを追加して保存してください。

f:id:ketancho_jp:20171211075336p:plain

最後にトリガーを設定します。全てのページを対象としてしまってかまわないので、All Pages を選択します。（ここでトリガ条件を詳細に絞り込むことも可能です。）

f:id:ketancho_jp:20171211075442p:plain

このような形になりましたでしょうか。

f:id:ketancho_jp:20171209103948p:plain

　そしてここまでの設定を公開します。右上の「公開」ボタンから設定をリリースします。

f:id:ketancho_jp:20171211075957p:plain

　最後に、html ファイル側に GTM のコードを埋め込みます。ルートになるファイル（ index.html など）の <head> 要素に GTM コードを挿入してください。例えばこんな形になります。

<!DOCTYPE html>
<html>
  <head>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-*******');</script>
    <!-- End Google Tag Manager -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>arbitraweb</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  </body>
</html>

以上で、GTM 関連の作業が完了です。

動作確認

　動作確認は、GAの画面から行います。リアルタイム > 概要と遷移していただくことで、今サイトに訪問しているユーザの数を見ることができます。自信のサイトにアクセスしていただき、下記のように利用者数に変化があれば上手くトラッキングできていることになります。 f:id:ketancho_jp:20171209103952p:plain

まとめ

　Google Tag Manager を使って Google Analytics を導入する手順を整理しました。先日Webサイトをリリースした友人に、とりあえず簡単にできるからトラッキングしといた方がいいよー、と言ったものの、手順が詳細に書かれているものがなかったので、なるべく丁寧に書いたつもりです。手順が飛んでしまっている部分などがあれば遠慮なくご連絡ください。