TECHNICAL
INTEGRATION

[status: stable] — Implémentation de la sonde télémétrique d'acquisition de données asynchrones.

[01] Package Deployment

Installation

Injectez le module universel isolé directement depuis le registre NPM dans l'arborescence de dépendances de votre projet.

npm install metricflow-trackerTerminal

[02] DOM Architecture Injection

Root Layout Initialization

Pour injecter proprement la sonde sans perturber le cycle de rendu serveur, créez un composant wrapper client utilisant l'import dynamique de Next.js. Intégrez-le ensuite au sommet de votre layout.js.

// SSR BYPASS STRATEGY

L'option { ssr: false } est explicitement requise. Elle force Next.js à charger le module uniquement lorsque le thread client est actif, garantissant la neutralité SEO sur le serveur.

app/layout.jsnext/dynamic wrapper

import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

// Import the tracker component

import MetricflowTracker from "./Metricflowtracker";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col">
        {/* We place the tracker here, it will be activated client-side only */}
        <MetricflowTracker />
        
        {children}
      </body>
    </html>
  );
}

Une fois le wrapper créé, appelez-le directement à l'intérieur du tag HTML body de votre layout racine :

components/MetricflowTracker.jsroot layout

// We make this file a client-component
// Here, the dynamic with { ssr: false } is totally authorized !


'use client';

import dynamic from "next/dynamic";

const MetricflowComponent = dynamic(
  () => import("metricflow-tracker").then((mod) => mod.Metricflow),
  { ssr: false }
);

export default function MetricflowTracker() {
  return(
    <>
      <MetricflowComponent 
        siteId="d5f6z4h03gab9aw4" // This is fictive, replace with your site ID on the dashboard
        serverUrl="https://api.metricflow.dev/api" 
      />;
    </>
  )
}

[03] Network Analytics

Vérification des Séquences Réseau

La sonde utilise l'infrastructure native fetch() injectée avec la surcouche de transport persistant keepalive: true.

Pour valider la non-perte de paquets réseau, ouvrez l'inspecteur d'événements réseau (F12), provoquez des défilements dynamiques de 25% à 100% sur votre page, et inspectez la présence d'appels HTTP asynchrones sortants validés en code retour 204 No Content.

[04] Advanced SDK Tracking

Métriques Métiers & Événements Custom

Pour monitorer des entonnoirs de conversion complexes (par exemple le clic sur un bouton de souscription SaaS), sollicitez directement l'API de transmission de structures de données personnalisées :

Trigger Event Hook

const triggerConversion = () => {
  if (window.MetricFlowInstance) {
    window.MetricFlowInstance.trackEvent('saas_subscription_success', {
      tier: 'enterprise_plan',
      value: 299.00,
      currency: 'EUR'
    });
  }
};