Google Analyticsを使って写真素材のダウンロード数を計測する

ぱくたそはフリー写真素材を配布しています。そして、このようなサービスを改善するためには「配布している写真素材がどのくらいダウンロードされたか」を知る必要があります。

ぱくたそではGoogle Analyticsのイベントトラッキング機能を使用してダウンロード数を計測しています。今回はその方法のご紹介です！

イベントトラッキングとは？

イベントトラッキングは、GAを設置したページ上でユーザーが操作した行動（動画の再生、ダウンロード、広告のクリックなど）を計測することができる機能です。ぱくたそでは、写真の詳細ページに設置している「ブログサイズ」と「高解像度版」の画像のダウンロード数をそれぞれ計測しています。

イベントトラッキングの設定

イベントトラッキングは、JavaScriptで下記のコードを記述して実装することで、GAにデータが送信されます。ga関数の第一引数に「send」コマンドを指定、第二引数のhitTypeに「event」を設定、第三引数以降に任意の値を設定します。

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue]);

第三引数以降のイベントフィールドの意味は下記の通りです。

ぱくたその場合は、写真のダウンロード数を計測したいので、下記のようになりますね。

ga('send', 'event', 'サイズの種類', 'Download', '画像URL');

サイズの種類や画像のURLは、クリックしたボタンによって送る値を変更したいので、JavaScriptを使って動的に変更します。

実装方法

トラッキングの方法は簡単で、下記の手順をJavaScriptで実装してあげるだけです。

• GAを設置する

• ボタンをクリックする

• GAにイベントを送信する

今回は、トラッキングしたいボタン要素に特定のclass「eventTracking」をつけて、そのclass名がついているボタン要素がクリックされたらトラッキングイベントを送るようにします。

前提

• GAのUniversal Analyticsのトラッキングコードがあらかじめ設置してあること

サンプルコード

実際にぱくたそで使用しているコードとは異なりますが、参考までに掲載します。 動作はモダンブラウザで確認しています。

See the Pen Google Analyticsでイベントトラッキングを送信する by Yuu (@regret_raym) on CodePen.

送信結果

送られたイベントの結果は、GAレポート画面の「行動」→「イベント」で確認することができます。

これで、クリックする度にイベントが送信されるため、ダウンロード数が計測できるようになります。

ちなみにこの方法は、JavaScriptが無効・もしくは正常に動作しなかった環境では、正確な数値が取得できません。とはいえ、参考値としては十分役立つと思います。さらに厳密な数値が必要な場合は、サーバのログをレポート、グラフ化するなどの方法を検討してみてもいいかもしれません。

次回はこのダウンロード数を外部ページから取得し、ランキングを作成してみたいと思います。