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 -->
{% raw %}{% 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 %}{% endraw %}

Noscript du corps¶

<!-- _includes/analytics/google-tag-manager-body.html -->
{% raw %}{% 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 %}{% endraw %}

Intégration à la mise en page¶

<head>
  {% raw %}{% include analytics/google-tag-manager-head.html %}{% endraw %}
</head>
<body>
  {% raw %}{% include analytics/google-tag-manager-body.html %}{% endraw %}
  <!-- 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': '{{ page.title }}'
});

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]]