Bagaimana untuk menguburkan mata bahagian hadapan? Artikel berikut akan memperkenalkan kepada anda cara melaksanakan pembenaman bahagian hadapan melalui arahan tersuai Vue saya harap ia akan membantu anda!
(Belajar perkongsian video: tutorial video vue)
Dalam aktiviti pemasaran, pilihan dan pilihan pengguna boleh diperolehi dengan mengebumikan mata Tabiat interaksi, dengan itu mengoptimumkan proses, meningkatkan lagi pengalaman pengguna dan meningkatkan kadar penukaran.
Dalam pelaksanaan titik tersembunyi sebelumnya, titik tersembunyi dilaporkan secara aktif melalui acara apabila butang atau gambar tertentu diklik atau didedahkan. Kaedah ini tidak mengapa apabila terdapat sedikit titik terkubur dalam projek Setelah sejumlah besar titik terkubur diperlukan dalam projek, ia tidak dapat dielakkan untuk menambah banyak kod perniagaan. Ia juga sebahagian besarnya menyebabkan gandingan yang tinggi antara logik tersembunyi dan logik perniagaan.
Untuk memperbaiki keadaan ini, kami telah membuat beberapa penambahbaikan kecil pada kaedah penanaman titik asal, yang telah meningkatkan kecekapan penimbunan titik.
Sebelum menghuraikan transformasi titik terkubur kami, adalah perlu untuk mempunyai pemahaman ringkas tentang beberapa akal fikiran tentang titik terkubur.
Anda mesti tahu bahawa terdapat banyak jenis titik tersembunyi, dan terdapat pelbagai cara untuk melaporkannya. Terdapat tiga kaedah biasa untuk mengebumikan mata pada bahagian hadapan:
Manual Mata terkubur, seperti namanya, adalah untuk menulis kod secara manual semata-mata, memanggil fungsi yang disediakan oleh SDK titik terkubur, menambah kaedah yang sepadan dalam logik perniagaan yang perlu dikebumikan dan melaporkan data titik terkubur. Ini juga kaedah yang telah digunakan sebelum ini.
Titik terkubur visual merujuk kepada mengkonfigurasi titik tertimbus melalui sistem visual Tidak ramai orang yang telah berhubung dengan kaedah ini, jadi saya tidak akan menerangkan secara terperinci.
Pengebumian tanpa jejak, juga dipanggil pengebumian automatik dan pengebumian penuh. Iaitu, memintas dan menguburkan semua acara global dan kitaran pemuatan halaman.
Untuk mencapai analisis data dan memudahkan operasi seterusnya dan pelarasan strategi produk, secara amnya perlu membuat statistik mengenai perkara berikut:
Artikel ini adalah berdasarkan keperluan untuk menambah mata terkubur dalam projek baru-baru ini Titik terkubur harus dipisahkan daripada perniagaan sebanyak mungkin, dan logik titik terkubur harus bebas daripada perniagaan
Titik pengebumian halaman telah dialih keluar untuk kami di peringkat rangka kerja Kebimbangan utama di sini ialah titik pengebumian klik dan titik pengebumian pendedahan. Vue
yang perlu dikebumikan, pantau dan lekapkan peristiwa yang sepadan dengan atribut yang sepadan melalui titik terkubur
, dan kuburkan titik apabila peristiwa dicetuskan Pelaporan data.DOMMaka persoalannya, bagaimana untuk memantau? SDK
untuk mendengar acara
. Ia sangat mudah.addEventListenerMenyusahkan sedikit untuk mendedahkan elemen. click
Untuk mengukur minat pengguna terhadap produk, kita perlu untuk mengira kadar klik lalu (bilangan klik/ bilangan pendedahan). Untuk memastikan ketepatan kadar klikan, kami mesti memastikan bahawa pengguna benar-benar menyemak imbas produk ini (contohnya, kawasan produk wain mesin di bahagian bawah gambar di atas, kerana pengguna perlu menatal halaman, mungkin untuk pengguna melihat kawasan ini).
, dan kemudian tentukan sama ada elemen itu muncul dalam kawasan yang boleh dilihat pada halaman. Walau bagaimanapun, disebabkan oleh kejadian
yang kerap dicetuskan, masalah prestasi adalah besar.getBoundingClientRect()Berdasarkan perkara ini, penyemak imbas mencipta scrollAPI khas untuk kami, yang mengendalikan semua butiran berkaitan prestasi dan membenarkan pembangun hanya mengambil berat tentang logik perniagaan:
Intersection Observer
Disebabkan ketidakpastian pengguna yang melayari halaman, tingkah laku pendedahan berulang mesti dielakkan. Selepas ini terdedah, keluarkan sahaja untuk pemerhatian. 
Analisis keperluan di atas masih agak abstrak. Mari kita lihat pelaksanaan akhir berdasarkan kod.
Pemprosesan peristiwa klik agak mudah Setiap klik mencetuskan pelaporan data:
// 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)
})
}
}agak rumit untuk didedahkan.
Mula-mula instantiate new IntersectionObserver() global melalui _observer jika ia didedahkan dengan berkesan (di sini, elemen akan didedahkan apabila lebih separuh daripada elemen muncul), dapatkan trace-key (kunci terkubur) pada nod DOM ) dan track-params (nilai terkubur).
// 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)
}
}Dengan kelas klik dan pendedahan, langkah seterusnya ialah merangkum arahan Vue, yang merupakan teras sebab mengapa separuh- pengesanan automatik boleh dicapai.
Terdapat senario di sini di mana untuk butang atau gambar yang sama, terdapat senario di mana kedua-dua titik tersembunyi perlu diklik dan titik tersembunyi perlu didedahkan. Oleh itu, reka bentuk arahan menyokong senario kemasukan masuk dan masuk serentak yang berasingan:
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 })
}
})
},
}) Pada masa yang sama, anda perlu memperkenalkannya dalam src/index.js:
import "./directives/track"
Ia juga sangat mudah untuk menggunakannya di mana anda perlu mengebumikan intinya:
<img
ref="imageDom"
trace-key="o_img"
v-track:click|exposure
:track-params="
JSON.stringify({
exposureAction: 's_pictures',
clickAction: 'c_pictures',
detail: {
value: '测试',
},
})
"
/>Melalui enkapsulasi ringkas Vue arahan tersuai, kod perniagaan dan kod tersembunyi telah dipisahkan pada tahap tertentu . Berbanding sebelum ini, sama ada ia terkubur Kos pembangunan dan kos penyelenggaraan titik telah dikurangkan dengan banyak.
Tetapi ini hanya pelaksanaan yang paling mudah Terdapat banyak situasi yang perlu dipertimbangkan:
Intersection ObserverAPI, patutkah kita mempertimbangkan keserasian ke belakang? Memandangkan rancangan pengebumian ini masih ditambah baik, kami akan menunggu penambahbaikan seterusnya dan operasi lancar dalam perniagaan. Saya akan berkongsi butiran dengan anda.
[Tutorial video berkaitan yang disyorkan: tutorial pengenalan vuejs, bermula dengan bahagian hadapan web]
Atas ialah kandungan terperinci Bagaimana untuk mengebumikan hujung depan? Analisis ringkas tentang kaedah menggunakan arahan tersuai vue untuk menguburkan mata bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
