| name | dp-tracking-setup |
| description | Configure le tracking complet pour mesurer les performances : Meta Pixel avec events, Google Analytics 4 avec conversions, Google Tag Manager, UTM generator par campagne/source. Produit le code prรชt ร coller et un guide d'installation pas ร pas. Sans tracking, ton budget ads est dรฉpensรฉ ร l'aveugle. Triggers : tracking, pixel, analytics, conversion, UTM, GA4, Meta Pixel, Google Tag, mesurer, suivi. |
| user-invokable | true |
| argument-hint | [plateforme: meta|google|all] [url-landing-page] |
| allowed-tools | Read Write Bash Glob |
| metadata | {"author":"DP Crรฉateur","version":"2.0.0","category":"marketing","updated":"2026-04-19T00:00:00.000Z"} |
Tracking Setup โ Configurer le Suivi des Performances
Sans tracking, tu dรฉpenses en pub sans savoir ce qui fonctionne. Ce skill gรฉnรจre tout le code de suivi nรฉcessaire et un guide d'installation clair โ mรชme si tu n'es pas technique.
Quick Reference
| Commande | Description |
|---|
/dp-tracking-setup | Configuration complรจte guidรฉe (Meta + GA4 + UTM) |
/dp-tracking-setup meta | Meta Pixel uniquement |
/dp-tracking-setup google | Google Analytics 4 uniquement |
/dp-tracking-setup utm [campagne] | Gรฉnรฉrer les UTM pour une campagne |
/dp-tracking-setup check [url] | Vรฉrifier si le tracking est bien installรฉ |
Output Format
LIVRABLES :
โโโ tracking/setup-[projet].md
โ โโโ Code Meta Pixel (base + events)
โ โโโ Code Google Analytics 4 (base + conversions)
โ โโโ Code Google Tag Manager (optionnel)
โ โโโ Tableau UTM complet (toutes sources/campagnes)
โ โโโ Guide d'installation pas ร pas (avec screenshots textuels)
โโโ Prรชt ร coller dans la landing page et la thank you page
Process
1. Context intake โ Plateformes ads, URL landing, produit, prix
2. Read context โ business-profile.md, landing page existante
3. Gรฉnรฉrer Meta Pixel โ Code base + events (ViewContent, Purchase)
4. Gรฉnรฉrer GA4 โ Code base + conversion goals
5. Gรฉnรฉrer UTM โ Tableau complet par source/campagne
6. Guide installation โ Oรน coller quoi, pas ร pas
7. Deliver โ Fichier tracking + rรฉsumรฉ
Step 1 โ Context Intake
1a. Charger le contexte (silencieux)
SI business-profile.md existe :
โ Lire : plateformes ads, URL site, produits, prix
SI landing-pages/*.html existe :
โ Identifier la landing page et la thank you page
SINON :
โ Poser les questions
1b. Questions
Bloc 1 โ Les bases
| # | Question | Pourquoi |
|---|
| Q1 | Quelles plateformes de pub tu utilises ou prรฉvois ? Meta Ads / Google Ads / les deux / aucune pour l'instant | Dรฉtermine quels pixels installer |
| Q2 | Quelle est l'URL de ta landing page ? | Le code sera adaptรฉ ร cette page |
| Q3 | Quel est ton produit et son prix ? | Pour configurer l'event Purchase avec la valeur |
Bloc 2 โ Les outils
| # | Question | Pourquoi |
|---|
| Q4 | Tu as dรฉjร un compte Meta Business Manager ? Si oui, tu as un Pixel ID ? (format : 15 chiffres) | Prรฉ-remplir le code |
| Q5 | Tu as dรฉjร un compte Google Analytics ? Si oui, tu as un Measurement ID ? (format : G-XXXXXXXXXX) | Prรฉ-remplir le code |
| Q6 | Tu utilises Google Tag Manager (GTM) ? Si oui, tu as un Container ID ? (format : GTM-XXXXXXX) | Alternative ร l'installation directe |
Si l'utilisateur n'a pas de Pixel ID ou GA4 ID, lui expliquer comment les crรฉer (dans le guide d'installation).
Step 2 โ Meta Pixel
2a. Code de base (ร mettre dans le <head> de CHAQUE page)
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '[PIXEL_ID]');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.net/tr?id=[PIXEL_ID]&ev=PageView&noscript=1"
/></noscript>
2b. Events ร configurer
| Page | Event | Code | Quand |
|---|
| Landing page | ViewContent | fbq('track', 'ViewContent', {content_name: '[product_name]', content_type: 'product', value: [prix], currency: 'EUR'}); | Au chargement de la page |
| Clic CTA | InitiateCheckout | fbq('track', 'InitiateCheckout', {value: [prix], currency: 'EUR'}); | Au clic sur le bouton CTA |
| Thank you page | Purchase | fbq('track', 'Purchase', {value: [prix], currency: 'EUR', content_name: '[product_name]'}); | Au chargement de la thank you page |
| Lead magnet | Lead | fbq('track', 'Lead', {content_name: '[lead_magnet_name]'}); | ร la soumission du formulaire |
2c. Implรฉmentation sur la landing page
<script>
fbq('track', 'ViewContent', {
content_name: '[product_name]',
content_type: 'product',
value: [prix],
currency: 'EUR'
});
</script>
<a href="[checkout_url]" class="cta-button"
onclick="fbq('track', 'InitiateCheckout', {value: [prix], currency: 'EUR'});">
[CTA text]
</a>
<script>
fbq('track', 'Purchase', {
value: [prix],
currency: 'EUR',
content_name: '[product_name]'
});
</script>
2d. Comment crรฉer un Meta Pixel (si pas encore fait)
GUIDE โ CRรER UN META PIXEL
โโโโโโโโโโโโโโโโโโโโโโโโโโโโ
1. Va sur https://business.facebook.com
2. Menu โ Events Manager โ Connect Data Sources
3. Choisir "Web" โ "Meta Pixel"
4. Donner un nom (ex: "[Business Name] Pixel")
5. Copier le Pixel ID (15 chiffres)
6. Coller dans le code ci-dessus ร la place de [PIXEL_ID]
VรRIFIER :
โ Installer l'extension "Meta Pixel Helper" sur Chrome
โ Visiter ta landing page
โ L'extension doit montrer "PageView" en vert
Step 3 โ Google Analytics 4
3a. Code de base (dans le <head> de CHAQUE page)
<script async src="https://www.googletagmanager.com/gtag/js?id=[GA4_ID]"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[GA4_ID]');
</script>
3b. Events de conversion
gtag('event', 'view_item', {
currency: 'EUR',
value: [prix],
items: [{
item_name: '[product_name]',
price: [prix]
}]
});
gtag('event', 'begin_checkout', {
currency: 'EUR',
value: [prix],
items: [{
item_name: '[product_name]',
price: [prix]
}]
});
gtag('event', 'purchase', {
transaction_id: 'T_' + Date.now(),
currency: 'EUR',
value: [prix],
items: [{
item_name: '[product_name]',
price: [prix],
quantity: 1
}]
});
3c. Configurer les conversions dans GA4
GUIDE โ MARQUER "PURCHASE" COMME CONVERSION
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
1. Va sur https://analytics.google.com
2. Admin โ Events
3. Trouver l'event "purchase"
4. Activer "Mark as conversion" (toggle ON)
5. โ Maintenant chaque achat est trackable dans les rapports
AUSSI MARQUER COMME CONVERSION :
- begin_checkout (pour mesurer le taux d'abandon)
- generate_lead (si lead magnet)
3d. Comment crรฉer un compte GA4 (si pas encore fait)
GUIDE โ CRรER UN COMPTE GA4
โโโโโโโโโโโโโโโโโโโโโโโโโโโโ
1. Va sur https://analytics.google.com
2. "Start measuring" โ Crรฉer un compte
3. Nom du compte : "[Business Name]"
4. Crรฉer une propriรฉtรฉ : "[Business Name] โ Website"
5. Choisir "Web" comme plateforme
6. Entrer l'URL de ton site
7. Copier le Measurement ID (format G-XXXXXXXXXX)
8. Coller dans le code ci-dessus ร la place de [GA4_ID]
Step 4 โ Google Tag Manager (optionnel)
Si l'utilisateur utilise GTM, fournir les instructions pour installer le tracking VIA GTM plutรดt qu'en direct.
AVANTAGE GTM : Tu installes UN SEUL code (GTM) sur ton site,
et tu gรจres tous les pixels/tags depuis l'interface GTM.
Plus besoin de toucher au HTML pour chaque nouveau tag.
QUAND UTILISER GTM :
- Tu as 3+ pixels/tags ร gรฉrer
- Tu changes souvent de configuration
- Tu veux tester des events sans modifier le code
QUAND NE PAS UTILISER GTM :
- Tu as juste Meta Pixel + GA4 (le code direct est plus simple)
- Tu n'es pas ร l'aise avec les interfaces techniques
Code GTM (dans le <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_ID]');</script>
Step 5 โ Gรฉnรฉrateur UTM
Tableau UTM complet
Gรฉnรฉrer un tableau avec tous les UTM pour chaque source de trafic :
TABLEAU UTM โ [Projet]
โโโโโโโโโโโโโโโโโโโโโโโ
FORMAT : [URL]?utm_source=[source]&utm_medium=[medium]&utm_campaign=[campaign]&utm_content=[content]
CAMPAGNES META ADS :
โโโโโโโโโโโโโโโโโโโโฌโโโโโโโโโฌโโโโโโโโโฌโโโโโโโโโโโโโโโโฌโโโโโโโโโโโ
โ Angle โ Source โ Medium โ Campaign โ Content โ
โโโโโโโโโโโโโโโโโโโโผโโโโโโโโโผโโโโโโโโโผโโโโโโโโโโโโโโโโผโโโโโโโโโโโค
โ Pain Point v1 โ meta โ cpc โ launch-[mois] โ pain-v1 โ
โ Pain Point v2 โ meta โ cpc โ launch-[mois] โ pain-v2 โ
โ FOMO v1 โ meta โ cpc โ launch-[mois] โ fomo-v1 โ
โ Authority v1 โ meta โ cpc โ launch-[mois] โ auth-v1 โ
โ Retargeting โ meta โ cpc โ retarget โ warm โ
โโโโโโโโโโโโโโโโโโโโดโโโโโโโโโดโโโโโโโโโดโโโโโโโโโโโโโโโโดโโโโโโโโโโโ
CAMPAGNES GOOGLE ADS :
โโโโโโโโโโโโโโโโโโโโฌโโโโโโโโโฌโโโโโโโโโฌโโโโโโโโโโโโโโโโฌโโโโโโโโโโโ
โ Groupe โ Source โ Medium โ Campaign โ Content โ
โโโโโโโโโโโโโโโโโโโโผโโโโโโโโโผโโโโโโโโโผโโโโโโโโโโโโโโโโผโโโโโโโโโโโค
โ High Intent โ google โ cpc โ search-[mois] โ high โ
โ Medium Intent โ google โ cpc โ search-[mois] โ medium โ
โ YouTube โ google โ video โ yt-[mois] โ instream โ
โ Display โ google โ displayโ display-[mois]โ banner โ
โโโโโโโโโโโโโโโโโโโโดโโโโโโโโโดโโโโโโโโโดโโโโโโโโโโโโโโโโดโโโโโโโโโโโ
ORGANIQUE :
โโโโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโฌโโโโโโโโโโฌโโโโโโโโโโโโโโโโฌโโโโโโโโโโโ
โ Source โ Source โ Medium โ Campaign โ Content โ
โโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโผโโโโโโโโโโผโโโโโโโโโโโโโโโโผโโโโโโโโโโโค
โ Blog โ blog โ organic โ seo โ [slug] โ
โ Instagram bio โ instagramโ social โ bio-link โ profile โ
โ Instagram post โ instagramโ social โ post-[date] โ caption โ
โ LinkedIn post โ linkedin โ social โ post-[date] โ caption โ
โ Email lancement โ email โ email โ launch โ email-[N]โ
โ Email nurture โ email โ email โ nurture โ email-[N]โ
โ Affiliรฉ โ affiliateโaffiliateโ [partenaire] โ [place] โ
โโโโโโโโโโโโโโโโโโโโดโโโโโโโโโโโดโโโโโโโโโโดโโโโโโโโโโโโโโโโดโโโโโโโโโโโ
URLs gรฉnรฉrรฉes
Pour chaque ligne du tableau, gรฉnรฉrer l'URL complรจte :
[landing_page_url]?utm_source=meta&utm_medium=cpc&utm_campaign=launch-avr26&utm_content=pain-v1
[landing_page_url]?utm_source=meta&utm_medium=cpc&utm_campaign=launch-avr26&utm_content=fomo-v1
[landing_page_url]?utm_source=google&utm_medium=cpc&utm_campaign=search-avr26&utm_content=high
[landing_page_url]?utm_source=email&utm_medium=email&utm_campaign=launch&utm_content=email-3
...
Rรจgles UTM
| Paramรจtre | Rรจgle | Exemple |
|---|
utm_source | Plateforme d'origine (lowercase) | meta, google, email, instagram |
utm_medium | Type de trafic | cpc (paid), social (organique), email, affiliate |
utm_campaign | Nom de la campagne | launch-avr26, retarget, nurture |
utm_content | Variante spรฉcifique | pain-v1, fomo-v2, email-3 |
| Jamais | Espaces (utiliser des tirets) | pain-point pas pain point |
| Jamais | Majuscules (tout en lowercase) | meta pas Meta |
| Jamais | Caractรจres spรฉciaux | Tirets et underscores uniquement |
Step 6 โ Guide d'Installation
Rรฉsumรฉ : oรน coller quoi
Oร INSTALLER LE CODE
โโโโโโโโโโโโโโโโโโโโโ
LANDING PAGE (ex: landing-pages/mon-produit.html)
Dans le <head> :
โ
Meta Pixel (code de base)
โ
GA4 (code de base)
โ
Event ViewContent (Meta)
โ
Event view_item (GA4)
Sur le bouton CTA (attribut onclick) :
โ
Event InitiateCheckout (Meta)
โ
Event begin_checkout (GA4)
THANK YOU PAGE (ex: landing-pages/ty-xxxx.html)
Dans le <head> :
โ
Meta Pixel (code de base)
โ
GA4 (code de base)
โ
Event Purchase (Meta)
โ
Event purchase (GA4)
BLOG / WORDPRESS :
โ Si WordPress : installer les plugins "PixelYourSite" (Meta) + "Site Kit" (GA4)
โ Si HTML statique : mรชme code que ci-dessus dans chaque page
LEAD MAGNET PAGE :
โ Event Lead (Meta) + generate_lead (GA4) ร la soumission du formulaire
Checklist de vรฉrification
VรRIFICATION POST-INSTALLATION
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
[ ] Ouvrir la landing page dans Chrome
[ ] Ouvrir les DevTools (F12) โ Console โ vรฉrifier : pas d'erreurs JS
[ ] Extension "Meta Pixel Helper" โ doit montrer "PageView" en vert
[ ] Extension "Google Analytics Debugger" โ doit montrer le hit
[ ] Cliquer le bouton CTA โ vรฉrifier l'event InitiateCheckout/begin_checkout
[ ] Ouvrir la thank you page โ vรฉrifier l'event Purchase en vert
[ ] Dans Meta Events Manager โ vรฉrifier que les events remontent (dรฉlai : 20 min)
[ ] Dans GA4 โ Realtime โ vรฉrifier les events (dรฉlai : quelques secondes)
[ ] Tester avec un UTM โ vรฉrifier dans GA4 โ Acquisition โ Traffic Acquisition
Quality Gates
| ID | Gate | Sรฉvรฉritรฉ |
|---|
| QG-01 | Le Pixel ID et le GA4 ID sont des formats valides (15 chiffres / G-XXXXXXXXXX) | Critical |
| QG-02 | L'event Purchase est UNIQUEMENT sur la thank you page (pas la landing page) | Critical |
| QG-03 | La valeur (value) dans les events correspond au prix rรฉel du produit | Critical |
| QG-04 | La currency est correcte (EUR pour France, USD pour US) | High |
| QG-05 | Les UTM sont tous en lowercase, sans espaces, sans caractรจres spรฉciaux | High |
| QG-06 | Chaque variante d'ad a un utm_content UNIQUE (pour diffรฉrencier les performances) | High |
| QG-07 | Le code de tracking ne casse pas le design de la page (testรฉ visuellement) | High |
| QG-08 | Le guide d'installation est comprรฉhensible par un non-dรฉveloppeur | Medium |
| QG-09 | Les extensions de vรฉrification sont mentionnรฉes (Pixel Helper, GA Debugger) | Medium |
| QG-10 | Pas de double comptage (un seul code Pixel par page, un seul GA4 par page) | Critical |
Error Handling
| Scรฉnario | Action |
|---|
| L'utilisateur n'a pas de Pixel ID | Guider la crรฉation pas ร pas (Meta Business Manager) |
| L'utilisateur n'a pas de GA4 ID | Guider la crรฉation pas ร pas (analytics.google.com) |
| L'utilisateur n'a pas de landing page encore | Recommander /dp-landing-page d'abord, puis revenir |
| L'utilisateur utilise WordPress | Recommander les plugins au lieu du code manuel |
| Le Pixel ne remonte pas d'events | Checklist de debug : ad blocker ? code bien dans le head ? console errors ? |
| Conflit avec d'autres scripts | Vรฉrifier la console JS, proposer l'installation via GTM |
| L'utilisateur ne fait pas de pub (organique uniquement) | GA4 seul suffit. Pas besoin de Meta Pixel. |
| business-profile.md absent | Demander les infos minimales (URL, produit, prix) |
Cross-Skill Integration
| Avant | Skill | Quand |
|---|
| Landing page crรฉรฉe | /dp-landing-page | Le tracking s'installe SUR la landing page |
| Ads crรฉรฉes | /dp-ad-angles-meta /dp-ad-angles-google | Les UTM sont gรฉnรฉrรฉs POUR les ads |
| Profil business | /dp-business-profile | Pour l'URL et les plateformes |
| Aprรจs | Skill | Quand |
|---|
| Lancer les ads | /dp-ad-angles-meta /dp-ad-angles-google | Utiliser les UTM gรฉnรฉrรฉs |
| Blog articles | /dp-blog-article | Ajouter GA4 sur les pages blog |
| Email sequences | /dp-email-sequence | Ajouter les UTM aux liens email |
| Mediaplan | /dp-mediaplan | Ajouter les UTM aux liens sociaux |
