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

Kazuyuki Honda

May 13, 2014
Tweet

More Decks by Kazuyuki Honda

Other Decks in Technology

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. 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" } ); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ
  4. A > Google Analytics Ͱ΋ݟ͍ͨΜ͚ͩͲ B > XX ͬͯπʔϧ΋ྑͦ͞͏ͳΜͩΑͶ Զ

    > Σʢƅшƅlllʣ·ͫͰ͐ʂʁ ·ɺΑ͋͘Δ࿩Ͱ͢ΑͶ
  5. ͜͏͍͏ͷ΋πϥΠ 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> ϏϧυͱσϓϩΠ͕ඞཁ
  6. ංେԽ͢Δλά͸ 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 -->
  7. 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" } ); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ
  8. 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" } ); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ ͜Εͦͷ··࢖͑ΔΑͶʁ