Bagaimana untuk mengebumikan hujung depan? Analisis ringkas tentang kaedah menggunakan arahan tersuai vue untuk menguburkan mata bahagian hadapan

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.

Apakah cara untuk melaporkan perkara tersembunyi?

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:

• Pengebumian manual
• Pengebumian visual
• Pengebumian yang tidak kelihatan

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.

Apakah jenis data yang biasanya terkubur?

Untuk mencapai analisis data dan memudahkan operasi seterusnya dan pelarasan strategi produk, secara amnya perlu membuat statistik mengenai perkara berikut:

• Statistik halaman: Maklumat Statistik tentang pengguna yang memasuki atau meninggalkan halaman, seperti bilangan paparan halaman (pv), bilangan orang yang melihat halaman (uv), tempoh penginapan di halaman, maklumat peranti, dsb.
• Penjejakan klik: mengira klik yang dicetuskan oleh pengguna semasa proses menyemak imbas halaman Peristiwa, seperti bilangan klik pada butang, navigasi atau gambar
• Mata pendedahan: statistik sama ada elemen tertentu telah didedahkan dengan berkesan

Memerlukan analisis

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

Cuba untuk tidak menceroboh kod perniagaan
• Setuju dengan spesifikasi dan mengendalikan logik tersembunyi melalui port penutup bersatu
• Memandangkan projek dibangunkan oleh
, pertimbangkan untuk menggunakan arahan Tentukan anda sendiri untuk melengkapkan pelaporan titik tersembunyi. Sebab untuk memilih arahan tersuai juga kerana ia boleh memisahkan perniagaan dan mata tersembunyi pada tahap tertentu.

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

Idea pelaksanaan sebenarnya sangat jelas: lekapkan atribut khas pada nod

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 acara klik, kami boleh menggunakan

untuk mendengar acara

. Ia sangat mudah.

addEventListenerMenyusahkan sedikit untuk mendedahkan elemen. click

Pertama sekali, mari kita lihat mengapa kita perlu memantau pendedahan:

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).

Jadi bagaimana untuk menentukan sama ada elemen muncul di kawasan halaman yang boleh dilihat?

Ikuti amalan lepas: dengar acara tatal, kira kedudukan kawasan pemantauan dan tetingkap melalui kaedah

, 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.

Pelaksanaan Kod

Analisis keperluan di atas masih agak abstrak. Mari kita lihat pelaksanaan akhir berdasarkan kod.

Pengenkapsulan kelas klik

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)
    })
  }
}

Pendedahan. pakej kelas

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)
  }

}

Pengenkapsulan Arahan

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|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 })
      }
    })
  },
})

Pada masa yang sama, anda perlu memperkenalkannya dalam src/index.js:

import "./directives/track"

Gunakan

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: &#39;s_pictures&#39;,
      clickAction: &#39;c_pictures&#39;,
      detail: {
        value: &#39;测试&#39;,
      },
    })
  "
/>

Ketidakcukupan

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:

• Kekerapan pendedahan adalah sangat tinggi. Bolehkah pelaporan kelompok dipertimbangkan?
• Seorang pengguna melawat separuh halaman, tiba-tiba beralih keluar, dan kemudian masuk semula. Bagaimanakah saya harus melaporkan situasi ini?
• Jika peranti pengguna tidak menyokong 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!