Embed Size (px)
DESCRIPTION
Citation preview
© 2011 DMM.com Labo Co.,Ltd.
Using Google Analytics with jQuery Mobile
2011.06.28
Ｗｅｂ担当者のためのjQuery Mobile⼊入⾨門
© 2011 DMM.com Labo Co.,Ltd.
Agenda
1. ⾃自⼰己紹介
2. jQuery Mobile 概要
3. Google Analytics の問題点
4. 解決策
5. 本⽇日のまとめ
2
© 2011 DMM.com Labo Co.,Ltd.
1. Who are you?
© 2011 DMM.com Labo Co.,Ltd.
Koji Ishimoto
@t32kfrom IshikawaDMM.com LaboWeb Designer
Google Analytics ⾮非同期トラッキングコード再考http://t32k.me/mol/log/asynchronous-tracking/
4
@webanalytics_jp
© 2011 DMM.com Labo Co.,Ltd.
Data Driven Design!*HiPPO: Highest Paid Person's Opinionhttp://www.flickr.com/photos/crincon/1111326214/
© 2011 DMM.com Labo Co.,Ltd.
Data Driven Design!*HiPPO: Highest Paid Person's Opinion
Designer
HiPPO
http://www.flickr.com/photos/crincon/1111326214/
© 2011 DMM.com Labo Co.,Ltd.
2. jQuery Mobile Overview
© 2011 DMM.com Labo Co.,Ltd.7
Version 1.0 BetaA Touch-Optimized Web Framework for Smartphones & Tablets
© 2011 DMM.com Labo Co.,Ltd.8
Works Everywhere!
© 2011 DMM.com Labo Co.,Ltd.
The State of Mobile Web Development 2011
9
The State of (Mobile) Web Development 2011
6.88%
3.66%
2.05%
jQuery Mobile
Zepto
Sencha Touch
jQTouch
12.5%
© 2011 DMM.com Labo Co.,Ltd.
JavaScript Distribution in Top Million Sites
10
JavaScript Distribution in Top Million Sites
45.1%
© 2011 DMM.com Labo Co.,Ltd.11
Standard in Adobe CS5.5jQuery Mobile Integration
© 2011 DMM.com Labo Co.,Ltd.
3. Problems in Google Analytics
© 2011 DMM.com Labo Co.,Ltd.
Basic Template HTML
13
<!doctype html><html lang="ja"><head> <meta charset="UTF-8"> <title>jQuery Mobile Template</title> <link rel="stylesheet" href="jquery.mobile.css"> <script src="jquery.js"></script> <script src="jquery.mobile.js"></script></head><body> <div data-role="page" id="home"> <div data-role="header"> <!-- /header --></div> <div data-role="content"> <!-- /content --></div> <div data-role="footer"> <!-- /footer --></div> <!-- /page --></div></body></html>
© 2011 DMM.com Labo Co.,Ltd.
Mobile “Page” Structure
14
<div data-role="page" id="home">
<div data-role="header"> <h1>Header</h1> <!-- /header --></div>
<div data-role="content"> <ul data-role="listview"> <li>item 1</li> <li>item 2</li>... </ul> <!-- /content --></div>
<div data-role="footer"> <h4>Footer</h4> <!-- /footer --></div>
<!-- /page --></div>
© 2011 DMM.com Labo Co.,Ltd.
Mobile “Page” Structure
14
<div data-role="page" id="home">
<div data-role="header"> <h1>Header</h1> <!-- /header --></div>
<div data-role="content"> <ul data-role="listview"> <li>item 1</li> <li>item 2</li>... </ul> <!-- /content --></div>
<div data-role="footer"> <h4>Footer</h4> <!-- /footer --></div>
<!-- /page --></div>
© 2011 DMM.com Labo Co.,Ltd.
Smartphone UI Elements
© 2011 DMM.com Labo Co.,Ltd.
Ajax-Driven Page Navigation
16
© 2011 DMM.com Labo Co.,Ltd.17
Page Transitions
*video
© 2011 DMM.com Labo Co.,Ltd.17
Page Transitions
*video
© 2011 DMM.com Labo Co.,Ltd.
example.com/a.html
example.com/b.html
18
© 2011 DMM.com Labo Co.,Ltd.
Ajax link + add to DOM
19
© 2011 DMM.com Labo Co.,Ltd.
Ajax link + add to DOM
19
© 2011 DMM.com Labo Co.,Ltd.
Hash URLs
20
© 2011 DMM.com Labo Co.,Ltd.
Hash URLs
20
!?
© 2011 DMM.com Labo Co.,Ltd.
Google Analytics の問題点
1.Ajax遷移時にGAが作動しない！
2.GAは#(フラグメント識別⼦子)を記録しない！
21
© 2011 DMM.com Labo Co.,Ltd.
今後予想されるケース
22
© 2011 DMM.com Labo Co.,Ltd.
今後予想されるケース
22
スマホサイト作るんだけど( ́ _ゝ )`システムさん
© 2011 DMM.com Labo Co.,Ltd.
今後予想されるケース
22
スマホサイト作るんだけど( ́ _ゝ )`システムさん
Google Analytics⼊入れといて~ (´ー｀)Web担さん
© 2011 DMM.com Labo Co.,Ltd.
今後予想されるケース
22
スマホサイト作るんだけど( ́ _ゝ )`システムさん
Google Analytics⼊入れといて~ (´ー｀)Web担さん
Head要素に⼊入れとけばいいよね？( ́ _ゝ )`システムさん
© 2011 DMM.com Labo Co.,Ltd.
今後予想されるケース
22
スマホサイト作るんだけど( ́ _ゝ )`システムさん
Google Analytics⼊入れといて~ (´ー｀)Web担さん
そうだよ♪ (´ー｀)Web担さん
Head要素に⼊入れとけばいいよね？( ́ _ゝ )`システムさん
© 2011 DMM.com Labo Co.,Ltd.
Data is not found.http://www.flickr.com/photos/druidicparadise/367047412/
© 2011 DMM.com Labo Co.,Ltd.
Demo
24
© 2011 DMM.com Labo Co.,Ltd.
4. Solutions
© 2011 DMM.com Labo Co.,Ltd.
1. Ajax遷移をやめる
26
© 2011 DMM.com Labo Co.,Ltd.
No Thank you, Ajax Navigation :(
27
HTML:<a href="hoge.html" data-ajax="false">hoge</a>
JavaScript:$(document).bind(‘mobileinit’, function() { $.mobile.ajaxEnabled = false;});
*jQuery Mobile 1.0 Beta 1
© 2011 DMM.com Labo Co.,Ltd.
2. トラッキングスニペットを改良する
28
© 2011 DMM.com Labo Co.,Ltd.
Tracking Snippet for jQuery Mobile
29
var _gaq = _gaq ¦¦ [];_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);(function() { var ga = document.createElement('script'); ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();$('[data-role="page"]').live('pageshow', function() { var u = location.hash.replace('#', ''); u ? _gaq.push(['_trackPageview', u]) : _gaq.push(['_trackPageview']); });
*jQuery Mobile 1.0 Beta 1
© 2011 DMM.com Labo Co.,Ltd.
Tracking Snippet for jQuery Mobile
30
$('[data-role="page"]').live('pageshow', function() {
var u = location.hash.replace('#', '');
u ? _gaq.push(['_trackPageview', u]) : _gaq.push(['_trackPageview']);
});
*jQuery Mobile 1.0 Beta 1
© 2011 DMM.com Labo Co.,Ltd.
Tracking Snippet for jQuery Mobile
30
$('[data-role="page"]').live('pageshow', function() {
var u = location.hash.replace('#', '');
u ? _gaq.push(['_trackPageview', u]) : _gaq.push(['_trackPageview']);
});
data-role=”page”が指定されている部分に対して、ページが表⽰示されたときに以下のコードをひもづける。
*jQuery Mobile 1.0 Beta 1
© 2011 DMM.com Labo Co.,Ltd.
Tracking Snippet for jQuery Mobile
30
$('[data-role="page"]').live('pageshow', function() {
var u = location.hash.replace('#', '');
u ? _gaq.push(['_trackPageview', u]) : _gaq.push(['_trackPageview']);
});
data-role=”page”が指定されている部分に対して、ページが表⽰示されたときに以下のコードをひもづける。
URLの#以降を取得して#を取り除いたものを変数Uに代⼊入する
*jQuery Mobile 1.0 Beta 1
© 2011 DMM.com Labo Co.,Ltd.
Tracking Snippet for jQuery Mobile
30
$('[data-role="page"]').live('pageshow', function() {
var u = location.hash.replace('#', '');
u ? _gaq.push(['_trackPageview', u]) : _gaq.push(['_trackPageview']);
});
data-role=”page”が指定されている部分に対して、ページが表⽰示されたときに以下のコードをひもづける。
URLの#以降を取得して#を取り除いたものを変数Uに代⼊入する
変数Uに#以降のURLが存在すれば、それをGAサーバーに送信！変数Uに#以降のURLが存在しなければ、デフォルトのまま送信！
*jQuery Mobile 1.0 Beta 1
© 2011 DMM.com Labo Co.,Ltd.31
※リンクはルートパスから記述する
<a href="/m/hoge/">Link Text</a> <a href="/m/fuga/">Link Text</a> <a href="/m/hoge/fuga/">Link Text</a>
/m/ディレクトリ以下にスマホサイトを設置した場合
© 2011 DMM.com Labo Co.,Ltd.32
※リンクはルートパスから記述する
<a href="/m/hoge/"> →http://example.com/m/#/m/hoge/<a href="/m/fuga/"> →http://example.com/m/#/m/fuga/<a href="/m/hoge/fuga/"> →http://example.com/m/#/m/hoge/fuga/
/m/ディレクトリ以下にスマホサイトを設置した場合
© 2011 DMM.com Labo Co.,Ltd.33
© 2011 DMM.com Labo Co.,Ltd.33
© 2011 DMM.com Labo Co.,Ltd.
5.Conclusion
© 2011 DMM.com Labo Co.,Ltd.
jQuery MobileとGoogle Analytics
1.問題点
1.Ajax遷移時にGAが作動しない
2.GAは#(フラグメント識別⼦子)を記録しない
2.対策
1.Ajax遷移をやめる
2.トラッキングスニペットを改良する
35
© 2011 DMM.com Labo Co.,Ltd.36
Web担当者の⼈人も
JavaScript覚えたらちょっと幸せになれますヽ(´ー｀)ノ
37
Thank you!
Kanazawa's night view by ichigami
© 2011 DMM.com Labo Co.,Ltd.
参考資料
- Slides from our jQuery Conference Presentation on jQuery Mobile - Using Google Analytics with jQuery Mobile ¦ Jon Gales- jQuery Mobileのメモ書きとか。 ¦ Azrael- Basic Google Analytics with jQuery Mobile pageshow - Designs ¦ jQuery Mobile
38
