프런트엔드 포인트를 어떻게 묻어야 하나요? 다음 글에서는 Vue맞춤 지침을 통해 프런트엔드 임베딩을 구현하는 방법을 소개하겠습니다. 모든 분들께 도움이 되길 바랍니다!
(학습 영상 공유: vue 영상 튜토리얼)
마케팅 활동에서는 포인트를 매립하여 사용자의 선호도와 상호작용 습관을 파악하여 프로세스를 최적화하고 사용자 경험을 더욱 향상시키며 전환율을 높일 수 있습니다.
기존 히든 포인트 방식 구현에서는 특정 버튼이나 그림을 클릭하거나 노출 시 이벤트를 통해 히든 포인트가 적극적으로 신고되었습니다. 프로젝트에 매몰점이 상대적으로 적은 경우에는 이 방법이 괜찮지만, 프로젝트에 매몰점이 많이 필요하게 되면 비즈니스 코드를 많이 추가할 수밖에 없습니다. 이는 또한 숨겨진 논리와 비즈니스 논리 사이의 높은 결합을 크게 야기했습니다.
이러한 상황을 개선하기 위해 기존의 포인트 매립 방식을 약간 개선하여 포인트 매립 효율성을 크게 향상시켰습니다.
매장점 변환에 대해 자세히 설명하기 전에 매몰점에 대한 상식을 간략하게 이해하는 것이 필요합니다.
숨겨진 포인트의 종류도 다양하고 신고방법도 다양하다는 점 꼭 알아두세요. 프런트엔드에 포인트를 매장하는 일반적인 방법은 세 가지가 있습니다.
Manual burying은 이름에서 알 수 있듯이 코드를 순전히 수동으로 작성하고, 제공되는 기능을 호출하는 것을 의미합니다. SDK를 매립하고, 필요 시 매몰지 비즈니스 로직에 해당 메소드를 추가하여 매장지 데이터를 보고합니다. 이는 기존에 사용되었던 방법이기도 합니다.
시각적 매립점은 시각적 시스템을 통해 매립점을 구성하는 것을 말합니다. 이 방법에 노출되는 사람이 많지 않으므로 자세히 설명하지 않겠습니다.
흔적 없는 매설, 자동매설, 완전매설이라고도 합니다. 즉, 모든 전역 이벤트와 페이지 로딩 주기를 가로채서 묻어버립니다.
데이터 분석을 달성하고 후속 운영 및 제품 전략 조정을 촉진하려면 일반적으로 다음 사항에 대한 통계를 작성해야 합니다.
이 기사는 최근 프로젝트에 묻힌 지점을 추가해야 할 필요성을 기반으로 합니다. 필요한 것은:
프로젝트가 Vue에서 개발되었으므로 이를 사용하는 지침을 사용자 정의하여 숨겨진 포인트 보고를 완료하세요. 맞춤 지시사항을 선택하는 이유도 비즈니스와 숨은 포인트를 어느 정도 분리할 수 있기 때문이다. Vue开发的，所以考虑使用自定义指令的方式来完成埋点上报。选择自定义指令的原因也是因为他能一定程度上能让业务和埋点解耦。
页面埋点在框架层面已经帮我们做掉了，这里主要关心的是点击埋点和曝光埋点。
实现思路其实也很清晰：在需要埋点的DOM节点挂载特殊属性，通过埋点SDK监听挂载了相应属性对应的事件，在事件触发时进行埋点数据上报。
那么问题来了，怎么监听呢？
对于点击事件，我们可以采用addEventListener来监听click事件。这很简单。
对于元素的曝光就稍微有点麻烦了。
首先我们来看一下为什么需要监测曝光：
为了衡量用户对产品的兴趣程度，需要计算区域的点击率（点击次数/曝光次数）。为了保证点击率的准确性，我们必须保证用户真正的浏览到了这些产品（就比如上图中最下方的机酒产品区域，由于需要滚动页面，用户才有可能看到这一区域）。
那么怎么判断元素出现在页面的可视区域呢？
按照以往的做法：监听滚动事件，通过getBoundingClientRect()方法计算监测区域与视窗的位置，然后判断元素是否出现在页面的可视区域内。但是由于scroll事件的频繁触发，性能问题很大。
基于此，浏览器特意为我们打造了一个Intersection Observer
구현 아이디어는 실제로 매우 명확합니다. 매립이 필요한 DOM 노드에 특수 속성을 마운트하고, 매립 지점 SDK. 이벤트가 발생하면 숨겨진 데이터를 보고합니다.
그럼 질문은 어떻게 모니터링할 것인가 입니다.
🎜클릭 이벤트의 경우
addEventListener를 사용하여 click 이벤트를 수신할 수 있습니다. 매우 간단합니다. 🎜🎜요소를 노출하는 것이 조금 번거롭습니다. 🎜🎜먼저 노출을 모니터링해야 하는 이유를 살펴보겠습니다. 🎜🎜
🎜🎜상품에 대한 사용자의 관심도를 측정하기 위해서는 해당 영역의 클릭률(클릭수/노출수)을 계산해야 합니다. 클릭률의 정확성을 보장하기 위해서는 사용자가 실제로 이러한 제품을 탐색하는지 확인해야 합니다(예를 들어 위 그림 하단의 머신 와인 제품 영역은 사용자가 페이지를 스크롤해야 하기 때문에 가능합니다) 사용자가 이 영역을 볼 수 있음). 🎜🎜그렇다면 요소가 페이지의 가시 영역에 나타나는지 여부를 확인하는 방법은 무엇입니까? 🎜🎜과거 연습을 따르세요. 스크롤 이벤트를 듣고 getBoundingClientRect() 메서드를 통해 모니터링 영역과 창의 위치를 계산한 다음 요소가 보이는 영역에 나타나는지 확인합니다. 페이지. 그러나 스크롤 이벤트가 자주 발생하기 때문에 성능 문제가 큽니다. 🎜🎜이를 바탕으로 브라우저는 성능과 관련된 모든 세부 사항을 처리하고 개발자가 비즈니스 로직에만 관심을 가질 수 있도록 하는 Intersection Observer API를 특별히 만들었습니다. 🎜🎜🎜🎜🎜사용자의 불확실성 페이지 탐색 시에도 반복적인 노출 행위를 피해야 합니다. 노출된 후에는 관찰을 위해 제거하세요. 🎜위의 요구 사항 분석은 여전히 상대적으로 추상적입니다. 코드를 기반으로 한 최종 구현을 살펴보겠습니다.
클릭 이벤트 처리는 비교적 간단합니다. 클릭할 때마다 데이터 보고가 트리거됩니다.
// 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)
})
}
}노출은 비교적 복잡합니다.
먼저 new IntersectionObserver()를 통해 전역 _observer를 인스턴스화합니다. 효과적인 노출을 얻으면(여기서는 요소의 절반 이상이 나타날 때 요소가 노출됩니다) 그런 다음 DOM 노드 trace-key(매장된 키) 및 track-params(매장된 값)를 가져옵니다. 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에도 도입되어야 합니다. 🎜rrreeeVue의 사용자 정의 지침, 비즈니스 코드를 간단하게 캡슐화함으로써 및 매장지점 코드는 어느 정도의 디커플링을 달성했습니다. 이전에 비해 매장지점의 개발 비용과 유지 비용이 많이 절감되었습니다. 🎜🎜하지만 이는 가장 간단한 구현일 뿐이며 고려해야 할 상황이 많습니다. 🎜Intersection ObserverAPI를 지원하지 않는 경우 이전 버전과의 호환성을 고려해야 합니까? 🎜🎜🎜본 매장 계획은 아직 개선 중인 점을 감안하여 향후 개선과 원활한 사업 운영을 기다리겠습니다. 자세한 내용을 여러분과 공유하겠습니다. 🎜🎜【추천 관련 동영상 튜토리얼: 🎜vuejs 입문 튜토리얼🎜, 🎜웹 프론트엔드 시작하기🎜】🎜위 내용은 프런트 엔드를 묻는 방법은 무엇입니까? Vue 사용자 정의 명령어를 사용하여 프런트엔드 포인트를 묻어두는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
