RxJS, mixpanelで実装するSPAの行動分析基盤

Slide 1

Slide 1 text

3Y+4 NJYQBOFMͰ࣮૷͢Δ41"ͷߦಈ෼ੳج൫ :PTVLF,VSBNJ !2VSBNZ 1

Slide 2

Slide 2 text

"CPVUNF

Slide 3

Slide 3 text

w 2VSBNZ UXJUUFS(JU)VC2JJUB ͱ͍͍·͢ w OHKBQBOͷελοϑͯ͠·͢ w IUUQTMBDLJOWJUFOHKBQBOPSH w "OHVMBS 5ZQF4DSJQU 7JNΛภѪ͍ͯ͠·͢ ࣗݾ঺հ

Slide 4

Slide 4 text

ձࣾαʔϏε঺հ

Slide 5

Slide 5 text

"*ΞφϦετ w IUUQTXBDVMBJDPN

Slide 6

Slide 6 text

"*ΞφϦετ w (PPHMF"OBMZUJDTͷσʔλΛݩʹɺ8FCαΠτͷվળҊΛ ఏҊ w ྫɿʮಛఆͷϖʔδΛݟΔͱ$73͕ஶ͘͠ѱ͘ͳΔʯ౳ w 8FCϚʔέλʔ ୅ཧళ͞Μ޲͚ʹ࢖ͬͯ΋Β͏ͨΊͷ## 4BB4 w "OHVMBSWʹΑΔ41"

Slide 7

Slide 7 text

ࠓ೔ͷςʔϚ

Slide 8

Slide 8 text

41"͕ͲͷΑ͏ʹ࢖ΘΕͯΔ͔஌Γ͍ͨ

Slide 9

Slide 9 text

σʔλΛݩʹվળ఺Λݟ͚ͭΔ

Slide 10

Slide 10 text

NJYQBOFM w Ϣʔβʔ୯ҐͷΠϕϯτΛࡉ͔͘औಘɾ෼ੳͰ͖Δ

Slide 11

Slide 11 text

NJYQBOFMͷಛ௃ w NJYQBOFMUSBDL ʜ Ͱ೚ҙͷΠϕϯτΛૹ৴Ͱ͖Δ w σʔλΛ"1*ͰFYQPSUͰ͖Δ w #JH2VFSZʹJNQPSU w ଞͷσʔλιʔε %# ͱ૊Θͤͯɺ3FEBTIͰΫΤϦΛ ࡞Γɺ༷ʑͳ࣠Ͱ෼ੳ͕Ͱ͖Δ

Slide 12

Slide 12 text

ͲͷΑ͏ʹૹ৴͢Ε͹Α͍͔ʁ

Slide 13

Slide 13 text

ϢʔβʔΠϕϯτͷந৅Խ w 41"Ͱ͸༷ʑͳʮΠϕϯτʯ͕ൃੜ͢Δ w %0.Πϕϯτ ϑΥʔϜͷೖྗ ϘλϯΫϦοΫ౳ w ϧʔλʔʹΑΔը໘ભҠ w Ϟʔμϧ΍Ξϥʔτͷ։ด w Ϗδωεཁ݅తͳ ίϯόʔδϣϯΠϕϯτ w FUDʜ

Slide 14

Slide 14 text

Πϕϯτͷந৅Խ w ΠϕϯτͷൃੜՕॴຖʹNJYQBOFM΁ͷૹ৴Λॻ͘ͷ͸৑௕ɺ ॲཧͷݟཱ͕ͯѱ͘ͳΔ w ͦ͜ͰɺΠϕϯτΛ3YKTͷετϦʔϜͱͯ͠ந৅Խ w ͜ͷετϦʔϜΛ4VCTDSJCFͯ͠.JYQBOFM΁ૹ৴ w 3YKT࣌ؒͰൃੜ͢ΔΠϕϯτΛந৅తʹѻ͏͜ͱʹಛԽ͠ ͨϥΠϒϥϦ

Slide 15

Slide 15 text

ࢀߟʹͨ͠Ϟσϧ ҰൠతͳQVCTVCϞσϧ w SYKT͕࢓૊ΈΛఏڙͯ͘͠ΕΔ -PH+ͳͲͰݟΒΕΔΧςΰϦઃܭ w lVJz w lVJCVUUPOz w lVJCVUUPODMJDLz

Slide 16

Slide 16 text

this.ngZone.runOutsideAngular(() => { if (e && e["__pushed__"]) return; if (e) e["__pushed__"] = true; const element = this.elemRef.nativeElement as HTMLElement; const value = element.textContent; const typeAttr = element.getAttribute("type"); const kindAttr = element.getAttribute("kind"); const iconAttr = element.getAttribute("iconKind"); const activity = createActivity(element, { categorySuffix: "button", action: "click", value, }); if (typeAttr) activity.label += `[type='${typeAttr}']`; if (kindAttr) activity.label += `[kind='${kindAttr}']`; if (iconAttr) activity.label += `[iconKind='${iconAttr}']`; this.accumulator.push(activity); }); 1VCMJTI&WFOUT

Slide 17

Slide 17 text

Observable.merge( activities .filterCategorizedActivity("ui.router") .filter(({ action }) => action === "navigationEnd") .debounceTime(100), activities .filterCategorizedActivity("ui.root", { exclude: true }) .filterCategorizedActivity("ui.router", { exclude: true }) ) .mapFlattenData() .subscribe(({ action, category, ...rest }) => mixpanel.track(`${category}.${action}`, rest)) ; 4VCTDSJCF&WFOUT

Slide 18

Slide 18 text

Πϕϯτந৅ԽͷϝϦοτ w Πϕϯτͷந৅ԽʹΑΓɺૹ৴ίʔυΛ௥Ճ͢Δ͚ͩͰɺଞ αʔϏε΁ͷ࿈ܞ͕Մೳɻ w FYɿྫ֎ൃੜ࣌ʹɺൃੜͨ͠Πϕϯτͷ௚ۙ݅ΛΤϥʔ τϥοΩϯάαʔϏε4FOUSZ΁ૹ৴  ܽམ͢Δ͜ͱ΋ʜ