This is the sixth day of my participation in the November Gwen Challenge. See details: The Last Gwen Challenge 2021.

preface

In 2C business scenarios, data plays an extremely critical role in analyzing user behavior and application retention. Buried point is the simplest and most direct statistical method of user data, which can accurately count the usage habits of users within the application and the feedback of the use of each function module

There are many forms of buried data, and there are also a large number of third-party data statistical platforms, such as the well-known CNZZ platform. In the self-developed data platform, when we carry out data burying point, the burying point table is usually jointly designated by the product and operation students, and then sent by the development students under the interaction of specific scenes. Often there is a strong coupling between the business scenario and the buried point, that is, we need to bury the point within the business

Here is a non-invasive buried spot solution based on Vue that is usually used in a project

Custom instruction

Before we discuss buried points, let’s take a look at custom directives in VUE

“In addition to the core functionality’s default built-in directives (V-model and V-show), Vue also allows the registration of custom directives. Note that in VU 2.0, the main form of code reuse and abstraction is components. However, there are cases where you still need to perform low-level operations on normal DOM elements, and custom directives are used.”

In a nutshell, a custom directive provides the developer with a custom injection event when a node is compiled. We know that vUE is written by template, and that the template is compiled once to make it vDOM. During compilation, a number of operations can be performed on nodes, including V-show, V-if, and V-for

To begin the work

Having spent so much time on preparatory work, it’s finally time to get to the point of this article

Write instructions

Usually, you need to create a file named directive in the root directory to store the files related to the custom directive

In the file, I choose to directly create a new JS file to write instructions (in fact, it is best to build another folder for storage, which is also conducive to the subsequent expansion, but the general logic of custom instructions will not be too complex, so I will not be so troublesome)

For example, I will create collect.js to write click event burying points

Vue.directive('collect', {
    inserted(el, binding) {
        const { value } = binding;
        if (value) {
            // The node needs to be explicitly declared so that the buried event can be extended later
            const { click = false } = binding.modifiers;
            if (click) {
                // The element is bound here to implement injection
                el.addEventListener(
                    'click'.event= > {
                        // doSomething...
                    },
                    false); }}else {
            throw new Error('xxxxx'); }},unbind(el, bingding) {
        // doSomething....}});Copy the code

This way we can inject buried events into the elements that need to be buried when we write the template, and then have the template compilation phase automatically inject click listeners for us to achieve click event injection

How to use

As for how to apply, this will not expand, this leafing through the document should have all…

conclusion

That’s all for this sharing, see you next time ~ (@^_^@)~