The content shared in this article is the Event Collector brought by the Flying Fish front-end team, a set of marking buried point solution for the Web environment, aiming to improve the development efficiency of buried point and the experience of using buried point data.

As you read this article, you will learn:

  1. The difference between marked burial point and imperative burial point;
  2. New experience of buried point management brought by supporting browser extension;
  3. An overview of the Event Collector technology implementation.

origin

No matter for general users or enterprises, it is usually necessary to record user interaction for analyzing user usage, optimizing product functions or discovering new requirements. These direct records of user interaction are “behavioral burying points”.

Before we used to mark burying points, we probably reported burying points the same way most projects do: listening for events and then calling a specific function in a callback function to report the data.

Code examples of imperative burying points

With the accumulation of behavioral burying point requirements, we found that such imperative burying point has a lot of redundant code and may cause some impact on readability. Therefore, we began to try to unify the burying point of user interaction behavior with the help of Event bubbling and other features, and concluded the Event Collector marking burying point scheme.

Tag substitution command

Marking burying point convention marks burying point information on the object that the user interacts with directly. After the user completes the interaction, the global event listener collects the pre-marked burying point information from the interactive object and reports it. However, the imperative burying point usually requires decentralized monitoring of interactive events and reporting of burying point information.

Generally speaking, marking burying point involves marking, monitoring, collecting and reporting four links, while commanding burying point involves monitoring and reporting two links. Compared with the command burying point, the marking burying point can centralize the monitoring, collecting and reporting links, which can reduce the redundancy of the code. In addition, the marking buried point prefixes the buried point information from the reporting link to the newly added marking link, highlighting the connection between the buried point information and the interactive object, making the buried point code easier to read and understand.

A code example of using Dataset method to mark buried points

The Event Collector currently provides two methods for marking buried points:

  • One convention, as shown above, uses data-log- beginning HTML attributes for markup;
  • One, shown below, uses a specific React component for markup.

Both support clicking, levitating, and displaying event burials, and each has its own features that meet the basic marking burials needs.

Code example 1 for marking buried points with the React Component method

Code example 2 for marking buried points with the React Component method

Management buried point

Now that buried information has been marked on the interaction object, we might as well make full use of it. The Event Collector tag burying solution includes a browser extension Event Collector Kits to provide additional tag burying management functionality without making changes to the business code.

Together with the Event Collector SDK, Event Collector Kits can directly circle the marked elements in the page to help the r & D students quickly learn which elements exist in the page and which events exist, so as to check whether there are missing buried requirements.

Visualization of marked burial sites

In addition, Event Collector Kits also have built-in support for the company’s internal Event analysis platform, so that both r&d and product students can quickly create analysis kanban for buried tags in a page.

Quickly create buried data analysis kanban

The above functions are built upon the Injected Hooks of Event Collector Kits for the page, which were incorporated into the React Developer Tools design and further improved: Injected Hooks are not strongly bound to the Event Collector SDK, but rather provide a relatively stable set of apis with the corresponding type declarations @event-Collector/devTools. In this way, any Web application could use the specially Hooks capabilities independently and flexibly without having to tap into the Injected Hooks. For example, our MIS system did not have access to the embedded points, but we could still create event analysis kanji with the help of Injected Hooks, so that the operational students could quickly check the index data such as the number of times of system announcements being presented.

Strive to build sustainable maintenance technology projects

During the process of designing and implementing Event Collector, we always strive to make it easier to maintain and more consistent with the development and management needs of our behavioral burying point. Therefore, we constantly refer to and learn from excellent projects inside and outside the company, and try and practice new ideas. We’d like to take this opportunity to share some of the interesting parts.

1. Overall Structure of Event Collector

The overall structure of the Event Collector

2. Monorepo organization and release process

Since the Event Collector involves multiple packages that need to be published, and there is a strong connection between each package, Monorepo was adopted at the beginning of the code repository. We also agree to store packages that need to be published in the Packages directory and projects that do not need to be published to NPM in the Apps directory.

Schematic diagram of Monorepo organization

Whenever the contents of Packages need to be changed:

  1. First, a protected branch named v0.4.7 is cut out from the main branch.
  2. For each change, new branches are cut from V0.4.7 and then merged back through Merge Request, and Changelog is updated at the same time.
  3. Update all NPM package versions before release, then Merge V0.4.7 back into the main branch through Merge Request;
  4. When V0.4.7 joins the main branch, two pipelines will be triggered simultaneously:
  • Create Git tags to trigger automatic build and batch release of NPM packages;
  • Build and deploy the documentation site.

Event Collector Release process diagram

Angular inspired Writing conventions for React

The Event Collector browser extension uses the React framework to render the interface and specifies that the index. TSX file only writes JSX content, while component status, Event callbacks, and side effects are all written in the model.ts file in the same directory.

React Writing convention Example Model section

React Writing convention example JSX part