React und Next.js
Für Webentwickler. Eine React-Komponente, die den Konfigurator einbindet und das Tracking-Skript einmal lädt, plus ein Button zum Konfigurator.
Alle TarifeFür Entwickler1 Min. Lesezeit
Ist deine Website mit React oder Next.js gebaut, lege eine Komponente an, die den Konfigurator einbindet. Das Tracking-Skript wird nur einmal geladen, auch wenn die Komponente mehrmals auf der Seite steht.
Komponente mit iframe
TSX
import { useEffect } from 'react';
interface ConfiguratorProps {
slug: string;
height?: number;
}
export function Configurator({ slug, height = 800 }: ConfiguratorProps) {
// Gibt die Herkunft (UTM, gclid) deiner Seite an den Konfigurator weiter.
useEffect(() => {
const src = 'https://meetpiloot.nl/embed/mp-tracking.js';
if (document.querySelector(`script[src="${src}"]`)) return;
const script = document.createElement('script');
script.src = src;
script.async = true;
document.body.appendChild(script);
}, []);
return (
<iframe
src={`https://meetpiloot.nl/${slug}/configure?embed=true`}
style={{ width: '100%', height, border: 0 }}
title="Konfigurator"
/>
);
}Danach nutzt du sie auf jeder Seite:
TSX
<Configurator slug="{dein-slug}" />Button zum Konfigurator
TSX
export function ConfigureButton({ slug }: { slug: string }) {
return (
<a
href={`https://meetpiloot.nl/${slug}/configure`}
target="_blank"
rel="noopener noreferrer"
>
Produkt zusammenstellen
</a>
);
}Prüfen, ob es funktioniert
Öffne die Seite und prüfe in den Entwicklertools, dass mp-tracking.js genau einmal geladen wurde. Wertest du die Events aus dem Konfigurator aus, lies Events und dataLayer-Felder.
Auch interessant
Kommst du nicht weiter?
Schreib uns oder öffne ein Ticket in deinem Dashboard. Antwort innerhalb von 1 bis 2 Werktagen.