Serverseitige Analytik mit Jamstack Sites

Jamstack-Websites haben kein Backend. Das macht ihre Fähigkeit, Analysen zu sammeln, besonders anfällig für Blocker. Lassen Sie uns dieses Problem beheben.

Dieses Beispiel enthält eine Netlify-Funktion die unsere Ereignisse an Google Analytics weiterleitet, und eine Netlify-Umleitung Regel.

Das Problem

Tracker und Zählpixel sind HTML-Code, der dazu dient, das Verhalten oder die Besuche von Nutzern zu erfassen, wenn sie eine Website besuchen oder eine E-Mail öffnen. Sie sind nützlich, um die Nutzung Ihrer Website und manchmal auch Konversionen zu verfolgen.

Das Problem ist, dass einige Tracker langsam und oft invasiv sind. Werbeblocker wurden ursprünglich entwickelt, um zu verhindern, dass Werbung und Tracking-Pixel die Leistung von Webseiten beeinträchtigen, oder um das Nutzererlebnis zu verbessern, wurden aber später erweitert, um die Privatsphäre der Nutzer zu verbessern.

Ein Nebeneffekt war, dass viele Website-Betreiber den Überblick darüber verloren, was auf ihren Websites funktioniert und was nicht. Physische Tracking-Merkmale können immer noch verwendet werden, um bestimmte Metriken zu verfolgen, z. B. das Hinzufügen der Kennung eines Artikels zu einem Anmeldelink, um zu sehen, woher die Anmeldung stammt.

Dies hilft uns immer noch nicht, genau zu bestimmen, ob unsere Inhalte angesehen werden, eine wichtige Voraussetzung für die Ermittlung der Konversion.

Die Lösung

Die serverseitige Analyse hat sich zu einer beliebten Methode zur Verfolgung von Benutzeraktivitäten entwickelt. Sie hat nicht den Umfang der traditionellen Analyse (sie kann nicht einfach On-Page-Interaktionen verfolgen), aber sie kann wichtige Details wie einzelne Seitenaufrufe erfassen.

Hosting-Plattformen wie Netlifyoder Edge-Anbieter wie Cloudflare und Fastly bieten serverseitige Analysen als Teil ihrer Lösungen an. Wenn Sie jedoch einen Anbieter für die Analyse nutzen, sind Sie oft in der Art und Weise eingeschränkt, wie Sie diese Informationen speichern können, was die interne Berichterstattung einschränkt.

Aus diesem Grund möchten einige ihre eigenen serverseitigen Analysen durchführen. Hierfür bietet Google einige Schnellstarts für einige Sprachen an, und für andere gibt es Pakete wie universal-analytics.

Hier werden wir unser eigenes Programm mit universal-analytics und einer Netlify-Funktion.

Netlify Funktion

Netlify-Funktionen sind im Grunde AWS Lambda-Funktionen, ohne AWS. Die AWS-Entwicklererfahrung lässt viel zu wünschen übrig, und Netlify hat die Benutzererfahrung in ein Geschäftsmodell verwandelt. Netlify Functions sind da keine Ausnahme. Sie ermöglichen es, JavaScript oder Go in ein konfiguriertes Verzeichnis zu schreiben und es in wenigen Schritten zu veröffentlichen. Der Endpunkt wird über den Datei- oder Ordnernamen abgeleitet und kann die Abhängigkeiten der übergeordneten Anwendung nutzen oder für seine eigenen verantwortlich sein.

Eine supereinfache Funktion könnte wie folgt aussehen:

// functions/hello-world/index.js

exports.handler = (event, context) => {
  console.log('Only the server will see this!')

  return {
    statusCode: 200,
    body: 'Hello, world!',
  }
}

Nach der Bereitstellung können Sie unter einer URL wie dieser darauf zugreifen: https://your-app.netlify.app/.netlify/functions/hello-world

Sie können aber auch weiterarbeiten, nachdem Sie eine Antwort zurückgeschickt haben, etwa so:

// functions/hello-world/index.js

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    body: 'Hello, world!',
  })

  console.log('The server will still see this!')
}

Nun könnten wir diese Funktion nutzen, um unsere Analysen an Google zu übermitteln.

Hinweis: Wenn Sie Abhängigkeiten zu einer Funktion hinzufügen, müssen Sie das @netlify/plugin-functions-install-core Plugin zu Ihrer netlify.toml Konfiguration hinzufügen. Dieses Plugin stellt sicher, dass alle Abhängigkeiten der Funktion installiert werden, wenn die Funktion bereitgestellt wird.

Wir müssen zuerst universal-analytics zuerst installieren, also stellen Sie sicher, dass Sie sich im Verzeichnis Ihrer Funktion befinden, bevor Sie den folgenden Befehl ausführen.

Stellen Sie sicher, dass Sie eine Google Analytics ID haben, und fügen Sie diese zu Ihren Netlify-Umgebungsvariablen.

Jetzt können wir sie in unserer Funktion verwenden.

// functions/hello-world/index.js

const ua = require('universal-analytics')
const visitor = ua(process.env.GOOGLE_ANALYTICS_ID)

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    body: 'Hello, world!',
  })

  const { queryStringParameters: data } = event

  try {
    if (data) {
      visitor.pageview(data).send()
    }
  } catch (error) {
    console.log(error) // eslint-disable-line
  }
}

Jetzt können Sie von Ihrem Browser aus Daten von der URL direkt an Google senden: https://your-app.netlify.app/.netlify/functions/hello-world?dp=/my-custom-page

Zu den Daten, die Sie senden können, gehören u. a. diese Parameter, sind aber nicht darauf beschränkt:

{
  dp, // path e.g. /my-custom-page
  dt, // title of the page
  dh, // hostname e.g. https://netlify.com
  dr, // referrer e.g. https://netlify.com/as-a-referrer or /a-link
  ua, // user agent e.g. very obscure string meaning "chrome on mac"
  cs, // utm_source
  cm, // utm_medium
  cn, // utm_campaign
  ck, // utm_term
  cc, // utm_content
}

Hier ist eine vollständige Liste der zulässigen Parameter.

Das "Bild" hinzufügen

Der Aufruf dieses Skripts allein, mit etwas wie einer Router-Middleware oder einer AJAX-Anfrage, könnte in vielen Fällen für eine angemessene Berichterstattung ausreichen, könnte aber dennoch von einem Browser oder einem Werbeblocker als XHR-Anfrage erkannt und blockiert werden.

Eine (typischerweise übertechnisierte) Lösung, für die ich mich entschieden habe, ähnelt einer Zählpixelmethode. Da wir jedoch ein sichtbares strukturelles Bild zurückliefern, wird es von Werbeblockern bisher völlig ignoriert.

Screenshot of AdBlock Plus

Wir werden ein SVG-Bild von der Netlify-Funktion zurückgeben und es mit einem Bild-Tag auf einer Seite platzieren.

Verwenden wir dieses Bild.

Die Quelle für dieses Bild ist hier zu finden:

<svg id="svg1923" width="733" xmlns="http://www.w3.org/2000/svg" height="733">
<circle cy="366.5" cx="366.5" r="366.5"/>
<circle cy="366.5" cx="366.5" r="336.5" fill="#fede58"/>
<path d="m325 665c-121-21-194-115-212-233v-8l-25-1-1-18h481c6 13 10 27 13 41 13 94-38 146-114 193-45 23-93 29-142 26z"/>
<path d="m372 647c52-6 98-28 138-62 28-25 46-56 51-87 4-20 1-57-5-70l-423-1c-2 56 39 118 74 157 31 34 72 54 116 63 11 2 38 2 49 0z" fill="#871945"/>
<path d="m76 342c-13-26-13-57-9-85 6-27 18-52 35-68 21-20 50-23 77-18 15 4 28 12 39 23 18 17 30 40 36 67 4 20 4 41 0 60l-6 21z"/>
<path d="m234 323c5-6 6-40 2-58-3-16-4-16-10-10-14 14-38 14-52 0-15-18-12-41 6-55 3-3 5-5 5-6-1-4-22-8-34-7-42 4-57.6 40-66.2 77-3 17-1 53 4 59h145.2z" fill="#fff"/>
<path d="m378 343c-2-3-6-20-7-29-5-28-1-57 11-83 15-30 41-52 72-60 29-7 57 0 82 15 26 17 45 49 50 82 2 12 2 33 0 45-1 10-5 26-8 30z"/>
<path d="m565 324c4-5 5-34 4-50-2-14-6-24-8-24-1 0-3 2-6 5-17 17-47 13-58-9-7-16-4-31 8-43 4-4 7-8 7-9 0 0-4-2-8-3-51-17-105 20-115 80-3 15 0 43 3 53z" fill="#fff"/>
<path d="m504 590s-46 40-105 53c-66 15-114-7-114-7s14-76 93-95c76-18 126 49 126 49z" fill="#f9bedd"/>
</svg>

Um nun das Bild aus unserer Funktion zurückzugeben:

// functions/hello-world/index.js

const ua = require('universal-analytics')
const visitor = ua(process.env.GOOGLE_ANALYTICS_ID)

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    headers: {
      'Content-Type': 'image/svg+xml',
    },
    body: `<svg id="svg1923" width="733" xmlns="http://www.w3.org/2000/svg" height="733">
<circle cy="366.5" cx="366.5" r="366.5"/>
<circle cy="366.5" cx="366.5" r="336.5" fill="#fede58"/>
<path d="m325 665c-121-21-194-115-212-233v-8l-25-1-1-18h481c6 13 10 27 13 41 13 94-38 146-114 193-45 23-93 29-142 26z"/>
<path d="m372 647c52-6 98-28 138-62 28-25 46-56 51-87 4-20 1-57-5-70l-423-1c-2 56 39 118 74 157 31 34 72 54 116 63 11 2 38 2 49 0z" fill="#871945"/>
<path d="m76 342c-13-26-13-57-9-85 6-27 18-52 35-68 21-20 50-23 77-18 15 4 28 12 39 23 18 17 30 40 36 67 4 20 4 41 0 60l-6 21z"/>
<path d="m234 323c5-6 6-40 2-58-3-16-4-16-10-10-14 14-38 14-52 0-15-18-12-41 6-55 3-3 5-5 5-6-1-4-22-8-34-7-42 4-57.6 40-66.2 77-3 17-1 53 4 59h145.2z" fill="#fff"/>
<path d="m378 343c-2-3-6-20-7-29-5-28-1-57 11-83 15-30 41-52 72-60 29-7 57 0 82 15 26 17 45 49 50 82 2 12 2 33 0 45-1 10-5 26-8 30z"/>
<path d="m565 324c4-5 5-34 4-50-2-14-6-24-8-24-1 0-3 2-6 5-17 17-47 13-58-9-7-16-4-31 8-43 4-4 7-8 7-9 0 0-4-2-8-3-51-17-105 20-115 80-3 15 0 43 3 53z" fill="#fff"/>
<path d="m504 590s-46 40-105 53c-66 15-114-7-114-7s14-76 93-95c76-18 126 49 126 49z" fill="#f9bedd"/>
</svg>`,
  })

  const { queryStringParameters: data } = event

  try {
    if (data) {
      visitor.pageview(data).send()
    }
  } catch (error) {
    console.log(error) // eslint-disable-line
  }
}

Fügen Sie sie unter Verwendung der zuvor verwendeten URL zu Ihrer Website hinzu:

<img 
  alt="An SVG file of a very smiley Emoji"
  title="An SVG Emoji"
  width="128" 
  src="/.netlify/functions/hello-world?dp=/my-custom-page"
/>

Mit etwas Glück wird es so aussehen:

An image of a smiley

Umleitungsregel

Der hinterhältigste und erfinderischste Teil meines bösen Plans könnte dieser nächste Teil sein. Ich war etwas paranoid, dass ein Ad-Blocker eine Nicht-Bild-URL mit Query-String-Parametern als wenig verdächtig wie eine Bildquelle erkennen und sie trotzdem blockieren könnte.

eingeben Netlify Umleitungen.

Mit der Option netlify.toml im Stammverzeichnis Ihres Projekts können Sie einen Pfad durch einen anderen ersetzen.

[[redirects]]
  from = "/images/smiley-face.svg"
  to = "/.netlify/functions/hello-world"
  status = 200
  force = true

Jetzt können Sie einen Bildpfad verwenden, um Ihr Smiley-Gesicht einzubinden.

<img 
  alt="An SVG file of a very smiley Emoji"
  title="An SVG Emoji"
  width="128" 
  src="/images/smiley-face.svg?dp=/my-custom-page"
/>

Sie können die Abfragezeichenfolge nach Belieben kodieren, denken Sie nur daran, sie innerhalb der Funktion zu dekodieren.

Schlussfolgerung

Analytik ist eine Superkraft für Marketing und Inhaltsersteller. Sie ermöglicht es uns, der Gemeinschaft besser zu dienen, indem wir unsere Ziele auf der Grundlage der Daten, die wir sammeln können, anpassen.

Bei Trackern gibt es oft Bedenken hinsichtlich des Datenschutzes und der Geschwindigkeit. Aber solange Sie in gutem Glauben handeln, und ich glaube, das tun wir, kommt die Analyse den Zuschauern genauso zugute wie allen anderen.

Dies ist ein netter kleiner Weg, um serverseitige Analysen zu erhalten (die von Blockern nicht blockiert werden können), wenn Sie keine Serverseite zur Verfügung haben.