Google Analytics(analytics.js版)でのファイルダウンロードを計測するための設定

Google Analyticsのトラッキングコードのデフォルトがグローバルサイトタグ(gtag.js)になって半年以上たちます(参考「Google Analyticsのトラッキングコードがグローバルサイトタグ(gtag.js)のみの表示になった」)が,Google Analytics(ユニバーサルアナリティクス“analytics.js”)でファイルダウンロードをイベントと計測する方法を紹介したいと思います.

<この記事は「デジマのあれこれ」にて2018年5月頃公開された記事を一部改良して移植したものです>

 

1.はじめに

かなり今更な感じだと思うのですが,記事「ひとつのページで複数のGoogle Analytics(analytics.js版)のトラッキングコードを使う方法(カスタムディメンションを用いた場合も対応)」のようなカスタマイズをしたときにも対応する方法を紹介します.なおこのカスタマイズでは,htmlのコードをいじる必要があります.

Google Analyticsではページが閲覧されたことをトラッキングコードをつかって計測するので,そのコードが挿入できないpdfファイルやtxtファイルなどはブラウザーで開かれたりダウンロードされてもそのままではそのアクションが計測されません.そのようなアクションを計測するためにはイベントトラッキングという機能を使います.

 

2.タグのカスタマイズルールとGAでの計測データ

サーバーの「pdf」というディレクトリに「sample.pdf」というpdfファイルがあると仮定します.このとき,このファイルへのリンクをサイト上のテキスト「ファイルをダウンロード」に設置すると,<a>タグで

<a href="pdf/sample.pdf">pdfファイルをダウンロード</a>

のようになります.ここに,Google Analyticsで計測するための以下の赤字のコードを追加します(注意:Google Analyticsのユニバーサルアナリティクスのトラッキングコードがデフォルトでなく,カスタマイズしている場合は下記のコードでは計測出来ない場合があります.そのような場合は,この記事の後半で書く複数のトラッキングIDで計測している場合でイベント計測をする場合を参照してコードを修正してください).

<a href=" pdf/sample.pdf " onclick="ga('send', 'event', 'download', 'pdf', 'sample.pdf', 1);"> pdfファイルをダウンロード</a>

これはpdfファイルにアクセス(ブラウザで開いたりダウンロードしたり)したことをイベントとして計測することになります.このカスタマイズで,Google Analyticsの「行動 > イベント > 上位のイベント」などでデータが確認出来ます(図1参照).

 

図1

 

図1の赤枠で囲った場所に「イベントカテゴリ」と「イベントアクション」と「イベントラベル」,そして青枠で囲った場所に「イベントの値」がありますが,これらは上記のコードで指定したものが記録されます.上記のコードの

ga('send', 'event', 'download', 'pdf', 'sample.pdf', 1)

において,イベントカテゴリは「download」イベントアクションが「pdf」イベントラベルが「sample.pdf」イベントの値が「1」に該当します.イベントカテゴリとイベントアクションは必ず使う必要があり,イベントラベルとイベントの値は省略可能です.また,イベントカテゴリとイベントアクションとイベントラベルはテキスト形式で日本語を使っても問題ありません.イベントの値は整数を使います.

詳しくは公式のヘルプ

イベント トラッキング

https://developers.google.com/analytics/devguides/collection/analyticsjs/events

を参照してください.

 

3.複数のプロパティIDを使っている環境でのカスタマイズ

さて,記事「ひとつのページで複数のGoogle Analytics(analytics.js版)のトラッキングコードを使う方法(カスタムディメンションを用いた場合も対応)」で紹介した

<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-12345678-X', 'auto');
  ga('send', 'pageview');

  ga('create', 'UA-12345678-Y', 'auto', {'name': 'newTracker' });
  ga('newTracker.send', 'pageview');
</script>

というようなカスタマイズをして複数のトラッキングIDを使って計測している場合,両方のGoogle Analyticsで上記のようなイベントを計測したい場合はどうすればいいでしょうか?そのような場合は,

<a href=" pdf/sample.pdf " onclick="ga('send', 'event',
'download', 'pdf', 'sample.pdf', 1);ga('newTracker.send', 'event',
'download', 'pdf', 'sample.pdf', 1);"> pdfファイルをダウンロード</a>

と赤色のフォント部分のようなコードを追加することになります.

トラッキングコード「ga(‘send’, ‘event’, ‘download’, ‘pdf’, ‘sample.pdf’, 1);」がトラッキングID「UA-12345678-X」のためのコードトラッキングコード「ga(‘newTracker.send’, ‘event’, ‘download’, ‘pdf’, ‘sample.pdf’, 1);」がトラッキングID「UA-12345678-Y」のためのコードとなっています.トラッキングID「UA-12345678-Y」のほうがトラッキングコードの「newTracker.send」にそろえていることに注意してください(トラッキングID「UA-12345678-X」のようにデフォルトの「send」を使っていない場合は,ここを変更したものにあわせます).

pdfファイルの種類がいっぱいあり,すべてをイベントで計測しようとすると,その都度毎に上記のようなカスタマイズが必要となります.このような場合,Googleタグマネージャーを利用すると楽に設定できたりします.