
Using Babel transforms to inject analytics code at build time - drob
https://heap.io/blog/engineering/how-we-leveraged-asts-and-babel-to-capture-everything-on-react-native
======
stblack
More info on the visitor pattern, which was originally published by the Gang
of Four:

[https://en.wikipedia.org/wiki/Visitor_pattern](https://en.wikipedia.org/wiki/Visitor_pattern)

Rarely seen in its pure form in the wild, but it's vastly useful, and
surprisingly versatile, when you need it.

~~~
whalesalad
Never realized this had a name. Very cool.

------
uhoh-itsmaciek
FYI, the layout is unreadable on mobile Firefox (on Android fwiw; looks fine
in Chrome).

~~~
drob
Fixed. Thank you again for flagging!

------
jmtaber129
Author here! I worked on our babel plugin for React Native autocapture from
day one. It's been a pretty interesting project. Would be happy to answer any
questions you have!

~~~
mikewhy
The article seems to end before solving the original problem. You start out
with a call to `analytics.track` and seem to just forget about it. Do you mind
sharing examples of how to disambiguate the sender / event args in
`captureTouchablePress` into something meaningful?

~~~
jmtaber129
Good point, we didn’t really get into that part of the story.

At Heap, we have a concept of a “virtual event”, in which there’s a raw event
data set, and then you (the Heap customer) would “define” events on this raw
data through our UI. The resulting data set is what you’d normally get from
traditional `analytics.track` code, except it would be retroactive to the
point when you installed Heap, you can change/delete/create events (without
losing the underlying data), and you wouldn’t have actually written any
additional tracking code.

We have some material on virtual events on [https://heap.io/product/virtual-
events](https://heap.io/product/virtual-events), and the code that extracts
the raw events from these interactions can be found at
[https://github.com/heap/react-native-
heap/blob/c2dae7ef2442a...](https://github.com/heap/react-native-
heap/blob/c2dae7ef2442a67619670e723af31368bc69b75f/js/autotrack/touchables.js)
(the function our babel plugin hooks into) and [https://github.com/heap/react-
native-heap/blob/c2dae7ef2442a...](https://github.com/heap/react-native-
heap/blob/c2dae7ef2442a67619670e723af31368bc69b75f/js/autotrack/common.ts#L50)
(the function that creates most of the raw event we send to Heap)

