@Fluentd Meetup 2014/05/13
Logging Technique forHTML5 Single Page AppandFluentdby Kazuyuki Honda @hakobera2014/05/13 Fluentd Meetup
View Slide
Kazuyuki HondaTwitter : @hakoberaBlog : http://hakobera.hatenablog.comQiita : http://qiita.com/hakobera!Working at Quipper, LtdInterest: Data Visualization, InfluxDB, Fluentd!!
Logging forHTML5Single Page Application
Build by Backbone.jsHosted on Amazon S3
Single Page Application ͷΠϕϯτϩάͰۤ࿑ͨ͠ͱࠓޙͷվળܭը!※ Fluentd ͷ͠Β͘ग़͖ͯ·ͤΜ
Fluentd ͱ͍͑ΞΫηεϩάղੳ
ΞΫηεϩά͕ඈΜͰ͜ͳ͍Πϕϯτ͕ଟ͋Δ
ྫ͑• API ΞΫηεΛΘͳ͍୯७ͳը໘ભҠ• ϩʔΧϧΩϟογϡΛར༻͢ΔՕॴͰɺ̎ճ͔Β API ΞΫηεདྷͳ͍• Native ࿈ܞ͔ͨ͠ͱ͔
ղܾࡦΠϕϯτʹରԠͨ͠ΞΫηεϩάऩूπʔϧΛ͏
mixpanel ͷ߹(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d)<br/>{function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,<br/>0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a<br/>+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview<br/>track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment<br/>people.append people.track_charge people.clear_charges people.delete_user".split(" ");<br/>for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!<br/>0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")<br/>[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);<br/>mixpanel.init("YOUR TOKEN");mixpanel.track("Clicked Ad",{ "Banner Color": "Blue" });λάΛషΓ͚ͯΠϕϯτૹ৴ίʔυΛຒΊࠐΉ
Web ͷख๏͕ͦͷ··͑ΔʂHTML5 ΞϓϦૉΒ͍͠ʂμογϡϘʔυ࡞Βͳͯ͘ྑ͍͠Ͷʂ
IUUQTNJYQBOFMDPNGFBUVSFT'VOOFMT 4FHNFOUBUJPO3FUFOUJPO
A > Excel Ͱੳ͍ͨ͠Μ͚ͩͲԶ > Σʢƅшƅlllʣ·ͫͰ͐ʂʁ·ɺΑ͋͘ΔͰ͢ΑͶ
ͤͬͤ͜ Export ϓϩάϥϜΛॻ͘!JenkinsͰ Daily Ͱىಈ-> Amazon S3 ʹอଘ
ࣗಈԽͨ͠͠ɺ͜ΕͰ҆৺
A > Google Analytics Ͱݟ͍ͨΜ͚ͩͲB > XX ͬͯπʔϧྑͦ͞͏ͳΜͩΑͶԶ > Σʢƅшƅlllʣ·ͫͰ͐ʂʁ·ɺΑ͋͘ΔͰ͢ΑͶ
Google Analytics ͷՃ<br/>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){<br/>(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),<br/>m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)<br/>})(window,document,'script','//www.google-analytics.com/analytics.js','ga');<br/>ga('create', ‘UA-XXXX-1', ‘example.com');<br/>ga('send', 'pageview');<br/>// Virtual Page View_ga('send', ‘pageview’,path);!// Event_ga('send', 'event', 'click', category, label);λάΛషΓ͚ͯΠϕϯτૹ৴ίʔυΛຒΊࠐΉ
Ͳ͔͜ͰݟͨΑ͏ͳɾɾɾ
ංେԽ͢Δ script λάͱ͘ͳΔϖʔδϩʔυ࣌ؒͱͷઓ͍͕࢝·Δ·ɺΑ͋͘ΔͰ͢ΑͶ
͜͏͍͏ͷπϥΠswitch (env) {case ‘development’UA_ID = ‘XXX’;case ‘staging’UA_ID = ‘YYY’;case ‘production’:UA_ID = ‘ZZZ’;}!<br/>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){<br/>(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new<br/>Date();a=s.createElement(o),<br/>m=s.getElementsByTagName(o)<br/>[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)<br/>})(window,document,'script','//www.google-analytics.com/analytics.js','ga');<br/>ga('create', ‘{{ UA_ID }}’, ‘example.com');<br/>ga('send', 'pageview');<br/>ϏϧυͱσϓϩΠ͕ඞཁ
ංେԽ͢ΔλάGoogle Tag Manager Ͱղܾheight="0" width="0" style="display:none;visibility:hidden">noscript>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br/>new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br/>j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=<br/>'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br/>})(window,document,'script','dataLayer','GTM-XXYYZZ');
ϖʔδϩʔυ͕͍ͷมΘΒͣ
͜͜ͰৼΓฦΓ
mixpanel ͷ߹ʢ࠶ܝʣ(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d)<br/>{function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,<br/>0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a<br/>+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview<br/>track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment<br/>people.append people.track_charge people.clear_charges people.delete_user".split(" ");<br/>for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!<br/>0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")<br/>[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);<br/>mixpanel.init("YOUR TOKEN");mixpanel.track("Clicked Ad",{ "Banner Color": "Blue" });λάΛషΓ͚ͯΠϕϯτૹ৴ίʔυΛຒΊࠐΉ
Google Analytics ͷՃʢ࠶ܝʣ<br/>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){<br/>(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),<br/>m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)<br/>})(window,document,'script','//www.google-analytics.com/analytics.js','ga');<br/>ga('create', ‘UA-XXXX-1', ‘example.com');<br/>ga('send', 'pageview');<br/>// Virtual Page View_ga('send', ‘pageview’,path);!// Event_ga('send', 'event', 'click', category, label);λάΛషΓ͚ͯΠϕϯτૹ৴ίʔυΛຒΊࠐΉ
ͲΜͳπʔϧͰΔ͜ͱύϥϝʔλ΄΅ಉ͡
ڞ௨ԽͰ͖ͦ͏ʂ
Before&YDFM"NB[PO4+FOLJOT%BJMZ"1* TFSWFS
After&YDFM"TZPVOFFE"1* TFSWFS4
In the feature&YDFM"1* TFSWFS43FE4IJGU42- 0%#$"TZPVMJLF"TZPVOFFE
ເ͕;͘ΒΉ
C > ҠߦͲ͏͢ΜͷʁD > ΫΠΞϯτϥΠϒϥϦͷઃܭͱϝϯςͲ͏͢ΜͷʁԶ > ((´д`υ))ŪƄřŢżř
mixpanel ͷ߹ʢ࠶ʑܝʣ(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d)<br/>{function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,<br/>0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a<br/>+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview<br/>track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment<br/>people.append people.track_charge people.clear_charges people.delete_user".split(" ");<br/>for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!<br/>0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")<br/>[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);<br/>mixpanel.init("YOUR TOKEN");mixpanel.track("Clicked Ad",{ "Banner Color": "Blue" });λάΛషΓ͚ͯΠϕϯτૹ৴ίʔυΛຒΊࠐΉ͜Εͦͷ··͑ΔΑͶʁ
mixpanel ΫϥΠΞϯτΛ࠶ར༻Ҡߦίετ΄΅θϩ
fluent-plugin-mixpanel!mixpanel API ޓ Plugin Λ࡞ͬͨIUUQTHJUIVCDPNIBLPCFSBqVFOUQMVHJONJYQBOFM
HttpMixpanelInputtype http_mixpanelbind 127.0.0.1port 8888body_size_limit 10mkeepalive_timeout 5add_http_headers true
MixpanelOutputtype mixpanelproject_token YOUR_PROJECT_TOKENdistinct_id_key user_idevent_key event_name
ઈࢍݕূத
ͪͳΈʹ
͜ΕΛطʹϏδωεʹ͍ͯ͠Δձ͕ࣾ͋ΔSegment.IOIUUQTTFHNFOUJP
That’s ALL
hakobera
makamaka
pauloxnet
oracle4engineer
ayanonanjo
taketakekaho
yhana
superbrothers
sbtechnight
udzura
kurotaky
mapbox_jp
datarian
pauljervisheath
schacon
lara
morganepeng
stephaniewalter
tanoku
afnizarnur
mthomps
mojombo
samlambert
caitiem20
kastner