TOP2015.4.3【WEB担当初心者編】Googleアナリティクス&Googleタグマネージャー導入・設定方法シェアtweetGoogle+はてブどうも。shigeakiです。全WEB担当者にとって必須となる知識がGoogleアナリティクスですよね。サイトの運用・改善をするためにはGoogleアナリティクスの知識が必要不可欠になってきます。サイトごとによって目的は異なってくるかと思いますが、ここではまず基本的にGoogleアナリティクスの導入・設定方法について解説していきます。本記事では昨今主流となっている「Googleタグマネージャー」についても解説していきます。Googleアナリティクスのアカウントを取得するGoogleアナリティクスのアカウントを取得するためには、Googleのアカウントが必須となります。新しいGmailアドレスなどを取得してそれを専用アカウントなどで使用してみましょう。ここではGoogleアカウント取得方法については割愛しております。アカウントの作成Googleアカウント作成1、GoogleアナリティクスにログインするGoogleアナリティクスにはまず、利用するために申込みをする必要があります。以下ページからログインします。GoogleアナリティクスGoogleアナリティクス2、Googleアナリティクスに申込みをするGoogleにログインしましたら次に利用の申込みをします。2、Webサイトの情報を入力する次に解析したいウェブサイトの情報を入力していきます。上から順番に、「ウェブサイト」をクリックし、「アカウント名」を入力。「ウェブサイト名」を入力し、「ウェブサイトのURL」を入力します。次にサイトの業種をどれか1つ選択して、レポートのタイムゾーンで「日本」を選択します。あとはページ下部にある「トラッキングIDを取得」のボタンをクリックします。これでGoogleアナリティクスのアカウント開設が完了しました。トラッキングIDが取得されているのが分かるかと思います。このトラッキングコードをサイトに挿入していきます。トラッキングコード挿入について本記事ではGoogleタグマネージャーの解説も含めています。タグマネージャーを導入する場合は、ここで説明する挿入方法は行いません。一応基本知識として基本的な挿入方法について簡単に解説します。'pageview');</script>上記のようなコードを解析する全ページのHTMLファイル内に挿入します。挿入する場合は、現在ではhead要素終了タグ直前が推奨されています。</head>また挿入方法についてそのままコードを貼り付けてもいいのですが、後々トラッキングコード自体を編集・変更したりする場合、そのまま貼り付けた場合だと後の修正作業が大変になります。そのためコード自体を外部ファイルにしたり、PHPが使える環境の場合、PHPでincludeしたりします。外部ファイルにするというのは以下のようにして設定して外部ファイルとして読み込むということです。type="text/javascript"></script></head>※JSとして外部ファイルにする場合はコード前後のscriptタグを消しましょう。あらゆるタグを一元管理!GoogleタグマネージャーについてそもそもGoogleタグマネージャーってなんぞや?って人のために簡単に説明します。WEBの世界ではGoogleアナリティクスだけではなく複数のタグをHTML内に設置するケースが多いです。ページビュー計測タグ、コンバージョン計測タグ、リマーケティング広告タグなどなど、、これらタグをあっちやこっちに埋め込んだりしていると後々タグの状況が把握できなくなってきます。これらを一元管理してくれるのがGoogleタグマネージャーと呼ばれるものです。Googleタグマネージャーはトラッキングコードをまとめられる以外、以下のようなメリットがあります。イベントトラッキングがやりやすくなる複数のドメインからのトラッキングがやりやすくなるCookieの発行や読み取りが行える他にも多々メリットがあります。Googleタグマネージャー以外にも同様な「yahoo!タグマネージャー」というものもあります。ここではGoogleアナリティクス導入が目的なのでGoogleタグマネージャーの解説となります。Googleタグマネージャー導入方法それではGoogleタグマネージャーの導入方法について解説していきます。1、Googleタグマネージャーのアカウントを開設する以下サイトにアクセスし、グーグルアカウントでログインします。GoogleタグマネージャーGoogleタグマネージャーログイン画面アカウントを作成する任意のアカウント名を入力し、続行をクリックします。コンテナを作成する「作成」をクリックします。利用規約に同意します。以下のようにタグマネージャーのスニペットが表示されます。これでアカウントが開設されました。「OK」をクリックしてください。こちらで表示されたコードを全ページのHTMLに挿入していきます。管理画面は以下のようになります。スニペットを確認する場合は、以下のID部分をクリックすることで確認できます。このタグをbody開始タグの直後に挿入します。ちなみにこのコンテナスニペットは、一度挿入すれば基本的に変更する必要がありません。そのため外部ファイルとして読み込まず、そのまま直接コピペでHTMLに貼り付けても後々問題にはならないかと思います。ここまでタグマネージャーの設定を行ってきましたが、タグマネージャーとアナリティクス自体は別物なので、両者を関連付けてあげる必要があります。GoogleタグマネージャーにGoogleアナリティクスのタグを追加するタグを挿入するGoogleアナリティクスに限らず、Googleタグマネージャーではあらゆるタグを一元管理できます。ここではタグの追加でGoogleアナリティクスを用いて解説しています。新しいタグを追加するタグの作成画面を開きます。プロダクトを選択するプロダクトの中からGoogleアナリティクスを選択し、以下のようにタグに合った任意の名前を入力します。「続行」をクリックします。タグの種類を選択するここでは「ユニバーサルアナリティクス」を選択するようにしましょう。※Googleアナリティクスは2014年4月に「ユニバーサルアナリティクス」といった新しいバージョンに移行されました。従来のトラッキングコードをそのまま用いている場合は、2016年4月移行に解析できなくなるらしいので注意しましょう。タグを設定するGoogleアナリティクスのトラッキングIDを入力します。「ディスプレイ広告向け機能を有効にする」にチェックをし、トラッキングタイプを選択します。「続行」をクリックします。配信するタイミングを選択する「すべてのページ」を選択します。これでタグの追加が完了しました!タグマネージャーのコンテナスニペットをHTMLに挿入しても、このようにしてタグを追加しないとタグマネージャーの中身は空なので意味がありません。変更・追加したタグを公開するGoogleタグマネージャーに登録したタグを公開しましょう。以下部分で公開します。※タグによってはブラウザでの表示が崩れる可能性があります。一度「プレビュー」ボタンをクリックし、ブラウザで確認したほうが良いと思います。プレビューモードでは自分のブラウザでしか確認することができませんが、画面上部の「バージョン」→「アクション」→「プレビューの共有」をクリックするとプレビュー用のリンクを取得できます。こちらを共有することで複数人でのデバッグ作業が可能となります。デバッグ作業を終え問題なければ「公開する」ブラウザで確認し、表示の崩れ等がないことを確認しましたらタグを公開します。これでひと通り基本的な作業は終了となります。できることが多いので、WEB担当者の方は大変かと思いますが、取りあえず重要な部分だけでも覚えて、しっかりと目標を設定しサイトを改善していくことが重要かと思います。最近アクセスの多い記事Illustrator不要。ネタ、下ネタ...何でも書きます。きなもの、映画、ラーメン、寝ること。高木りさデザイナー/ライター。WEBデザインに関する記事を書いてます。