preface

Because of single-page development, the packaging and considerations of statistical code are what we need to start designing (such as maintainability).

CNZZ provides js injection in four ways, as follows

I use the first one here, in order to facilitate the positioning of the problem, adopt the question and answer format to write this hydrology.

implementation

CNZZ JS injection

The most common is that we just go to the HEAD of the HTML and manually copy that paragraph in;

If we want to think about maintainability, our friends who build projects based on Vue CLI 3 can pull out with scaffolding encapsulation features;

Env file + template interpolation to achieve; The former is an environment profile and the latter is a template language.

Specific documents can be official:

Let’s look at the implementation of my business code to deepen your understanding.

  • Env (this is no longer followed by an environment suffix, all environments can be read,.env.dev is for development mode, see documentation for details)

  • public/index.html

Removed ugly webmaster statistics DOM

Because we’re using text, we’ll insert an A tag, look at the DOM structure, it’s easy to handle, we listen for the event DOMContentLoaded, get the DOM and hide it;

Behavior of encapsulation

The main trigger for buried behavior is CNZZ, a trackevent.

For things that can be reused, extracting them into functions is the best position, and the specific code is as follows (combined with my business),

The _czc file may not load successfully, so there is no such thing.

Category is mainly used as the app source for sharing, so the default value is read from the project configuration file (unified maintenance).

Listen for the buried point where the page opens






Behavior triggers

conclusion

Some other behavior click, specific in the corresponding function can be executed, so that the single page buried point trigger is basically OK.

On a business by business basis, if behavior encapsulation were to be separated more thoroughly, the design of some business code would certainly have to be adjusted.