Detaillierte Erläuterung der Implementierung der manuellen und automatischen Verfolgung des WeChat-Applets (Taro)

Wenn ein Unternehmen seine Benutzerbasis vergrößern möchte, muss es Daten zum Benutzerbetrieb erfassen und analysieren. Daher sind Trackingdaten von wesentlicher Bedeutung.
Für die Front-End-Karriereentwicklung ist die herkömmliche manuelle Nachverfolgung zweifellos eine mühsame und langweilige Aufgabe und sollte daher nach Möglichkeit vereinfacht werden.

1. Manuelles Vergraben

Manuelles Tracking bedeutet, dass bei Bedarf ein Code zum Melden von Trackingpunkten hinzugefügt wird. Dies beeinträchtigt das Lesen des Codes und der verstreute eingebettete Code lässt sich nicht bequem verwalten.
Am Beispiel der Seite „pv“ haben wir zuvor den pv auf jeder Seite gemeldet:

// src/manual/home/index.tsx

Tracking aus "./tracking" importieren;

// pageSn ist die „eindeutige Kennung der Seite im Tracking-System“, auf die sich Frontend und Produkt geeinigt haben. Die Kennung der Homepage dieses Projekts ist beispielsweise die Nummer 11664
const SeiteSn = 11111;

Standard exportieren () => {
 // useDidShow ist ein Taro-spezifischer Hook, der dem nativen componentDidShow-Lebenszyklus des Miniprogramms entspricht und aufgerufen wird, wenn die Seite angezeigt wird.
 useDidShow(() => {
 // Senden Sie den PV-Einbettungspunkt sendPv (pageSn) über die einheitliche Kapselungsmethode sendPv
 });
 return <View>Seite zum manuellen Einbetten</View>;
};

2. Automatisches Vergraben

Das automatische Tracking kann in vollautomatisches Tracking und halbautomatisches Tracking unterteilt werden. Durch die vollautomatische Punktvergrabung werden alle Punkte vergraben, unabhängig davon, ob sie benötigt werden oder nicht. Der Frontend-Entwickler dürfte zufrieden sein und gesagt haben: „Kommen Sie in Zukunft für die Produktentwicklung nicht mehr zu mir.“ Doch der Datenwissenschaftler fing an zu weinen.

Beispielsweise haben Tencent und das Taro-Team gemeinsam das automatisierte Tracking Tencent Youshu eingeführt, mit dem sich ganz einfach eine Verbindung herstellen lässt. Wenn Sie beispielsweise „proxyPage“ auf „true“ setzen, werden „alle Ereignisse beim Durchsuchen, Verlassen, Teilen und andere Aktionen auf der Seite gemeldet“, und wenn Sie „autoTrack“ auf „true“ setzen, werden „alle Ereignisse beim Tippen, Ändern, langen Drücken und Bestätigen von Elementen automatisch gemeldet“.

In Bezug auf Datenvolumen und Effektivität ist „Vollvergrabung“ jedoch gleichbedeutend mit „Nichtvergrabung“, da „Vollvergrabung“ einerseits einen sehr hohen Datenspeicherbedarf hat und andererseits unseren Studierenden, die für die Datenbereinigung zuständig sind, viel Arbeit bereitet.

Als nächstes sollten wir also nach einem Gleichgewicht suchen und uns auf das halbautomatische Tracking konzentrieren.

1. Seitenpräsenz (pv)

Seitenpräsenz (PV), die ideale Berichtsmethode ist:

Konfigurieren Sie an einer einheitlichen Stelle (z. B. „trackingConf.ts“) die Kennung jeder zu verfolgenden Seite (d. h. „pageSn“).
Nachdem die Seite angezeigt wurde, wird automatisch ermittelt, ob sie gemeldet werden muss (ob sie sich in der Konfigurationsdatei „trackingConf.ts“ befindet). Wenn dies der Fall ist, melden Sie es direkt.

Konkrete Umsetzung

(1) Einheitliche Konfiguration der Tracking-Punktfelder, pageSn stellt die Kennung der Seite im Tracking-Punktsystem dar

//trackingConf.ts
Standard exportieren {
 "auto/home/index": {
 SeiteSn: 11111,
 },
};

Wenn Ihr Unternehmen es Ihnen erlaubt, alle Seiten-PVs zu melden (mit dem Pfad, damit das Produkt selbst filtern kann), können Sie Schritt (1) natürlich überspringen und direkt zu Schritt (2) gehen. Diese Methode kann als „vollautomatisches PV-Tracking“ bezeichnet werden.

(2) Kapseln Sie den usePv-Hook ein. Wenn die Seite angezeigt wird, rufen Sie die aktuelle Seite pageSn ab, bestimmen Sie, ob PV eingebettet werden soll, und senden Sie PV bei Bedarf.

// verwendenPv.ts

// Den aktuellen Seitenpfad mit Taros getCurrentInstance abrufen
exportiere const getPath = () => {
 const Pfad = Taro.getCurrentInstance().router?.Pfad || "";
 // Entfernen Sie den führenden /, ändern Sie beispielsweise „/auto/home/index“ in „auto/home/index“
 returniere Pfad.Match(/^\/*/) ? Pfad.Ersetzen(/^\/*/, "") : Pfad;
};

// Aktuelle Seite pageSn abrufen, bestimmen, ob pv eingebettet werden soll, und wenn ja pv senden
// Der Parameter getExtra unterstützt die Übertragung zusätzlicher Parameter const usePv = ({
 getExtra,
}: {
 getExtra?: () => beliebig;
} = {}) => {
 // Seitenanzeige useDidShow(() => {
 const currentPath = getPath();
 // pageSn von trackingConf abrufen
 const pageSn = trackingConf[aktuellerPfad]?.pageSn;
 console.log("Seite Sn automatisch abrufen", currentPath, Seite Sn);
 if (SeiteSn) {
  const extra = getExtra?.();
  // Senden Sie den PV-Einbettungspunkt extra über die einheitliche Kapselungsmethode sendPv? sendPv(pageSn, extra) : sendPv(pageSn);
 }
 });
};

(3) Kapseln Sie anschließend die Seitenkomponente WrapPage ein und verwenden Sie das obige usePv():

importiere React von „react“;
importiere { Ansicht } aus "@tarojs/components";
importiere usePv aus "./usePv";

Funktion WrapPage(Comp) {
 Rückgabefunktion MyPage(props) {
 verwendenPv();
 zurückkehren (
  <Ansicht>
  <Comp {...Eigenschaften} />
  </Anzeigen>
 );
 };
}

Standard-WrapPage exportieren;

(4) Umhüllen Sie abschließend alle Seitenkomponenten mit einer Schicht WrapPage, um eine „On-Demand-Einbettung aller Seiten“ zu erreichen:

// src/auto/home/index.tsx

const Index = WrapPage(() => {
 return <View>Seite zum automatischen Einbetten</View>;
});

Wenn Sie später eine neue Seite entwickeln, müssen Sie zusätzlich zum Umschließen mit WrapPage in Schritt (1) nur pageSn der Seite in trackingConf.ts hinzufügen.

Fragenrunde

Neugierige Kinder fragen vielleicht:

(1) Da usePv() in WrapPage gekapselt ist, wie können wir die Berichterstellung für benutzerdefinierte Felder unterstützen?
Beispielsweise hofft das Produkt, dass, wenn die Seite src/auto/home/index.tsx pv meldet, sie auch die aktuellen Seiten-URL-Abfrageparameter meldet, nämlich params.
Es ist ganz einfach. Umschließen Sie diese Seite nicht mit WrapPage. Rufen Sie stattdessen die Funktion usePv direkt nach dem Abrufen der Parameter auf:

// src/auto/home/index.tsx

const Index = () => {
 verwendenPv({
 getExtra: () => {
  const params = Taro.getCurrentInstance().router?.params;
  returniere { Parameter };
 },
 });
 return <View>Seite zum automatischen Einbetten</View>;
});

(2) Jede Seitenkomponente muss hier mit WrapPage umschlossen werden, was immer noch invasiv für das Geschäft ist. Das native Applet kann die Seite neu schreiben und Pv() direkt in der Seite verwenden. Das Taro-Projekt sollte dazu doch auch in der Lage sein und dabei 0 Geschäftseingriffe erreichen, oder?

Im Taro-Projekt ist es tatsächlich möglich, native Seiten gleichmäßig in der App abzufangen, genau wie native Miniprogramme. In diesem Fall wird das oben erwähnte Problem „einige Seiten müssen zusätzliche Parameter berechnen und melden“ jedoch schwer zu lösen sein.

2. Seiten teilen

Es gibt zwei Arten des Teilens in WeChat-Miniprogrammen:

• Mit Freunden teilen: useShareAppMessage.
• Teilen Sie es mit Ihren Freunden: useShareTimeline. Der Support begann mit Mini Program Basic Library v2.11.3 und ist derzeit nur auf der Android-Plattform verfügbar.

Konkrete Umsetzung

Nehmen wir useShareAppMessage als Beispiel (dasselbe gilt für useShareTimeline):
(1) Fügen Sie in der einheitlichen Konfigurationsdatei trackingConf.ts das Feld zur Identifizierung des gemeinsamen Tracking-Punkts eleSn (und zusätzliche Parameter) hinzu.

//trackingConf.ts
Standard exportieren {
 "auto/home/index": {
 SeiteSn: 11111,
 shareMessage: {eleSn: 2222, destination: 0 }, // Füge shareMessage hinzu, um die eleSn des geteilten Freundes und den zusätzlichen Serviceparameter destination einzuschließen
 }
};

(2) Kapseln Sie die Methode useShareAppMessage und ersetzen Sie die Methode Taro.useShareAppMessage in allen Geschäftsaufrufen durch diese Methode useShareAppMessage.

// Mit Freunden teilen und die Nachricht an einem Ort vergraben export const useShareAppMessage = (
 Rückruf: (Nutzlast: ShareAppMessageObject) => ShareAppMessageReturn
) => {
 let newCallback = (Nutzlast: ShareAppMessageObject) => {
 const Ergebnis = Rückruf(Nutzlast)

 const currentPath = getPath(); // getPath ruft den aktuellen Seitenpfad ab, siehe getPath in „1. Seitenpräsenz (pv)“
 // pageSn, shareMessage usw. aus trackingConf abrufen const { pageSn, shareMessage } = trackingConf[currentPath]
 const { eleSn, ...extra } = shareMessage || {}
 let page_el_sn = eleSn
 const { imageUrl: Bild-URL, Pfad: Share-URL } = Ergebnis
 const { from: from_ele } = Nutzlast

 const BerichtInfo = {
  von_ele,
  share_to: 'friend', // 'friend' bedeutet mit Freunden teilenimage_url,
  Teilen_URL,
  ...Extra
 }
 console.log('...useShareAppMessage-Tracking', { pageSn, page_el_sn, reportInfo })
 sendImpr(pageSn, page_el_sn, reportInfo) // Sie können die sendImpr-Methode selbst kapseln, um Freigabeinformationen zu senden und das Rückgabeergebnis zu erhalten.
 }
 Taro.useShareAppMessage(neuer Rückruf)
}

Wenn eine Seite also einen Tracking-Punkt zum Teilen mit Freunden hinzufügen muss, fügen Sie einfach das Element „shareMessage“ in „trackingConf.ts“ hinzu, und dasselbe gilt für „useShareTimeline“.

Fragenrunde

Neugierige fragen sich vielleicht: Wenn die Seite Tracking-Punkte zum Teilen mit Freunden/Freundeskreisen hinzufügen muss, ist dies ohne Konfiguration möglich (d. h. ohne Änderung der obigen Datei „trackingConf.ts“)?
Ähnlich wie bei der „vollautomatischen PV-Verfolgung“ im vorherigen Artikel ist es auch in Ordnung, solange Sie mit dem Produkt über die Methode der Datenerfassung übereinstimmen. Beispielsweise haben der Autor und das Produkt Folgendes vereinbart:
Für jede Seite, die mit Freunden/Freundeskreisen geteilt wird, ist eleSn 444444. Dann verwendet das Produkt pageSn, um zu bestimmen, um welche Seite es sich handelt, und verwendet share_to, um zu bestimmen, ob sie mit Freunden/Freundeskreisen geteilt wird. Für das Szenario des Teilens mit Freunden wird from_ele verwendet, um zu bestimmen, ob über die obere rechte Ecke geteilt oder zum Teilen auf die Schaltfläche auf der Seite geklickt werden soll.
Auf diese Weise kann auch die Seitenfreigabe automatisch begraben werden.

3. Elementvergrabungspunkte

Die Forschung zur automatischen Elementverfolgung ist auf Widerstand gestoßen und wurde bisher nicht umgesetzt. Der folgende Artikel befasst sich hauptsächlich mit den Problemen, die bei verschiedenen Ideen auftreten. Wenn Sie gute Vorschläge haben, können Sie diese gerne im Kommentarbereich mitteilen.

Wir betten Elemente ein. Zu den Elementen mit höherer Frequenz gehören Belichtungs- und Klickereignisse, und zu den Elementen mit mittlerer und niedriger Frequenz gehören Scrollen, Schweben und andere Ereignisse.

Die manuelle Tracking-Methode besteht darin, sendImpr manuell auszuführen, um den Tracking-Punkt (mit der eindeutigen Seitenkennung pageSn und der eindeutigen Elementkennung eleSn) zu melden, wenn das durch das Element angegebene Ereignis ausgelöst wird.

Kann dieser Schritt einfacher gestaltet werden? Es erfolgt kein Eingriff in den Geschäftsbetrieb und der allgemeine Ansatz ist weiterhin:

Fügen Sie der Komponente einen Hook hinzu, um das angegebene Ereignis auszulösen -> Bestimmen Sie, ob der Tracking-Punkt gemeldet werden soll -> Melden Sie, wenn die Bedingungen erfüllt sind

Das Problem besteht aus zwei Teilen:

(1) Rückrufe von Elementereignissen abfangen

Sie können die von der Miniprogrammkomponente empfangenen Optionen.Methoden abfangen und durchlaufen. Wenn es sich um eine benutzerdefinierte Funktion handelt, bestimmen Sie beim Aufrufen der Funktion, ob der Typ des ersten Parameters (vorausgesetzt, er heißt e) Ereignissen wie „tap“ entspricht. Ob die Voraussetzungen zur Meldung des Trackingpunktes vorliegen, können Sie zu diesem Zeitpunkt anhand von Informationen wie z.B.
Die Implementierung im nativen Applet ist wie folgt:

// App.js
App({
 beim Starten() {
 let old = Komponente
 Komponente = Funktion(Konfiguration) {
  //Fängt die vom Unternehmen übergebene Konfiguration ab
  const newConf = ProxyConfig(Konfiguration)
  alt(neueConf)
 }
 }
})

const proxyConfig = Funktion(conf) {
 const-Methoden = conf.methods
 // Benutzerdefinierte Methoden abrufen (nach Bedarf einige nicht eingebettete Methoden ausschließen)
 let diyMethods = Object.entries(Methoden).filter(Funktion (Methode) {
 let Methodenname = Methode[0]
 zurückkehren ![
  "beim Laden",
  "aufShow",
  "bereit",
  "beim Ausblenden",
  "beimEntladen",
  "beiPullDownRefresh",
  "beiErreichenUnten",
  "beimScrollen auf der Seite",
  "beiShareAppMessage",
  "beiGrößenänderung",
  "beim Tippen auf TabItem",
  "Beobachter",
 ].includes(Methodenname);
 })
 diyMethods.forEach(Funktion(Methode) {
 const [Methodenname, Methodenfunktion] = Methode
 // Ändern Sie die Methoden in conf
 Methoden[Methodenname] = Funktion (...Argumente) {
  const e = args && args[0]
  wenn (e && e.type === 'tap') {
  console.log('...tapping', methodName, args) // Wenn ein Klickereignis ausgelöst wird, melde den Tracking-Punkt nach Bedarf}
  methodFn.call(diese,...args)
 }
 });
 // Gib die geänderte Konfiguration zurück
 Konf zurückgeben
}

Im Taro-Projekt können Sie Component nicht direkt im Komponentencode verwenden, aber Sie können dasselbe Ziel auf Umwegen erreichen, beispielsweise:

// meinProxy.js
modul.exports = (funktion() {
 let OriginPage = Seite
 let OriginComponent = Komponente

 return (Seite = Funktion(conf) {
 conf.forEach(Funktion(e) {
  let [Methodenname, Methodenfunktion] = e

  wenn (Typ der MethodeFn === 'Funktion') {
  conf[Methodenname] = Funktion(...Argumente) {
   // Machen Sie, was Sie wollen, z. B. die Konfiguration neu schreiben usw. methodFn.call(this, ...args)
  }
  }
 })
 Rückgabewert für OriginPage(conf)
 })(
 (Komponente = Funktion(conf) {
  const-Methoden = conf.methods
  Methoden.fürJedes(Funktion(e) {
  // Machen Sie, was Sie wollen, z. B. die Konfiguration neu schreiben usw.})

  Ursprungskomponente(conf)
 })
 )
})()

Importieren Sie dann myProxy.js direkt in app.tsx

(2) So generieren Sie automatisch eindeutige Elementkennungen

Derzeit werden Elemente eindeutig durch im Tracking-System beantragte Elemente identifiziert. Wenn Sie eine automatische Identifizierung wünschen, kann diese unterteilt werden in:

• XPath: Funktioniert auf PCs/Mobilgeräten einwandfrei, unterstützt jedoch nicht das direkte Abrufen des XPath des Knotens bzw. das Abrufen des Knotens basierend auf XPath in Miniprogrammen. Können WeChat-Miniprogramme das Abrufen von DOM-Elementen über XPath unterstützen?
• Komponentenmethodennamen automatisch abrufen: In nativen Applets kann der ursprüngliche Methodenname abgerufen werden, wenn das Ereignis ausgelöst wird, da die Methoden in den Komponentenoptionen direkt abgefangen werden. Dies ist im Taro-Projekt jedoch nicht möglich, da die Methoden über einen Proxy übermittelt werden. Nachdem das Ereignis ausgelöst wurde, lautet der angezeigte Methodenname eh.
• AST analysiert den Quellcode, um den Seitennamen, den Methodennamen und die entsprechenden Kommentare der Methode zu analysieren und die Elemente zu identifizieren: Diese Methode ist die einzige, die im Taro-Projekt verwendet werden kann, sie ist jedoch kostspielig und es stellt sich auch die Frage, „ob die vorhandenen Daten nach kontinuierlicher Codeiteration noch verwendet werden können“, sodass der Autor sie nicht ausprobiert hat.

Abschluss

In diesem Artikel wird die Idee beschrieben, das manuelle Tracking auf das automatische Tracking des WeChat Mini-Programms (Taro) umzustellen. Und entsprechend der Seitenverfolgung (PV, Teilen) und Elementverfolgung wird die Implementierungsmethode analysiert:

• Seite pv:
  • Kapseln Sie usePv und lesen Sie pageSn aus der Konfigurationsdatei entsprechend dem aktuellen Seitenpfad
  • Umschließen Sie die Seitenkomponente WrapPage und rufen Sie usePv() auf
• Mit Freunden/Freundeskreis teilen: useShareAppMessage und useShareTimeline anpassen, pageSn und shareeleSn entsprechend dem aktuellen Seitenpfad aus der Konfigurationsdatei lesen, anschließend die übergebenen Parameter abrufen und melden.
• Elementverfolgung: Bietet eine Idee zum Umschreiben von Komponentenmethoden, um Ereignisrückrufe abzufangen. Da die eindeutige Elementkennung jedoch nicht automatisch abgerufen werden kann, ist sie nicht für die automatische Verfolgung geeignet.

Damit ist dieser Artikel mit der detaillierten Erläuterung der Implementierung der manuellen und automatischen Verfolgung von WeChat-Miniprogrammen (Taro) abgeschlossen. Weitere Informationen zur manuellen und automatischen Verfolgung von Miniprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!