React et Next.js
Pour les développeurs. Un composant React réutilisable qui intègre le configurateur et ne charge le script de suivi qu'une seule fois, ainsi qu'un bouton.
Toutes les formulesPour les développeurs1 min de lecture
Votre site est construit avec React ou Next.js ? Créez alors un composant qui intègre le configurateur. Le script de suivi n'est chargé qu'une seule fois, même si le composant apparaît plusieurs fois sur la page.
Composant avec iframe
TSX
import { useEffect } from 'react';
interface ConfiguratorProps {
slug: string;
height?: number;
}
export function Configurator({ slug, height = 800 }: ConfiguratorProps) {
// Transmet l'origine (UTM, gclid) de votre page au configurateur.
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="Configurateur"
/>
);
}Utilisez-le ensuite sur n'importe quelle page :
TSX
<Configurator slug="{votre-slug}" />Bouton vers le configurateur
TSX
export function ConfigureButton({ slug }: { slug: string }) {
return (
<a
href={`https://meetpiloot.nl/${slug}/configure`}
target="_blank"
rel="noopener noreferrer"
>
Composez votre projet
</a>
);
}Vérifier que tout fonctionne
Ouvrez la page et vérifiez dans les outils de développement que mp-tracking.js n'est chargé qu'une fois. Si vous écoutez les événements du configurateur, lisez événements et champs de la dataLayer.
À lire aussi
Vous êtes bloqué ?
Envoyez-nous un e-mail ou ouvrez un ticket depuis votre tableau de bord. Nous répondons sous 1 à 2 jours ouvrables.