
Show HN: Traquer – Records and reproduces user's in-page behavior - nenadg
https://github.com/nenadg/traquer/
======
bizzleDawg
This is really cool!

How do you plan to handle the selenium replaying? Does it currently just
record the x/y position of the cursor events, because if so I guess it needs
playback on a browser window of the same dimensions.

I guess it may be possible to have some adaptors for cursor events which can
process the clicked element for a framework, i.e. for reactJS it could pick
out the classname and use that as the click target for playback in a screen
size independent way.

My gut instinct was that this would mean lots of re-recording tests every time
you make a change - but really that's much the case with screenshot testing or
any e2e testing already! Great work!

~~~
nenadg
Thanks :-)

you can check out
[https://github.com/nenadg/traquer/tree/master/runner](https://github.com/nenadg/traquer/tree/master/runner)
which is test runner that extrapolates from saved events.

Mouse position is irrelevant in selenium cases right now. Right now I'm trying
to create basic case in which recorded events would be reproduced in correct
sequence, reproducing what we've done on page.

The down side is - what is collected is xpath (just because it is shorter than
dom selector), xpath is absolutely vulnerable to changes so your tests will
fail after F5 (in case of generated ID's whatsoever).

I need to work on this, any help is welcome :-).

------
ggregoire
Similar to what ContentSquare.com does too. They just raised $20M.

Disclaimer: I worked there for 2 years (tracker + webapp).

~~~
blakeyrat
Or the Site Optimization product I maintained from about 2008-2011.

The concept's old as dirt. _Our_ script had to work on IE 5.5, though, so suck
it kiddies. ;)

------
ux-app
This look really great!!

Is there an example that shows how to actually implement in a page? I'm
looking through the github code and it's not immediately obvious how to embed
the recorder/replay functionality.

~~~
nenadg
Hey, include minified js and css to your page (get them from repo -
[https://github.com/nenadg/traquer/tree/master/public](https://github.com/nenadg/traquer/tree/master/public)),
and that would do for now.

------
peteretep
See also "Mouse Tracking with Javascript and Perl [2003]":
[https://pts.50.hu/0304tpj.pdf](https://pts.50.hu/0304tpj.pdf)

------
erikpukinskis
I would be really interested to be able to use the playback part of this for
unit testing. I have code that can click buttons, but it would be great to
have a library I could just load inside a page and then play back a series of
events.

I am poking through the source... seems like it should be pretty easy to
programmatically build a stream of events to load, but I can't quite find the
code that actually plays them back?

~~~
nenadg
Hey, sorry for late response. I've just saw your comment.

You can look at
[https://github.com/nenadg/traquer/blob/master/public/lib/tra...](https://github.com/nenadg/traquer/blob/master/public/lib/traquer.js)
(core method).

You can find `play` function in it. `play` function calls for
`eventsScheduler` that does replay part by calling actions (events) on saved
objects in pre-saved time (ie. time you moved your mouse and clicked here and
there).

If you have any further questions email me. I've attached my email to my hn
profile.

------
tedmiston
Is this meant as an alternative to Inspectlet? If that's the case, awesome.
Their tech is very powerful and useful but so, so expensive for the layman.

I know the community here is very anti-tracking, but I really do like using
trackers like this to improve the UX, understand what features people use and
how they use them, etc.

~~~
vogt
FullStory is a vastly better offering than Inspectlet IMO. I rarely see a
feature done as poorly as Inspectlet's search/filtering is. Just absolutely
terrible. Don't know if I'm the only one on that, or what. If this is half as
good though it may be a replacement for both.

~~~
nenadg
I don't have any experience with FullStory or Inspectlet, haven't heard of.

Whole idea about this tool is just attempt to automate `some` of tester's
jobs, in example - save scenario, run it again some time later, ideally
automate it with selenium/jasmine.

------
azeirah
Hey, can you explain how your heatmap handles scrolling? I expect a heatmap to
show what _elements_ of a page were interacted with a lot, if scrolling isn't
handled correctly, it might look that the user was interacting with another
part of the page than he actually was.

~~~
nenadg
Nice catch, interacted elements (if scrolled) should appear on their place,
but heatmap is not scrollable.

I guess this is pretty buggy, but I already mentioned that heatmap is pretty
naive, and should be taken care of sometime in future.

------
weitzj
I saw something really nice with Elm elm-lang.org where one could record the
user behavior, Push it to Google Firebase and replay it on a developer machine
for debugging.

~~~
dshoemaker
Do you have a link to that resource? Sounds really awesome. Thanks!

------
TamDenholm
nenadg, got an email address? I'd like to contact your directly?

~~~
nenadg
yeah ofc, me [ a t ] nenadg [ d o t ] com

~~~
prawn
You should put your contact details and project links in your HN profile.

------
DominikSerafin
Similar to what HotJar.com does

~~~
SeriousM
Similar, yes. But for free!

~~~
nenadg
Yes, that's it - what HotJar does, but yeah it's free :-)

If you have any idea how to monetize it, I'm all ears.

~~~
benjamincburns
Tiered monthly pricing based on number of sessions tracked is how I would
expect to pay for a service like this.

Would love to see it integrated with an A/B test optimisation tool.

