Catalogue Produits

E-commerce GA4 : view_item_list + select_item

Cette page simule un catalogue e-commerce. Quand elle se charge, l'event view_item_list est automatiquement pousse dans le dataLayer avec la liste de tous les produits. Quand on clique sur un produit, select_item est pousse.

  1. Ouvrir GTM Preview
  2. Observer l'event "view_item_list" au chargement
  3. Cliquer sur "Voir le produit" et observer "select_item"
  4. Cliquer sur "Ajouter au panier" et observer "add_to_cart"

Les produits sont generes dynamiquement par le JS

dataLayer.push - view_item_list 
// Event view_item_list (au chargement de la page) :
window.dataLayer.push({ ecommerce: null }); // Clear previous
window.dataLayer.push({
    event: "view_item_list",
    ecommerce: {
        item_list_id: "catalogue_demo",
        item_list_name: "Catalogue Demo",
        items: [
            {
                item_id: "SKU-GTM-001",
                item_name: "Formation GTM Avancee",
                price: 497,
                item_category: "Formations",
                item_brand: "impulsion.com",
                index: 0
            },
            // ... autres produits
        ]
    }
});

// IMPORTANT : toujours faire { ecommerce: null } avant
// pour vider les donnees e-commerce precedentes du dataLayer.
Schema du funnel e-commerce GA4 
// Le funnel e-commerce GA4 complet :
//
// 1. view_item_list  -> Catalogue (cette page)
// 2. select_item     -> Clic sur un produit
// 3. view_item       -> Fiche produit
// 4. add_to_cart     -> Ajout au panier
// 5. view_cart       -> Page panier
// 6. remove_from_cart -> Suppression du panier
// 7. begin_checkout  -> Debut du checkout
// 8. add_shipping_info -> Infos livraison
// 9. add_payment_info  -> Infos paiement
// 10. purchase       -> Achat confirme !