This page was translated automatically from the English original.
View the original
Google Tag Manager
Intégration de Google Tag Manager pour une gestion centralisée des balises et l'analyse marketing.
Table of Contents
Google Tag Manager
Intégrez Google Tag Manager (GTM) pour une gestion centralisée des balises sans modification de code.
Aperçu
GTM vous permet de gérer :
- Le suivi analytique
- Les pixels marketing
- Le suivi des conversions
- Les tests A/B
- Le JavaScript personnalisé
Démarrage rapide
1. Créer un conteneur GTM
- Accédez à Google Tag Manager
- Créez un compte et un conteneur
- Copiez votre identifiant de conteneur (GTM-XXXXXXX)
2. Configurer Jekyll
# _config.yml
google_tag_manager:
container_id: 'GTM-XXXXXXX'
3. Ajouter les inclusions GTM
Le thème inclut automatiquement GTM lorsqu’il est configuré.
Implémentation
Script d’en-tête
<!-- _includes/analytics/google-tag-manager-head.html -->
{% if jekyll.environment == 'production' and site.google_tag_manager.container_id %}
<!-- Google Tag Manager -->
<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','{{ site.google_tag_manager.container_id }}');</script>
<!-- End Google Tag Manager -->
{% endif %}
Noscript du corps
<!-- _includes/analytics/google-tag-manager-body.html -->
{% if jekyll.environment == 'production' and site.google_tag_manager.container_id %}
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.google_tag_manager.container_id }}"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{% endif %}
Intégration à la mise en page
<head>
{% include analytics/google-tag-manager-head.html %}
</head>
<body>
{% include analytics/google-tag-manager-body.html %}
<!-- content -->
</body>
Data Layer
Utilisation de base
// Push events to dataLayer
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'buttonClick',
'buttonName': 'signup'
});
Variables de page
dataLayer.push({
'pageType': 'article',
'pageCategory': 'docs',
'pageTitle': 'Google Tag Manager'
});
Données utilisateur
dataLayer.push({
'userLoggedIn': true,
'userType': 'subscriber'
});
Balises courantes
Google Analytics 4
Dans GTM :
- Ajoutez une nouvelle balise → Configuration GA4
- Saisissez l’identifiant de mesure
- Déclencheur : Toutes les pages
Facebook Pixel
- Ajoutez une nouvelle balise → HTML personnalisé
- Collez le code du Facebook Pixel
- Déclencheur : Toutes les pages
LinkedIn Insight
- Ajoutez une nouvelle balise → HTML personnalisé
- Collez le code LinkedIn
- Déclencheur : Toutes les pages
Déclencheurs
Types de déclencheurs courants
| Type | Cas d’usage |
|---|---|
| Page vue | Suivre toutes les visites de pages |
| Clic | Clics sur boutons/liens |
| Envoi de formulaire | Formulaires de contact |
| Profondeur de défilement | Engagement avec le contenu |
| Minuteur | Temps passé sur la page |
| Événement personnalisé | Événements DataLayer |
Déclencheur d’événement personnalisé
// Trigger this from code
dataLayer.push({
'event': 'formSubmit',
'formId': 'contactForm'
});
Dans GTM : créez un déclencheur pour l’événement nommé “formSubmit”
Variables
Variables intégrées
Activez dans GTM :
- URL de la page
- Nom d’hôte de la page
- Chemin de la page
- Référent
- Élément cliqué
- URL du clic
- Texte du clic
Variables de la couche de données
Accéder aux valeurs de dataLayer :
- Variables → Nouveau → Variable de couche de données
- Définir le nom de la variable (par exemple,
pageTitle)
Variables JavaScript
// Custom JavaScript variable
function() {
return document.title;
}
Consentement aux cookies
Mode de consentement
// Set default consent state
dataLayer.push({
'event': 'default_consent',
'analytics_storage': 'denied',
'ad_storage': 'denied'
});
Mise à jour lors du consentement
function updateConsent(analytics, ads) {
gtag('consent', 'update', {
'analytics_storage': analytics ? 'granted' : 'denied',
'ad_storage': ads ? 'granted' : 'denied'
});
}
Balises du mode de consentement
Dans GTM, configurez les balises pour respecter le consentement :
- Paramètres de la balise → Paramètres de consentement
- Exiger le consentement pour le déclenchement
Débogage
Mode aperçu
- Cliquez sur « Aperçu » dans GTM
- Saisissez l’URL de votre site
- Le panneau de débogage affiche le déclenchement des balises
Panneau de débogage
Affiche :
- Balises déclenchées
- Valeurs des variables
- Événements du dataLayer
- Erreurs
Journalisation dans la console
// Log all dataLayer pushes
(function() {
var push = dataLayer.push;
dataLayer.push = function() {
console.log('dataLayer push:', arguments[0]);
return push.apply(this, arguments);
};
})();
Bonnes pratiques
Organisation
- Utilisez des conventions de nommage cohérentes
- Créez des dossiers pour les balises associées
- Documentez les balises personnalisées
- Utilisez des espaces de travail pour les modifications
Performance
- Réduisez au minimum les balises HTML personnalisées
- Utilisez les balises intégrées lorsqu’elles sont disponibles
- Définissez des déclencheurs appropriés
- Évitez « Toutes les pages » pour les balises lourdes
Sécurité
- Examinez toutes les balises tierces
- Limitez l’accès au conteneur
- Activez l’authentification à deux facteurs
- Auditez régulièrement le conteneur
Dépannage
Les balises ne se déclenchent pas
- Vérifiez les conditions de déclenchement
- Vérifiez en mode aperçu
- Vérifiez les exigences de consentement
- Examinez les déclencheurs de blocage
Le conteneur ne se charge pas
- Vérifiez l’ID du conteneur
- Vérifiez l’environnement (production)
- Recherchez les erreurs JS
- Vérifiez l’emplacement de l’inclusion
Problèmes de dataLayer
- Vérifiez que dataLayer existe avant le push
- Vérifiez que les noms d’événements correspondent
- Vérifiez la portée de la variable
- Utilisez la journalisation dans la console
Ressources associées
Voir aussi
- [[Analytics]]
- [[Google Analytics]]
- [[PostHog Analytics]]