ぱくたそのような画像・写真素材サイトを無料でWordPressとUltimate Memberで1日で作る方法その3

投稿日 2019年10月24日
更新日 2021年2月2日
著者株式会社リソース・シェアリング
カテゴリー WordPress

【PR】当Webサイトのコンテンツにはプロモーション（広告）が含まれています

スポンサードサーチ

ぱくたそのような画像・写真素材サイトを無料でWordPressとUltimate Memebrで1日で作る方法その1、ぱくたそのような画像・写真素材サイトを無料でWordPressとUltimate Memberで1日で作る方法その2の続きです。

前回は、寄稿者に画像アップロード機能を追加しましたが、今回はフリー素材のダウンロード数を計測する方法について考えます。

素材のダウンロード数を計測する方法

画像素材のダウンロード数を計測するタイミングとしては、いくつかの方法が考えられます。

画像素材のダウンロードボタンを押された数で計測する
画像素材が実際にダウンロードされた数を計測する

また、カウント方法としても以下の以下の二つが想定されます。

新たにコードを用意して対応する
Google Analyticsを使う

今回は1日でできる内容ということで、Google Analyticsを使ってダウンロードボタンが押されたタイミングを計測する方法で行います。

Google Analyticsでイベントトラッキングを設定する方法

Google Analyticsを使ってダウンロードボタンを押されたタイミングを計測に使うためには、Google Analyticsのイベントトラッキングの機能を使います。

Google Analyticsでイベントトラッキングを設定するには、2つの要素が必要です。

まず最初に、通常のGoogle Analyticsのタグを設定してWebサイトのトラッキングを始める事。

次が、Google Analyticsのイベントトラッキング専用コードの埋め込みです。

Google Analyticsでイベントトラッキングを設定する方法については、以下の記事をご覧ください。

このイベントトラッキングのコードを、構築した無料(フリー)画像・写真素材サイトに設定していきますが、Google Analyticsのタグは既に設定している前提で進めます。

以前ご紹介した、1日でWordPressで簡単に無料(フリー)画像・写真素材サイトを作る方法その1の中で、S、M、Lの3種類の画像ダウンロードボタンを表示するコードを書いていましたが、それを以下のように変更します。

<?php if (has_post_thumbnail()): ?>
	<?php 
		$thumb_ssize = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail');
		if ($thumb_ssize[3]==1): ?>
		<a href="<?php the_post_thumbnail_url( 'thumbnail' ); ?>?dl_file" class="btn btn-info btn-lg" role="button" onclick="ga('send','event','Image','download','<?php the_title(); ?> S', 1);">S<br>横640px画像DL</a>
	<?php endif; ?>

	<?php 
		$thumb_msize = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
		if ($thumb_msize[3]==1): ?>
		<a href="<?php the_post_thumbnail_url( 'medium' ); ?>?dl_file" class="btn btn-success btn-lg" role="button" onclick="ga('send','event','Image','download','<?php the_title(); ?> M', 1);">M<br>横1200px画像DL</a>
	<?php endif; ?>

	<?php 
		$thumb_lsize = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large');
		if ($thumb_lsize[3]==1): ?>
		<a href="<?php the_post_thumbnail_url( 'large' ); ?>?dl_file" class="btn btn-danger btn-lg" role="button" onclick="ga('send','event','Image','download','<?php the_title(); ?> L', 1);">L<br>横1920px画像DL</a>
	<?php endif; ?>
<?php endif; ?>

変更したのは、以下のリンク部分。

<a href="<?php the_post_thumbnail_url( 'thumbnail' ); ?>?dl_file" class="btn btn-info btn-lg" role="button">S<br>横640px画像DL</a>

このように、Google Analyticsのイベントトラッキングができるように、変えています。

<a href="<?php the_post_thumbnail_url( 'thumbnail' ); ?>?dl_file" class="btn btn-info btn-lg" role="button" onclick="ga('send','event','Image','download','<?php the_title(); ?> S', 1);">S<br>横640px画像DL</a>

実際にこれで取得したGoogle Analyticsのデータが以下のようになりますが、イベント、アクション、ラベルでのデータを取得できています。