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

Logging Technique for HTML5 Single Page Applica...

Logging Technique for HTML5 Single Page Application with Fluentd

@Fluentd Meetup 2014/05/13

Avatar for Kazuyuki Honda

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" } ); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ ͜Εͦͷ··࢖͑ΔΑͶʁ