Googleアナリティクスでスクロール時のバーチャルページビューを計測する方法

Web2016年10月27日

Googleアナリティクスでスクロールに応じてバーチャルページビューを計測する方法をご紹介いたします。

サンプルコード

html

<div>
<h2>スクロール1</h2>
<p id="scroll-01"><img src="https://placehold.jp/1020x1000.png" alt=""></p>
</div>
<div>
<h2>スクロール2</h2>
<p id="scroll-02"><img src="https://placehold.jp/1020x1000.png" alt=""></p>
</div>
<div>
<h2>スクロール3</h2>
<p id="scroll-03"><img src="https://placehold.jp/1020x1000.png" alt=""></p>
</div>

js

(function () {

$(function(){
	var
		$winHeight = $(window).height(),
		$documentHeight = $(document).height(),	
		$scroll1 = $('#scroll-01').offset().top,
		$scroll2 = $('#scroll-02').offset().top,
		$scroll3 = $('#scroll-03').offset().top,
		$scrollFlag1 = false,
		$scrollFlag2 = false,
		$scrollFlag3 = false,
		$scrollFlagEnd = false;

	$(window).scroll(function () {
		var $scrTop = $(document).scrollTop();
		
		if( $scroll1 < $scrTop && $scrollFlag1 === false) {
			alert("#scroll-01のページビューを計測しました");
			//dataLayer.push({'pageUrl': '/scroll1/' ,'event': 'vpv' });
			$scrollFlag1 = true;
		}
		
		if( $scroll2 < $scrTop && $scrollFlag2 === false) {
			alert("#scroll-02のページビューを計測しました");
			//dataLayer.push({'pageUrl': '/scroll2/' ,'event': 'vpv' });
			$scrollFlag2 = true;
		}
		
		if( $scroll3 < $scrTop && $scrollFlag3 === false) {
			alert("#scroll-03のページビューを計測しました");
			//dataLayer.push({'pageUrl': '/scroll3/' ,'event': 'vpv' });
			$scrollFlag3 = true;
		}
		
		if ($documentHeight === $winHeight + $scrTop && $scrollFlagEnd === false) {
			alert("ページの最後に到達したページビューを計測しました");
			//dataLayer.push({'pageUrl': '/scrollEnd/' ,'event': 'vpv' });
			$scrollFlagEnd = true;
		}
	});

});

})(jQuery);

※jQueryを読み込んでいる場合のスクリプトとなります

解説

各要素のウインドウ最上部までの高さがスクロールした値以下になった時点で、dataLayer.pushでアナリティクスに送信しバーチャルページビューを計測しています。
また、初期値をfalseにしておいたフラグをtrueにすることで、戻ってスクロールしてももうjsは再発火しないようにしています。
サンプルコードではスクロールするとalertが表示されますのでそれぞれ動作検証を行うことが可能です。また、htmlとjsの記述を増やすことでさらに詳細にページビューを計測できますので、ページのデザインや構成に応じて応用することができます。

まとめ

1ページ構成の読み物系のページなどにてどこまで読まれたのか、カルーセルコンテンツなどでどの要素が見られたのかなど、通常の計測では見えてこないユーザーの動作も、バーチャルページビューを活用することでより詳細な計測が可能になります。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。