Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Logging Technique for HTML5 Single Page Application with Fluentd

Logging Technique for HTML5 Single Page Application with Fluentd

@Fluentd Meetup 2014/05/13

7ebb44070077adbf77dececc7802e58b?s=128

Kazuyuki Honda

May 13, 2014
Tweet

Transcript

  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[PO4 +FOLJOT %BJMZ "1*
 TFSWFS

  29. After &YDFM "TZPVOFFE "1*
 TFSWFS 4

  30. In the feature &YDFM "1*
 TFSWFS 4 3FE4IJGU 42- 0%#$

    "TZPVMJLF "TZPVOFFE
  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