• かちびと.net

    ページ内でどれくらいスクロールされているかをGoogleアナリティクスで解析する為のjQueryプラグイン・Scroll Depthのご紹介。面白いトラッキング方法ですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

ページ内でどれくらいスクロールされているかをGoogleアナリティクスで解析する為のjQueryプラグイン・Scroll Depth

スポンサーリンク

ユーザーにどれくらいページ内で
スクロールされているかをGAの
イベントAPIを使って解析する為
のjQueryプラグイン・Scroll Depth
のご紹介。

スクロールに応じて視差効果を演出できるパララックス系サイトやペラサイトのような1ページで完結するタイプのコンテンツを持つサイトは割と見かけるので、どれくらいスクロールされているかを解析する方法もあるといいかもですね。という需要に応えたライブラリみたいです。

※時間なくて動作テストしてないのでその程度の記事という事で今日はご了承下さい。

Scroll Depth


ユーザーのスクロール状況をパーセンテージでトラッキングするプラグイン。デフォルトでは25%、50%、75%といったポイントで解析できるようになってるみたい。また、任意のDOM要素をターゲットにする事も出来るそうです。

コード

<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>

プラグインはトラッキングコードより下に置きます。フッターがいいよ、って書いてありました。

$.scrollDepth({
  minHeight: 2000, // 2000pxまでトラッキング
  elements: ['#comments', 'footer'] // 指定されたDOM要素でトラッキング
  percentage: false, // デフォルトのパーセンテージでのトラッキングをせずに特定DOM要素のトラッキングを行う場合はfalseにする。初期値はtrue。
});

特定の高さや任意のDOM要素をターゲットポイントとする場合はオプション設定すればいいみたい。

Google Analyticsの非同期トラッキングコードを利用します。古いトラッキングコードでは解析できないようですのでご注意下さい。非同期構文は公式サイトで解説されていますのでご参考に。jQuery本体は1.7以上でお願いします。

ライセンスはMITとGPLのデュアルライセンスとの事。来週時間見つけてテストしてみます。

Scroll Depth

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services