Une commande, deux tuyaux

1. Code Snippets › + Ajouter un snippet › Ajouter votre code personnalisé, type Extrait PHP, nommé « dataLayer purchase ».
2. Colle ce code, choisis l'insertion Exécuter partout, active le snippet et enregistre.
   Extrait PHP (WPCode)Copier

   add_action( 'woocommerce_thankyou', 'sl_datalayer_purchase', 20 );
   function sl_datalayer_purchase( $order_id ) {
       if ( ! $order_id ) return;
       $order = wc_get_order( $order_id );
       // Une seule fois par commande : pas de doublon si la page merci est rechargée
       if ( ! $order || $order->get_meta( '_sl_dl_purchase_sent' ) ) return;
   
       $items = array();
       foreach ( $order->get_items() as $item ) {
           $product = $item->get_product();
           $items[] = array(
               'item_id'   => $product ? ( $product->get_sku() ?: (string) $product->get_id() ) : '',
               'item_name' => $item->get_name(),
               'price'     => (float) $order->get_item_total( $item, false ),
               'quantity'  => (int) $item->get_quantity(),
           );
       }
   
       $data = array(
           'event'     => 'purchase',
           'ecommerce' => array(
               'transaction_id' => (string) $order->get_order_number(),
               'value'          => (float) $order->get_total(),
               'tax'            => (float) $order->get_total_tax(),
               'shipping'       => (float) $order->get_shipping_total(),
               'currency'       => $order->get_currency(),
               'items'          => $items,
           ),
       );
   
       $order->update_meta_data( '_sl_dl_purchase_sent', 'yes' );
       $order->save();
   
       echo '<script>window.dataLayer = window.dataLayer || [];'
          . 'window.dataLayer.push({ ecommerce: null });'
          . 'window.dataLayer.push(' . wp_json_encode( $data ) . ');</script>';
   }

   Remarque : aucun nom, email ni téléphone dans ce code. Le { ecommerce: null } vide l'objet e-commerce précédent, comme recommandé par Google.

1. Déclencheurs › Nouveau
   DéclencheurÉvénement - purchase

   Type de déclencheurÉvénement personnalisé

   Nom de l'événementpurchase
2. Variables › Nouvelle › Variable de couche de données, nommée DLV - transaction_id, nom de la variable ecommerce.transaction_id. Elle sert à vérifier en mode Aperçu.
3. Balises › Nouvelle › Google Analytics › Événement GA4
   BaliseGA4 - purchase

   ID de mesureG-XXXXXXXXXX

   Nom de l'événementpurchase

   Plus de paramètres › E-commercecocher « Envoyer des données d'e-commerce », source : Couche de données

   DéclenchementÉvénement - purchase

   Pourquoi cette case : elle demande à GTM de reprendre automatiquement tout l'objet ecommerce du dataLayer (transaction_id, value, currency, items). Pas besoin de créer une variable par paramètre.

C'est la clé qui autorise n8n à écrire dans ton HubSpot. Sur les comptes HubSpot récents, les « applications privées » n'existent plus : on utilise une clé de service.

1. Crée un compte gratuit sur hubspot.com si ce n'est pas déjà fait, puis clique sur la roue dentée ⚙️ en haut à droite.
2. Dans le menu de gauche, ouvre Intégrations › Clés de service.

   

   Ne passe pas par « Applications privées » ni « Applications héritées » : sur un compte neuf, HubSpot affiche « Les applications héritées ne sont pas disponibles sur ce compte ».

   

3. Clique sur Créer une clé de service, en haut à droite.

   

4. Champ Nom : n8n atelier. Puis clique sur + Ajoutez un nouveau champ d'application.
5. Recherche contact et coche crm.objects.contacts.read et crm.objects.contacts.write. Efface, recherche deals et coche crm.objects.deals.read et crm.objects.deals.write. Clique sur Mettre à jour.

   

   

6. Clique sur Créer (bouton blanc en haut à droite), puis sur Copier à côté de la clé. Elle commence par pat-eu1-. Garde-la dans un bloc-notes.

   

Inutile de construire le workflow à la main : il est fourni prêt à l'emploi sous forme de texte JSON.

1. Clique sur Copier sur le bloc ci-dessous.
   Workflow n8n (JSON)Copier

   {
     "name": "Atelier - Commande WooCommerce vers HubSpot",
     "nodes": [
       {
         "parameters": {
           "httpMethod": "POST",
           "path": "woocommerce-commande-nom-prenom",
           "options": {}
         },
         "name": "Webhook - commande",
         "type": "n8n-nodes-base.webhook",
         "typeVersion": 2,
         "position": [0, 0],
         "webhookId": "7f3c2a10-5b8e-4d6a-9c41-2e7b1f0a8d55"
       },
       {
         "parameters": {
           "assignments": {
             "assignments": [
               { "id": "f1", "name": "email", "value": "={{ $json.body.billing.email }}", "type": "string" },
               { "id": "f2", "name": "prenom", "value": "={{ $json.body.billing.first_name }}", "type": "string" },
               { "id": "f3", "name": "nom", "value": "={{ $json.body.billing.last_name }}", "type": "string" },
               { "id": "f4", "name": "telephone", "value": "={{ $json.body.billing.phone }}", "type": "string" },
               { "id": "f5", "name": "numero", "value": "={{ $json.body.number }}", "type": "string" },
               { "id": "f6", "name": "montant", "value": "={{ Number($json.body.total) }}", "type": "number" },
               { "id": "f7", "name": "produits", "value": "={{ $json.body.line_items.map(i => i.quantity + ' x ' + i.name).join(', ') }}", "type": "string" }
             ]
           },
           "options": {}
         },
         "name": "Préparer",
         "type": "n8n-nodes-base.set",
         "typeVersion": 3.4,
         "position": [240, 0]
       },
       {
         "parameters": {
           "authentication": "appToken",
           "resource": "contact",
           "operation": "upsert",
           "email": "={{ $json.email }}",
           "additionalFields": {
             "firstName": "={{ $json.prenom }}",
             "lastName": "={{ $json.nom }}",
             "phoneNumber": "={{ $json.telephone }}"
           },
           "options": {}
         },
         "name": "HubSpot - Contact",
         "type": "n8n-nodes-base.hubspot",
         "typeVersion": 2,
         "position": [480, 0]
       },
       {
         "parameters": {
           "authentication": "appToken",
           "resource": "deal",
           "operation": "create",
           "stage": "appointmentscheduled",
           "additionalFields": {
             "dealName": "=Commande {{ $('Préparer').item.json.numero }}",
             "amount": "={{ $('Préparer').item.json.montant }}",
             "description": "={{ $('Préparer').item.json.produits }}",
             "associatedVids": "={{ $json.vid }}"
           }
         },
         "name": "HubSpot - Deal",
         "type": "n8n-nodes-base.hubspot",
         "typeVersion": 2,
         "position": [720, 0]
       }
     ],
     "connections": {
       "Webhook - commande": {
         "main": [[{ "node": "Préparer", "type": "main", "index": 0 }]]
       },
       "Préparer": {
         "main": [[{ "node": "HubSpot - Contact", "type": "main", "index": 0 }]]
       },
       "HubSpot - Contact": {
         "main": [[{ "node": "HubSpot - Deal", "type": "main", "index": 0 }]]
       }
     },
     "settings": {}
   }

2. Dans n8n, crée un nouveau workflow, clique sur la zone vide du canevas et fais Ctrl+V (Cmd+V sur Mac). Les 4 nœuds apparaissent, déjà reliés.

   

3. Obligatoire : personnalise l'adresse de ton webhook. Double-clique sur Webhook - commande. Dans le champ Path, remplace woocommerce-commande-nom-prenom par ton nom et ton prénom, par exemple woocommerce-commande-bensalah-amira. Enregistre avec Cmd+S (Ctrl+S sur Windows).

   Pourquoi : toute la classe utilise le même serveur n8n. Si deux étudiants gardent le même chemin, leurs commandes se mélangent et n8n refuse de publier le second workflow. Règles d'écriture : minuscules, sans accents, sans espaces, avec des tirets entre les mots.

1. Double-clique sur HubSpot - Contact, puis clique sur Connect to HubSpot Service Key.

   

2. Colle ta clé pat-eu1-… dans Service Key, laisse « Allowed HTTP Request Domains » sur All, et clique sur Save.

   

3. Ouvre HubSpot - Deal. Le credential est déjà sélectionné, mais le champ Deal Stage Name or ID est en rouge.

   

4. Clique sur la flèche ⌄ du champ et choisis la première étape de ton pipeline. Si la liste s'affiche, c'est la preuve que la clé de service fonctionne.

   

5. Ferme le panneau et enregistre le workflow (Cmd+S). Les triangles rouges ont disparu.

Ne clique pas sur « Execute step » dans un nœud HubSpot : n8n essaierait d'exécuter le Webhook, qui attendrait une commande. Si le bouton tourne, arrête-le avec le petit carré ⬜.

1. Double-clique sur Webhook - commande. Reste sur l'onglet Test URL et clique sur l'adresse pour la copier. Elle doit se terminer par ton nom et prénom, par exemple https://n8n.wescaleup.tech/webhook-test/woocommerce-commande-bensalah-amira. La capture montre l'adresse du formateur.

   

Dans la version française de WooCommerce, les webhooks s'appellent Crochets Web.

1. Va dans WooCommerce › Réglages › Avancé › Crochets Web et clique sur Créer un nouveau crochet web.

   

2. Remplis le formulaire :
   Crochet webCommande vers n8n

   NomCommande vers n8n

   ÉtatActive

   SujetCommande créée

   URL de livraisonta Test URL copiée à l'étape 6 (elle finit par ton nom-prénom)

   Secretne touche pas

   Version de l'APIIntégration WP API REST v3

   

3. Clique sur Enregistrer le crochet web.

   

n8n n'écoute que pendant 2 minutes environ, et WooCommerce n'envoie pas le crochet web immédiatement. La méthode qui marche à coup sûr : préparer 3 onglets avant de lancer quoi que ce soit.

1. Onglet 1 : clique sur Execute workflow, en bas du canevas. Le Webhook attend.

   

2. Onglet 2 : valide la commande. Note son numéro.

   

3. Onglet 3 : actualise, tape webhook dans la recherche et clique sur Rechercher…. Sur la ligne woocommerce_deliver_webhook_async En attente, survole le nom et clique sur Exécuter.

   

4. Onglet 1 : les 4 nœuds passent au vert, avec « 1 item » entre chacun.

   

5. Dans HubSpot : Contacts, ouvre la fiche du client. Le panneau Transactions, à droite, affiche la commande.

   

Pourquoi tester en navigation privée : si tu es connecté à WordPress, la commande est pré-remplie avec le nom de ton compte administrateur. Dans notre test, elle est arrivée au nom du compte WordPress connecté, pas au nom saisi.

Jusqu'ici, le workflow ne marche que si tu cliques sur « Execute workflow ». En production, il traite chaque commande tout seul.

1. Dans Webhook - commande, clique sur l'onglet Production URL et copie l'adresse : /webhook/ au lieu de /webhook-test/, toujours avec ton nom-prénom à la fin.

   

2. Enregistre, puis clique sur Publish en haut à droite du canevas (sur les anciennes versions de n8n : l'interrupteur Inactive → Active).

   

3. Dans WooCommerce, ouvre ton crochet web, remplace l'URL de livraison par la Production URL et clique sur Enregistrer le crochet web. Plus d'erreur 404.

   

4. Passe une nouvelle commande sans toucher à n8n, attends environ une minute, puis ouvre l'onglet Executions du workflow : une exécution réussie apparaît.

Bonus : renomme les étapes du pipeline HubSpot pour l'e-commerce (par exemple « Commande reçue », « En préparation », « Livrée », « Annulée ») dans ⚙️ › Objets › Transactions › Pipelines. HubSpot garde les mêmes identifiants internes, donc le workflow continue de fonctionner. Le montant s'affiche en USD si la boutique et HubSpot sont réglés en dollars : tu peux passer en TND dans les réglages de HubSpot.