Guide d'installation : WordPress, Next.js, Tilda et plus

Démarrage rapide

Ajoutez le script de suivi EuroMetrics à votre site en moins d’une minute. Collez l’extrait suivant avant la balise de fermeture </head> sur chaque page que vous souhaitez suivre :

<script defer src="https://app.eurometrics.eu/script.js"
        data-website-id="YOUR_WEBSITE_ID"></script>

Remplacez YOUR_WEBSITE_ID par le Website ID indiqué dans votre tableau de bord EuroMetrics. Vous le trouverez sous Paramètres → Sites web → Code de suivi.

Le script ne pèse que 1,5 Ko : il se charge de manière asynchrone avec defer et n’a aucun impact sur les performances de la page. Aucun cookie n’est déposé et aucune bannière de consentement n’est nécessaire.

WordPress

EuroMetrics propose un plugin WordPress officiel pour une mise en place la plus simple possible. Vous pouvez aussi faire l’intégration manuellement si vous préférez garder un contrôle total.

Option 1 : plugin officiel (recommandé)

1. Téléchargez la dernière version depuis GitHub (eurometrics-1.0.0.zip).
2. Dans l’administration WordPress, allez dans Extensions → Ajouter → Téléverser une extension. Sélectionnez le fichier ZIP téléchargé et cliquez sur Installer maintenant, puis sur Activer.
3. Allez dans Réglages → EuroMetrics, collez votre Website ID et enregistrez. C’est tout : le suivi est actif.

Configuration

1. Allez dans Réglages → EuroMetrics.
2. Le champ EuroMetrics URL est prérempli avec https://app.eurometrics.eu. Ne le modifiez que si vous utilisez une instance en marque blanche.
3. Saisissez votre Website ID (vous le trouverez dans votre tableau de bord EuroMetrics sous Paramètres → Sites web → Code de suivi (format UUID).
4. Activez éventuellement Exclude Admins pour que vos propres visites ne soient pas suivies lorsque vous êtes connecté en tant qu’administrateur.
5. Cliquez sur Enregistrer les modifications. L’indicateur d’état passe au vert lorsque le suivi est actif.

Référence des réglages du plugin

Option 2 : installation manuelle

Si vous préférez ne pas utiliser le plugin, ajoutez le code de suivi manuellement via le fichier functions.php de votre thème :

function add_eurometrics_tracking() {
    $website_id = 'YOUR_WEBSITE_ID';
    $host = 'https://app.eurometrics.eu';
    echo '<script defer src="' . esc_url($host . '/script.js') . '" data-website-id="' . esc_attr($website_id) . '"></script>';
}
add_action('wp_head', 'add_eurometrics_tracking');

Vous pouvez aussi utiliser un plugin comme Insert Headers and Footers pour coller la balise script dans la section <head> sans modifier les fichiers du thème.

Option 3 : plugin d’extraits de code

Si vous utilisez un plugin de gestion de code comme WPCode, Code Snippets ou équivalent :

1. Ouvrez les réglages du plugin ou son gestionnaire d’extraits.
2. Ajoutez un nouvel extrait dans la section Site-Wide Header.
3. Collez le script de suivi et remplacez YOUR_WEBSITE_ID par votre véritable Website ID.
4. Enregistrez et activez l’extrait.

Vérifier l’installation

• Vérifiez l’injection du script : ouvrez votre site dans une fenêtre de navigation privée, faites un clic droit → Afficher le code source de la page, puis recherchez eurometrics.
• Vérifiez les requêtes réseau : ouvrez les outils de développement (F12) → onglet Réseau, rechargez la page et filtrez sur script.js.
• Vérifiez votre tableau de bord : connectez-vous à EuroMetrics et ouvrez votre site. Votre page vue devrait apparaître en quelques secondes.

Dépannage

Avancé : WordPress Multisite

Le plugin EuroMetrics fonctionne sur les installations WordPress Multisite. Activez le plugin sur le réseau, puis ouvrez Réglages → EuroMetrics sur chaque sous-site et saisissez le Website ID correspondant.

Avancé : compatibilité avec le cache

Le script de suivi est compatible avec tous les principaux plugins de cache WordPress : WP Super Cache, W3 Total Cache, LiteSpeed Cache (aucune configuration particulière), WP Rocket (vérifiez que le script ne figure pas dans la liste « Delay JavaScript Execution ») et Cloudflare (excluez script.js de Rocket Loader).

Avancé : WooCommerce

EuroMetrics fonctionne avec WooCommerce sans configuration. Les pages vues des fiches produit, des pages de catégorie, du panier, du paiement et de la confirmation de commande sont suivies automatiquement.

Next.js

Utilisez le composant intégré next/script pour un chargement optimal. Ajoutez-le à votre layout racine pour qu’il se charge sur chaque page :

// app/layout.tsx
import Script from "next/script"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.eurometrics.eu/script.js"
          data-website-id="YOUR_WEBSITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

La stratégie afterInteractive garantit que le script se charge une fois la page interactive, comme defer en HTML classique.

Pages Router ? Si vous utilisez le Pages Router au lieu de l’App Router, ajoutez le composant Script à _app.tsx plutôt qu’à layout.tsx.

Tilda

Tilda vous permet d’ajouter du HTML personnalisé dans le <head> de votre site :

1. Ouvrez votre projet Tilda et allez dans Site Settings.
2. Cliquez sur l’onglet More, puis repérez HTML code for <head> section.
3. Collez le script de suivi.
4. Cliquez sur Save, puis sur Publish pour publier votre site. Les données commenceront à apparaître dans votre tableau de bord en quelques minutes.

Recommandations générales

Content Security Policy (CSP)

Si votre site utilise une Content Security Policy, ajoutez les directives suivantes :

Content-Security-Policy:
  script-src 'self' https://app.eurometrics.eu;
  connect-src 'self' https://app.eurometrics.eu;

Applications monopages

EuroMetrics détecte automatiquement la navigation côté client dans les SPA construites avec React, Vue, Svelte et d’autres frameworks. Le script écoute les changements pushState et replaceState : aucune configuration supplémentaire n’est nécessaire.

Suivi d’événements personnalisés

Au-delà des pages vues, vous pouvez suivre des événements personnalisés comme les clics sur des boutons, les envois de formulaires ou les achats :

// Track a custom event
umami.track("signup_click", {
  plan: "pro",
  source: "pricing_page",
})

Les événements apparaissent dans votre tableau de bord sous Événements et peuvent servir à créer des entonnoirs et des objectifs de conversion.

Besoin d’aide ? Écrivez-nous à support@eurometrics.eu.