序文最近、プロジェクトにトラッキング機能を実装する必要がありました。製品のトラッキングドキュメントを整理したところ、クリックトラッキングのシナリオがたくさんあることがわかりました。ポイントを追跡するために 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データ操作言語の例の詳細な説明
Dockerにfastdfsをインストールするディレクトリをマウント-v /e/fdfs/トラッカー...
Windows: NTFS、FATをサポートLinux は次のファイル形式をサポートしています: C...
前提条件: content="width=750" <meta name=...
以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...
方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...
この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体...
1. テーブルを作成する テーブル「学生」を作成( `id` int(11) NULLではない、 `...
背景何が起こったかというと、Luzhu は偶然、宇宙で最高の外部スピーカーを備えた携帯電話について知...
グリッドレイアウト親要素に追加された属性グリッドテンプレートの列/グリッドテンプレートの行要素の行ま...
場合によっては、フォーム内のテキスト ボックスを読み取り専用にして、ユーザーがその中の情報を変更でき...
MySQL をインストールした後、DOS ウィンドウまたは MySQL 5.7 コマンドライン クラ...
必要:バックエンドは配列オブジェクトを返し、それがフロントエンドで配列に結合されます。配列は名前に従...
序文以前、Docker の 2375 Remote API を有効にしていました。会社のセキュリティ...
目次ここでの問題は次の通りです:解決策1:解決策2: コンストラクタで初期化を割り当てる採掘場の概要...
この記事では、Docker で新しいイメージを手動で構築する方法を紹介し、皆さんと共有します。詳細は...