Comment ajouter Google Tag Manager à Shopify

Qu'est-ce que le gestionnaire de balises Google ?

Google Tag Manager (GTM) est un système de gestion de tags gratuit Cela vous permet d'ajouter et de gérer plusieurs scripts de suivi sur votre boutique Shopify sans avoir à modifier le code de votre thème à chaque fois. Avec GTM, vous pouvez gérer :

• Suivi Google Analytics 4
• Pixel Facebook
• Événements de conversion (achat, soumission de formulaire, ajout au panier)
• Balises personnalisées pour les outils de marketing et d'analyse

Ce guide couvre deux méthodes Pour l'installation : via l'application Google et YouTube de Shopify (plus simple) ou par injection manuelle de code (plus de contrôle), ainsi que la procédure pour tester GTM avec Pages créées par GemPages.

Avant de commencer, assurez-vous d'avoir :

1. ID du compte GTM et du conteneur

Inscrivez-vous sur Google Tag Manager.

Créez un conteneur pour votre boutique Shopify et copiez l'ID du conteneur (GTM-XXXXXXX).

2. Accès administrateur Shopify

Vous devez disposer de l'autorisation pour modifier les thèmes ou insérer des scripts.

3. Plan de suivi

Identifiez les événements que vous souhaitez suivre : pages vues, ajouts au panier, passage en caisse, achats, soumissions de formulaires.

Comment installer Google Tag Manager sur Shopify

Voici la procédure étape par étape pour ajouter GTM à Shopify :

Méthode 1 : Installer Google Tag Manager à l’aide de l’application Google et YouTube (plus facile)

Cette méthode est recommandée si vous souhaitez un installation rapide avec une configuration minimale.

Étape 1 : Allez dans Boutique d'applications Shopify → Google et YouTube. Cliquez sur Installer.

Étape 2 : Une fois installé, cliquez Connecter le compte Google pour connecter votre compte Google Ads et activer le suivi des conversions.

Étape 3 : Saisissez votre ID du conteneur GTM lorsque vous y êtes invité

Étape 4 : Choisis lequel balises pour activer, comme Analytics 4, les publicités ou les événements de conversion.

Étape 5 : Terminez la configuration et vérifier le déclenchement de l'étiquette en utilisant GTM Preview ou Google Tag Assistant.

Limites de cette méthode

• Moins de contrôle sur les événements avancés ou personnalisés
• Pas idéal si vous prévoyez d'utiliser GTM de manière intensive avec des déclencheurs personnalisés.

Méthode 2 : Installer Google Tag Manager manuellement (recommandée pour un suivi avancé)

Cette méthode fournit le plein contrôle et est recommandé si vous :

• Utilisez des événements personnalisés
• Suivre les interactions sur les pages GemPages
• Vous souhaitez une flexibilité totale au sein de GTM ?

Étape 1 : Ouvrez le code de votre thème

1. Dans l'administrateur Shopify, accédez à Boutique en ligne → Thèmes
2. Cliquez à nouveau sur ⋯ → Modifier le code
3. Ouvrez le fichier mise en page/thème.liquid

Étape 2 : Ajoutez le script GTM au

Collez le code suivant immédiatement après l'ouverture Étiquette:

<!-- 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','GTM-XXXXXXX');
</script>
<!-- End Google Tag Manager -->
  

Étape 3 : Ajoutez le GTM noscript après

Dans le même fichier, collez le code suivant immédiatement après l'ouverture Étiquette:

<!-- Google Tag Manager (noscript) -->

<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

<!-- End Google Tag Manager (noscript) -->
  

Étape 4 : Enregistrez vos modifications

Cliquez à nouveau sur Enregistrer pour publier les modifications sur votre boutique en ligne.

Utilisation de Google Tag Manager avec les pages GemPages

Si GTM est correctement installé, il fonctionne automatiquement sur toutes les pages créées avec GemPages, comprenant:

• Les pages de destination
  
• Pages de produits
• Pages de collection

Vous pouvez utiliser GTM pour :

• Suivi des clics sur les boutons à l'aide de sélecteurs CSS
• Suivi des soumissions de formulaires depuis les éléments de formulaire GemPages
• Déclencher des événements en fonction des interactions de l'utilisateur sans modifier le code de la page

Aucune configuration supplémentaire n'est requise dans GemPages.

Limitations de la page de paiement Shopify

Shopify restreint le suivi lors du paiement en fonction de votre forfait :

• Shopify Basic, Shopify, Avancé : GTM le fait chargement incomplet sur les pages de paiement. Le suivi des achats est limité.
• Shopify Plus : GTM peut être ajouté à la page de paiement via caisse.liquide ou l'extensibilité du processus de paiement, permettant un suivi complet des achats.

Cette limitation est gérée par Shopify, et non par GemPages ou GTM.

Comment tester votre installation GTM

Vous pouvez vérifier que GTM fonctionne en utilisant l'une ou l'autre méthode :

Option 1 : Mode aperçu GTM

1. Ouvrez le gestionnaire de balises Google
2. Cliquez à nouveau sur Aperçu
3. Saisissez l'URL de votre boutique
4. Vérifiez que Tag Assistant se connecte correctement.

Option 2 : Vérification du code source de la page

• Ouvrez votre vitrine
• Clic droit → Voir la source de la page
• Rechercher GTM-

Problèmes courants et dépannage

• N’installez pas GTM deux fois : Évitez d'utiliser simultanément l'application Google et YouTube et l'injection manuelle de code.
• Évitez de mélanger les scripts GA4 directs avec GTM : Utilisez GTM comme source unique de suivi pour éviter les événements en double.
• Toujours tester avant de publier les balises : Utilisez le mode Aperçu pour vérifier que les événements se déclenchent correctement.