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

    View Slide

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

    View Slide

  3. Logging for
    HTML5
    Single Page Application

    View Slide

  4. Build by Backbone.js
    Hosted on Amazon S3

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. mixpanel ͷ৔߹
    (function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d)<br/>{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,<br/>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<br/>+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview<br/>track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment<br/>people.append people.track_charge people.clear_charges people.delete_user".split(" ");<br/>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=!<br/>0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")<br/>[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);<br/>mixpanel.init("YOUR TOKEN");
    mixpanel.track(
    "Clicked Ad",
    { "Banner Color": "Blue" }
    );
    λάΛషΓ෇͚ͯ
    Πϕϯτૹ৴ίʔυΛຒΊࠐΉ

    View Slide

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

    View Slide

  12. IUUQTNJYQBOFMDPNGFBUVSFT
    'VOOFMT 4FHNFOUBUJPO
    3FUFOUJPO

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. Google Analytics ͷ௥Ճ
    <br/>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){<br/>(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),<br/>m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)<br/>})(window,document,'script','//www.google-analytics.com/analytics.js','ga');<br/>ga('create', ‘UA-XXXX-1', ‘example.com');<br/>ga('send', 'pageview');<br/>
    // Virtual Page View
    _ga('send', ‘pageview’,path);
    !
    // Event
    _ga('send', 'event', 'click', category, label);
    λάΛషΓ෇͚ͯ
    Πϕϯτૹ৴ίʔυΛຒΊࠐΉ

    View Slide

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

    View Slide

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

    View Slide

  20. ͜͏͍͏ͷ΋πϥΠ
    switch (env) {
    case ‘development’
    UA_ID = ‘XXX’;
    case ‘staging’
    UA_ID = ‘YYY’;
    case ‘production’:
    UA_ID = ‘ZZZ’;
    }
    !
    <br/>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){<br/>(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new<br/>Date();a=s.createElement(o),<br/>m=s.getElementsByTagName(o)<br/>[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)<br/>})(window,document,'script','//www.google-analytics.com/analytics.js','ga');<br/>ga('create', ‘{{ UA_ID }}’, ‘example.com');<br/>ga('send', 'pageview');<br/>
    ϏϧυͱσϓϩΠ͕ඞཁ

    View Slide

  21. ංେԽ͢Δλά͸
    Google Tag Manager Ͱղܾ

    height="0" width="0" style="display:none;visibility:hidden">
    noscript>
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br/>new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br/>j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=<br/>'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br/>})(window,document,'script','dataLayer','GTM-XXYYZZ');

    View Slide

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

    View Slide

  23. ͜͜ͰৼΓฦΓ

    View Slide

  24. mixpanel ͷ৔߹ʢ࠶ܝʣ
    (function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d)<br/>{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,<br/>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<br/>+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview<br/>track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment<br/>people.append people.track_charge people.clear_charges people.delete_user".split(" ");<br/>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=!<br/>0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")<br/>[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);<br/>mixpanel.init("YOUR TOKEN");
    mixpanel.track(
    "Clicked Ad",
    { "Banner Color": "Blue" }
    );
    λάΛషΓ෇͚ͯ
    Πϕϯτૹ৴ίʔυΛຒΊࠐΉ

    View Slide

  25. Google Analytics ͷ௥Ճʢ࠶ܝʣ
    <br/>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){<br/>(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),<br/>m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)<br/>})(window,document,'script','//www.google-analytics.com/analytics.js','ga');<br/>ga('create', ‘UA-XXXX-1', ‘example.com');<br/>ga('send', 'pageview');<br/>
    // Virtual Page View
    _ga('send', ‘pageview’,path);
    !
    // Event
    _ga('send', 'event', 'click', category, label);
    λάΛషΓ෇͚ͯ
    Πϕϯτૹ৴ίʔυΛຒΊࠐΉ

    View Slide

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

    View Slide

  27. ڞ௨ԽͰ͖ͦ͏ʂ

    View Slide

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

    TFSWFS

    View Slide

  29. After
    &YDFM
    "TZPVOFFE
    "1*

    TFSWFS
    4

    View Slide

  30. In the feature
    &YDFM
    "1*

    TFSWFS
    4
    3FE4IJGU
    42- 0%#$

    "TZPVMJLF
    "TZPVOFFE

    View Slide

  31. ເ͕;͘ΒΉ

    View Slide

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

    View Slide

  33. ͜͜ͰৼΓฦΓ

    View Slide

  34. mixpanel ͷ৔߹ʢ࠶ʑܝʣ
    (function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d)<br/>{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,<br/>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<br/>+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview<br/>track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment<br/>people.append people.track_charge people.clear_charges people.delete_user".split(" ");<br/>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=!<br/>0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")<br/>[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);<br/>mixpanel.init("YOUR TOKEN");
    mixpanel.track(
    "Clicked Ad",
    { "Banner Color": "Blue" }
    );
    λάΛషΓ෇͚ͯ
    Πϕϯτૹ৴ίʔυΛຒΊࠐΉ
    ͜Εͦͷ··࢖͑ΔΑͶʁ

    View Slide

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

    View Slide

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

    View Slide

  37. HttpMixpanelInput

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

    View Slide

  38. MixpanelOutput

    type mixpanel
    project_token YOUR_PROJECT_TOKEN
    distinct_id_key user_id
    event_key event_name

    View Slide

  39. ઈࢍݕূத

    View Slide

  40. ͪͳΈʹ

    View Slide

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

    View Slide

  42. That’s ALL

    View Slide