GA4 pour développeurs : events, conversions et intégration Search Console

Universal Analytics est mort depuis juillet 2023. GA4 (Google Analytics 4) le remplace avec un modèle complètement différent : tout est un "event", il n'y a plus de sessions au sens traditionnel, et les rapports sont restructurés. Si vous avez migré à la va-vite, vous avez probablement des données incomplètes ou un tracking qui mesure les mauvaises choses.

Ce guide part de zero : créer une propriété GA4 correctement, implémenter les events qui comptent, configurer les conversions, et connecter Search Console pour croiser données SEO et comportement utilisateur.

Créer une propriété GA4

analytics.google.com → Créer propriété → Google Analytics 4

Renseigner :

Nom de la propriété (ex : "Iducation Production")
Fuseau horaire et devise
Secteur d'activité et objectifs (pour les rapports suggérés)

Copier l'Measurement ID : G-XXXXXXXXXX.

Installer GA4

Via gtag.js (méthode universelle)

Dans le <head> de chaque page

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || []
  function gtag() { dataLayer.push(arguments) }
  gtag('js', new Date())
  gtag('config', 'G-XXXXXXXXXX', {
    send_page_view: false  // On gère les page views manuellement en SPA
  })
</script>

Via Google Tag Manager (recommandé en production)

GTM découple le tracking du code — les équipes marketing peuvent modifier les events sans déploiement.

GTM — snippet dans <head>

<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>
 
<!-- Et dans le <body>, juste après <body> -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

Implémentation Next.js

app/layout.tsx — GA4 avec Next.js

import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>{children}</body>
      {process.env.NODE_ENV === 'production' && (
        <GoogleAnalytics gaId="G-XXXXXXXXXX" />
      )}
    </html>
  )
}

@next/third-parties gère le chargement optimisé de GA4 avec afterInteractive strategy — ne bloque pas le rendu.

Pour les page views dans une SPA :

components/analytics-provider.tsx

'use client'
import { usePathname, useSearchParams } from 'next/navigation'
import { useEffect } from 'react'
 
declare global {
  interface Window { gtag: (...args: any[]) => void }
}
 
export function AnalyticsProvider() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
 
  useEffect(() => {
    const url = pathname + searchParams.toString()
    window.gtag?.('event', 'page_view', {
      page_path: url,
    })
  }, [pathname, searchParams])
 
  return null
}

Le modèle d'events GA4

GA4 n'a pas de hits pageview, transaction, ou event séparés. Tout est un event. Chaque event a un nom et peut avoir des paramètres.

Events automatiques (sans code) :

page_view, session_start, first_visit
scroll (90% de la page), click (liens externes)
video_start, video_complete (videos YouTube embeddes)

Events recommandés (nommés par Google, paramètres standardisés) :

search (quand quelqu'un utilise la recherche interne)
login, sign_up
purchase, add_to_cart
share, download
generate_lead

Events custom (ce que vous définissez) :

lib/analytics.ts — helper pour les events

export function trackEvent(name: string, params?: Record<string, string | number | boolean>) {
  if (typeof window === 'undefined' || !window.gtag) return
  window.gtag('event', name, params)
}
 
// Usage dans les composants
trackEvent('article_read', { article_slug: 'docker-introduction', read_percent: 75 })
trackEvent('code_copy', { language: 'typescript', file: 'docker-compose.yml' })
trackEvent('newsletter_signup', { source: 'article_footer' })

Events pertinents pour un blog technique

Events à tracker sur iducation.fr

// Temps de lecture
useEffect(() => {
  const startTime = Date.now()
  return () => {
    const readTimeMs = Date.now() - startTime
    if (readTimeMs > 30000) { // Plus de 30 secondes
      trackEvent('article_engaged', {
        article_slug: slug,
        read_time_seconds: Math.round(readTimeMs / 1000),
      })
    }
  }
}, [slug])
 
// Scroll depth
useEffect(() => {
  const handleScroll = () => {
    const scrollPercent = Math.round(
      (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100
    )
    if (scrollPercent >= 50 && !tracked50) {
      trackEvent('scroll_depth', { percent: 50, page: slug })
      setTracked50(true)
    }
  }
  window.addEventListener('scroll', handleScroll, { passive: true })
  return () => window.removeEventListener('scroll', handleScroll)
}, [])
 
// Copie de code
document.querySelectorAll('pre button[data-copy]').forEach(btn => {
  btn.addEventListener('click', () => {
    trackEvent('code_copy', { language: btn.dataset.lang })
  })
})

Configurer les conversions

GA4 appelle "conversion" tout event que vous marquez comme objectif. Pas de configuration séparée — vous prenez un event existant et l'activez comme conversion.

GA4 → Configurer → Events → Trouver l'event → Toggle "Marquer comme conversion"

Pour un blog technique, conversions pertinentes :

newsletter_signup — inscription newsletter
article_engaged (via trackEvent) — lecture effective d'un article
formation_start — début d'une formation
generate_lead — contact ou demande

Rapports GA4 utiles pour un blog

Rapport d'acquisition

Rapports → Acquisition → Acquisition de trafic

Sources : Organic Search, Direct, Social, Referral, Email.

Croiser avec : Sessions, Utilisateurs actifs, Taux d'engagement (remplace le Bounce Rate), Durée moyenne.

Taux d'engagement : pourcentage de sessions avec au moins 10 secondes de temps, une conversion, ou 2 pages vues. Un taux > 50% est bon pour un blog.

Rapport Pages et écrans

Rapports → Engagement → Pages et écrans

Voir : pages les plus visitées, temps sur la page, défilements. Identifier les articles qui retiennent le mieux l'attention.

Rapport Exploration

Explorer → Exploration libre

Pour des analyses custom : segmenter les utilisateurs qui ont lu 3 articles vs 1, comparer mobile vs desktop sur les conversions, analyser le chemin vers la formation.

Intégration Search Console

Connecter GA4 et Search Console permet de voir les requêtes Google qui génèrent des visites, directement dans GA4.

GA4 → Paramètres propriété → Search Console → Associer

Rapport résultant :

GA4 → Rapports → Acquisition → Acquisition depuis Google organique

Colonnes disponibles : Requête Google, Clics, Impressions, CTR, Position, Sessions, Conversions.

Cas d'usage : voir quelles requêtes génèrent des sessions engagées vs des rebonds — la requête "docker tutorial" amène-t-elle des gens qui lisent jusqu'au bout, ou qui partent en 10 secondes ?

Pour des analyses avancées depuis Google Search Console directement, les deux outils sont complémentaires : Search Console pour les données de crawl et d'indexation, GA4 pour le comportement post-clic.

Implémentation sans cookies (respect RGPD)

GA4 peut fonctionner en mode "consent mode" v2 pour respecter les préférences cookies :

Consent mode v2 — avant le chargement de GA4

// Définir le consentement par défaut — refusé par défaut (RGPD)
window.gtag('consent', 'default', {
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
  analytics_storage: 'denied',
  functionality_storage: 'granted',
  personalization_storage: 'denied',
  security_storage: 'granted',
  wait_for_update: 500,
})
 
// Après acceptation dans la bannière cookie
window.gtag('consent', 'update', {
  analytics_storage: 'granted',
})

GA4 en Consent Mode v2 modélise les conversions manquantes — les données restent exploitables même avec une partie des utilisateurs refusant les cookies.

GA4 est plus puissant qu'Universal Analytics, mais il demande plus de configuration initiale. Le modèle d'events unifié, combiné avec Search Console, donne une vision complète du parcours : depuis la requête Google jusqu'à la conversion. Investir 2-3 heures dans la configuration initiale se rentabilise rapidement — vous savez enfin quels articles convertissent, pas seulement lesquels reçoivent du trafic. Pour aller plus loin sur le SEO Next.js complet, la configuration Analytics s'intègre naturellement dans le layout du framework.