フロントエンドをどのように埋め込むか? vue カスタム命令を使用してフロントエンド ポイントを埋める方法の簡単な分析

フロントエンドポイントを埋めるにはどうすればよいですか?次の記事では、Vue カスタム命令を使用してフロントエンド埋め込みポイントを実装する方法を紹介します。

(学習ビデオ共有: vue ビデオチュートリアル)

マーケティング活動において、ユーザーの好みや嗜好を埋め込むことで取得できます。インタラクションの習慣、それによってプロセスが最適化され、ユーザー エクスペリエンスがさらに向上し、コンバージョン率が向上します。

以前の隠しポイントの実装では、特定のボタンや画像がクリックまたは公開されたときに、隠しポイントがイベントを通じてアクティブに報告されました。この方法は、プロジェクト内の埋め込みポイントが比較的少ない場合には問題ありませんが、プロジェクト内に多数の埋め込みポイントが必要になると、大量のビジネス コードを追加することが避けられなくなります。また、これは主に、隠れたロジックとビジネス ロジックの間の高度な結合を引き起こします。

この状況を改善するために、オリジナルのポイント埋め込み方法にいくつかの小さな改良を加え、ポイント埋め込み効率を大幅に向上させました。

埋め込みポイントの変換について詳しく説明する前に、埋め込みポイントに関する常識を簡単に理解しておく必要があります。

隠れたポイントを報告するにはどのような方法がありますか?

隠れたポイントにはさまざまな種類があり、それを報告する方法もさまざまであることを知っておく必要があります。フロントエンドでポイントを埋め込む一般的な方法は 3 つあります。

• 手動埋め込み
• 視覚的埋め込み
• トレースレス埋め込み

手動名前が示すように、埋め込みポイントは、完全に手動でコードを記述し、埋め込みポイント SDK によって提供される関数を呼び出し、埋め込む必要があるビジネス ロジックに対応するメソッドを追加して、埋め込みポイント データを報告します。これも以前から使われている方法です。

視覚的な埋め込みポイントとは、視覚的なシステムを介して埋め込みポイントを構成することを指します。この方法を知っている人は多くないため、詳細は説明しません。

無跡埋め込み。自動埋め込みや完全埋め込みとも呼ばれます。つまり、すべてのグローバル イベントとページ読み込みサイクルをインターセプトして埋め込みます。

一般的にどのような種類のデータが埋もれていますか?

データ分析を達成し、その後の運用や製品戦略の調整を容易にするためには、通常、次の点について統計を作成する必要があります。

• ページ埋め込みポイント: 統計ページビュー数（PV）、ページ閲覧者数（UV）、ページ滞在時間、デバイス情報など、ユーザーがページに出入りする情報。
• クリック埋め込み: ページの閲覧プロセス中にユーザーによってトリガーされたクリックをカウントします。ボタン、ナビゲーション、写真のクリック数などのイベント
• 露出埋め込みポイント: 特定の要素が効果的に公開されているかどうかに関する統計

#要件分析

この記事は、最近のプロジェクトで埋め込まれたポイントを追加する必要性に基づいています。必要な理想的なソリューションは次のとおりです。

埋め込みポイントはビジネスから可能な限り分離する必要があり、埋め込みポイントのロジックはビジネスから独立している必要があります
• ビジネスコードに立ち入らないように努めてください
• # 仕様に同意し、統合された終了ポートを通じて埋め込みロジックを処理します

プロジェクトは

Vue によって開発されているため、隠れたポイントのレポートを完了するにはカスタム命令の使用を検討してください。カスタム命令を選択する理由は、ビジネスと隠れたポイントをある程度分離できるためでもあります。

ページ埋め込みポイントはフレームワーク レベルで削除されましたが、ここでの主な懸念はクリック埋め込みポイントと露出埋め込みポイントです。

実装のアイデアは実際には非常に明確です。埋め込む必要がある特別な属性を

DOM ノードにマウントし、埋め込まれたポイント ## を通じて、対応する属性に対応するイベントを監視してマウントします。 #SDK 、イベントがトリガーされたときに埋め込まれたポイント データを報告します。 それでは、問題はどのように監視するかということです。

クリック イベントの場合、

addEventListener

を使用して click イベントをリッスンできます。これはとても簡単です。 要素を公開するのは少し面倒です。

まず、露出を監視する必要がある理由を見てみましょう:

製品に対するユーザーの関心を測定するには、クリックスルー率 (クリック数 / 露出数)。クリックスルー率の正確性を確保するには、ユーザーがこれらの商品を実際に閲覧していることを確認する必要があります (たとえば、上の図の下部にあるマシンワインの商品エリアは、ユーザーがページをスクロールする必要があるため、ユーザーがこの領域を表示できるようにします)。

では、要素がページの表示領域に表示されるかどうかを判断するにはどうすればよいでしょうか?

過去の実践に従い、スクロール イベントをリッスンし、

getBoundingClientRect()

メソッドを通じて監視領域とウィンドウの位置を計算し、要素が表示領域に表示されるかどうかを判断します。ページの領域。ただし、scroll イベントが頻繁にトリガーされるため、パフォーマンスの問題は大きくなります。 これに基づいて、ブラウザは特別に

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 (埋め込まれた値) を取得します。

// 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"

Use

要点を埋める必要がある場合に使用するのも非常に簡単です:

<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 を介したカスタム命令の 1 つ 単純なカプセル化により、業務コードと隠しコードがある程度分離され、従来に比べて埋め込みコードの開発コストと保守コストが大幅に削減されます。

しかし、これは最も単純な実装にすぎません。考慮する必要がある状況は数多くあります:

露出の頻度が非常に高いです。バッチ レポートを検討できますか?
• ユーザーがページの半分にアクセスし、突然中断してから再度アクセスしました。この状況はどのように報告すればよいですか?
• ユーザー デバイスが
• Intersection ObserverAPI をサポートしていない場合、下位互換性を考慮する必要がありますか?

この埋設計画はまだ改良中であることから、今後の改善と事業の円滑な運営を待ちたいと思います。詳細をお知らせします。

[推奨関連ビデオ チュートリアル:

vuejs エントリ チュートリアル、Web フロントエンド エントリ]

以上がフロントエンドをどのように埋め込むか? vue カスタム命令を使用してフロントエンド ポイントを埋める方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。