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

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

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

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