preface

This article is only a summary of personal learning

  1. This section describes the types of buried points
  2. Visual burying point introduction
  3. Implement solution function splitting
  4. Comparison of buried spot schemes
  5. conclusion

This section describes the types of buried points

  1. Code burying: Code burying refers to adding a burying request to an event in the business code, requiring developers to embed the request in the code
  2. Visual burying point: Visual burying point mainly refers to providing visual interface, adding burying point events on specified page elements
  3. Unburied point: Unburied point is also called full buried point. It collects information about all controls on the page and filters them in the background

Visual burying point introduction

Visual buried point from the experience, it is in your own background management page are involved in the pages of a third party, to provide a visual editor, for certain types of elements, such as a link, button or elements for special treatment, with the click event as such element is clicked, you can fill out the burial site configuration forms, in the configuration is completed, Go to the third party page normally, when these elements are triggered by the click, you can collect buried information

Solution function disassembly

  1. The SDK into:

    The form of SDK implantation is introduced using the more common dynamic insert script tag on the market

  2. Background page enter URL:

    Switch implementation, from the background into the page that can be edited, write parameters to the storage, determine a mark parameter in the storage in the SDK, to determine whether to start the editor read after loading the editor, the purpose is to prevent web applications from being arbitrarily buried, data interference

  3. Tag element + Save configuration:

    In terms of experience, when the mouse passes over an element that can be clicked, the element will be highlighted, and when clicked, an information window will pop up to set parameters and save

    Technically, mousemove event listener is used to highlight three types of elements. A button element with a click event gets a unique element path when clicked

    getUniqueSelector = function (e, t) { let selector = getSelector(e) if (selector.indexOf('#') ! = -1 || getTagName(e) === 'body') { t && (selector = selector + ">" + t); return selector } else { selector += ":eq(" + getIndexInParent(e) + ")" t && (selector = selector + ">" + t); return getUniqueSelector(getParent(e), selector) } }Copy the code

    How to obtain a unique path is the implementation of the jQ selector idea

    The entire path from the body to the element is recorded, and the number of parent nodes of each node is recorded. Intuitively speaking, it is a record of the depth and subscript of the element in the DOM tree

    Saving the configuration is simpler, storing the configuration parameters and the complete element path

    Example Of configuration delivery

    [{"event_name": "Hello link click"."url": "http://localhost:63342/sa-sdk-javascript/zhuge.html? _ijt=hg3r25mmicg2icf0jtndtaskh7#"."element": [
    "body>a:eq(0)"]."attr": [{"name": "Custom Properties"."selector": "body>p:eq(0)"}]."app_id": 56070,
  "platform": 3."create_date_time": "The 2017-12-22 16:25:29"."hidden": false."stop": false."alias_name": null,
  "edit_url": "http://localhost:63342/sa-sdk-javascript/zhuge.html? _ijt=hg3r25mmicg2icf0jtndtaskh7#"}]Copy the code

4. Parse the configuration and listen to the report

Jqeury = jQeury = jQeury = jQeury = jQeury = jQeury = jQeury = jQeury = jQeury Add events to the original elements, send requests triggered by buried points, and monitor reports using iframe to solve the problem of cross-domain failure to obtain parameters in cookies

  1. conclusion

Buried in js, visual point implementation or not difficult, the main point is to realize the path element tags get and parse, its disadvantage is that lies in the dom element structure change after buried point will fail, and visual buried point does not pay attention to the context or business logic, only focus on elements whether behavior is triggered, So the core of it is that it is easy for non-developers to configure points, which can be functionally covered by both code buried and full buried points

Comparison of buried spot schemes