WeChatアプレットの手動および自動追跡の実装の詳細説明（Taro）

どの企業もユーザーベースを拡大したいのであれば、ユーザーの操作データを収集・分析する必要があり、そのためにはトラッキングデータが不可欠です。
フロントエンドのキャリア開発では、従来の手動追跡は間違いなく面倒で退屈な作業であるため、可能であれば簡素化する必要があります。

1. 手作業による埋設

手動追跡とは、必要な場所に追跡ポイントを報告するためのコードを追加することを意味します。コードの読みやすさに影響し、埋め込まれたコードが散在すると管理しにくくなります。
ページPVを例にとると、以前は各ページのPVを報告していました。

// src/manual/home/index.tsx

「./tracking」からトラッキングをインポートします。

// pageSn は、フロントエンドと製品で合意された「トラッキング システム内のページの一意の識別子」です。たとえば、このプロジェクトのホームページの識別子は 11664 です。
定数ページSn = 11111;

エクスポートデフォルト（）=> {
 // useDidShow は Taro 固有のフックであり、ミニプログラムのネイティブ componentDidShow ライフサイクルと同等であり、ページが表示されるときに呼び出されます。
 useDidShow(() => {
 // 統合カプセル化 sendPv メソッドを通じて pv 埋め込みポイント sendPv(pageSn) を送信します
 });
 <View>手動埋め込みページ</View>を返します。
};

2. 自動埋設

自動追跡は、全自動追跡と半自動追跡に分けられます。完全自動ポイント埋め込みでは、必要かどうかに関係なく、すべてのポイントが埋め込まれます。フロントエンド開発者はきっと喜んで、「今後は製品開発で私に頼まないで」と言ったに違いありません。しかし、データサイエンティストは泣き始めました。

たとえば、テンセントとTaroチームは共同で、接続が非常に簡単なTencent Youshu自動トラッキングを立ち上げました。たとえば、proxyPage を true に設定すると、「すべてのページの閲覧、終了、共有、その他のイベントが報告」され、autoTrack を true に設定すると、「すべての要素のタップ、変更、長押し、確認イベントが自動的に報告」されます。

しかし、データの量と有効性という点では、「完全埋設」は「非埋設」と同等です。なぜなら、「完全埋設」では一方では非常に大量のデータ保存が必要となり、他方ではデータクリーニングを担当する学生に多大な作業をもたらすからです。

したがって、次にバランスを取り、半自動追跡に焦点を当てる必要があります。

1. ページ露出（pv）

ページ露出 (pv) の理想的なレポート方法は次のとおりです。

統一された場所（trackingConf.tsなど）で、追跡する各ページの識別子（pageSnなど）を設定します。
ページが表示された後、レポートする必要があるかどうか (trackingConf.ts 構成ファイル内にあるかどうか) が自動的に判断されます。レポートする必要がある場合は、直接レポートします。

具体的な実装

（１）追跡ポイントフィールドの統一構成、pageSnは追跡ポイントシステム内のページの識別子を表す

//トラッキングConf.ts
エクスポートデフォルト{
 「自動/ホーム/インデックス」：{
 ページ番号: 11111、
 },
};

もちろん、あなたのビジネスですべてのページのPVをレポートできる場合（製品が自分でフィルタリングできるようにパス付き）、ステップ（1）をスキップして直接ステップ（2）に進むことができます。この方法は「全自動PVトラッキング」と呼ぶことができます。

（２）usePvフックをカプセル化する。ページが表示されると、現在のページpageSnを取得し、PVを埋め込むかどうかを判定し、必要に応じてPVを送信する。

// usePv.ts

// TaroのgetCurrentInstanceで現在のページパスを取得します
エクスポートconst getPath = () => {
 const path = Taro.getCurrentInstance().router?.path || "";
 // 先頭の / を削除します。たとえば、'/auto/home/index' を 'auto/home/index' に変更します。
 path.match(/^\/*/) ? path.replace(/^\/*/, "") を返します。
};

// 現在のページ pageSn を取得し、pv を埋め込むかどうかを決定し、埋め込む場合は pv を送信します。
// getExtraパラメータは追加パラメータの伝達をサポートします const usePv = ({
 取得エクストラ、
}: {
 getExtra?: () => 任意;
} = {}) => {
 // ページ露出 useDidShow(() => {
 現在のパスを取得します。
 //trackingConfからpageSnを取得する
 const pageSn = trackingConf[currentPath]?.pageSn;
 console.log("pageSn を自動的に取得", currentPath, pageSn);
 if (ページSn) {
  const extra = getExtra?.();
  // 統合カプセル化 sendPv メソッドを通じて pv 埋め込みポイント extra を送信しますか? sendPv(pageSn, extra) : sendPv(pageSn);
 }
 });
};

（3）次にページコンポーネントWrapPageをカプセル化し、上記のusePv()を使用します。

「react」からReactをインポートします。
"@tarojs/components" から View をインポートします。
「./usePv」からusePvをインポートします。

関数WrapPage(Comp) {
 関数MyPage(props)を返す{
 使用Pv();
 戻る （
  <表示>
  <Comp {...props} />
  </表示>
 );
 };
}

デフォルトの WrapPage をエクスポートします。

（4）最後に、すべてのページコンポーネントをWrapPageレイヤーでラップして、「すべてのページのオンデマンド埋め込み」を実現します。

// src/auto/home/index.tsx

定数インデックス = WrapPage(() => {
 <View>自動埋め込みページ</View>を返します。
});

後から新しいページを開発する場合は、WrapPage でラップするだけでなく、手順 (1) でページの pageSn をtrackingConf.ts に追加するだけです。

質疑応答

好奇心旺盛な子供たちはこう尋ねるかもしれません:

(1) usePv() は WrapPage にカプセル化されているので、カスタムフィールドのレポートをどのようにサポートできますか?
たとえば、この製品では、src/auto/home/index.tsx ページが pv を報告するときに、現在のページ URL クエリパラメータ (つまり params) も報告されることを期待しています。
とても簡単です。このページを WrapPage でラップしないでください。代わりに、パラメータを取得した後で usePv 関数を直接呼び出します。

// src/auto/home/index.tsx

定数インデックス = () => {
 使用Pv({
 取得Extra: () => {
  const params = Taro.getCurrentInstance().router?.params;
  {パラメータ}を返します。
 },
 });
 <View>自動埋め込みページ</View>を返します。
});

(2) ここでの各ページコンポーネントは WrapPage でラップする必要がありますが、これは依然としてビジネスに侵入的です。ネイティブアプレットはページを書き換えて、ページ内で直接 usePv() を使用できます。 Taroプロジェクトでもこれを実現し、ビジネス侵害ゼロを実現できるはずですよね？

Taro プロジェクトでは、ネイティブミニプログラムと同様に、ネイティブページをアプリ内で均一にインターセプトすることは確かに可能です。ただし、この場合、前述の「一部のページでは追加のパラメータを計算してレポートする必要がある」という問題を解決するのは困難です。

2. ページの共有

WeChat ミニプログラムには 2 種類の共有方法があります。

友達と共有する: ShareAppMessage を使用します。
友達に共有する: ShareTimeline を使用します。サポートは Mini Program Basic Library v2.11.3 から開始され、現在は Android プラットフォームでのみ利用可能です。

具体的な実装

useShareAppMessage を例に挙げます (useShareTimeline にも同じことが当てはまります)。
(1) 引き続きtrackingConf.ts統合構成ファイルに、共有追跡ポイント識別フィールドeleSn（および追加パラメータ）を追加します。

//トラッキングConf.ts
エクスポートデフォルト{
 「自動/ホーム/インデックス」：{
 ページ番号: 11111、
 shareMessage: {eleSn: 2222, destination: 0 }, // 共有する友達のeleSnと追加のサービスパラメータdestinationを含めるためにshareMessageを追加します
 }
};

（2）useShareAppMessageメソッドをカプセル化し、すべてのビジネス呼び出しでTaro.useShareAppMessageメソッドをこのuseShareAppMessageメソッドに置き換えます。

// 友人と共有し、メッセージを 1 か所にまとめます export const useShareAppMessage = (
 コールバック: (ペイロード: ShareAppMessageObject) => ShareAppMessageReturn
) => {
 newCallback = (ペイロード: ShareAppMessageObject) => {
 const 結果 = コールバック(ペイロード)

 const currentPath = getPath(); // getPath は現在のページ パスを取得します。「1. ページ露出 (pv)」の getPath を参照してください。
 //trackingConfからpageSn、shareMessageなどを取得します。const { pageSn, shareMessage } = trackingConf[currentPath]
 const { eleSn, ...extra } = shareMessage || {}
 page_el_sn = eleSnとします
 const { imageUrl: image_url, path: share_url } = 結果
 const { from: from_ele } = ペイロード

 定数レポート情報 = {
  from_ele、
  share_to: 'friend', // 'friend' は友達と共有することを意味しますimage_url,
  シェアURL、
  ...余分な
 }
 console.log('...useShareAppMessage トラッキング', { pageSn, page_el_sn, reportInfo })
 sendImpr(pageSn, page_el_sn, reportInfo) // 共有情報を送信するために、sendImpr メソッドを自分でカプセル化することができます。結果を返します。
 }
 Taro.useShareAppMessage(新しいコールバック)
}

このように、ページに友人と共有するためのトラッキングポイントを追加する必要がある場合は、trackingConf.ts に shareMessage の eleSn を追加するだけで済みます。useShareTimeline についても同様です。

質疑応答

好奇心旺盛な人はこう尋ねるかもしれません: ページに友人/友人サークルと共有するための追跡ポイントを追加する必要がある場合、ゼロ構成で (つまり、上記のtrackingConf.tsファイルを変更せずに) 可能ですか?
前回の記事の「PV全自動追尾」と同様に、データ収集方法については製品側と合意していればOKです。例えば、著者と製品側は以下のような合意をしています。
友人/友人サークルと共有される各ページの eleSn は 444444 です。次に、製品は pageSn を使用してそれがどのページであるかを判断し、share_to を使用して友人/友人サークルと共有されているかどうかを判断します。友人と共有するシナリオでは、from_ele を使用して、右上隅から共有するか、共有するページのボタンをクリックして共有するかを判断します。
この方法では、ページ共有も自動的に埋め込むことができます。

3. エレメント埋め込みポイント

自動要素追跡に関する研究は抵抗に遭遇しており、まだ実装されていません。以下の記事では、主にさまざまなアイデアで遭遇する問題について説明しています。何か良い提案があれば、コメント欄でお気軽にお知らせください。

要素を埋め込みます。頻度の高いものは露出とクリックのイベントで、中頻度と低頻度のものはスクロール、ホバー、その他のイベントです。

手動トラッキング方法は、要素指定イベントがトリガーされたときに、sendImpr を手動で実行して、トラッキングポイント (ページ固有識別子 pageSn と要素固有識別子 eleSn を含む) を報告します。

このステップはもっと簡単にできますか?ビジネスへの侵害はなく、一般的なアプローチは変わりません。

指定されたイベントをトリガーするためのフックをコンポーネントに追加 -> 追跡ポイントを報告するかどうかを決定 -> 条件が満たされた場合に報告

問題は 2 つの部分に分かれています。

（１）要素イベントコールバックをインターセプトする

ミニプログラムコンポーネントが受信した options.methods をインターセプトして走査することができます。カスタム関数の場合は、関数が呼び出されたときに、最初のパラメータ (e という名前であると仮定) の型が tap などのイベントと等しいかどうかを判断します。このとき、e などの情報に基づいて、追跡ポイントを報告するための条件が満たされているかどうかを判断できます。
ネイティブアプレットでの実装は次のとおりです。

// アプリ.js
アプリ（{
 起動() {
 let old = コンポーネント
 コンポーネント = function(config) {
  //ビジネスから渡された構成をインターセプトする
  const newConf = proxyConfig(config)
  古い(新しいConf)
 }
 }
})

const proxyConfig = function(conf) {
 const メソッド = conf.methods
 // カスタムメソッドを取得します（必要に応じて埋め込みでないメソッドを除外します）
 diyMethods = Object.entries(methods).filter(function (method) {
 メソッド名 = メソッド[0]
 戻る ！[
  「onLoad」、
  "オンショー",
  「準備完了」、
  「非表示」、
  「オンアンロード」、
  "onPullDownRefresh",
  "onReachBottom",
  "onPageScroll",
  "onShareAppMessage",
  "サイズ変更時",
  "onTabItemTap",
  「オブザーバー」、
 ].includes(メソッド名);
 })
 diyMethods.forEach(関数(メソッド) {
 const [メソッド名, メソッドFn] = メソッド
 // conf内のメソッドを変更する
 メソッド[メソッド名] = 関数 (...引数) {
  定数e = args && args[0]
  e && e.type === 'タップ'の場合{
  console.log('...tapping', methodName, args) // クリック イベントがトリガーされたら、必要に応じてトラッキング ポイントを報告します}
  メソッドFn.call(this,...args)
 }
 });
 // 変更された設定を返す
 conf を返す
}

Taro プロジェクトでは、コンポーネントコード内で Component を直接使用することはできませんが、次のように回りくどい方法で同じ目的を達成できます。

// myProxy.js
モジュール.エクスポート = (関数() {
 OriginPage = Pageとします
 OriginComponent = コンポーネントとする

 戻り値 (Page = function(conf) {
 conf.forEach(関数(e) {
  [メソッド名, メソッド関数] = e とします

  if (typeof methodFn === 'function') {
  conf[メソッド名] = 関数(...引数) {
   // conf の書き換えなど、必要な操作を実行します。 methodFn.call(this, ...args)
  }
  }
 })
 OriginPage(conf) を返す
 })(
 (コンポーネント = function(conf) {
  const メソッド = conf.methods
  メソッド.forEach(関数(e) {
  // conf の書き換えなど、必要な操作を実行します。})

  OriginComponent(conf)
 })
 ）
})()

次に、app.tsxにmyProxy.jsを直接インポートします。

（２）一意の要素識別子を自動生成する方法

現在、要素は追跡システムに適用される eleSn によって一意に識別されます。自動識別が必要な場合は、次のように分類できます。

XPath: PC/モバイルでは正常に動作しますが、ミニプログラムでノードの XPath を直接取得したり、XPath に基づいてノードを取得したりすることはサポートされていません。 WeChat ミニプログラムは、XPath 経由で DOM 要素を取得することをサポートしていますか?
コンポーネントメソッド名を自動的に取得: ネイティブアプレットでは、コンポーネントオプション内のメソッドが直接インターセプトされるため、イベントがトリガーされたときに元のメソッド名を取得できます。ただし、Taro プロジェクトではメソッドがプロキシ化されるため、これは不可能です。イベントがトリガーされた後、表示されるメソッド名は eh です。
AST はソースコードを解析してページ名、メソッド名、メソッドの対応するコメントを分析し、要素を識別します。この方法は Taro プロジェクトで使用できる唯一の方法ですが、コストが高く、「継続的なコード反復後も既存のデータを使用できるかどうか」も問題となるため、著者は試しませんでした。

結論

この記事では、WeChatミニプログラム（Taro）の手動追跡を自動追跡に変更するアイデアについて説明します。そして、ページトラッキング（PV、シェア）と要素トラッキングに応じて、実装方法が分析されます。

ページPV:
- usePvをカプセル化し、現在のページパスに従って設定ファイルからpageSnを読み取ります。
- ページコンポーネントWrapPageをラップし、usePv()を呼び出す
友人/友人サークルと共有: useShareAppMessage、useShareTimeline をカスタマイズし、現在のページパスに従って構成ファイルから pageSn および shareeleSn を読み取り、渡されたパラメーターを取得して報告します。
要素追跡: コンポーネントメソッドを書き換えてイベントコールバックをインターセプトするというアイデアを提供します。ただし、要素の一意の識別子を自動的に取得できないため、自動追跡には適していません。

これで、WeChatミニプログラム（Taro）の手動および自動追跡の実装の詳細説明に関するこの記事は終了です。ミニプログラムの手動および自動追跡の詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません: