React en Next.js
Voor webbouwers. Een herbruikbaar React-component dat de configurator insluit en het trackingscript één keer laadt, plus een knop naar de configurator.
Alle plannenVoor ontwikkelaars1 min lezen
Is je website gebouwd met React of Next.js, maak dan een component dat de configurator insluit. Het trackingscript wordt één keer geladen, ook als het component vaker op de pagina staat.
Component met iframe
TSX
import { useEffect } from 'react';
interface ConfiguratorProps {
slug: string;
height?: number;
}
export function Configurator({ slug, height = 800 }: ConfiguratorProps) {
// Geeft de herkomst (UTM, gclid) van je pagina door aan de configurator.
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="Configurator"
/>
);
}Gebruik het daarna op elke pagina:
TSX
<Configurator slug="{jouw-slug}" />Knop naar de configurator
TSX
export function ConfigureButton({ slug }: { slug: string }) {
return (
<a
href={`https://meetpiloot.nl/${slug}/configure`}
target="_blank"
rel="noopener noreferrer"
>
Stel je product samen
</a>
);
}Controleren of het werkt
Open de pagina en controleer in de ontwikkelaarstools dat mp-tracking.js één keer geladen is. Luister je naar de events uit de configurator, lees dan events en dataLayer-velden.
Lees ook
Kom je er niet uit?
Mail ons of open een ticket vanuit je dashboard. Antwoord binnen 1 tot 2 werkdagen.