Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Logging for HTML5 Single Page Application

Slide 4

Slide 4 text

Build by Backbone.js Hosted on Amazon S3

Slide 5

Slide 5 text

Single Page Application ͷ ΠϕϯτϩάͰۤ࿑ͨ͠࿩ ͱࠓޙͷվળܭը ! ※ Fluentd ͷ࿩͸͠͹Β͘ग़͖ͯ·ͤΜ

Slide 6

Slide 6 text

Fluentd ͱ͍͑͹ ΞΫηεϩάղੳ

Slide 7

Slide 7 text

ΞΫηεϩά͕ඈΜͰ͜ͳ͍ Πϕϯτ͕ଟ਺͋Δ

Slide 8

Slide 8 text

ྫ͑͹ • API ΞΫηεΛ൐Θͳ͍୯७ͳը໘ભҠ • ϩʔΧϧΩϟογϡΛར༻͢ΔՕॴͰɺ̎ճ ໨͔Β API ΞΫηε΋དྷͳ͍ • Native ࿈ܞ͔ͨ͠ͱ͔

Slide 9

Slide 9 text

ղܾࡦ ΠϕϯτʹରԠͨ͠ΞΫηε ϩάऩूπʔϧΛ࢖͏

Slide 10

Slide 10 text

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" } ); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

IUUQTNJYQBOFMDPNGFBUVSFT 'VOOFMT 4FHNFOUBUJPO 3FUFOUJPO

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ

Slide 18

Slide 18 text

Ͳ͔͜ͰݟͨΑ͏ͳɾɾɾ

Slide 19

Slide 19 text

ංେԽ͢Δ script λάͱ஗͘ͳΔ ϖʔδϩʔυ࣌ؒͱͷઓ͍͕࢝·Δ ·ɺΑ͋͘Δ࿩Ͱ͢ΑͶ

Slide 20

Slide 20 text

͜͏͍͏ͷ΋πϥΠ 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'); ϏϧυͱσϓϩΠ͕ඞཁ

Slide 21

Slide 21 text

ංେԽ͢Δλά͸ 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');

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

͜͜ͰৼΓฦΓ

Slide 24

Slide 24 text

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" } ); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ

Slide 25

Slide 25 text

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); λάΛషΓ෇͚ͯ Πϕϯτૹ৴ίʔυΛຒΊࠐΉ

Slide 26

Slide 26 text

ͲΜͳπʔϧͰ΋ ΍Δ͜ͱ΍ύϥϝʔλ͸ ΄΅ಉ͡

Slide 27

Slide 27 text

ڞ௨ԽͰ͖ͦ͏ʂ

Slide 28

Slide 28 text

Before &YDFM "NB[PO4 +FOLJOT %BJMZ "1*
 TFSWFS

Slide 29

Slide 29 text

After &YDFM "TZPVOFFE "1*
 TFSWFS 4

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

ເ͕;͘ΒΉ

Slide 32

Slide 32 text

C > ҠߦͲ͏͢Μͷʁ D > ΫΠΞϯτϥΠϒϥϦͷઃܭͱϝϯςͲ͏͢Μͷʁ Զ > ((´д`υ))ŪƄřŢżř

Slide 33

Slide 33 text

͜͜ͰৼΓฦΓ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

MixpanelOutput type mixpanel project_token YOUR_PROJECT_TOKEN distinct_id_key user_id event_key event_name

Slide 39

Slide 39 text

ઈࢍݕূத

Slide 40

Slide 40 text

ͪͳΈʹ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

That’s ALL