Download - Using Google Analytics with jQuery Mobile
![Page 1: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/1.jpg)
© 2011 DMM.com Labo Co.,Ltd.
Using Google Analytics with jQuery Mobile
2011.06.28
Web担当者のためのjQuery Mobile⼊入⾨門
![Page 2: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/2.jpg)
© 2011 DMM.com Labo Co.,Ltd.
Agenda
1. ⾃自⼰己紹介
2. jQuery Mobile 概要
3. Google Analytics の問題点
4. 解決策
5. 本⽇日のまとめ
2
![Page 3: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/3.jpg)
© 2011 DMM.com Labo Co.,Ltd.
1. Who are you?
![Page 4: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/4.jpg)
© 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
![Page 5: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/5.jpg)
© 2011 DMM.com Labo Co.,Ltd.
Data Driven Design!*HiPPO: Highest Paid Person's Opinionhttp://www.flickr.com/photos/crincon/1111326214/
![Page 6: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/6.jpg)
© 2011 DMM.com Labo Co.,Ltd.
Data Driven Design!*HiPPO: Highest Paid Person's Opinion
Designer
HiPPO
http://www.flickr.com/photos/crincon/1111326214/
![Page 7: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/7.jpg)
© 2011 DMM.com Labo Co.,Ltd.
2. jQuery Mobile Overview
![Page 8: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/8.jpg)
© 2011 DMM.com Labo Co.,Ltd.7
Version 1.0 BetaA Touch-Optimized Web Framework for Smartphones & Tablets
![Page 9: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/9.jpg)
© 2011 DMM.com Labo Co.,Ltd.8
Works Everywhere!
![Page 10: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/10.jpg)
© 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%
![Page 11: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/11.jpg)
© 2011 DMM.com Labo Co.,Ltd.
JavaScript Distribution in Top Million Sites
10
JavaScript Distribution in Top Million Sites
45.1%
![Page 12: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/12.jpg)
© 2011 DMM.com Labo Co.,Ltd.11
Standard in Adobe CS5.5jQuery Mobile Integration
![Page 13: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/13.jpg)
© 2011 DMM.com Labo Co.,Ltd.
3. Problems in Google Analytics
![Page 14: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/14.jpg)
© 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>
![Page 15: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/15.jpg)
© 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>
![Page 16: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/16.jpg)
© 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>
![Page 17: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/17.jpg)
© 2011 DMM.com Labo Co.,Ltd.
Smartphone UI Elements
![Page 18: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/18.jpg)
© 2011 DMM.com Labo Co.,Ltd.
Ajax-Driven Page Navigation
16
![Page 19: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/19.jpg)
© 2011 DMM.com Labo Co.,Ltd.17
Page Transitions
*video
![Page 20: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/20.jpg)
© 2011 DMM.com Labo Co.,Ltd.17
Page Transitions
*video
![Page 21: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/21.jpg)
© 2011 DMM.com Labo Co.,Ltd.
example.com/a.html
example.com/b.html
18
![Page 22: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/22.jpg)
© 2011 DMM.com Labo Co.,Ltd.
Ajax link + add to DOM
19
![Page 23: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/23.jpg)
© 2011 DMM.com Labo Co.,Ltd.
Ajax link + add to DOM
19
![Page 24: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/24.jpg)
© 2011 DMM.com Labo Co.,Ltd.
Hash URLs
20
![Page 25: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/25.jpg)
© 2011 DMM.com Labo Co.,Ltd.
Hash URLs
20
!?
![Page 26: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/26.jpg)
© 2011 DMM.com Labo Co.,Ltd.
Google Analytics の問題点
1.Ajax遷移時にGAが作動しない!
2.GAは#(フラグメント識別⼦子)を記録しない!
21
![Page 27: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/27.jpg)
© 2011 DMM.com Labo Co.,Ltd.
今後予想されるケース
22
![Page 28: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/28.jpg)
© 2011 DMM.com Labo Co.,Ltd.
今後予想されるケース
22
スマホサイト作るんだけど( ́ _ゝ )`システムさん
![Page 29: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/29.jpg)
© 2011 DMM.com Labo Co.,Ltd.
今後予想されるケース
22
スマホサイト作るんだけど( ́ _ゝ )`システムさん
Google Analytics⼊入れといて~ (´ー`)Web担さん
![Page 30: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/30.jpg)
© 2011 DMM.com Labo Co.,Ltd.
今後予想されるケース
22
スマホサイト作るんだけど( ́ _ゝ )`システムさん
Google Analytics⼊入れといて~ (´ー`)Web担さん
Head要素に⼊入れとけばいいよね?( ́ _ゝ )`システムさん
![Page 31: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/31.jpg)
© 2011 DMM.com Labo Co.,Ltd.
今後予想されるケース
22
スマホサイト作るんだけど( ́ _ゝ )`システムさん
Google Analytics⼊入れといて~ (´ー`)Web担さん
そうだよ♪ (´ー`)Web担さん
Head要素に⼊入れとけばいいよね?( ́ _ゝ )`システムさん
![Page 32: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/32.jpg)
© 2011 DMM.com Labo Co.,Ltd.
Data is not found.http://www.flickr.com/photos/druidicparadise/367047412/
![Page 33: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/33.jpg)
© 2011 DMM.com Labo Co.,Ltd.
Demo
24
![Page 34: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/34.jpg)
© 2011 DMM.com Labo Co.,Ltd.
4. Solutions
![Page 35: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/35.jpg)
© 2011 DMM.com Labo Co.,Ltd.
1. Ajax遷移をやめる
26
![Page 36: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/36.jpg)
© 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
![Page 37: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/37.jpg)
© 2011 DMM.com Labo Co.,Ltd.
2. トラッキングスニペットを改良する
28
![Page 38: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/38.jpg)
© 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
![Page 39: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/39.jpg)
© 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
![Page 40: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/40.jpg)
© 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
![Page 41: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/41.jpg)
© 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
![Page 42: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/42.jpg)
© 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
![Page 43: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/43.jpg)
© 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/ディレクトリ以下にスマホサイトを設置した場合
![Page 44: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/44.jpg)
© 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/ディレクトリ以下にスマホサイトを設置した場合
![Page 45: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/45.jpg)
© 2011 DMM.com Labo Co.,Ltd.33
![Page 46: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/46.jpg)
© 2011 DMM.com Labo Co.,Ltd.33
![Page 47: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/47.jpg)
© 2011 DMM.com Labo Co.,Ltd.
5.Conclusion
![Page 48: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/48.jpg)
© 2011 DMM.com Labo Co.,Ltd.
jQuery MobileとGoogle Analytics
1.問題点
1.Ajax遷移時にGAが作動しない
2.GAは#(フラグメント識別⼦子)を記録しない
2.対策
1.Ajax遷移をやめる
2.トラッキングスニペットを改良する
35
![Page 49: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/49.jpg)
© 2011 DMM.com Labo Co.,Ltd.36
Web担当者の⼈人も
JavaScript覚えたらちょっと幸せになれますヽ(´ー`)ノ
![Page 50: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/50.jpg)
37
Thank you!
Kanazawa's night view by ichigami
![Page 51: Using Google Analytics with jQuery Mobile](https://reader034.vdocument.in/reader034/viewer/2022051819/54c738ed4a795937458b456f/html5/thumbnails/51.jpg)
© 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