Kürzlich habe ich versucht, Go Squared (einen Google Analytics-Konkurrenten) zu unserer Phoenix Live View-Anwendung hinzuzufügen und festgestellt, dass es aufgrund des fehlenden Seitenladens nicht funktionieren würde.

Normalerweise macht das Analytics-Snippet etwas wie dies:

ga('send', 'pageview');

Live Views machen keine normale HTTP-Anfrage (sie verwenden Websockets) und wenn ein Benutzer von einer Live-Route zu einer anderen wechselt, wird das Analytics-Javascript-Snippet nicht ausgeführt.

Stattdessen müssen wir uns in den Live View-Lebenszyklus einklinken. Erstellen Sie eine neue Datei neben Ihrer app.js Datei: analytics.js.

In Ihrer app.js:

import "phoenix_html";
import { Socket } from "phoenix";
import { LiveSocket } from "phoenix_live_view";
import topbar from "../vendor/topbar";
import Hooks from "./hooks";
import "./analytics.js"; // <--- Dies hinzufügen

Dann in Ihrer analytics.js:

function trackPageView() {
   yourAnalytics.page();
}

window.addEventListener("phx:page-loading-stop", () => {
  // Wenn jemand zu einer anderen Live View-Seite geht:
  trackPageView();
});

// Für Nicht-Live-Views ausführen
trackPageView();

Dies funktioniert größtenteils, außer dass ich festgestellt habe, dass bei einer Live-Umleitung die trackPageView() Funktion zweimal ausgeführt wurde! Ich habe keine Ahnung, ob es etwas mit meiner App oder ein Live View-Problem zu tun hatte. Um dies zu beheben, habe ich die letzte Seite in eine Variable gesetzt und sichergestellt, dass die Seitenaufrufe nicht doppelt gezählt werden:

window.lastPage = "";

function trackPageView() {
  let pageNotYetTracked = lastPage != window.location.pathname;

  if (pageNotYetTracked) {
    yourAnalytics.page();
  }
   window.lastPage = window.location.pathname;
}

window.addEventListener("phx:page-loading-stop", () => {
  // Wenn jemand zu einer anderen Live View-Seite geht:
  trackPageView();
});

// Für Nicht-Live-Views ausführen
trackPageView();

Jetzt wird es nur einmal pro Seite aufgerufen!

Artikel Quelle