jQuery Scroll Depthを使ってみたので詳細を書いとく

このエントリーをはてなブックマークに追加
先日、ブログが読まれない? 読まれているよ、意外にって記事を書きました。(タイトル変更してます。)アクセス解析の滞在時間とか直帰率とか、数値をそのまま信じちゃ駄目だよ、数値よりもちゃんと読まれてるんだよ、って事を書きました。まあ、数値ってのは読み方をちゃんと知っておかなきゃいけないよ、ってな話です。

そんな記事を書いた後に、こんな記事を発見。
[JS]あなたのウェブページがどのくらいスクロールされて見られているかが分かるスクリプト -jQuery Scroll Depth | コリス

このスクリプトを使えば、ちょっとは自分の記事がどれくらい読まれているのか、ってのが結構分かるな~と。便利な物を作ってくださる方がやっぱいるんだな~と。ありがたやありがたや。
てな訳で、早速導入してみました。コリスさんのページでは書かれていない仕様の詳細とかオプションについてとか書きます。
jquery scroll depthのキャプチャ

jQuery Scroll Depthのダウンロード場所


コリスさんで紹介されていた記事からコードのダウンロード場所を探すのが若干分からなくて大変でした。英語が全然なので。。w
なので、俺みたいな人の為に一応書いておくと、Scroll Depth by robflahertyのページの左サイドバー(?)の「Download ZIP File」をクリックすれば、該当コードとか圧縮版とかテストページとか、ダウンロード出来ます。ダウンロードして、サーバーにアップロードして使うって事になるんだと思います。ホスティングされてるのかどうかは自分の英語力と理解力では分かりませんでした。。w

jQuery Scroll Depthの初期設定(%表示について)


まず、スクリプトの実装例として最初に書かれている、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.scrolldepth.js"></script>
<script>
$(function() {
$.scrollDepth();
});
</script>

の1行目は、jQueryの読み込みです。そんなとこは説明する必要ないですかねw2行目が該当コードの読み込みです。
このコードを貼り付けて、該当コードをアップロードすれば一応動く訳です。その場合には、ページが何%の位置までスクロールされたのか、ってのが分かる様になります。「Baseline」、「25%」、「50%」、「75%」、「100%」の5種類のイベントが発生します。この%しか分かりません。もっと細かい%を分かる様にするなら、コードを読んで書き加えれば簡単に出来ますけどね。コード読みやすいですし。

ちなみに、この「何%読まれたのか」、ってのは例えば、
50%まで読んだ人が居た場合、その人が発生させるイベントは、「Baseline」、「25%」、「50%」の3つです。3種類のイベントラベルのイベントが発生します。
つまり、25%地点を通過したら、「25%」のイベントが発生して、次50%の地点に行けば「50%」のイベントが発生します。
なので、例えば「Baseline」が100回発生し、「50%」が50回発生していたら、読者の半分は50%までスクロールしている、って事です。100回+50回=150回が合計で、50/150=0.33だから、読者の3割くらいしか50%までスクロールしてくれていないのか、、と勘違いしない様に。
ちなみに、ページを上にスクロールして戻った場合はイベントは発生しません。

発生するイベントの確認


こんな事はわざわざ説明する必要ないかもですが、このイベントはgoogle Analyticsで確認できる物で、現在のgoogle Analyticsの場合なら、「コンテンツ」の「イベント」で確認出来ます。

オプション「elements」について


まず、「elements」ですが、これは、要素を指定する事で、その要素までスクロールしたかどうかが分かる様になります。なので、記事直下のブロック要素のidなどを指定しておけば、ちゃんと記事の最後まで読まれてか、という事が分かる訳です。ちなみに、その時発生するイベントのイベントアクションは「Elements」で、イベントラベルがその要素のセレクタです。「elements: ['#comments', 'footer']」と指定した場合には、#commentsの位置まで来たらイベントラベルが「#comments」のイベントが発生します。

ちなみに、自分はクラスの指定は確認していないんですが、htmlタグの指定は確認してみましたが、h2タグを指定した時には、1つ目のh2タグでしかイベントは発生しませんでした。クラスでの指定は非推奨という事ですが、クラスで指定してもおそらく1つ目の要素でしかイベントは発生しないと思われます。

オプション「minHeight」について


この「minHeight」ですが、コリスさんの記事では何が何だか良く分かりませんでしたが、これを指定すると、その高さ以下のページではこのスクリプトは動作しなくなります。つまり、「長いページの時だけ、何%読まれているかが知りたいんだよ。」みたいな、「長ーーーい記事をたまに書くけど、果たしてどれくらいの位置まで読んでもらえているのか気になるな。」って人向けのオプションです。

なので、minHeightで指定した長さより短い記事では、イベントは全く発生しなくなります。まあ確かに、長い記事を書く人は気になる事かもしれないですね。

オプション「percentage」について


これはコリスさんの記事を読むだけでも十分分かるのかな、と思います。falseを設定すれば、%での追跡を行うか否かの設定です。ちなみに、これはオプションelementsで要素を指定している場合にも動作します。どちらも同時に動作します。なので、elementsを指定した場合に必ずpercentageオプションをfalseに設定する必要はありません。

動作確認オプション「testing」について


これはコリスさんの記事には書いてない情報ですが、jQuery Scroll Depthのコードを読むと分かる事なんですけど、動作確認様に「testing」っていうコードがあります。percentageと同様false,trueによって指定します。
testing: true,
とオプションを書くと、google Analytics様のイベントは発生しない様になり、変わりに#consoleの中に発生したイベントが表示される様になります。
つまり、ページ内に、
<div id="console"></div>
という要素を追加して、スタイルシートに、
#console{
position:fixed;
top:0;
border:1px solid #666;
padding:1em;
}

とか追加すれば、ページ上部に常に表示される#consoleのdivボックスで、jQuery Scroll Depthによって発生するイベントが確認出来ます。オプションを指定する場合には、これで確認しておいても良いのかな、と思います。実際に動作しているのか、とか、実際にどんな風にイベントが発生しているのかを確認するってのも良いのかな、と。

オプションの指定の仕方


オプションの指定の仕方ですけども、コリスさんのページのやつは若干書き間違えている箇所があって、
$.scrollDepth({
minHeight: 2000,
elements: ['#comments', 'footer']
percentage: false,
});

と書かれているんですが、正確には
$.scrollDepth({
minHeight: 2000,
elements: ['#comments', 'footer'],
percentage: false
});

ですね。細かい事ですが、3行目の文末にカンマ(,)を追加して、4行目の文末のカンマを削除しています。(4行目のカンマは削除しなくても動作します。)
オプションを複数指定する場合には、最後の行以外は全て文末にカンマを指定する必要があります。というか、オプションの指定方法は、
(オプション名): (オプションの値)
で、複数指定したい場合は、最後にカンマを付けて再度同様の形式で指定する、って感じなので、
$.scrollDepth({
minHeight: 2000, elements: ['#comments', 'footer'], percentage: false
});

とかでも大丈夫です。
ちなみに、ちなみにですけど、このオプションの指定をしたコードを使う場合に、最初に紹介したコードと合わせて貼り付けるコード全文は以下の様な感じになります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.scrolldepth.js"></script>
<script>
$(function() {
$.scrollDepth({
minHeight: 2000,
elements: ['#comments', 'footer'],
percentage: false
});
});
</script>

ここにオプションを書くんです。一応javascriptとか知らん、って人のために一応。

prototype.jsとの共存の方法


ファンブログは残念ながら(?)prototype.jsが標準装備でして、こいつを外しても大丈夫なのかどうなのか、俺にはちょっと分からないっていう。。他のjavascriptに「$」が含まれてるっぽいので、外さない方が良いのかな~なんてprototype.jsを全然知らない俺は思っているんですが。。

話が若干それましたが、とりあえずそんな理由でjQueryとprototypeの共存の必要がある訳で、jQueryで書かれたスクリプトの場合は常に書き換えの必要がある訳です。それをちょっとだけ説明します。

1つの方法としては、prototype.jsと同時に使うには - jQuery 日本語リファレンスで書かれている「ready内ではjQueryの動作をさせる場合」の手法を使うってのがある。例えば今回のjQuery Scroll Depthの場合、jQuery Scroll Depthのコード全体を
jQuery.noConflict();
jQuery(document).ready(function($){
// ここでは、$はjQueryとして使えます。
});

の、「// ここでは、$はjQueryとして使えます。」の部分に書き込むだけです。それだけで一応使えます。

2つ目の方法としては、「$」を「jQuery」に書き換える、ってのがあります。jQuery Scroll Depthのコードの中には、「$window」っていう記述があって、俺も勉強不足でこのコードの意味とかはちゃんと知らないんですが、これも「jQuerywindow」に書き換えてしまえばちゃんと動きます。

jQueryのバージョンに注意


個人的に勝手に若干つまずいたので一応書いておくと、コリスさんの記事でも書かれている事なんですけど、jQueryのバージョンが少し古いやつのままで、1.6だったりすると動かないので注意。1.7を入れればちゃんと動きます。

最後に


ちょっと無駄に細かく説明を書いてみました。結構面白いですよ。どれくらい読まれているのかが少し分かる気がするので。
あと、これと似たプラグインも発見したので(使ってないけど)紹介しておきます。
Google Analytics で読了時間を計測できるプラグイン GA Read2End | カグア!Googleアナリティクス活用塾

こっちは、読了時間を計測できるプラグインって事なんですけど、これの仕組みがスクロール位置を使っているって事で似ているな、とw
実は先にこっちを発見して、凄い物があるんだな~。ってか、やっぱこういうのあるんだな~なんて思っていたんですけど、読了時間は、自分は良いかな、、とか思ってw使っていません。

まあでも、50%くらいは自分の記事を一応最後まで読んでくれているらしい、って事が分かったので、めでたしめでたしw
今まで直帰だと思っていたアクセスが本当に直帰ばっかだったら立ち直れなかったかもしれないですね。。w

ちなみに、「コリスさんコリスさん」とか書いてますけど、全く面識ないです。そんな事どうでも良いか。。ww

このブログの更新情報は TwitterRSS でチェック出来ます。是非、フォロー、またはRSSの購読をよろしくお願いします。
「RSSの購読って何?」って人は、 ブラウザ毎のRSS購読方法の簡単なまとめ を読んでみて下さい。

このエントリーをはてなブックマークに追加
人気記事

PAGE TOP