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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on.

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

Avatar for Yosuke Kurami

Yosuke Kurami

November 02, 2017

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