2015.4.3

【WEB担当初心者編】Googleアナリティクス&Googleタグマネージャー導入・設定方法

どうも。shigeakiです。
全WEB担当者にとって必須となる知識がGoogleアナリティクスですよね。
サイトの運用・改善をするためにはGoogleアナリティクスの知識が必要不可欠になってきます。

サイトごとによって目的は異なってくるかと思いますが、ここではまず基本的にGoogleアナリティクスの導入・設定方法について解説していきます。
また、本記事では昨今主流となっている「Googleタグマネージャー」についても解説していきます。

Googleアナリティクスのアカウントを取得する

Googleアナリティクスのアカウントを取得するためには、Googleのアカウントが必須となります。
新しいGmailアドレスなどを取得してそれを専用アカウントなどで使用してみましょう。

ここではGoogleアカウント取得方法については割愛しております。

Google アカウントの作成

1、Googleアナリティクスにログインする

Googleアナリティクスにはまず、利用するために申込みをする必要があります。
まずは以下ページからログインします。

Googleアナリティクス

Google_2739798

2、Googleアナリティクスに申込みをする

Googleにログインしましたら次に利用の申込みをします。

Google_Analytics_5

2、Webサイトの情報を入力する

次に解析したいウェブサイトの情報を入力していきます。

Google_Analytics _6

上から順番に、「ウェブサイト」をクリックし、「アカウント名」を入力。
「ウェブサイト名」を入力し、「ウェブサイトのURL」を入力します。

次にサイトの業種をどれか1つ選択して、レポートのタイムゾーンで「日本」を選択します。
あとはページ下部にある「トラッキングIDを取得」のボタンをクリックします。

これでGoogleアナリティクスのアカウント開設が完了しました。

トラッキングIDが取得されているのが分かるかと思います。

Google_Analytics7

このトラッキングコードをサイトに挿入していきます。

トラッキングコード挿入について

本記事ではGoogleタグマネージャーの解説も含めています。
タグマネージャーを導入する場合は、ここで説明する挿入方法は行いません。
一応基本知識として基本的な挿入方法について簡単に解説します。

トラッキングコードを解析する全ページに挿入する

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXX-1', 'auto');
  ga('send', 'pageview');

</script>

上記のようなコードを解析する全ページのHTMLファイル内に挿入します。
挿入する場合は、現在ではhead要素終了タグ直前が推奨されています。

</head>

また挿入方法についてそのままコードを貼り付けてもいいのですが、後々トラッキングコード自体を編集・変更したりする場合、そのまま貼り付けた場合だと後の修正作業が大変になります。
そのためコード自体を外部ファイルにしたり、PHPが使える環境の場合、PHPでincludeしたりします。

外部ファイルにするというのは以下のようにして設定して外部ファイルとして読み込むということです。

<script src="/js/ga.js" type="text/javascript"></script>
</head>

※JSとして外部ファイルにする場合はコード前後のscriptタグを消しましょう。

あらゆるタグを一元管理!Googleタグマネージャーについて

そもそもGoogleタグマネージャーってなんぞや?って人のために簡単に説明します。

WEBの世界ではGoogleアナリティクスだけではなく複数のタグをHTML内に設置するケースが多いです。
例えばページビュー計測タグ、コンバージョン計測タグ、リマーケティング広告タグなどなど、、
これらタグをあっちやこっちに埋め込んだりしていると後々タグの状況が把握できなくなってきます。

Analytics1

これらを一元管理してくれるのがGoogleタグマネージャーと呼ばれるものです。

Googleタグマネージャーはトラッキングコードをまとめられる以外、以下のようなメリットがあります。

  • イベントトラッキングがやりやすくなる
  • 複数のドメインからのトラッキングがやりやすくなる
  • Cookieの発行や読み取りが行える

他にも多々メリットがあります。またGoogleタグマネージャー以外にも同様な「yahoo!タグマネージャー」というものもあります。

ここではGoogleアナリティクス導入が目的なのでGoogleタグマネージャーの解説となります。

Googleタグマネージャー導入方法

それではGoogleタグマネージャーの導入方法について解説していきます。

1、Googleタグマネージャーのアカウントを開設する

以下サイトにアクセスし、グーグルアカウントでログインします。

Googleタグマネージャー

アカウントを作成する

Google_Tag_Manager

任意のアカウント名を入力し、続行をクリックします。

コンテナを作成する

Google_Tag_Manager

「作成」をクリックします。
利用規約に同意します。以下のようにタグマネージャーのスニペットが表示されます。

Google_Tag_Manager

これでアカウントが開設されました。
「OK」をクリックしてください。

こちらで表示されたコードを全ページのHTMLに挿入していきます。
管理画面は以下のようになります。
スニペットを確認する場合は、以下のID部分をクリックすることで確認できます。

Google_Tag_Manager

このタグをbody開始タグの直後に挿入します。

ちなみにこのコンテナスニペットは、一度挿入すれば基本的に変更する必要がありません。

そのため外部ファイルとして読み込まず、そのまま直接コピペでHTMLに貼り付けても後々問題にはならないかと思います。

ここまでタグマネージャーの設定を行ってきましたが、タグマネージャーとアナリティクス自体は別物なので、両者を関連付けてあげる必要があります。

GoogleタグマネージャーにGoogleアナリティクスのタグを追加する

タグを挿入する

Googleアナリティクスに限らず、Googleタグマネージャーではあらゆるタグを一元管理できます。
ここではタグの追加でGoogleアナリティクスを用いて解説しています。

新しいタグを追加する

Google_Tag_Manager
タグの作成画面を開きます。

プロダクトを選択する

プロダクトの中からGoogleアナリティクスを選択し、以下のようにタグに合った任意の名前を入力します。
Google_Tag_Manager
「続行」をクリックします。

タグの種類を選択する

Google_Tag_Manager

ここでは「ユニバーサルアナリティクス」を選択するようにしましょう。

※Googleアナリティクスは2014年4月に「ユニバーサルアナリティクス」といった新しいバージョンに移行されました。
従来のトラッキングコードをそのまま用いている場合は、2016年4月移行に解析できなくなるらしいので注意しましょう。

タグを設定する

Google_Tag_Manager

GoogleアナリティクスのトラッキングIDを入力します。
「ディスプレイ広告向け機能を有効にする」にチェックをし、トラッキングタイプを選択します。
「続行」をクリックします。

配信するタイミングを選択する

Google_Tag_Manager
「すべてのページ」を選択します。

Google_Tag_Manager

これでタグの追加が完了しました!

タグマネージャーのコンテナスニペットをHTMLに挿入しても、このようにしてタグを追加しないとタグマネージャーの中身は空なので意味がありません。

変更・追加したタグを公開する

Googleタグマネージャーに登録したタグを公開しましょう。
以下部分で公開します。

Google_Tag_Manager

※タグによってはブラウザでの表示が崩れる可能性があります。
一度「プレビュー」ボタンをクリックし、ブラウザで確認したほうが良いと思います。

プレビューモードでは自分のブラウザでしか確認することができませんが、画面上部の「バージョン」→「アクション」→「プレビューの共有」をクリックするとプレビュー用のリンクを取得できます。

こちらを共有することで複数人でのデバッグ作業が可能となります。

デバッグ作業を終え問題なければ「公開する」

ブラウザで確認し、表示の崩れ等がないことを確認しましたらタグを公開します。

これでひと通り基本的な作業は終了となります。

とてもできることが多いので、WEB担当者の方は大変かと思いますが、取りあえず重要な部分だけでも覚えて、しっかりと目標を設定しサイトを改善していくことが重要かと思います。