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.
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 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.
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:
Dieser Artikel basiert auf der Notwendigkeit, vergrabene Punkte in aktuellen Projekten hinzuzufügen. Eine ideale Lösung, die wir haben Bedarf ist:
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
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. 🎜Die obige Anforderungsanalyse ist noch relativ abstrakt. Schauen wir uns die endgültige Implementierung basierend auf dem Code an.
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 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|exposurev-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: 's_pictures',
clickAction: 'c_pictures',
detail: {
value: '测试',
},
})
"
/>通过Vue自定义指令的一个简单封装，业务代码和埋点代码就达到了一定的解耦，相较之前，无论是埋点的开发成本还是维护成本都降低了很多。
但是这也只是一个最简单的实现，还有很多情况需要考虑：
Intersection Observerrrreee
v-track:click|exposurev-track: Exposure src/index.js eingeführt werden: 🎜rrreeeVue 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: 🎜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!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
