Tracker des clics sur les boutons Shopify

Points clés

Le déclencheur de clics (Click trigger) de Google Tag Manager est le moyen le plus simple de tracker les clics sur des boutons spécifiques sans modifier le code.

La mesure améliorée (Enhanced Measurement) de GA4 tracke automatiquement les clics sur les liens sortants sans aucune configuration.

Pour tracker des boutons spécifiques, ajoutez-leur des data attributes et utilisez du JavaScript pour les écouter.

Le tracking des clics vous indique quels CTAs, liens et boutons sont réellement utilisés, ce qui est indispensable pour l’optimisation des conversions (CRO).

Le tracking des clics fait le pont entre les pages vues et les achats. Vous pouvez voir que 1 000 personnes ont visité votre page produit — mais sans le tracking des clics, vous ne savez pas si 900 d’entre elles ont cliqué sur “Ajouter au panier” ou si elles n’étaient que 90. C’est une différence qui change complètement la donne pour votre stratégie d’optimisation.

Comment tracker les clics sur les boutons d’un site web

Trois approches, de la plus simple à la plus flexible :

GA4 Enhanced Measurement — tracking automatique des liens sortants, aucune configuration requise
Click triggers Google Tag Manager — pour tracker n’importe quel élément spécifique sans changer le code
JavaScript sur mesure avec data attributes — l’approche la plus flexible, fonctionne sans GTM

Méthode 1 — GA4 Enhanced Measurement (liens sortants uniquement)

GA4 tracke automatiquement les clics sur les liens sortants (ceux qui envoient les visiteurs vers un autre domaine) lorsque l’Enhanced Measurement est activée.

Pour vérifier que c’est activé :

Ouvrez GA4 → Administration (Admin) → Flux de données (Data Streams) → sélectionnez votre flux
Sous Mesures améliorées (Enhanced Measurement), vérifiez que “Clics sortants” (Outbound clicks) est activé

Cela déclenche un événement click avec un paramètre link_url pour chaque clic sortant. Pratique pour tracker les clics vers vos sites partenaires, d’autres marketplaces ou vos liens d’affiliation.

La limite : cela ne tracke que les clics sortants. Pour les clics sur votre propre boutique (comme “Ajouter au panier” ou “Voir les détails”), il vous faut GTM ou du JavaScript sur mesure.

Méthode 2 — Click trigger (déclencheur de clics) Google Tag Manager

GTM permet de déclencher des événements pour tout ce sur quoi un visiteur clique, que ce soit des boutons, des liens, des images ou d’autres éléments.

Étape 1 — Activer les variables de clic GTM. Dans GTM, allez dans Variables → Configurer (Configure). Sous Clics, activez : Click Element, Click Classes, Click ID, Click Target, Click Text, Click URL.

Étape 2 — Identifier votre bouton. Sur votre boutique en ligne, faites un clic droit sur le bouton à tracker → Inspecter. Observez l’élément pour trouver :

L’ID (ex. id="main-add-to-cart") — l’option la plus précise à privilégier
La classe (Class) (ex. class="product-form__submit") — moins précis, mais en général ça suffit
Le texte de l’élément (ex. “Ajouter au panier”)

Étape 3 — Créer un déclencheur de clics (Click trigger) sur GTM.

Déclencheurs (Triggers) → Nouveau → Tous les éléments (All Elements) ou Juste les liens (Just Links)
Configurez :
- Ce déclencheur se déclenche sur : Certains clics (Some Clicks)
- Click Classes contient product-form__submit (ou tout autre identifiant choisi)
Enregistrez

Étape 4 — Créer une balise d’événement GA4.

Balises (Tags) → Nouvelle → Google Analytics : Évément GA4 (GA4 Event)
Nom de l’événement : add_to_cart_click (ou ce que vous voulez)
Ajoutez le trigger créé à l’étape 3
Enregistrez

Étape 5 — Tester avec le Preview mode de GTM. Cliquez sur Prévisualiser (Preview) → ouvrez votre site dans la nouvelle fenêtre → cliquez sur le bouton. Confirmez ensuite que votre tag s’est bien déclenché dans le debugger GTM.

Étape 6 — Envoyer et publier.

Méthode 3 — JavaScript sur mesure avec data attributes

Pour les boutiques sans GTM ou si vous voulez intégrer le tracking de manière native dans une section, les data attributes permettent un tracking propre et facile à maintenir.

Étape 1 — Ajouter des data attributes à vos boutons. Dans le code Liquid de votre thème, ajoutez un attribut data-track à votre bouton :

<button
  type="submit"
  class="product-form__submit"
  data-track="add-to-cart"
  data-product="{{ product.title | escape }}"
>
  Ajouter au panier
</button>

Étape 2 — Ajouter un event listener pour le clic. Dans theme.liquid ou dans le bloc {% javascript %} d’une section :

document.addEventListener('click', function(event) {
  var tracked = event.target.closest('[data-track]');
  if (!tracked) return;

  var action = tracked.dataset.track;
  var product = tracked.dataset.product || '';

  // Envoyer à GA4
  if (typeof gtag !== 'undefined') {
    gtag('event', action, {
      'product_name': product
    });
  }
});

Cette méthode repose sur la délégation d’événements (event delegation) — un seul listener sur l’ensemble du document capte tous les clics trackés, ce qui le rend compatible même avec les éléments chargés dynamiquement (comme les boutons d’ajout rapide sur vos pages de collection).

Ajoutez des éléments de conversion avec tracking de clics à votre boutique Shopify.

Try Fudge for Free

Pour mesurer vos performances, consultez comment créer une landing page sur Shopify.

Pour mesurer vos performances, consultez comment ajouter un bouton sur Shopify.

Pour mesurer vos performances, consultez comment ajouter un élément de conversion sur mesure sur Shopify.

Ce qu’il faut tracker dans une boutique Shopify

Vous n’avez pas besoin de tracker chaque clic. Concentrez-vous sur ceux qui vous apprennent quelque chose de concret :

Les clics à forte valeur ajoutée à tracker :

Les boutons “Ajouter au panier”
Le bouton “Acheter maintenant” / le paiement express
Vos CTAs d’upsell ou de cross-sell
Le bouton “Voir les détails” sur vos fiches produits en collection
L’ouverture d’onglets dépliants sur les frais de port, les retours de commande, ou la FAQ d’une page produit
Les boutons d’inscription aux newsletters ou listes d’attente

Les clics moins utiles à tracker :

Les liens du menu de navigation (le tracking classique des pages vues fait l’affaire)
Les clics du logo de la homepage
Les boutons de partage sur les réseaux sociaux

Posez-vous cette question : “Si je connaissais le taux de clic sur cet élément, est-ce que ça me ferait changer quelque chose ?” Si la réponse est oui, alors trackez-le.

Voir vos données de clic dans GA4

Une fois que les événements de clic remontent :

Rapports → Engagement → Événements — voir tous les événements et leur nombre
Cliquez sur le nom d’un événement — voir la répartition des paramètres (quel produit, quelle variante de bouton)
Explorer → Exploration de l’entonnoir — créez des entonnoirs comme « Produit vu → Clic sur Ajouter au panier → Paiement commencé » pour voir les abandons

Ces données montrent quels CTA performent et lesquels ne le font pas — essentiel pour une optimisation du taux de conversion (CRO) éclairée.

FAQ

Quelle est la différence entre les événements de clic GA4 et les Customer Events Shopify ?

Les événements de clic GA4 se déclenchent pour tout élément cliquable que vous configurez (n’importe quel CTA sur les pages de la boutique). Les Customer Events Shopify sont des événements e-commerce prédéfinis (product_viewed, cart_viewed, checkout_started) déclenchés automatiquement par Shopify — ils incluent les événements de la page de paiement que GTM ne peut pas atteindre. Utilisez les deux : les Customer Events pour les actions e-commerce, les événements de clic GA4 pour les CTA personnalisés.

Combien d’événements de clic dois-je suivre sur une boutique Shopify ?

Commencez par 5 à 10 événements à forte valeur (Ajouter au panier, Acheter maintenant, Voir les détails, Inscription par e-mail, liens de navigation clés). Ajouter un suivi à chaque élément cliquable crée du bruit qui masque les informations réellement exploitables. Suivez ce que vous utiliseriez concrètement pour prendre des décisions.

Pourquoi mes événements de clic GA4 n’apparaissent-ils pas dans les rapports ?

GA4 a un délai de traitement de 24 à 48 heures pour les rapports standards. Utilisez DebugView (Configurer → DebugView) pour une confirmation en temps réel. Vérifiez également : que l’événement se déclenche bien (console du navigateur), que l’événement atteint GA4 (onglet Réseau → filtrer par collect), et que la propriété GA4 est connectée à votre vue de rapport.

Le suivi des clics va-t-il ralentir mon site Shopify ?

De façon négligeable s’il est correctement mis en place. Un seul écouteur d’événements (event listener) au niveau du document avec délégation (Méthode 3) ajoute 1 à 2 Ko et environ 1 ms par clic. Le suivi basé sur GTM ajoute les ~70 Ko inhérents à GTM, ce qui est plus lourd mais reste acceptable. Les bénéfices tirés des données surpassent largement le coût.

Dois-je suivre les clics de tous les CTA de ma boutique Shopify ?

Non. Suivez les CTA dont le taux de clic a un impact sur vos décisions : actions d’achat principales, parcours alternatifs d’achat, formulaires de capture de leads. Ignorez le suivi des clics sur les logos, la navigation de base (les pages vues s’en chargent) et les boutons décoratifs. Le filtre « si je connaissais ce chiffre, est-ce que j’agirais en conséquence ? » s’applique ici.