序文最近、プロジェクトにトラッキング機能を実装する必要がありました。製品のトラッキングドキュメントを整理したところ、クリックトラッキングのシナリオがたくさんあることがわかりました。ポイントを追跡するために Alibaba Cloud SLS ログ サービスを使用しているため、ポイントを追跡するには手動の侵入コードを使用します。埋め込み形式を決定した後、技術的な実装方法はたくさんあります。どれがより良いのでしょうか? ちょっと考えてみました... 追跡命令をカプセル化することにしました。この命令は粒度が細かく、重要なポイントを直接ヒットできるため、より便利に使用でき、上記のビジネス シナリオに非常に適しています。 指導の基本その前に、vueカスタムの手順を復習しておきましょう。ここではよく使われる基礎知識のみ紹介します。より詳しい紹介については、公式ドキュメントを参照してください。 フック機能
フック関数のパラメータ
ここでちょっとしたコツをシェアします。フック関数のパラメータには現在のインスタンスを直接取得できるパラメータはありませんが、vnode.context を通じて取得することができます。これは以前の vue スキルの記事でもシェアしています。興味があれば、ぜひチェックしてみてください。 文章では、本題に入りましょう。以下では、追跡指示の使用方法と、それが内部でどのように実装されるかを紹介します。 使い方とアイデア通常、何かをカプセル化するときは、まずそれをどのように使用するかを決定し、次に使用方法に基づいてカプセル化を開始します。これにより、全体的なアイデアがより明確になり、使用方法を定義するときに使いやすさも考慮できるため、カプセル化後に使用方法が不十分なためにやり直しが必要になることを避けることができます。 追跡ポイントによって報告されるデータは、公開データ(各追跡ポイントによって報告される必要があるデータ)とカスタム データ(公開データと一緒に報告されるオプションの追加データ)に分けられます。そうすると、パブリックデータは内部で均一に処理され、カスタムデータは外部からインポートする必要があります。したがって、2 つの使用法があります。 一般的な使用法 <div v-track:clickBtn></div> カスタムデータ <div v-track:clickBtn="{other:'xxx'}"></div> 追跡イベントが引数の形式で渡されていることがわかります。これより前に、友人が追跡イベントを値の形式でカプセル化しているのも見ました。しかし、個人的には、対応する埋め込みイベントが何であるかを一目で確認しやすい arg 形式を好みます。 さらに、報告されたデータ構造はおおよそ次のようになります。 { イベント名: 'clickBtn' ユーザーID: 1, ユーザー名: 'xxx', データ: { その他: 'xxx' } } eventName は埋め込みポイントに対応するイベント名です。パブリックデータはこれと同じレベルにあり、カスタムデータは data に配置されます。 成し遂げるtrack.jsファイルを定義する 'js-sls-logger' から SlsWebLogger をインポートします。 関数 getSlsWebLoggerInstance (オプション = {}) { 新しいSlsWebLoggerを返します({ ホスト: '***'、 プロジェクト: '***'、 ログストア: `***`, 時間: 10, カウント: 10, ...オプション }) } エクスポートデフォルト{ インストール (Vue、{baseData = {}、slsOptions = {}) { const slsWebLogger = getSlsWebLoggerInstance(slsOptions) // パブリックデータを取得するメソッド let getBaseTrackData = typeof baseData === 'function' ? baseData : () => baseData baseTrackData = null とします 定数トラック = { 名前: 'トラック', 挿入された(el、バインディング){ el.addEventListener('クリック', () => { if (!binding.arg) { console.error('トラックslsWebLoggerイベント名が無効です') 戻る } ベーストラックデータの場合 ベーストラックデータ = getBaseTrackData() } baseTrackData.eventName = バインディング引数 // カスタムデータ let trackData = binding.value || {} const submitData = Object.assign({}, baseTrackData, {data: trackData}) // レポート slsWebLogger.send(submitData) process.env.NODE_ENV === '開発'の場合{ console.log('slsWebLogger を追跡', submitData) } }) } } Vue.directive(トラック名、トラック) } } カプセル化は比較的単純で、主に 2 つのことを行います。まず、命令にバインドされた DOM にクリック イベントを追加し、次に、報告されたデータを処理します。追跡指示をカプセル化する場合、パブリック データは baseData を通じて渡され、汎用性が向上します。2 番目のパラメーターは、レポート プラットフォームのいくつかの構成パラメーターです。 初期化時にディレクティブを登録します。 'src/store' からストアをインポートします 'Lib/directive/track' からトラックをインポートします 関数 getBaseTrackData() { userInfo = store.state.User.user_info とします。 // パブリックデータ const baseTrackData = { userId: userInfo.user_id, // ユーザーID userName: userInfo.user_name // ユーザー名} baseTrackDataを返す } Vue.use(トラック、{baseData: getBaseTrackData}) Vue.use が呼び出されると、呼び出すインストール関数が自動的に検索され、最終的にディレクティブがグローバルに登録されます。 汎用性を高めるクリックトラッキングに加えて、滞在トラッキングなどのシナリオがある場合、上記の手順は適用されません。この目的のために、手動呼び出しフォームを追加できます。 エクスポートデフォルト{ インストール (Vue、{baseData = {}、slsOptions = {}) { // ... Vue.directive(トラック名、トラック) // 手動で呼び出す Vue.prototype.slsWebLogger = { 送信 (トラックデータ) { トラックデータイベント名の場合 console.error('トラックslsWebLoggerイベント名が無効です') 戻る } const 送信データ = Object.assign({}, getBaseTrackData(), trackData) slsWebLogger.send(送信データ) process.env.NODE_ENV === '開発'の場合{ console.log('slsWebLogger を追跡', submitData) } } } } プロトタイプにマウントするこの方法は、各コンポーネント インスタンスで this を介して簡単に呼び出すことができます。 エクスポートデフォルト{ // ... 作成された(){ this.slsWebLogger.send({ //... }) } } 要約するこの記事では、追跡命令をカプセル化するプロセスについて説明します。カプセル化は難しくありません。主に 2 つの形式があります。クリック トラッキングは、DOM クリック イベントをバインドしてクリック レポートをリッスンしますが、他のシナリオでは手動呼び出しが提供されます。主にカプセル化の考え方とその使い方を記録したいと思います。追跡ポイントの実装も業務に合わせて調整されています。たとえば、登録追跡ポイント指示は、レポート プラットフォームの構成パラメータを受け入れることができます。結局のところ、人間は生きていて、コードは死んでいるのです。ビジネスニーズを満たし、メンテナンスが可能な限り、お客様にとって快適な方法でご利用いただけます。 以上で、Vue エンジニアがカプセル化しなければならないトラッキング命令の知識まとめの記事は終了です。より関連性の高い Vue カプセル化トラッキング命令については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: スタイルをより標準化するための CSS の書き方に関する 5 つのヒント
>>: MySQLチュートリアルDMLデータ操作言語の例の詳細な説明
まず、HTML タグのいくつかの特性を知っておく必要があります。 1. 「<keyword&g...
以下の内容では、隣接リストを使用してツリー構造を保存する MYSQL のプロセスとソリューションを紹...
動的な列を実現するための Angularjs ループ オブジェクト プロパティ利点: オブジェクトを...
目次1. プロキシモジュールをインストールする2. プロキシを設定する1. プロキシモジュールをイン...
1. 基本コンポーネントをインストールするまず、 yumコマンドを実行して、コードpullために必要...
MySQLのパーティショニングは、非常に大きなテーブルを管理するのに役立ちます。MySQLのパーティ...
<> 演算子機能: 等しくないことを示します。注: 「!=」演算子と同じ機能を持ちますが...
序文MySQL スロー クエリ ログは、日常業務でよく遭遇する機能です。MySQL スロー クエリ ...
目次オープニングシーンv-for を使用した直接レンダリングカスタムコンポーネントで直接レンダリング...
<br />原文: http://andymao.com/andy/post/102.h...
<br />帯域幅の増加に伴い、Web ページ上のオブジェクトも増えているため、Web ...
この記事では、例を使用して、MySQL ストアド プロシージャを作成 (CREATE PROCEDU...
<br />今は情報爆発の時代であるだけでなく、サービス爆発の時代でもあります。それはす...
ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...
この記事では、アンカー配置を実現するためのVue +要素UIの具体的なコードを例として紹介します。具...