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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

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

Avatar for Yosuke Kurami

Yosuke Kurami

November 02, 2017
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

  1. NJYQBOFMͷಛ௃ w NJYQBOFMUSBDL ʜ Ͱ೚ҙͷΠϕϯτΛૹ৴Ͱ͖Δ w σʔλΛ"1*ͰFYQPSUͰ͖Δ w #JH2VFSZʹJNQPSU w

    ଞͷσʔλιʔε %# ͱ૊Θͤͯɺ3FEBTIͰΫΤϦΛ ࡞Γɺ༷ʑͳ࣠Ͱ෼ੳ͕Ͱ͖Δ
  2. 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
  3. 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