Gatsby
Fügen Sie das Tag beim Build mit der Gatsby-SSR-API ein.
Schritte
- Öffnen Sie gatsby-ssr.js im Projektstamm oder legen Sie die Datei an.
- Exportieren Sie onRenderBody wie unten gezeigt. Ersetzen Sie SITE_ID durch Ihre Site-ID.
- Bauen Sie neu und deployen Sie.
Das Snippet
Ersetzen Sie SITE_ID durch die ID aus Ihren Glyphex-Website-Einstellungen.
// gatsby-ssr.js
import React from "react";
export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
<script
key="glyphex"
defer
src="https://glyphex.io/t/SITE_ID.js"
/>,
]);
};Die clientseitige Navigation von Gatsby wird automatisch erfasst. Sie brauchen kein onRouteUpdate in gatsby-browser.js.
Funktion prüfen
Öffnen Sie Ihre Live-Website in einem neuen Tab und dann Echtzeit in Ihrem Glyphex-Dashboard. Ihr Besuch sollte nach wenigen Sekunden erscheinen. Alternativ öffnen Sie die Seite Erste Schritte Ihrer Website und klicken auf Installation prüfen: Dabei wird Ihre URL abgerufen und nach dem Tag gesucht.
Cookies und Einwilligung
Glyphex setzt keine Cookies und speichert nichts auf dem Gerät der Besucher, daher ist kein Cookie-Banner nötig.
Eigene Events erfassen
Rufen Sie window.analytics.track in einem beliebigen Handler auf:
export function SignupButton() {
return (
<button
onClick={() =>
window.analytics?.track("signup_click", { plan: "pro" })
}
>
Sign up
</button>
);
}Events lassen sich auch mit window.analytics.track(name, props) oder den deklarativen Attributen data-glyphex-event und data-glyphex-event-<prop> senden.
Fehlerbehebung
- Keine Daten? Prüfen Sie, ob die Site-ID exakt stimmt und die Seite neu veröffentlicht bzw. der Cache geleert wurde.
- Werbeblocker können Analytics-Scripts blockieren. Deaktivieren Sie Ihren zum Testen.
- Content Security Policy: Erlauben Sie https://glyphex.io in script-src und connect-src.
- Prüfen Sie in DevTools > Network auf eine Anfrage an glyphex.io/t/. Ein 404 bedeutet, dass die Site-ID falsch ist.