Wie vergräbt man das Frontend? Eine kurze Analyse der Methode zur Verwendung benutzerdefinierter Vue-Anweisungen zum Vergraben von Front-End-Punkten

Wie verbirgt man Front-End-Punkte? Im folgenden Artikel erfahren Sie, wie Sie die Front-End-Einbettung mithilfe von Vuebenutzerdefinierten Anweisungen implementieren. Ich hoffe, dass er für alle hilfreich ist!

(Lernvideo-Sharing: vue-Video-Tutorial)

Bei Marketingaktivitäten können die Präferenzen und Interaktionsgewohnheiten der Benutzer durch das Vergraben von Punkten ermittelt werden, wodurch der Prozess optimiert, die Benutzererfahrung weiter verbessert und die Konversionsrate erhöht wird.

In der vorherigen Implementierung des Hidden-Point-Schemas wurde der Hidden-Point aktiv durch Ereignisse gemeldet, wenn auf eine bestimmte Schaltfläche oder ein bestimmtes Bild geklickt oder diese angezeigt wurde. Diese Methode ist in Ordnung, wenn das Projekt relativ wenige vergrabene Punkte enthält. Sobald im Projekt eine große Anzahl vergrabener Punkte benötigt wird, ist es unvermeidlich, viel Geschäftscode hinzuzufügen. Dies ist auch maßgeblich für die starke Kopplung zwischen versteckter Logik und Geschäftslogik verantwortlich.

Um diese Situation zu verbessern, haben wir einige kleine Verbesserungen an der ursprünglichen Punktvergrabungsmethode vorgenommen, wodurch die Effizienz der Punktvergrabung erheblich verbessert wurde.

Bevor wir näher auf unsere Transformation vergrabener Punkte eingehen, ist es notwendig, einen kurzen Überblick über den gesunden Menschenverstand über vergrabene Punkte zu haben.

Welche Möglichkeiten gibt es, versteckte Punkte zu melden?

Sie müssen wissen, dass es viele Arten von versteckten Punkten gibt und dass es verschiedene Möglichkeiten gibt, diese zu melden. Es gibt drei gängige Methoden zum Vergraben von Punkten im Frontend:

• Manuelles Vergraben
• Visuelles Vergraben
• Unsichtbares Vergraben

Manuelles Vergraben bedeutet, wie der Name schon sagt, das rein manuelle Schreiben von Code und das Aufrufen der durch das Vergraben bereitgestellten Funktionen SDK und fügen Sie bei Bedarf entsprechende Methoden zur Geschäftslogik vergrabener Punkte hinzu, um Daten vergrabener Punkte zu melden. Dies ist auch die Methode, die bereits zuvor verwendet wurde.

Visuelle vergrabene Punkte beziehen sich auf die Konfiguration vergrabener Punkte über das visuelle System. Da nicht viele Menschen mit dieser Methode vertraut sind, werde ich nicht näher darauf eingehen.

Spurloses Vergraben, auch automatisches Vergraben und Vollvergraben genannt. Das heißt, alle globalen Ereignisse und Seitenladezyklen abfangen und begraben.

Welche Daten werden normalerweise vergraben?

Um eine Datenanalyse zu erreichen und nachfolgende Vorgänge und Anpassungen der Produktstrategie zu erleichtern, ist es im Allgemeinen erforderlich, Statistiken zu den folgenden Punkten zu erstellen:

• Seitenpunkte: Zählen Sie die Informationen von Benutzern, die die Seite betreten oder verlassen, wie z Anzahl der Seitenaufrufe (pv), die Anzahl der Personen, die die Seite durchsuchen (uv), die Verweildauer auf der Seite, Geräteinformationen usw.
• Klickpunkte: Zählen Sie Klickereignisse, die von Benutzern beim Durchsuchen der Seite ausgelöst werden, wie z Anzahl der Klicks auf Schaltflächen, Navigation oder Bilder
• Belichtungspunkte: Statistiken darüber, ob bestimmte Elemente effektiv freigelegt werden

Anforderungsanalyse

Dieser Artikel basiert auf der Notwendigkeit, vergrabene Punkte in aktuellen Projekten hinzuzufügen. Eine ideale Lösung, die wir haben Bedarf ist:

• Die vergrabenen Punkte sollten so weit wie möglich vom Geschäft getrennt sein, und die vergrabenen Punkte sollten so weit wie möglich vom Geschäft getrennt sein.
• Versuchen Sie, sich nicht einzumischen in den Geschäftscode integrieren
• Vereinbaren Sie die Spezifikationen und handhaben Sie die Hidden-Point-Logik durch einheitliche Abschlussports

Da das Projekt von Vue entwickelt wird, sollten Sie erwägen, es zu verwenden. Passen Sie die Anweisungen an, um die Hidden-Point-Berichterstattung abzuschließen. Der Grund für die Wahl benutzerdefinierter Anweisungen liegt auch darin, dass dadurch das Geschäft und versteckte Punkte bis zu einem gewissen Grad entkoppelt werden können. Vue开发的，所以考虑使用自定义指令的方式来完成埋点上报。选择自定义指令的原因也是因为他能一定程度上能让业务和埋点解耦。

页面埋点在框架层面已经帮我们做掉了，这里主要关心的是点击埋点和曝光埋点。

实现思路其实也很清晰：在需要埋点的DOM节点挂载特殊属性，通过埋点SDK监听挂载了相应属性对应的事件，在事件触发时进行埋点数据上报。

那么问题来了，怎么监听呢？

对于点击事件，我们可以采用addEventListener来监听click事件。这很简单。

对于元素的曝光就稍微有点麻烦了。

首先我们来看一下为什么需要监测曝光：

为了衡量用户对产品的兴趣程度，需要计算区域的点击率（点击次数/曝光次数）。为了保证点击率的准确性，我们必须保证用户真正的浏览到了这些产品（就比如上图中最下方的机酒产品区域，由于需要滚动页面，用户才有可能看到这一区域）。

那么怎么判断元素出现在页面的可视区域呢？

按照以往的做法：监听滚动事件，通过getBoundingClientRect()方法计算监测区域与视窗的位置，然后判断元素是否出现在页面的可视区域内。但是由于scroll事件的频繁触发，性能问题很大。

基于此，浏览器特意为我们打造了一个Intersection Observer

Seiten-Vergrabungspunkte wurden für uns auf Framework-Ebene berücksichtigt. Das Hauptanliegen hierbei sind Klick-Vergrabungspunkte und Belichtungs-Vergrabungspunkte.

Die Implementierungsidee ist eigentlich sehr klar: Mounten Sie spezielle Attribute auf dem DOM-Knoten, der vergraben werden muss, und überwachen und mounten Sie die Ereignisse, die den entsprechenden Attributen entsprechen, über das SDK Versteckte Daten melden, wenn ein Ereignis ausgelöst wird.

Dann stellt sich die Frage: Wie überwacht man?

🎜Für Klickereignisse können wir addEventListener verwenden, um auf click-Ereignisse zu warten. Es ist ganz einfach. 🎜🎜Es ist etwas mühsam, Elemente freizulegen. 🎜🎜Lassen Sie uns zunächst einen Blick darauf werfen, warum wir die Belichtung überwachen müssen: 🎜🎜🎜🎜Um das Interesse des Nutzers am Produkt zu messen, ist es notwendig, die Click-Through-Rate (Anzahl der Klicks/Anzahl der Expositionen) des Bereichs zu berechnen. Um die Genauigkeit der Klickrate sicherzustellen, müssen wir sicherstellen, dass Benutzer diese Produkte tatsächlich durchsuchen (z. B. den Maschinenweinproduktbereich unten im Bild oben, da Benutzer möglicherweise durch die Seite scrollen müssen). damit Benutzer diesen Bereich sehen können). 🎜🎜Wie kann man also feststellen, ob ein Element im sichtbaren Bereich der Seite erscheint? 🎜🎜Befolgen Sie die bisherige Vorgehensweise: Hören Sie sich das Scroll-Ereignis an, berechnen Sie die Position des Überwachungsbereichs und des Fensters mithilfe der Methode getBoundingClientRect() und bestimmen Sie dann, ob das Element im sichtbaren Bereich von angezeigt wird ​die Seite. Aufgrund der häufigen Auslösung von scroll-Ereignissen treten jedoch enorme Leistungsprobleme auf. 🎜🎜Auf dieser Grundlage hat der Browser speziell für uns eine Intersection ObserverAPI erstellt, die alle leistungsbezogenen Details verarbeitet und es Entwicklern ermöglicht, sich nur um die Geschäftslogik zu kümmern: 🎜🎜🎜🎜🎜Aufgrund des Benutzers The Bei Unsicherheit beim Durchsuchen der Seite muss auch wiederholtes Expositionsverhalten vermieden werden. Nachdem dies freigelegt wurde, entfernen Sie es einfach zur Beobachtung. 🎜

Code-Implementierung

Die obige Anforderungsanalyse ist noch relativ abstrakt. Schauen wir uns die endgültige Implementierung basierend auf dem Code an.

Click-Klassenkapselung

Die Verarbeitung von Klickereignissen ist relativ einfach. Jeder Klick löst Datenberichte aus:

// src/directives/track/click.js
import { sendUBT } from "../../utils/ctrip"

export default class Click {
  add(entry) {
    // console.log("entry", entry);
    const traceVal = entry.el.attributes["track-params"].value
    const traceKey = entry.el.attributes["trace-key"].value
    const { clickAction, detail } = JSON.parse(traceVal)
    const data = {
      action: clickAction,
      detail,
    }
    entry.el.addEventListener("click", function() {
      console.log("上报点击埋点", JSON.parse(traceVal))
      console.log("埋点key", traceKey)
      sendUBT(traceKey, data)
    })
  }
}

Exposure-Klassenkapselung

Exposure ist relativ kompliziert.

Instanziieren Sie zunächst einen globalen _observer über new IntersectionObserver(). Wenn Sie eine effektive Belichtung erhalten (hier wird das Element angezeigt, wenn mehr als die Hälfte der Elemente angezeigt wird), Holen Sie sich dann den DOM-Knoten trace-key (vergrabener Schlüssel) und track-params (vergrabener Wert). new IntersectionObserver() 实例化一个全局_observer，如果得到有效曝光的（这里当元素出现一半以上则进行曝光），就去获取 DOM 节点上的trace-key（埋点 key）和track-params（埋点 value）。

// src/directives/track/exposure.js
import "intersection-observer"
import { sendUBT } from "../../utils/ctrip"

// 节流时间调整，默认100ms
IntersectionObserver.prototype["THROTTLE_TIMEOUT"] = 300

export default class Exposure {
  constructor() {
    this._observer = null
    this.init()
  }

  init() {
    const self = this

    // 实例化监听
    this._observer = new IntersectionObserver(
      function(entries, observer) {
        entries.forEach((entry) => {
          // 出现在视窗内
          if (entry.isIntersecting) {
            // 获取参数
            // console.log("埋点节点", entry.target.attributes);
            const traceKey = entry.target.attributes["trace-key"].value
            const traceVal = entry.target.attributes["track-params"].value
            console.log("traceKey", traceKey)
            console.log("traceVal", traceVal)

            const { exposureAction, detail } = JSON.parse(traceVal)
            const data = {
              action: exposureAction,
              detail,
            }

            // 曝光之后取消观察
            self._observer.unobserve(entry.target)

              self.track(traceKey, data)
          }
        })
      },
      {
        root: null,
        rootMargin: "0px",
        threshold: 0.5, // 元素出现面积，0 - 1，这里当元素出现一半以上则进行曝光
      }
    )
  }

  /**
   * 元素添加监听
   *
   * @param {*} entry
   * @memberof Exposure
   */
  add(entry) {
    this._observer && this._observer.observe(entry.el)
  }

  /**
   * 埋点上报
   *
   * @memberof Exposure
   */
  track(traceKey, traceVal) {
    // console.log("曝光埋点", traceKey, JSON.parse(traceVal));
    sendUBT(traceKey, traceVal)
  }

}

指令封装

有了点击和曝光类，下一步就是 Vue 指令的封装了，也是之所以能实现半自动埋点的核心。

这里存在一个场景就是对于同一个按钮或者图片，同时存在既需要点击埋点又需要曝光埋点的场景。所以在指令的设计时支持了单独传入和同时传入的场景：

• v-track:click|exposure
• v-track:exposure

// src/directives/track/index.js
import Vue from "vue"
import Click from "./click"
import Exposure from "./exposure"

// 实例化曝光和点击
const exp = new Exposure()
const cli = new Click()

Vue.directive("track", {
  bind(el, binding) {
    // 获取指令参数
    const { arg } = binding
    arg.split("|").forEach((item) => {
      // 点击
      if (item === "click") {
        cli.add({ el })
      } else if (item === "exposure") {
        exp.add({ el })
      }
    })
  },
})

同时需要在src/index.js引入即可：

import "./directives/track"

使用

在需要埋点的地方使用也是很简单的：

<img
  ref="imageDom"
  trace-key="o_img"
  v-track:click|exposure
  :track-params="
    JSON.stringify({
      exposureAction: &#39;s_pictures&#39;,
      clickAction: &#39;c_pictures&#39;,
      detail: {
        value: &#39;测试&#39;,
      },
    })
  "
/>

不足

通过Vue自定义指令的一个简单封装，业务代码和埋点代码就达到了一定的解耦，相较之前，无论是埋点的开发成本还是维护成本都降低了很多。

但是这也只是一个最简单的实现，还有很多情况需要考虑：

• 曝光时频次很高，是否可以考虑批量上报？
• 用户访问一半页面，突然切出，之后又重新进入，这种情况埋点又该如何上报？
• 用户设备不支持Intersection Observerrrreee

Befehlskapselung

Mit den Klick- und Belichtungsklassen besteht der nächste Schritt darin, den Vue-Befehl zu kapseln, der den Kern des halbautomatischen Vergrabens darstellt erreicht werden.

Hier gibt es ein Szenario, in dem für dieselbe Schaltfläche oder dasselbe Bild sowohl auf den verborgenen Punkt geklickt als auch der verborgene Punkt freigelegt werden muss. Daher unterstützt das Design des Befehls die Szenarien des getrennten Eingangs und des gleichzeitigen Eingangs:

• v-track:click|exposure
• v-track: Exposure
rrreee🎜 muss auch in src/index.js eingeführt werden: 🎜rrreee

🎜Verwenden Sie 🎜🎜🎜, wenn Sie es brauchen Begraben Sie es Es ist auch sehr einfach, den Punkt zu verwenden: 🎜rrreee

🎜Insuffizienz🎜🎜🎜Durch ein einfaches Paket aus Vue benutzerdefinierten Anweisungen, Geschäftscode und Vergrabene Punkte Der Code hat einen gewissen Grad an Entkopplung erreicht. Im Vergleich zu früher wurden sowohl die Entwicklungskosten als auch die Wartungskosten für vergrabene Punkte erheblich reduziert. 🎜🎜Aber das ist nur die einfachste Implementierung, und es gibt viele Situationen, die berücksichtigt werden müssen: 🎜

• Die Häufigkeit der Exposition ist sehr hoch. Kann eine Chargenmeldung in Betracht gezogen werden? 🎜
• Ein Benutzer besucht die Hälfte der Seite, wechselt plötzlich und betritt sie dann erneut. Wie soll ich diese Situation melden? 🎜
• Wenn das Benutzergerät die Intersection ObserverAPI nicht unterstützt, sollten wir dann die Abwärtskompatibilität in Betracht ziehen? 🎜🎜🎜Angesichts der Tatsache, dass dieser Bestattungsplan noch verbessert wird, werden wir auf spätere Verbesserungen und einen reibungslosen Betrieb im Unternehmen warten. Ich werde die Details mit Ihnen teilen. 🎜🎜【Empfohlene verwandte Video-Tutorials: 🎜vuejs-Einführungs-Tutorial🎜, 🎜Erste Schritte mit dem Web-Frontend🎜】🎜

Das obige ist der detaillierte Inhalt vonWie vergräbt man das Frontend? Eine kurze Analyse der Methode zur Verwendung benutzerdefinierter Vue-Anweisungen zum Vergraben von Front-End-Punkten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!