![2023年 人気の写真素材ランキング トップ150](https://user0514.cdnw.net/selection/img/2023photoranking.jpg?w=600,h=auto)
2023年の年間でアクセス数・ダウンロード数が多かった人気の写真素材をまとめまし...
ぱくたそはフリー写真素材を配布しています。そして、このようなサービスを改善するためには「配布している写真素材がどのくらいダウンロードされたか」を知る必要があります。
ぱくたそでは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名がついているボタン要素がクリックされたらトラッキングイベントを送るようにします。
実際にぱくたそで使用しているコードとは異なりますが、参考までに掲載します。 動作はモダンブラウザで確認しています。
See the Pen Google Analyticsでイベントトラッキングを送信する by Yuu (@regret_raym) on CodePen.
送られたイベントの結果は、GAレポート画面の「行動」→「イベント」で確認することができます。
これで、クリックする度にイベントが送信されるため、ダウンロード数が計測できるようになります。
ちなみにこの方法は、JavaScriptが無効・もしくは正常に動作しなかった環境では、正確な数値が取得できません。とはいえ、参考値としては十分役立つと思います。さらに厳密な数値が必要な場合は、サーバのログをレポート、グラフ化するなどの方法を検討してみてもいいかもしれません。
次回はこのダウンロード数を外部ページから取得し、ランキングを作成してみたいと思います。