Logging Technique for HTML5 Single Page App and Fluentd by Kazuyuki Honda @hakobera 2014/05/13 Fluentd Meetup

Kazuyuki Honda Twitter : @hakobera Blog : http://hakobera.hatenablog.com Qiita : http://qiita.com/hakobera ! Working at Quipper, Ltd Interest: Data Visualization, InfluxDB, Fluentd ! !

Logging for HTML5 Single Page Application

Build by Backbone.js Hosted 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) {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"); mixpanel.track( "Clicked Ad", { "Banner Color": "Blue" } ); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ

Web ͷख๏͕ͦͷ··࢖͑Δʂ HTML5 ΞϓϦૉ੖Β͍͠ʂ μογϡϘʔυ΋࡞Βͳͯ͘ྑ͍͠Ͷʂ

IUUQTNJYQBOFMDPNGFBUVSFT 'VOOFMT 4FHNFOUBUJPO 3FUFOUJPO

A > Excel Ͱ෼ੳ͍ͨ͠Μ͚ͩͲ Զ > Σʢƅшƅlllʣ·ͫͰ͐ʂʁ ·ɺΑ͋͘Δ࿩Ͱ͢ΑͶ

ͤͬͤ͜ Export ϓϩάϥϜΛॻ͘ ! JenkinsͰ Daily Ͱىಈ -> Amazon S3 ʹอଘ

ࣗಈԽͨ͠͠ɺ͜ΕͰ҆৺

A > Google Analytics Ͱ΋ݟ͍ͨΜ͚ͩͲ B > XX ͬͯπʔϧ΋ྑͦ͞͏ͳΜͩΑͶ Զ > Σʢƅшƅlllʣ·ͫͰ͐ʂʁ ·ɺΑ͋͘Δ࿩Ͱ͢ΑͶ

Google Analytics ͷ௥Ճ (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'); // 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’; } ! (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'); ϏϧυͱσϓϩΠ͕ඞཁ

ංେԽ͢Δλά͸ Google Tag Manager Ͱղܾ noscript> (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');

ϖʔδϩʔυ͕஗͍ͷ͸มΘΒͣ

͜͜ͰৼΓฦΓ

mixpanel ͷ৔߹ʢ࠶ܝʣ (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"); mixpanel.track( "Clicked Ad", { "Banner Color": "Blue" } ); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ

Google Analytics ͷ௥Ճʢ࠶ܝʣ (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'); // 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*
 TFSWFS 4

In the feature &YDFM "1*
 TFSWFS 4 3FE4IJGU 42- 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) {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"); mixpanel.track( "Clicked Ad", { "Banner Color": "Blue" } ); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ ͜Εͦͷ··࢖͑ΔΑͶʁ

mixpanel ΫϥΠΞϯτΛ࠶ར༻ Ҡߦίετ΄΅θϩ

fluent-plugin-mixpanel ! mixpanel API ޓ׵ Plugin Λ ࡞ͬͨ IUUQTHJUIVCDPNIBLPCFSBqVFOUQMVHJONJYQBOFM

HttpMixpanelInput type http_mixpanel bind 127.0.0.1 port 8888 body_size_limit 10m keepalive_timeout 5 add_http_headers true

MixpanelOutput type mixpanel project_token YOUR_PROJECT_TOKEN distinct_id_key user_id event_key event_name

ઈࢍݕূத

ͪͳΈʹ

͜ΕΛطʹ Ϗδωεʹ͍ͯ͠Δձ͕ࣾ͋Δ Segment.IO IUUQTTFHNFOUJP

That’s ALL