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

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

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

ダウンロード数を計測するためのダウンロードボタン

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

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

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

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

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

フィールド名 必須かどうか ぱくたその場合
eventCategory テキスト 必須 サイズの種類
eventAction テキスト 必須 Download
eventLabel テキスト - 画像URL
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が無効・もしくは正常に動作しなかった環境では、正確な数値が取得できません。とはいえ、参考値としては十分役立つと思います。さらに厳密な数値が必要な場合は、サーバのログをレポート、グラフ化するなどの方法を検討してみてもいいかもしれません。

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

 掲載企業を募集しています
ぱくたそ公式サービス
ぱくたそ大喜利
ぱくたそ大喜利

ぱくたその写真をみんなでタイトル付けできるサービスです。お題の写真を見て思い浮かんだタイトルを気軽に投稿してください。採用した方にはもれなくフリー素材のタイトルで掲載します。

ぱくたそ大喜利を見る >

ぱくたそプリセット
ぱくたそプリセット

写真加工を手軽に美しく!PhotoshopやLigthroom用のCamera Raw(XMP形式)プリセット配布サービスです。写真をダウンロードした後のひと手間加工で違いを実感してください。

ぱくたそプリセットを見る >

ぱくたそショップでグッズを購入
ぱくたそ公式グッズ

Tシャツやパーカー、ステッカーなど、ぱくたそのオフィシャルグッズをBOOTHにて販売しています。売上の一部は運営費として撮影や企画時の小道具代に利用します。

ぱくたそショップでグッズを購入 >