Documentation PrestaShop Google Tag Manager
Documentation complète pour le module PrestaShop d'intégration avancée avec Google Tag Manager (cc_ps_googletrack) avec prise en charge d'Enhanced Ecommerce, Enhanced Conversions et configuration complète des événements.Table des matières
- Introduction
- Installation et exigences du système
- Activation du module
- Configuration de base du GTM
- Configuration des événements
- Couche de données étendue
- Conversions améliorées (données utilisateur)
- Mode débogage
- Connexion aux événements
- Votre propre code de suivi
- Système de traduction
- Événements – détails
- Calendrier des événements
- Test Tag Assistant
- Résolution de problèmes
- FAQ
1. Introduction
CC Google Tag Manager est un module PrestaShop avancé qui assure une intégration complète avec Google Tag Manager. Le module suit automatiquement tous les événements clés Enhanced Ecommerce conformément aux dernières normes.Fonctions clés du module :
- Intégration complète avec Google Tag Manager (GTM)
- Suivi automatique de 18 événements différents
- Enhanced Ecommerce conforme aux normes Google
- Conversions améliorées avec données utilisateur hachées
- Couche de données étendue (dataLayer) avec informations supplémentaires
- Configuration de l'activation/désactivation des différents événements
- Mode débogage avec connexion à la console du navigateur
- Enregistrement des événements dans la base de données avec consultation
- Votre propre code JavaScript exécuté sur toutes les pages
- Système complet de traduction (polonais, anglais, possibilité d'ajouter d'autres langues)
- Compatibilité avec PrestaShop 1.7.x, 8.x et 9.x
- Prise en charge du mode consentement Google 2.0
2. l'installation et les exigences du système
Exigences du système- PrestaShop 1.7.0.0 ou plus récent (testé jusqu'à la version 9.0)
- PHP 7.4 ou supérieur
- Accès au panneau d'administration PrestaShop
- Compte Google Tag Manager (gratuit)
- En option : Google Analytics 4 (gratuit)
- Télécharger le fichier ZIP du module depuis le site officiel cocos.codes
- Se connecter au panneau d'administration de PrestaShop
- Aller à : Modules → Gestionnaire de modules
- Cliquez sur „ Télécharger le module ” dans le coin supérieur droit.
- Sélectionnez le fichier ZIP téléchargé et cliquez sur „ Télécharger ce module ”.”
- Une fois l'installation terminée, cliquez sur "Configurer"
- Le module est prêt à être configuré.
Info
Après l'installation, le module enregistre automatiquement tous les hooks PrestaShop nécessaires et crée une table dans la base de données pour enregistrer les événements (si la fonction est activée). L'installation ne nécessite aucune étape technique supplémentaire.
3. Activation du module
Le module ne nécessite pas d'activation séparée de la licence – il fonctionne immédiatement après l'installation. Cependant, pour commencer le suivi, nous devons configurer les paramètres de base.Premiers pas après l'installation :
- Accédez à Modules → Gestionnaire de modules
- Recherchez le module „ CC Google Tag Manager ”.”
- Cliquez sur „ Configurer ”.”
- Nous serons redirigés vers la page des paramètres du module.
Conseil
Avant de commencer la configuration, il est utile de préparer l'ID du conteneur GTM (format : GTM-XXXXXX). Vous pouvez le trouver dans le panneau Google Tag Manager après avoir créé un nouveau conteneur pour votre site web.
4. Configuration de base de GTM
La configuration de Google Tag Manager est la première étape pour lancer le suivi dans votre boutique.Création d'un conteneur GTM :
- Aller à tagmanager.google.com
- Connectez-vous avec votre compte Google
- Cliquez sur „ Créer un compte ”.”
- Indiquez le nom du compte (par exemple, le nom de l'entreprise)
- Indiquez le nom du conteneur (par exemple, le nom du magasin).
- Sélectionnez „ Web ” comme type de conteneur.
- Acceptez les conditions d'utilisation
- Copiez l'ID du conteneur (GTM-XXXXXX)
- Dans la configuration du module, recherchez la section „ Configuration de base ”.”
- Cochez la case „ Activer Google Tag Manager ”.”
- Collez l'identifiant GTM Container ID copié (par exemple GTM-ABC1234)
- Cliquez sur „ Enregistrer ” en bas de la page.
| Option | Description | Valeur |
| Activer GTM | Active le suivi par GTM | OUI / NON |
| Identifiant du conteneur GTM | ID du conteneur GTM | GTM-XXXXXX |
- Le code GTM (gtag.js) est automatiquement ajouté à toutes les pages de la boutique.
- Le script GTM est placé dans la section
- Le fallback Noscript est ajouté immédiatement après <body>
- DataLayer commence à collecter des données sur les événements
- Tous les événements sont automatiquement envoyés à GTM.
Succès
Une fois correctement configuré, le code GTM sera visible dans le code source de la page. Vous pouvez le vérifier en cliquant avec le bouton droit de la souris → „ Afficher le code source de la page ” et en recherchant GTM-XXXXXX. Vous y trouverez à la fois le script principal et le dataLayer.
5. Configuration des événements
Le module prend en charge 18 événements différents. Chaque événement peut être activé ou désactivé indépendamment en fonction des besoins de l'entreprise.Liste des événements disponibles :
| Événement | Description | Quand est-il appelé ? |
| page_view | Affichage de la page | Sur chaque page du magasin |
| view_item | Affichage du produit | Sur la page du produit |
| voir_la_liste_des_articles | Affichage de la liste des produits | Catégories, résultats de recherche, page d'accueil |
| select_item | Cliquez sur le produit | Cliquez sur un produit dans la liste. |
| add_to_cart | Ajouter au panier | Après avoir ajouté le produit au panier |
| supprimer du panier | Supprimer du panier | Après avoir supprimé le produit du panier |
| view_cart | Affichage du panier | Sur la page du panier |
| begin_checkout | Début du contrat | Première étape de la réalisation de la commande |
| add_shipping_info | Ajouter des informations sur la livraison | Choix du mode de livraison |
| add_payment_info | Ajouter des informations sur le paiement | Choix du mode de paiement |
| achat | Achat | Page de confirmation de commande |
| search | Recherche | Utilisation du moteur de recherche du magasin |
| select_promotion | Cliquez sur la promotion | Cliquez sur la bannière promotionnelle |
| connexion | Connexion | Connexion client |
| s'inscrire | Inscription | Inscription d'un nouveau client |
| ajouter à la liste de souhaits | Ajouter à la liste de souhaits | Ajouter un produit à la liste de souhaits |
| partager | Partager | Cliquez sur le bouton « Partager sur les réseaux sociaux ». |
- Dans la configuration du module, accédez à la section „ Configuration des événements ”.”
- Trouvez la liste des 18 événements
- Cochez les cases correspondant aux événements que vous souhaitez suivre.
- Décochez les cases correspondant aux événements que vous souhaitez désactiver.
- Utilisez les boutons „ Sélectionner tout ” ou „ Désélectionner tout ” pour une configuration rapide.
- Cliquez sur „ Enregistrer ”.”
// Konfiguracja eventów przekazywana do JS jako: window.ccpsEventConfig = { 'page_view': true, 'view_item': true, 'add_to_cart': true, 'purchase': false, // ... itd. };
// Sprawdzanie czy event jest włączony: function isEventEnabled(eventName) { if (typeof config.eventConfig[eventName] !== 'undefined') { return config.eventConfig[eventName]; } return true; // Domyślnie włączone }Note
Les événements désactivés ne sont pas envoyés au dataLayer, ce qui permet d'économiser des ressources et d'éviter d'encombrer les données dans Google Analytics. Si un événement est désactivé, le message „ Événement désactivé : nom_de_l'événement ” s'affiche en mode débogage au lieu d'envoyer des données.
6. Couche de données étendue
La fonction Enhanced Data ajoute des informations supplémentaires à chaque événement, enrichissant ainsi les analyses dans Google Analytics.Que contient la couche de données étendue ?
- Données du site – type de page, URL, titre, langue, devise
- Données utilisateur – statut du client (visiteur/invité/client), identifiant utilisateur
- Données sur les produits – catégories complètes (jusqu'à 5 niveaux), marques, attributs
- Données relatives aux commandes – modes de livraison, modes de paiement, bons d'achat
- Dans la configuration du module, recherchez la section „ Options de données avancées ”.”
- Cochez la case „ Couche de données étendue ”.”
- Cochez la case „ Données du site ” pour ajouter des informations sur le site.
- Sauvegarder vos paramètres
dataLayer.push({ 'event': 'page_view', 'page_type': 'product', 'page_url': 'https://example.com/produkt', 'page_title': 'Nom du produit - Boutique', 'language': 'pl', 'currency': 'PLN', 'customer_status': 'customer', 'user_id': 123 });| Type de site | Valeur page_type | Quand |
| Page d'accueil | accueil | IndexController |
| Page produit | produit | Contrôleur de produit |
| Catégorie | catégorie | CategoryController |
| Panier | chariot | CartController |
| Exécution de la commande | caisse | Contrôleur de commande |
| Confirmation d'achat | achat | Contrôleur de confirmation de commande |
| Recherche | search | SearchController |
| Page de contenu | contenu | CmsController |
| Autres | autre | Tous les autres |
- item_category – catégorie principale (avec normalisation – première lettre majuscule)
- item_category2 – sous-catégorie niveau 2
- item_category3 – sous-catégorie niveau 3
- item_category4 – sous-catégorie niveau 4
- item_category5 – sous-catégorie niveau 5
Conseil
La couche de données étendue est particulièrement utile pour créer des segments avancés dans Google Analytics. Nous pouvons, par exemple, analyser la conversion séparément pour différents types de pages, langues ou statuts de clients. L'activation de cette fonction est fortement recommandée.
7. Conversions améliorées (données utilisateur)
Enhanced Conversions est une fonctionnalité de Google Ads qui améliore la précision de la mesure des conversions en transmettant les données hachées des utilisateurs.Que sont les conversions améliorées ?
- Données personnelles hachées (SHA-256) des utilisateurs
- E-mail, téléphone, prénom, nom, ville, code postal, pays
- Transmis à Google sous forme sécurisée
- Ils permettent de mieux attribuer les conversions aux campagnes publicitaires.
- Nécessitent le consentement de l'utilisateur (RGPD/GDPR)
- Dans la configuration du module, recherchez la section „ Options de données avancées ”.”
- Cochez la case „ Données utilisateur (conversions améliorées) ”.”
- Assurez-vous d'avoir obtenu le consentement des utilisateurs pour le traitement des données (RGPD).
- Sauvegarder vos paramètres
Avertissement
Le transfert des données utilisateur nécessite le consentement RGPD ! Assurons-nous que notre boutique dispose d'une politique de confidentialité et de cookies à jour et que les utilisateurs donnent leur consentement éclairé au traitement des données. Nous recommandons l'intégration d'un module de gestion des consentements cookies tel que CC PrestaShop Cookies.
| Données | Source | Format |
| Courriel | $customer->email | hash(’sha256′, strtolower(trim($email))) |
| Téléphone | Première adresse du client | hash(’ sha256 », chiffres uniquement) |
| Nom | Première adresse du client | hash(’sha256′, strtolower(trim())) |
| Nom | Première adresse du client | hash(’sha256′, strtolower(trim())) |
| Ville | Première adresse du client | hash(’sha256′, strtolower(trim())) |
| Code postal | Première adresse du client | hash(’ sha256 », trim()) |
| Pays | Première adresse du client | Code pays (sans hachage) |
dataLayer.push({ 'event': 'purchase', 'user_id': 123, 'customer_status': 'customer', 'user_data': { 'email_hash': 'b4c9a289323b21a01c3e807...', 'phone_hash': '8d23cf6c86e834a7aa6edd9...', 'address': { 'first_name': 'a5bfc9e07964f8dddeb95fc...', 'last_name': '5e884898da28047151d0e56...', 'city': '1c383cd30b7c298ab50293a...', 'postal_code': '4e07408562bedb8b60ce05c...', 'country': 'PL' } } });- visiteur – utilisateur non connecté sans compte
- invité – connecté en tant qu'invité (guest checkout)
- client – utilisateur connecté avec un compte complet
Info
Toutes les données personnelles sont hachées à l'aide de l'algorithme SHA-256 avant d'être envoyées à Google, ce qui signifie que Google ne reçoit pas les données sous une forme lisible. Le hachage est unidirectionnel : il est impossible de reconstituer les données d'origine à partir du hachage. Cela répond aux exigences du RGPD en matière de minimisation des données.
8. Mode débogage
Le mode débogage permet de suivre en détail tous les événements dans la console du navigateur, ce qui est très utile lors des tests et du dépannage.Activation du mode débogage :
- Dans la configuration du module, recherchez la section „ Options de données avancées ”.”
- Cochez la case „ Mode débogage ”.”
- Sauvegarder vos paramètres
- Ouvrir la boutique dans un nouvel onglet du navigateur
- Ouvrez la console de développement (F12 → onglet Console)
- Actualiser la page
- Initialisation du module : [CC Google Track] CcpsGoogleTrack v2.0 – initialisation
- Chaque événement envoyé : [CC Google Track] Événement : add_to_cart
- Données de l'événement (objet e-commerce)
- Événements désactivés : [CC Google Track] Événement désactivé : partager
- Opérations AJAX (téléchargement des données produit, liste de souhaits, etc.)
- Erreurs d'analyse et de gestion des événements
- Événements PrestaShop (updatedCart, updatedProduct)
- Fin de l'initialisation
[CC Google Track] CcpsGoogleTrack v2.0 - initialisation [CC Google Track] Événement : page_view {page_type : " product ", ...} [CC Google Track] Gestionnaire enregistré : add_to_cart [CC Google Track] Gestionnaire enregistré : remove_from_cart [CC Google Track] Gestionnaire enregistré : select_item [CC Google Track] Événement PrestaShop : updatedCart {reason: {...}} [CC Google Track] Événement : add_to_cart {currency: " PLN ", value: 99.99, items: [...]} [CC Google Track] CcpsGoogleTrack v2.0 - initialisation terminée| Communiqué | Importance de la |
| Événement désactivé : nom_de_l'événement | L'événement est désactivé dans la configuration. |
| Téléchargement des données produit via AJAX pour X | Le module récupère les données produit depuis le serveur. |
| Les données produit ont été reçues depuis PHP pour X. | Les données du produit ont été téléchargées avec succès. |
| Erreur AJAX X | Une erreur s'est produite lors du téléchargement des données. |
| Erreur d'analyse JSON | La réponse AJAX n'est pas un JSON valide. |
| Handler enregistré : nom | Le service événementiel a été lancé. |
Conseil
Le mode débogage doit être activé UNIQUEMENT pendant les tests. Dans un environnement de production, il doit être désactivé afin de ne pas encombrer la console des visiteurs et de ne pas ralentir le site. Nous recommandons d'activer le mode débogage dans un environnement de test/de préproduction avant la mise en production.
9. Enregistrement des événements
La fonction d'enregistrement des événements enregistre tous les événements dans la base de données PrestaShop, ce qui permet de les consulter et de les analyser ultérieurement.Activation de la journalisation des événements :
- Dans la configuration du module, recherchez la section „ Options de données avancées ”.”
- Cochez la case „ Enregistrement des événements ”.”
- Sauvegarder vos paramètres
- Le module créera automatiquement un tableau. ps_ccpsgoogletrack_logs dans la base de données
| Colonne | Type | Description |
| id_log | INT AUTO_INCREMENT | Clé principale |
| event_name | VARCHAR(100) | Nom de l'événement (par exemple, add_to_cart) |
| data_layer | TEXTE | DataLayer complet au format JSON |
| date_add | DATETIME | Date et heure d'ajout |
- Dans la configuration du module, accédez à l'onglet „ Journaux ”.”
- Vous verrez un tableau avec les 100 derniers journaux.
- Colonnes : Date, Événement, Couche de données (JSON)
- Possibilité d'effacer tous les journaux à l'aide du bouton „ Effacer les journaux ”.”
Événement : add_to_cart Date : 2025-12-10 14:30:45 Couche de données : { " event " : " add_to_cart ", " ecommerce " : { " currency " : "PLN", "value": 99.99, "items": [ { "item_id": "123", "item_name": "Produit test", "price": 99.99, "quantity": 1 } ] }, "page_type": "product", "customer_status": "visitor" }- Événements depuis le panneau d'administration (hook displayHeader) – connexion PHP
- Événements envoyés par JavaScript – connexion via AJAX
- Tous les événements sauf ceux désactivés dans la configuration
- La connexion fonctionne indépendamment du mode de débogage.
- Dans l'onglet „ Journaux ”, cliquez sur le bouton „ Effacer les journaux ”.”
- Confirmez l'opération dans la boîte de dialogue.
- Tous les journaux seront supprimés de la base de données.
- Un message de confirmation apparaîtra.
Avertissement
La connexion aux événements peut générer une grande quantité de données dans la base, en particulier dans les magasins à fort trafic. Nous recommandons de nettoyer régulièrement les journaux (par exemple, tous les mois) ou d'activer la connexion uniquement pendant les tests. Dans un environnement de production, il n'est généralement pas nécessaire de se connecter en permanence.
10. Code de suivi personnalisé
La fonction de code personnalisé permet d'ajouter du JavaScript personnalisé qui sera exécuté sur toutes les pages de la boutique.Utilisation de votre propre code :
- Événements GTM supplémentaires non pris en charge par le module
- Suivi personnalisé des interactions des utilisateurs
- Intégration avec d'autres outils analytiques
- Modifications de dataLayer selon vos besoins
- Scripts de remarketing Facebook Pixel, TikTok Pixel, etc.
- Dans la configuration du module, recherchez la section „ Code de suivi personnalisé ”.”
- Cochez la case „ Activer votre propre code ”.”
- Dans le grand champ de texte, entrez votre code JavaScript.
- N'utilisez pas de balises – sont ajoutés automatiquement
- Sauvegarder vos paramètres
// Événement personnalisé vers dataLayer dataLayer.push({ 'event': 'custom_scroll', 'scroll_depth': '50%' });
// Suivi des clics sur des éléments spécifiques document.querySelectorAll('.special-button').forEach(function(btn) { btn.addEventListener('click', function() { dataLayer.push({ 'event': 'special_button_click', 'button_text': this.textContent }); }); }); // Facebook Pixel !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', 'YOUR_PIXEL_ID'); fbq('track', 'PageView');- window.dataLayer – couche de données principale GTM
- window.ccpsGTMDebug – si le mode débogage est activé
- window.ccpsEventConfig – configuration des événements
- window.ccpsUserLogged – si l'utilisateur est connecté
- window.ccpsAjaxUrl – URL vers le contrôleur AJAX du module
- window.ccpsTranslations – tableau de traduction
- prestashop – objet PrestaShop (si disponible)
// Vérifiez si l'utilisateur est connecté if (window.ccpsUserLogged) { dataLayer.push({ 'event': 'logged_user_pageview' }); } // Utilisez la configuration des événements if (window.ccpsEventConfig && window.ccpsEventConfig['custom_event']) {
// Envoyer uniquement si l'événement est activé dataLayer.push({ 'event': 'custom_event' }); } // Journal de débogage si le mode débogage est activé if (window.ccpsGTMDebug) { console.log('[Mon code] Initialisation terminée'); }Note
Votre propre code est ajouté à la fin de la section HEAD, après le code GTM et après tous les scripts du module. Cela signifie que toutes les variables et fonctions du module sont déjà disponibles. Le code est exécuté sur chaque page de la boutique, il faut donc faire attention à la performance.
11. Système de traduction
Le module dispose d'un système de traduction complet prenant en charge plusieurs langues.Éléments traduits :
| Élément | Exemple PL | Exemple EN |
| Noms des événements | Ajouter au panier (add_to_cart) | Ajouter au panier (add_to_cart) |
| Messages de débogage | Événement désactivé : | Événement désactivé : |
| Messages d'erreur | Erreur lors du téléchargement des données produit | Erreur lors de la récupération des données produit |
| Statuts | Actif | Actif |
| Boutons | Enregistrer | Enregistrer |
// W PHP (ccpsgoogletrack.php): $translations = [ 'eventDisabled' => $this->l('Event wyłączony:'), 'event' => $this->l('Event:'), 'sendingEvent' => $this->l('Wysyłanie'), // ... itd. ]; $output .= '<script>window.ccpsTranslations = ' . json_encode($translations, JSON_UNESCAPED_UNICODE) . ';</script>';
// W JavaScript (ccpsgoogletrack.js):
function t(key, defaultText) {
if (typeof window.ccpsTranslations !== 'undefined'
&& window.ccpsTranslations[key]) {
return window.ccpsTranslations[key];
}
return defaultText || key;
}
// Użycie: debugLog(t('eventDisabled', 'Event wyłączony:') + ' ' + event);- Copier le fichier translations/fr.php
- Changez le nom en code de langue, par exemple. traductions/de.php (allemand)
- Ouvrez le fichier dans un éditeur de texte.
- Traduisez toutes les valeurs à droite (après le signe =)
- NE changez PAS les clés (à gauche)
- Enregistrez le fichier avec l'encodage UTF-8.
- Vider le cache PrestaShop
<?php global $_MODULE; $_MODULE = array(); $_MODULE['ccpsgoogletrack_eventdisabled'] = 'Événement désactivé :'; $_MODULE['ccpsgoogletrack_event'] = 'Événement :'; $_MODULE['ccpsgoogletrack_sendingevent'] = 'Envoi en cours'; // ... plus de traductions- eventDisabled – „ Événement désactivé : ”
- événement – „ Événement : ”
- sendingEvent – „ Envoi ”
- receivedData – „ Données produit reçues de PHP pour ”
- gettingProductData – „ Téléchargement des données produit via AJAX pour ”
- ajaxError – „ Erreur AJAX ”
- parsingError – „ Erreur d'analyse JSON : ”
- dataError – „ Erreur lors du téléchargement des données du produit ”
- handlerRegistered – „ Gestionnaire enregistré ”
- initialization – „ CcpsGoogleTrack v2.0 – initialisation ”
- initComplete – „ CcpsGoogleTrack v2.0 – initialisation terminée ”
- prestashopEvent – „ Événement PrestaShop ”
Conseil
Si la boutique est multilingue, le système de traduction sélectionnera automatiquement la langue appropriée en fonction de la langue actuelle de PrestaShop. Tous les messages de débogage, les noms d'événements dans la configuration et les messages système s'afficheront dans la langue de l'utilisateur.
12. Événements – détails
Description détaillée de la mise en œuvre de chacun des 18 événements pris en charge par le module.page_view – Affichage de la page
- Quand : Sur chaque page du magasin
- Hook : displayHeader (en-tête d'affichage)
- Données : type_de_page, url_de_page, titre_de_page, langue, devise, statut_client
- Remarques : Le premier événement envoyé sur chaque page contient toutes les données contextuelles.
- Quand : Sur la page du produit
- Hook : afficherlesinformationscomplémentairessurlesproduits
- Données : devise, valeur, articles[] (article_id, article_name, prix, article_brand, article_category, quantité=1)
- Source : $product = prestashop.page.product ou AJAX
- Quand : Catégories, page d'accueil, résultats de recherche
- Hook : displayFooter (pour la catégorie)
- Données : currency, item_list_id, item_list_name, items[] (tous les produits avec index)
- Remarques : Utilise prestashop.page.page_name pour identifier le type de liste
- Quand : Cliquez sur le lien du produit dans la liste.
- Mécanisme : Écouteur de clic JavaScript sur .product-miniature a
- Données : devise, item_list_id, item_list_name, items[] (produit cliqué)
- Source : attribut data-product-gtm ou AJAX
- Quand : Après avoir ajouté le produit au panier
- Mécanisme : Interception de l'événement PrestaShop ' updateCart ’
- Données : devise, valeur, articles[] (produit ajouté avec quantité)
- Source : prestashop.page.product ou AJAX GetProductData
- Remarques : Détecte la quantité provenant de différentes sources (#quantity_wanted, event.reason.qty, event.resp.quantity)
- Quand : Après avoir supprimé le produit du panier
- Mécanisme : Cliquez sur l'écouteur sur .supprimer-du-panier
- Données : devise, valeur, articles[] (produit supprimé)
- Source : Attributs data-id-product, data-price, data-name
- Quand : Sur la page du panier
- Hook : affichagePanier d'achat
- Données : currency, value, items[] (tous les produits dans le panier)
- Source : $cart->getProducts()
- Quand : Première étape de la réalisation de la commande
- Mécanisme : JavaScript sur la page de paiement
- Données : devise, valeur, articles[], coupon (le cas échéant)
- Source : window.prestashop.cart
- Quand : Après avoir sélectionné le mode de livraison
- Hook : actionCarrierProcess
- Données : devise, valeur, articles[], niveau d'expédition (nom du transporteur)
- Mécanisme : Également JavaScript listener pour la modification de l'entrée .delivery-option
- Quand : Après avoir sélectionné le mode de paiement
- Mécanisme : Écouteur JavaScript sur .option de paiement input
- Données : currency, value, items[], payment_type (nom du module de paiement)
- Quand : Page de confirmation de commande
- Hook : Affichage de la confirmation de commande
- Données : devise, identifiant de transaction, valeur, taxe, frais d'expédition, coupon, articles[]
- Source : $order = nouvelle commande ($id_commande)
- Remarques : L'événement le plus important pour la conversion
- Quand : Utilisation du moteur de recherche
- Hook : actionSearch
- Données : search_term (terme recherché)
- Fallback : JavaScript vérifie les paramètres URL (s=, search_query=)
- Quand : Après la connexion de l'utilisateur
- Hook : actionAuthentication
- Mécanisme : JavaScript détecte également la modification de ccpsUserLogged dans sessionStorage.
- Données : méthode : ’ email ’
- Quand : Après l'enregistrement d'un nouveau client
- Hook : actionCustomerAccountAdd
- Mécanisme : Cookie ccps_just_registered transféré vers sessionStorage
- Données : méthode : ’ email ’
- Quand : Ajouter un produit à la liste de souhaits
- Mécanisme : Interception de fetch et XMLHttpRequest vers blockwishlist
- Données : devise, valeur, articles[] (produit ajouté)
- Source : AJAX GetProductData
- Remarques : Fonctionne avec le module blockwishlist
- Quand : Cliquez sur le bouton « Partager sur les réseaux sociaux ».
- Mécanisme : Cliquez sur l'écouteur sur .partage social a
- Données : méthode (facebook/twitter/pinterest/linkedin/email), type_de_contenu, identifiant_d'élément, éléments[]
- Source : prestashop.page.product ou AJAX
- Quand : Automatiquement si le produit bénéficie d'une remise
- Hook : displayProductAdditionalInfo (avec view_item)
- Données : devise, valeur, articles[], id_promotion, nom_promotion
- Remarques : Utilise specific_prices pour les données promotionnelles
Succès
Tous les événements sont conformes aux spécifications officielles de Google Analytics 4 Enhanced Ecommerce. La structure des données items[] contient tous les champs obligatoires et recommandés (item_id, item_name, price, quantity, item_brand, item_category). Le module normalise automatiquement les noms des catégories (première lettre majuscule) et prend en charge jusqu'à 5 niveaux de hiérarchie des catégories.
13. Calendrier des événements
Vous trouverez ci-dessous un calendrier indiquant quand et sur quelles pages les différents événements sont publiés.Événements sur différents types de sites :
| Page | Événements automatiques | Événements interactifs |
| Page d'accueil | page_view, view_item_list | select_item |
| Catégorie | page_view, view_item_list | select_item |
| Recherche | page_view, recherche, view_item_list | select_item |
| Produit | page_view, view_item, select_promotion (si remise) | add_to_cart, add_to_wishlist, share |
| Panier | page_view, view_cart | remove_from_cart, begin_checkout |
| Passer à la caisse | page_view, begin_checkout | add_shipping_info, add_payment_info |
| Confirmation | page_view, achat | – |
| Connexion | page_view, connexion | – |
| Inscription | page_view, sign_up | – |
- Page d'accueil → page_view, view_item_list
- Cliquez sur le produit → select_item
- Page produit → page_view, view_item, (select_promotion)
- Ajouter au panier → ajouter au panier
- Page du panier → page_view, view_cart
- Début du contrat → commencer le paiement
- Choix de la livraison → ajouter_informations_expédition
- Choix du mode de paiement → ajouter_informations_de_paiement
- Confirmation → page_view, achat
Info
Chaque événement automatique est envoyé lors du chargement de la page (Hook PHP), tandis que les événements interactifs sont envoyés en réponse aux actions de l'utilisateur (JavaScript). Le module détecte intelligemment les doublons et n'envoie pas deux fois le même événement pour la même action.
14. Test Tag Assistant
Google Tag Assistant est l'outil officiel de Google pour tester et déboguer l'implémentation de Google Tag Manager.Test avec Tag Assistant :
- Installez l'extension Tag Assistant Legacy par Google pour Chrome
- Ou utilisez le nouvel outil Assistant Google Tag dans Chrome DevTools
- Accéder à la page boutique
- Cliquez sur l'icône Tag Assistant dans la barre d'outils.
- Cliquez sur „ Enable ” pour démarrer l'enregistrement.
- Actualiser la page
- Effectuez des actions tests (ajouter au panier, passer à la caisse, etc.)
- Consultez le rapport Tag Assistant
- Balise GTM trouvée – le marqueur vert indique une installation correcte
- DataLayer – vérifiez qu'il contient les données correctes des événements
- Tags supprimés – liste des balises qui ont été activées
- Variables – variables envoyées au GTM
- Erreurs – les marqueurs rouges indiquent des problèmes
- Connectez-vous à Google Tag Manager
- Accédez à l'onglet „ Balises ”.”
- Cliquez sur „ Nouveau ”.”
- Sélectionnez le type de balise : „ Google Analytics : événement GA4 ”
- Entrez l'ID de mesure (G-XXXXXXXXXX de GA4)
- Nom de l'événement : {{Événement}} (variable intégrée)
- Déclencheur : „ Custom Event ” avec les noms des événements (add_to_cart, purchase, etc.)
- Ou un déclencheur universel pour tous les événements avec dataLayer
- Enregistrer et publier le conteneur
- Dans GTM, cliquez sur „ Aperçu ” dans le coin supérieur droit.
- Entrez l'URL de la boutique
- Cliquez sur „ Connect ”.”
- Une nouvelle fenêtre s'ouvrira avec le débogueur GTM.
- Effectuez des actions dans la boutique
- Le débogueur affiche tous les événements dataLayer en temps réel.
- Vérifiez quelles balises ont été activées pour chaque événement.
Conseil
L'outil officiel de test de Google se trouve à l'adresse suivante : tagassistant.google.com
Nous pouvons y tester si tout fonctionne correctement, si GTM est installé et si les événements sont correctement envoyés à Google Analytics.
Nous pouvons y tester si tout fonctionne correctement, si GTM est installé et si les événements sont correctement envoyés à Google Analytics.
15 Dépannage
GTM ne se charge pas sur la page- Vérifiez si GTM est activé dans les paramètres du module.
- Vérifiez l'exactitude de l'identifiant GTM Container ID (format : GTM-XXXXXX)
- Vider le cache PrestaShop (Paramètres avancés → Performances → Vider le cache)
- Vérifiez si la source de la page contient gtm.js et noscript iframe.
- Désactivez les autres modules susceptibles de modifier l'en-tête.
- Vérifiez qu'il n'y a pas d'erreurs JavaScript dans la console.
- Activez le mode débogage et vérifiez la console du navigateur.
- Vérifiez si les événements sont activés dans la configuration du module.
- Vérifiez si dataLayer est défini (console.log(window.dataLayer))
- Vérifiez qu'il n'y a pas de conflits avec d'autres modules GTM.
- Assurez-vous que le module JavaScript est chargé (ccpsgoogletrack.js)
- Vérifiez si hookDisplayHeader est exécuté par le thème.
- Activez le mode débogage et observez les journaux dans la console.
- Vérifiez si l'événement ' updateCart ’ de PrestaShop est appelé.
- Vérifiez si prestashop.on() est disponible.
- Vérifiez si les produits ont des données attribuées (id_product, prix, nom)
- Assurez-vous que le contrôleur AJAX fonctionne (/module/ccpsgoogletrack/ajax)
- Vérifiez qu'il n'y a pas d'erreurs AJAX dans l'onglet Réseau.
- Vérifiez si l'achat d'événement est activé.
- Vérifiez que vous êtes bien sur la page order-confirmation.
- Assurez-vous que hookDisplayOrderConfirmation est exécuté.
- Vérifiez que la commande est correctement chargée ($order)
- Activez la connexion des événements et vérifiez si l'achat est enregistré.
- Dans GTM, vérifiez que vous avez configuré la balise GA4 pour l'événement « purchase ».
- Vérifiez si le fichier translations/XX.php existe pour votre langue.
- Vérifiez le format du fichier (encodage UTF-8, syntaxe PHP correcte)
- Vider le cache PrestaShop
- Vérifiez si window.ccpsTranslations est défini dans le code source de la page.
- Assurez-vous que la fonction t() est disponible dans JavaScript.
- Vérifier si la fonction est activée dans les paramètres
- Vérifiez si la table ps_ccpsgoogletrack_logs existe dans la base de données.
- Vérifier les droits d'écriture de la base de données
- Assurez-vous que le contrôleur AJAX accepte les requêtes (action=LogEvent).
- Activez WP_DEBUG et vérifiez les journaux d'erreurs.
- Vérifiez que vous n'avez pas dépassé la taille maximale autorisée pour les tableaux.
- Vérifier si la fonction est activée dans les paramètres
- Vérifiez que le code JavaScript est correct (vérifiez la console).
- Assurez-vous de ne pas utiliser les balises dans le code.
- Vérifiez si le code se trouve dans le code source de la page (section HEAD).
- Testez le code morceau par morceau pour trouver l'erreur.
Erreur
Si les problèmes persistent, activez le mode débogage dans les paramètres du module et la journalisation des événements. Recueillez toutes les informations de la console du navigateur, de l'onglet Réseau et des journaux d'événements. Contactez l'assistance COCOS via cocos.codes/support en joignant les informations recueillies.
16. LA FAQ
Le module est-il compatible avec PrestaShop 9.0 ?Oui, le module a été testé et est entièrement compatible avec PrestaShop 1.7.x, 8.x et la dernière version 9.0.
Puis-je utiliser le module sans compte Google Analytics ?
Oui, le module transmet les données à Google Tag Manager. GTM peut transmettre les données à de nombreux systèmes différents, pas seulement à Google Analytics. Nous pouvons envoyer des données à Facebook Pixel, TikTok Pixel, nos propres systèmes d'analyse, etc.
Le module ralentit-il la boutique ?
Non, le module est optimisé pour la performance. Le code GTM se charge de manière asynchrone et tous les scripts sont minifiés. L'impact sur la performance est minime (< 0,1 s de temps de chargement).
Puis-je désactiver certains événements ?
Oui, dans la configuration du module, nous pouvons activer ou désactiver chacun des 18 événements séparément. Les événements désactivés ne sont pas envoyés à dataLayer.
Comment fonctionne la détection add_to_cart ?
Le module intercepte l'événement ' updateCart ’ de PrestaShop et surveille les clics sur les boutons « Ajouter au panier ». Il détecte automatiquement la quantité provenant de différentes sources et récupère les données du produit via AJAX si nécessaire.
Le module prend-il en charge le multilinguisme ?
Oui, le module dispose de traductions complètes en polonais et en anglais. Nous pouvons facilement ajouter nos propres langues en copiant et en traduisant les fichiers du répertoire translations/.
Qu'est-ce que les conversions améliorées ?
Enhanced Conversions est une fonctionnalité de Google Ads qui améliore la précision de la mesure des conversions en transmettant les données hachées des utilisateurs (e-mail, téléphone, adresse). Elle nécessite le consentement RGPD.
Le module est-il conforme au RGPD ?
Le module lui-même est conforme au RGPD : il hache toutes les données personnelles à l'aide de l'algorithme SHA-256. Cependant, pour être pleinement conforme, nous devons disposer d'une politique de confidentialité à jour et du consentement des utilisateurs pour les cookies. Nous recommandons l'intégration avec le module de gestion des cookies.
Comment vérifier si le module fonctionne correctement ?
Activez le mode débogage dans les paramètres, ouvrez la console du navigateur (F12) et observez les journaux. Vous pouvez également utiliser Google Tag Assistant ou le mode aperçu GTM pour voir tous les événements en temps réel.
Puis-je ajouter mes propres événements ?
Oui, vous pouvez utiliser la fonction „ Code de suivi personnalisé ” dans les paramètres pour ajouter n'importe quel JavaScript qui enverra ses propres événements à dataLayer.
Combien de temps les journaux d'événements sont-ils conservés ?
Les journaux sont conservés dans la base de données jusqu'à ce qu'ils soient supprimés manuellement. Nous vous recommandons de nettoyer régulièrement les journaux (par exemple, tous les mois) afin de ne pas saturer la base de données.
Le module fonctionne-t-il avec le module cookies/RGPD ?
Oui, le module est compatible avec la plupart des modules de gestion des consentements aux cookies. Nous pouvons l'intégrer à Google Consent Mode 2.0 via notre propre code de suivi.
Que se passe-t-il lors de la désinstallation ?
Le module supprime tous ses paramètres de la base de données (options, tableau des journaux). Il ne supprime toutefois pas les fichiers du module – ceux-ci doivent être supprimés manuellement du répertoire modules/ccpsgoogletrack/.
Puis-je exporter les journaux d'événements ?
Actuellement, le module ne dispose pas d'une fonction d'exportation des journaux. Cependant, nous pouvons interroger directement la base de données (table ps_ccpsgoogletrack_logs) ou ajouter notre propre fonction d'exportation.
À quelle fréquence les traductions sont-elles mises à jour ?
Les traductions sont mises à jour à chaque nouvelle version du module. Si une traduction pour une langue donnée manque, nous pouvons l'ajouter nous-mêmes ou la signaler à COCOS.
