Logging Technique for HTML5 Single Page Application with Fluentd

@Fluentd Meetup 2014/05/13

1. Logging Technique for HTML5 Single Page App and Fluentd by Kazuyuki Honda @hakobera 2014/05/13 Fluentd Meetup
2. Kazuyuki Honda Twitter : @hakobera Blog : http://hakobera.hatenablog.com Qiita : http://qiita.com/hakobera ! Working at Quipper, Ltd Interest: Data Visualization, InfluxDB, Fluentd ! !
3. Logging for HTML5 Single Page Application
4. Build by Backbone.js Hosted on Amazon S3
5. Single Page Application ͷ ΠϕϯτϩάͰۤ࿑ͨ͠࿩ ͱࠓޙͷվળܭը ! ※ Fluentd ͷ࿩͸͠͹Β͘ग़͖ͯ·ͤΜ
6. Fluentd ͱ͍͑͹ ΞΫηεϩάղੳ
7. ΞΫηεϩά͕ඈΜͰ͜ͳ͍ Πϕϯτ͕ଟ਺͋Δ
8. ྫ͑͹ • API ΞΫηεΛ൐Θͳ͍୯७ͳը໘ભҠ • ϩʔΧϧΩϟογϡΛར༻͢ΔՕॴͰɺ̎ճ ໨͔Β API ΞΫηε΋དྷͳ͍ • Native ࿈ܞ͔ͨ͠ͱ͔
9. ղܾࡦ ΠϕϯτʹରԠͨ͠ΞΫηε ϩάऩूπʔϧΛ࢖͏
10. mixpanel ͷ৔߹ <!-- start Mixpanel --><script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d) {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, 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 +="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" "); 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=! 0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script") [0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]); mixpanel.init("YOUR TOKEN");</script><!-- end Mixpanel --> mixpanel.track( "Clicked Ad", { "Banner Color": "Blue" } ); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ
11. Web ͷख๏͕ͦͷ··࢖͑Δʂ HTML5 ΞϓϦૉ੖Β͍͠ʂ μογϡϘʔυ΋࡞Βͳͯ͘ྑ͍͠Ͷʂ
12. IUUQTNJYQBOFMDPNGFBUVSFT 'VOOFMT 4FHNFOUBUJPO 3FUFOUJPO
13. A > Excel Ͱ෼ੳ͍ͨ͠Μ͚ͩͲ Զ > Σʢƅшƅlllʣ·ͫͰ͐ʂʁ ·ɺΑ͋͘Δ࿩Ͱ͢ΑͶ
14. ͤͬͤ͜ Export ϓϩάϥϜΛॻ͘ ! JenkinsͰ Daily Ͱىಈ -> Amazon S3 ʹอଘ
15. ࣗಈԽͨ͠͠ɺ͜ΕͰ҆৺
16. A > Google Analytics Ͱ΋ݟ͍ͨΜ͚ͩͲ B > XX ͬͯπʔϧ΋ྑͦ͞͏ͳΜͩΑͶ Զ > Σʢƅшƅlllʣ·ͫͰ͐ʂʁ ·ɺΑ͋͘Δ࿩Ͱ͢ΑͶ
17. Google Analytics ͷ௥Ճ <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', ‘UA-XXXX-1', ‘example.com'); ga('send', 'pageview'); </script> // Virtual Page View _ga('send', ‘pageview’,path); ! // Event _ga('send', 'event', 'click', category, label); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ
18. Ͳ͔͜ͰݟͨΑ͏ͳɾɾɾ
19. ංେԽ͢Δ script λάͱ஗͘ͳΔ ϖʔδϩʔυ࣌ؒͱͷઓ͍͕࢝·Δ ·ɺΑ͋͘Δ࿩Ͱ͢ΑͶ
20. ͜͏͍͏ͷ΋πϥΠ switch (env) { case ‘development’ UA_ID = ‘XXX’; case ‘staging’ UA_ID = ‘YYY’; case ‘production’: UA_ID = ‘ZZZ’; } ! <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o) [0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', ‘{{ UA_ID }}’, ‘example.com'); ga('send', 'pageview'); </script> ϏϧυͱσϓϩΠ͕ඞཁ
21. ංେԽ͢Δλά͸ Google Tag Manager Ͱղܾ <!-- Google Tag Manager --> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-5CGNTR" height="0" width="0" style="display:none;visibility:hidden"></iframe></ noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXYYZZ');</script> <!-- End Google Tag Manager -->
22. ϖʔδϩʔυ͕஗͍ͷ͸มΘΒͣ
23. ͜͜ͰৼΓฦΓ
24. mixpanel ͷ৔߹ʢ࠶ܝʣ <!-- start Mixpanel --><script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d) {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, 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 +="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" "); 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=! 0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script") [0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]); mixpanel.init("YOUR TOKEN");</script><!-- end Mixpanel --> mixpanel.track( "Clicked Ad", { "Banner Color": "Blue" } ); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ
25. Google Analytics ͷ௥Ճʢ࠶ܝʣ <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', ‘UA-XXXX-1', ‘example.com'); ga('send', 'pageview'); </script> // Virtual Page View _ga('send', ‘pageview’,path); ! // Event _ga('send', 'event', 'click', category, label); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ
26. ͲΜͳπʔϧͰ΋ ΍Δ͜ͱ΍ύϥϝʔλ͸ ΄΅ಉ͡
27. ڞ௨ԽͰ͖ͦ͏ʂ
28. Before &YDFM "NB[PO
    4 +FOLJOT %BJMZ "1*
 TFSWFS
29. After &YDFM "T
    ZPV
    OFFE "1*
 TFSWFS 4
30. In the feature &YDFM "1*
 TFSWFS 4 3FE4IJGU 42- 0%#$ "T
    ZPV
    MJLF
    "T
    ZPV
    OFFE
31. ເ͕;͘ΒΉ
32. C > ҠߦͲ͏͢Μͷʁ D > ΫΠΞϯτϥΠϒϥϦͷઃܭͱϝϯςͲ͏͢Μͷʁ Զ > ((´д`υ))ŪƄřŢżř
33. ͜͜ͰৼΓฦΓ
34. mixpanel ͷ৔߹ʢ࠶ʑܝʣ <!-- start Mixpanel --><script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d) {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, 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 +="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" "); 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=! 0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script") [0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]); mixpanel.init("YOUR TOKEN");</script><!-- end Mixpanel --> mixpanel.track( "Clicked Ad", { "Banner Color": "Blue" } ); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ ͜Εͦͷ··࢖͑ΔΑͶʁ
35. mixpanel ΫϥΠΞϯτΛ࠶ར༻ Ҡߦίετ΄΅θϩ
36. fluent-plugin-mixpanel ! mixpanel API ޓ׵ Plugin Λ ࡞ͬͨ IUUQTHJUIVCDPNIBLPCFSBqVFOUQMVHJONJYQBOFM
37. HttpMixpanelInput <source> type http_mixpanel bind 127.0.0.1 port 8888 body_size_limit 10m keepalive_timeout 5 add_http_headers true </source>
38. MixpanelOutput <match output.mixpanel.*> type mixpanel project_token YOUR_PROJECT_TOKEN distinct_id_key user_id event_key event_name </match>
39. ઈࢍݕূத
40. ͪͳΈʹ
41. ͜ΕΛطʹ Ϗδωεʹ͍ͯ͠Δձ͕ࣾ͋Δ Segment.IO IUUQTTFHNFOUJP
42. That’s ALL