Comment enterrer la partie avant ? Une brève analyse de la méthode d'utilisation des instructions personnalisées de vue pour enterrer les points frontaux

Comment enterrer les points front-end ? L'article suivant vous présentera comment implémenter l'intégration frontale via les instructions personnalisées de Vue. J'espère que cela sera utile à tout le monde !

(Partage vidéo d'apprentissage : tutoriel vidéo Vue)

Dans les activités de marketing, les préférences et les habitudes d'interaction des utilisateurs peuvent être obtenues en enterrant des points, optimisant ainsi le processus, améliorant encore l'expérience utilisateur et augmentant le taux de conversion.

Dans la précédente implémentation du système de points cachés, le point caché était activement signalé via des événements lorsqu'un bouton ou une image spécifique était cliqué ou exposé. Cette méthode convient lorsqu'il y a relativement peu de points enterrés dans le projet. Une fois qu'un grand nombre de points enterrés est nécessaire dans le projet, il est inévitable d'ajouter beaucoup de code métier. Cela est également en grande partie à l’origine du couplage élevé entre la logique cachée et la logique métier.

Afin d'améliorer cette situation, nous avons apporté quelques petites améliorations à la méthode d'enfouissement des points d'origine, ce qui a grandement amélioré l'efficacité de l'enfouissement des points.

Avant d'élaborer sur notre transformation de points enterrés, il est nécessaire d'avoir une brève compréhension du bon sens concernant les points enterrés.

Quels sont les moyens de signaler les points cachés ?

Il faut savoir qu'il existe de nombreux types de points cachés, et qu'il existe différentes manières de les signaler. Il existe trois méthodes courantes d'enfouissement des points à l'avant :

• Enfouissement manuel
• Enfouissement visuel
• Enfouissement invisible

L'enfouissement manuel, comme son nom l'indique, consiste à écrire du code purement manuellement, en appelant les fonctions fournies par l'enfouissement. SDK et, si nécessaire, ajoutez les méthodes correspondantes à la logique métier des points enterrés pour rapporter les données des points enterrés. C’est aussi la méthode qui a été utilisée auparavant.

Les points enterrés visuels font référence à la configuration des points enterrés via le système visuel Peu de personnes ont été exposées à cette méthode, je n'entrerai donc pas dans les détails.

Enfouissement sans trace, également appelé enfouissement automatique et enfouissement complet. Autrement dit, interceptez et enterrez tous les événements globaux et les cycles de chargement des pages.

Quels types de données sont généralement enterrés ?

Afin de réaliser l'analyse des données et de faciliter les opérations ultérieures et les ajustements de la stratégie produit, il est généralement nécessaire de réaliser des statistiques sur les points suivants :

• Points de page : comptez les informations des utilisateurs entrant ou sortant de la page, comme le nombre de pages vues (pv), le nombre de personnes parcourant la page (uv), la durée de séjour sur la page, les informations sur l'appareil, etc.
• Points de clic : comptez les événements de clic déclenchés par les utilisateurs lors de la navigation sur la page, tels que le nombre de clics sur les boutons, la navigation ou les images
• Points d'exposition : Statistiques indiquant si des éléments spécifiques sont effectivement exposés

Analyse des besoins

Cet article est basé sur la nécessité d'ajouter des points enterrés dans les projets récents. Le besoin est le suivant :

• Les points enterrés doivent être séparés de l'entreprise autant que possible, et les points enterrés doivent être séparés de l'entreprise autant que possible. La logique des points doit être indépendante de l'entreprise
• Essayez de ne pas vous imposer. dans le code commercial
• Mettez-vous d'accord sur les spécifications et gérez la logique des points enterrés grâce à une fermeture unifiée

Étant donné que le projet est développé par Vue, pensez à l'utiliser Personnalisez les instructions pour compléter le rapport sur les points cachés. La raison du choix des instructions personnalisées est également parce qu'elles peuvent dans une certaine mesure découpler l'activité et les points cachés. Vue开发的，所以考虑使用自定义指令的方式来完成埋点上报。选择自定义指令的原因也是因为他能一定程度上能让业务和埋点解耦。

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

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

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

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

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

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

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

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

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

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

Les points d'enfouissement des pages ont été pris en charge pour nous au niveau du framework. La principale préoccupation ici concerne les points d'enfouissement des clics et les points d'enfouissement de l'exposition.

L'idée d'implémentation est en fait très claire : monter des attributs spéciaux sur le nœud DOM qui doit être enterré, et surveiller et monter les événements correspondant aux attributs correspondants via le point enterré SDK. Signale les données cachées lorsqu'un événement est déclenché.

Alors la question est : comment surveiller ?

🎜Pour les événements de clic, nous pouvons utiliser addEventListener pour écouter les événements click. C'est très simple. 🎜🎜C'est un peu gênant d'exposer des éléments. 🎜🎜Tout d'abord, voyons pourquoi nous devons surveiller l'exposition : 🎜🎜🎜🎜Afin de mesurer l'intérêt de l'utilisateur pour le produit, il est nécessaire de calculer le taux de clics (nombre de clics/nombre d'expositions) de la zone. Afin de garantir l'exactitude du taux de clics, nous devons nous assurer que les utilisateurs parcourent réellement ces produits (par exemple, la zone de produits de vin de machine en bas de l'image ci-dessus, car les utilisateurs doivent faire défiler la page, il est possible pour que les utilisateurs puissent voir cette zone). 🎜🎜Alors comment déterminer si un élément apparaît dans la zone visible de la page ? 🎜🎜Suivez la pratique passée : écoutez l'événement de défilement, calculez la position de la zone de surveillance et de la fenêtre via la méthode getBoundingClientRect(), puis déterminez si l'élément apparaît dans la zone visible de ​la page. Cependant, en raison du déclenchement fréquent d'événements scroll, les problèmes de performances sont énormes. 🎜🎜Sur cette base, le navigateur a spécialement créé pour nous une API Intersection Observer, qui gère tous les détails liés aux performances et permet aux développeurs de se soucier uniquement de la logique métier : 🎜🎜🎜🎜🎜Parce que les utilisateurs L'incertitude de parcourir la page doit également éviter les comportements d’exposition répétés. Une fois exposé, retirez-le simplement pour observation. 🎜

Implémentation du code

L'analyse des exigences ci-dessus est encore relativement abstraite. Jetons un coup d'œil à l'implémentation finale basée sur le code.

Encapsulation de classe de clic

Le traitement des événements de clic est relativement simple. Chaque clic déclenche un rapport de données :

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

Encapsulation de classe d'exposition

L'exposition est relativement compliquée.

Instanciez d'abord un _observer global via new IntersectionObserver() Si vous obtenez une exposition efficace (ici, l'élément sera exposé lorsque plus de la moitié des éléments apparaîtront), puis activez le nœud DOM trace-key (clé de point enterré) et track-params (valeur de point enterré). 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

Encapsulation des instructions

Avec les classes de clic et d'exposition, l'étape suivante consiste à encapsuler les instructions Vue, ce qui est également au cœur de la raison pour laquelle l'enfouissement semi-automatique peut être atteint.

Il existe ici un scénario dans lequel, pour le même bouton ou la même image, il existe un scénario dans lequel il faut cliquer sur le point caché et exposer le point caché. Par conséquent, la conception de la commande prend en charge les scénarios d'entrée séparée et simultanée :

• v-track:click|exposure
• v-track: exhibition
rrreee🎜 doit également être introduit dans src/index.js : 🎜rrreee

🎜Utilisez 🎜🎜🎜 lorsque vous en avez besoin enterrez-le Il est également très simple d'utiliser le point : 🎜rrreee

🎜Insuffisant🎜🎜🎜Grâce à une simple encapsulation d'instructions personnalisées de Vue, code métier et points enterrés Le code a atteint un certain degré de découplage Par rapport à avant, les coûts de développement et de maintenance des points enterrés ont été considérablement réduits. 🎜🎜Mais il ne s'agit que de la mise en œuvre la plus simple, et de nombreuses situations doivent être prises en compte : 🎜

• La fréquence d'exposition est très élevée, peut-on envisager un reporting par lots ? 🎜
• Un utilisateur visite la moitié de la page, se coupe soudainement, puis revient. Comment dois-je signaler cette situation ? 🎜
• Si la machine utilisateur ne prend pas en charge l'API Intersection Observer, devons-nous envisager une compatibilité ascendante ? 🎜🎜🎜Compte tenu du fait que ce plan d'enfouissement est encore en cours d'amélioration, nous attendrons des améliorations ultérieures et un bon fonctionnement de l'entreprise. Je partagerai les détails avec vous. 🎜🎜【Tutoriels vidéo associés recommandés : 🎜Tutoriel d'introduction à Vuejs🎜, 🎜Démarrer avec le front-end Web🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!