SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発者のためのGoogleアナリティクス マスターガイド

GoogleアナリティクスとGoogleタグマネージャでWebサイト計測を始めよう!

開発者のためのGoogleアナリティクス マスターガイド 第1回

ページビューの計測方法

 Googleアナリティクスでは、Googleアナリティクスサーバーへ送る個々の計測データを「ヒット」と呼びます。ヒットは大抵の場合、ユーザーの一つひとつの行動を表します。

 ここでは基本的なヒットである、ページビューの計測方法をご紹介します。

 ページビューの計測を試すため、まずはテスト用のページであるHTMLファイルをご用意してください。

A. ページにトラッキングコードを記載する場合

 先ほどトラッキングIDが表示されていたページへ遷移しましょう。[アナリティクス設定]>[プロパティ]の下、[トラッキング情報]>[トラッキングコード]がそのページです。ここにトラッキングコードが記載されていますのでコピーしてください。以下のようなコードです。

トラッキングコード
<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','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-Y', 'auto');
  ga('send', 'pageview');

</script>

 これを、ページビューを計測したいページの</head>の前に挿入してください。

 これでページビュー計測の設定は完了です。

B. Googleタグマネージャを利用する場合

 先ほど取得したスニペットをコピーしてください。スニペットは[管理]>[コンテナ]の下、[Googleタグマネージャをインストール]からコピーすることが可能です。以下のようなコードです。

Googleタグマネージャ
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

 これを、ページビューを計測したいページの<body>直後に挿入します。

 これでページへのGoogleタグマネージャの導入は完了です。

 次に、Googleタグマネージャの画面からページビューの設定を行います。

 コンテナの設定画面へ移動してください。

コンテナ設定画面
コンテナ設定画面

 左メニューより[タグ]を選択し、[新規]を押してください。

タグ一覧
タグ一覧

 ページビュー計測用のタグを作成するため、名前入力欄には「ページビュー」などわかりやすい名前を付けます。プロダクトはGoogle Analyticsを選択してください。その後、「ユニバーサルアナリティクス」か「従来の Google アナリティクス」かを聞かれますが、新しくウェブサイトを計測する場合はユニバーサルアナリティクスを選択してください。

 ここまで進めると以下のような画面になります。

新しいタグ
新しいタグ

 設定中のタグはそのまま置いておき、GoogleアナリティクスのトラッキングIDが表示されていたページへ遷移しましょう。そこに記載されている「UA-XXXXXXXX-Y」をコピーしてください。

 トラッキングIDはトラッキングコードのページ以外に、プロパティ設定やアカウント一覧からも確認できます。

プロパティ設定
プロパティ設定
アカウント一覧
アカウント一覧

 コピーしたトラッキングコードを、作成途中のタグの[トラッキング ID]の欄に入力します。

 [ディスプレイ広告向け機能を有効にする]は今はチェックを入れる必要はありません。これを利用すると特別なレポートを利用することができますが、利用するためにはウェブサイトに注意書きが必要です。詳細はまた別の回でご紹介します。

 [トラッキング タイプ]はページビューを選択し、[続行]を押してください。

 最後に配信するタイミングとして[すべてのページ]を選択してタグを作成します。

ページビュータグ
ページビュータグ

 これでタグの設定はおわりですが、この設定はまだ編集中という扱いで、実際に動作させるためには公開する必要があります。

 Googleタグマネージャを公開すると、Googleタグマネージャを導入しているすべてのページに設定が反映されます。タグの設定が間違っていた場合やGoogleタグマネージャと相性のよくないページだった場合、ページ本来の表示や機能に影響を与えてしまうことがあります。公開前は必ずプレビューを行ってください。プレビューの使用方法は別の回でご紹介する予定です。

 今回はテスト用のページに導入したと想定してプレビューせずにすぐに公開します。右上、[公開]ボタンより[今すぐ公開]を押してください。

 これでGoogleタグマネージャを利用したページビューの計測設定は完了です。

次のページ
計測を開始する

この記事は参考になりましたか?

開発者のためのGoogleアナリティクス マスターガイド連載記事一覧

もっと読む

この記事の著者

森田 怜依(NRIネットコム株式会社)(モリタ レイ)

 NRIネットコム株式会社にてGoogleアナリティクス360の導入とサポートを行っています。ウェブアプリやスマートフォンアプリの開発経験を活かし、Googleアナリティクスとその他のシステムを組み合わせた活用方法を促進してきました。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/9531 2016/07/15 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー