Introduction
Le retargeting, ou reciblage publicitaire, consiste à afficher des annonces personnalisées aux visiteurs qui ont interagi avec votre site sans convertir. En 2026, avec la dépréciation des cookies tiers et l'essor de la Privacy Sandbox, implémenter un retargeting robuste nécessite une approche hybride : tracking client-side via Google Tag Manager (GTM), événements enrichis en GA4 et audiences synchronisées vers Google Ads.
Ce tutoriel intermediate vous guide pas à pas pour créer un projet Next.js fonctionnel, intégrer GTM pour des événements e-commerce avancés (comme view_item ou purchase), configurer des audiences segmentées et optimiser pour le consent mode v2. Vous apprendrez à générer des listes d'audience basées sur des comportements réels, boostant vos conversions de 20-50% selon les benchmarks industry. À la fin, vous aurez un setup production-ready, scalable et conforme RGPD/CCPA. Préparez vos comptes Google : on passe au concret.
Prérequis
- Node.js 20+ installé
- Connaissances de base en Next.js 15 (App Router) et TypeScript
- Comptes Google : Analytics 4 (propriété stream web), Tag Manager (nouveau conteneur Web), Google Ads (compte lié)
- Un domaine de test ou localhost pour publier
- Outils : éditeur VS Code, terminal
Initialiser le projet Next.js
npx create-next-app@latest retargeting-demo --typescript --tailwind --eslint --app --src-dir --import-alias="@/*"
cd retargeting-demo
npm install
npm run devCette commande crée un projet Next.js 15 complet avec TypeScript, Tailwind et App Router. Elle initialise tout le boilerplate nécessaire pour un site e-commerce démo. Lancez npm run dev pour tester sur http://localhost:3000 ; évitez les templates vides pour ne pas réinventer la roue.
Créer et configurer votre conteneur GTM
- Allez sur tagmanager.google.com, créez un nouveau conteneur Web nommé 'Retargeting Demo'.
- Notez l'ID GTM (format GTM-XXXXXX) dans Paramètres > Conteneur.
- Publiez une version vide (soumettez > Publier).
- Dans GA4, créez un flux de données web si absent, et notez le Measurement ID (G-YYYYYY).
Ajouter le script GTM dans le layout
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Retargeting Demo',
description: 'Site démo pour retargeting GTM/GA4',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="fr">
<head>
<script
dangerouslySetInnerHTML={{
__html: `
(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-XXXXXX');
`,
}}
/>
</head>
<body className={inter.className}>{children}
<noscript
dangerouslySetInnerHTML={{
__html: `
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
`,
}}
/>
</body>
</html>
);
}Remplacez GTM-XXXXXX par votre ID réel. Ce code injecte le script GTM principal (async) et le fallback noscript dans le
. UtilisezdangerouslySetInnerHTML pour Next.js SSR ; c'est sécurisé car statique. Testez : dataLayer est initialisé, GTM Preview mode détecte le conteneur.Configurer le tag GA4 dans GTM
Dans l'interface GTM (mode Aperçu activé) :
- Ajoutez un tag > GA4 > Configuration : collez votre Measurement ID (G-YYYYYY).
- Trigger : Initialisation - Tous les pages.
- Ajoutez un 2e tag GA4 Événement : nom 'page_view', trigger Tous les pages.
Publiez. Vérifiez dans GA4 Rapports temps réel : les hits arrivent. Cela fonde le tracking de base pour audiences 'Toutes les sessions'.
Pousser un événement view_item_list
import { useEffect } from 'react';
export default function Home() {
useEffect(() => {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'view_item_list',
ecommerce: {
items: [
{
item_id: 'SKU_12345',
item_name: 'Chaussures Nike Air',
item_category: 'Chaussures',
item_category2: 'Sport',
price: 89.99,
quantity: 1,
},
{
item_id: 'SKU_67890',
item_name: 'Veste Adidas',
item_category: 'Vêtements',
price: 129.99,
quantity: 1,
},
],
},
});
}, []);
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24">
<h1 className="text-4xl font-bold">Demo Retargeting</h1>
<p>Liste produits chargée - événement GA4 envoyé !</p>
</main>
);
}Ce hook useEffect pushe un événement e-commerce GA4 standard via dataLayer dès le chargement. Les params 'ecommerce.items' enrichissent les données pour audiences segmentées (ex: visiteurs catalogue). Vérifiez en GTM Preview : tag GA4 fire sur 'view_item_list'. Évitez les pushes multiples avec [] deps.
Créer des triggers et tags avancés dans GTM
- Variable dataLayer : Ajoutez 'ecommerce' (objet).
- Trigger : Personnalisé > JS, condition
{{DL - ecommerce}}. - Tag GA4 Événement : nom '{{Event}}', params depuis DL (ecommerce).
- Testez sur /page : événement fire.
Implémenter l'événement purchase
'use client';
import { useState } from 'react';
export default function PurchasePage() {
const [purchased, setPurchased] = useState(false);
const handlePurchase = () => {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: 'T12345',
value: 219.98,
tax: 19.98,
shipping: 10.00,
currency: 'EUR',
coupon: 'OFFRE10',
items: [
{
item_id: 'SKU_12345',
item_name: 'Chaussures Nike Air',
price: 89.99,
quantity: 1,
},
{
item_id: 'SKU_67890',
item_name: 'Veste Adidas',
price: 129.99,
quantity: 1,
},
],
},
});
setPurchased(true);
};
return (
<main className="p-24">
<h1>Achat simulé</h1>
<button onClick={handlePurchase} className="bg-blue-500 text-white p-4 rounded">
Confirmer achat
</button>
{purchased && <p>Événement purchase envoyé à GA4 !</p>
}
</main>
);
}Page dédiée simule un checkout : click pushe 'purchase' avec transaction complète. Utilisez pour audience 'Acheteurs récents'. State gère UI feedback. Naviguez vers /purchase, testez en GTM/GA4 : données ecomm valident le funnel retargeting.
Activer Google Consent Mode v2
En 2026, le consent mode est obligatoire pour >70% des signaux GA4. Dans GTM : Tag Consent Overview > ad_storage, analytics_storage. Script avant GTM.
Ajouter Consent Mode dans le head
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Retargeting Demo',
description: 'Site démo pour retargeting GTM/GA4',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="fr">
<head>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
'ad_storage': 'denied',
'analytics_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied'
});
`,
}}
id="gtag-init"
/>
<script
dangerouslySetInnerHTML={{
__html: `
(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-XXXXXX');
`,
}}
/>
</head>
<body className={inter.className}>{children}
<noscript
dangerouslySetInnerHTML={{
__html: `
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
`,
}}
/>
</body>
</html>
);
}Ajout du consent default 'denied' avant GTM, conforme v2. Intégrez un CMP (ex: CookieYes) pour updater via gtag('consent', 'update', {...}). Cela préserve les signaux modeled en GA4 pour retargeting cookieless.
Créer les audiences et lier à Google Ads
- GA4 > Admin > Audiences : Nouvelle > 'Utilisateurs qui ont déclenché view_item_list' (30 jours), 'Acheteurs' (purchase, 7 jours).
- Google Ads > Outils > Audiences : Lien GA4 autorisé.
- Créez campagne Display/Performance Max, ciblez audiences (ex: retarget visiteurs abandon cart).
Bonnes pratiques
- Toujours prioriser server-side tagging pour >50% trafic mobile (via Cloudflare/Next.js API).
- Limitez dataLayer pushes à <10/page pour perf (useEffect + debounce).
- Testez avec GTM Preview + GA4 DebugView avant prod.
- Segmentez audiences fines (ex: high-value >200€) pour ROI x3.
- Intégrez CMP oneTrust pour consent granulaire, boostant fill rate Ads 15%.
Erreurs courantes à éviter
- Oublier
window.dataLayer || []: crash JS si undefined. - Pousser events sans ecommerce structuré : audiences vides en GA4.
- Ignorer consent mode : signaux 'not set' >80%, retargeting faible.
- Ne pas lier GA4-Ads : audiences invisibles en Ads manager.
Pour aller plus loin
Approfondissez avec nos formations Learni sur GA4 avancé. Ressources : Doc GTM Events, GA4 Audiences, Privacy Sandbox. Migrez vers server-side GTM pour 2026 full cookieless.