e commerce - solutions techniques
TRANSCRIPT
E-commerceSolutions techniques
Jérôme Chambard
Mon parcours
Fondateur et Directeur de l’agence Eureos (webmarketing, Annecy) de 2006 à 2014.
Co-Propriétaire de Lampe Thellia(E-commerce, Seynod) de 2009 à 2014
Rédacteur du Dictionnaire du Web depuis 2010
Directeur Marketing chez ABB de 2008 à 2011.
Responsable Export chez Siemens de 2002 à 2008
En parlant tous la même langue
E-commerce
Site e-commerce
Plateforme e-commerce
Solution e-commerce
Hébergement
Coud / SaaS
Open Source / Commercial
M-commerce
Back-office / Front-office
Processus de commande / funnel
Au-delà des outils
Qu’est-ce qui fait la valeur d’un e-commerce ?
Marque
Catalogue produit
Relations fournisseurs et politique d’achat
Connaissance du marché (besoins, cycles, concurrents…)
Fichier client (au sens large) / Communauté
Chaine logistique
Visibilité en SEO
La solution e-commerce est l’outil qui permettra de mettre en musique l’ensemble de ces éléments.
Les éléments de base d’un site e-
commerce : front office
Fiche produit
Panier
Accueil
Navigation
Recherche
Pages de catégories (incl. Marques)
Processus de commande
Pages obligatoires : CGV, mentions légales, cookies
Les éléments de base d’un site e-
commerce : back office
Gestion des commandes
Gestion du catalogue
Gestion des clients
Organisation des catégories
Logistique, transport et taxes
Profil des acteurs du e-commerce
Pure Player (généralistes)
Pure Player (spécialisés)
Détaillants / distributeurs
Marques
B2B
Ventes privées (incl. shop in shop)
Des besoins différents selon les acteurs
Interconnexions
Fonctionnalités spécifiques
Shop in shop
Contrôle des stock locaux
Liaison avec le point de vente
Liaison avec l’ERP (Gestion du stock, ordre d’achat ou de fabrication…)
Volumétrie attendue
…
Les solutions pour le e-commerce
Développement « maison »
Solutions commerciales type WCS (IBM) et ATG (ORACLE)
Solutions open source type Magento, Prestashop et Woocommerce
Plateformes e-commerce en mode SaaS type Oxatis
Logiciels e-commerceParts de marché globale
Logiciels e-commerceParts de marché (top sites)
Logiciels e-commerceParts de marché (100 plus gros distributeurs aux USA)
Comparatif des solutions
Développement
« maison »
Solutions
commerciales
Solutions Open
Source
Plateformes e-
commerce
Cibles
principales
Leaders de la
distribution en
ligne.
Pure players,
Grandes
entreprises, B2B.
Pure players,
TPE/PME,
Marques.
TPE.
Points forts 100% sur mesure. Couverture
fonctionnelle,
interconnexions,
support.
Time to market,
coûts,
communauté.
Time to market,
all inclusive,
gérable seul.
Limites Nécessite des
compétences
internes.
Coûts
d’acquisition et de
fonctionnement.
Nécessite des
compétences
informatiques.
Restrictions liées
à la
mutualisation.
Exemples IBM Websphere,
ATG (Oracle),
Hybris (SAP)
Magento,
Prestashop,
Woocommerce
Oxatis,
Powerboutique
Développement « maison »
Réservé aux acteurs spécialisés avec des enjeux économiques majeurs.
Nécessite des équipes informatiques internalisées.
Réalisé à partir de spécifications détaillées.
Assimilable à un projet informatique.
Solutions commerciales
Solutions commerciales
Adapté aux projets de grandes envergures (>5MEUR C.A.)
Ticket d’entrée minimum de 150keur
Forces :
Interfaçage avec les autres SI de l’entreprise
Multicanal (i.e. gestion des stocks locaux)
Couverture fonctionnelle
Prise en compte du B to B
Support
Modèle économique : éditeur de logiciel (licence + développement)
Certains acteurs proposent également le mode SaaS
Solutions commercialeCas Ikea (Websphere)
IKEA (www.ikea.com) needed to consolidate their worldwide e-commerce
presence into a consistent, maintainable and scalable cost effective solution,
which supported a centralized solution with localized control. IBM deployed a
global e-commerce solution based on WebSphere Commerce, centrally
hosted in Sweden. Today IKEA sells online in +25 countries by tailoring products,
language, currency, shipping & tax rule to country-specific requirements while
maintaining consistent brand experience by sharing business and IT assets.
Solutions commercialeCas Audi (Websphere)
IBM helped Audi meet its B2B needs by migrating the client to IBM WebSphere
Commerce software. The client used the software's Extended Sites
functionality to create a generic B2B store template, which geograph
dispersed Audi business partners can now use to quickly customize their own
graphical user interfaces (GUIs).
Solutions Open Source
Solutions e-commerce Open Source
Leaders du marché : Magento (CE), Prestashop, Woocommerce (plugin
Wordpress).
Architecture PHP / MySQL.
Modèle économique :
Support
Développement spécifique
Modules d’extension
Hébergement (offre « cloud »)
Nécessite un hébergement, pas de limites à l’usage.
Plateformes e-commerce SaaSExemple : Oxatis
Plateformes e-commerce SaaS
Modèle économique :
Abonnement mensuel
Support & formation
Inconvénients :
Dépendance au fournisseur.
Limites à l’usage (nombre de produit, trafic…).
Evolutivité, performances et personnalisations limitées.
La nouvelle tendance : le mix CMS / E-
commerce
Permet de mixer des contenus
éditoriaux et du e-commerce :
Bonnes performances SEO
Très performant pour convertir
dans des domaines de
passionnés, ou avec une décision
d’achat complexe.
Back-office nécessairement
cohérent avec le CMS, pas
toujours optimum.
En résumé
En fonction du profil de l’e-commerçant et de la taille du projet, on choisira
l’une ou l’autre solution technique.
La grande majorité des e-commerces (en nombre) sont réalisés avec des
solutions Open Source.
Dans les grandes lignes, le fonctionnement des solutions e-commerce suit
une logique assez uniforme.
Solutions e-commerceInstallation, hébergement et configuration
Plateformes e-commerce SaaSCréer sa boutique avec Oxatis
Plateformes e-commerce SaaSCréer sa boutique avec Oxatis
Solutions e-commerce Open SourceCréer sa boutique : choix d’un hébergement
4 types d’hébergement :
In-house
Dédié
Mutualisé
Instances virtuelles (cloud)
Les options utiles :
CDN (Content Delivery Network)
Cache serveur (type Varnish)
Base de données privées
IP Failover
Solutions e-commerce Open SourceCréer sa boutique : installation
Méthode 1 : DIY
Télécharger le fichiers
Placer les fichiers sur le serveur
Configurer la base de données
Effectuer les réglages nécessaires (php)
Lancer l’installation
Méthode 2 : les offres « one clic »
OVH
1&1
Infomaniak
Exemple : Prestashop chez OVH
Solutions e-commerce Open SourceThèmes
Les thèmes gratuits
Les marketplaces spécialisées dans les thèmes
Au delà de l’apparence graphique
Attention aux pièges
Exemple : http://themeforest.net
Faire un thème soi-même
From scratch à partir du fichier du graphiste
En modifiant un thème existant
Avec un outil qui transforme la maquette en thème
Avec un framework
Création et installation d’un thème
Vocabulaire des thèmes
Layout
Widget
Sample data
Solutions e-commerce Open SourcePlugins
Le plugins gratuits
Les marketplaces spécialisées de plugins (ex. code canyon)
Les plugins sur mesure
Les besoins fréquents :
Liaison avec les marketplaces
SEO
Mega Menus
Modules de paiement
Modules des transporteurs
Plugins : exemple de Wordpress SEO
Configuration générale
Multi-boutiques (langues, pays, types de produit)
Gestion des domaines, des extensions et des sous-domaines
Adresse du back office
Informations générales
Pages et mentions obligatoires (CMS ou guidé) :
CGV
Mentions légales
Politique de gestion des cookies et message d’avertissement CNIL
Solutions e-commerceCatalogue produit
Typologie des produits
Simple
Groupé
Variable / Configurable
Virtuel
Bundle
Téléchargeable
Chaque produit, groupe ou variation possède sa propre référence (SKU, Stock KeepingUnit)
Fiche produit
Fiche produit
Fiche produit : design
Fiche produit : photo(s) produit
L’importance des photos est variable d’un secteur d’activité à l’autre.
Les règles de base :
Optimisation de la taille de l’image, possibilité de zoomer.
Fond blanc.
Le référencement des images : nommage des fichiers, métadonnées,
attribut alt, titre et légendes.
Fiche produit : descriptif &
métadonnées
Unicité
Contenu
Orthographe / grammaire
Diversité sémantique
Précision
Et le SEO ?
Diversification du vocabulaire (analyse sémantique latente)
Longue traine
« Propreté » du code
Saisie des produits : Oxatis
Saisie des produits : Prestashop
Saisie des fiches produit
Réalisé avec des champs et/ou des blocs de texte par éditeur WYSIWIG.
La connaissance du html n’est pas inutile pour produire un descriptif « SEO-
friendly » :
Utilisation correcte des titres et sous-titres.
Utilisation de mises en pages en colonne sans tableaux.
Limitation des effets sapin de noël.
Fiche produit : attributs et variantes
Un produit peut avoir un ou plusieurs attributs spécifiques :
Couleur
Modèle
Caractéristique technique
…
Les attributs sont utilisés pour catégoriser et filtrer les produits.
Les variantes consistent à considérer comme 2 articles distincts un produit
avec un ensemble d’attributs et le même produit ayant d’autres attributs.
Les variantes correspondent à un prix, un traitement ou un stockage distinct.
Exemple : taille, couleur…
Fiche produit : attributs et variantes
Création des variations produitWoocommerce : étape 1, création des attributs
Création des variations produitWoocommerce : étape 2, création des variations
Fiche produit : stock et disponibilité
Un produit peut être :
Indisponible
Disponible sur commande
En drop shipping
En stock
Surtout sur le web, la disponibilité d’un produit est essentielle.
Pages de catégories
Les filtres : exemple avec Websphere
Pages de catégories
Les pages de catégories sont importantes pour :
Le SEO : elles agrègent du contenu cohérent
L’utilisateur : elles doivent guider l’utilisateur à l’aide des filtres.
Solutions e-commerceEléments de rassurance
Mentions légales et CGV
Retour gratuit
Paiement sécurisé
Langage (orthographe, syntaxe, grammaire)
Guides de choix
Garanties
Avis clients / notation produit
Informations de contact
Design
Solutions e-commerceEléments de rassurance
Avis client
Avis issus de plateformes tiers :
Avis sur la boutique
Avis sur le produit
Avis sur son propre site :
Gérés par soi
Certifiés par un tiers
Possibilité de les mettre en avant en SEO
Avis clients en SEO
Avis clients gérés par des tiers de
confiance
Solutions e-commercePage d’accueil, mega menus et moteur de recherche intégré
Page d’accueil
De moins en moins consultée…
Consiste généralement à mettre
en avant les offres en cours.
La fin des « sliders »
Mega Menus
Mega Menus
Moteur de recherche intégré
Solutions e-commerceQuelques considérations SEO
E-commerce et SEO
Spécificités du SEO en e-commerce :
Les snippets sont différents : avis client, prix, stock…
Le duplicate content est plus difficile à gérer à cause des variations produit.
Il est fréquent de voir des e-commerçant utiliser les descriptifs produit des fabricants, ce qui est une erreur.
Les commentaires clients sont des éléments SEO.
L’analyse des recherches clients est déterminante pour savoir comment libeller les produits (pattern de titre et d’url).
Les pages catégories doivent être soignées.
Bien souvent, l’usage d’un module SEO est recommandé.
Solutions e-commerceAutres outils Marketing
Autres outils Marketing
Promotions
Produits suggérés, associés ou consultés par d’autres
Newsletter
Marketing automation
Boutiques sociales
Marketplace
Retargeting
Solutions e-commerceConversion et Processus de Commande
Taux de conversion du e-commerceSource : Capitaine Commerce, 2014
Entonnoir de conversion global
10 000 visiteurs
60% entrent dans la partie marchande
30% mettent un produit au panier
3% vont au bout de l’achat
Taux de conversion = 0,54%
L’ajout au panier
Le funnel de commande (chekout
funnel)
Panier
• Call to Action : commander
Identification
• Client existant
• Création de compte
• Commande sans compte
Livraison
• Optionnel : facturation
Récapitulatif
• Paiement intégré ou externe
La page récapitulative du panierL’étape 1 du funnel
Identification
La commande sans compte
Livraison
Frais de port
Selon les systèmes et l’activité, les frais de port sont calculés selon :
Une base forfaitaire
Le poids des articles
Le pays de destination
Les dimensions du colis
Le degrés d’urgence souhaité par le client
43% des internautes abandonnent leur panier à cause de frais de port
étonnamment élevés et découverts trop tard dans le parcours d’achat
(Source : Journal du Net).
Le concept de « distraction free »
Récapitulatif de commande
Calcul des Taxes
La gestion des taxes est parfois complexe :
TVA au taux normal ou réduit
Exonération à l’export
Facturation spéciale pour les entreprises
Eco-taxe
Taxes locales aux US
Assiette de calcul (exemple : transport)
Base du calcul (adresse de livraison ? Adresse de facturation ?)
Paiement
Les paiements sont validés par des opérateurs tiers, mais peuvent être
intégrées dans la pages de commande du marchand.
Les plateformes des banques :
Paybox (Crédit Agricole)
ATOS SIPS (SG, BNP, LCL, Banque Postale…)
Cyberplus et SP Plus (Caisse d’Epargne, Banques Populaires)
CM-CIC (CIC)
Les opérateurs indépendants des banques :
Ogone
Paypal
Processus de paiement (3D Secure)
Plateforme tiersOgone
Frais pour le marchand
Contrat VAD avec la banque
Mise en place
Forfait mensuel
Commission ou frais fixe sur les ventes
Frais liés à l’achat d’un éventuel module tiers.
Frais liés à la plateforme de paiement, si différente de la solution de la
banque.
Un petit rappel
Nous le verrons dans la sécurité
du SI, un site marchand peut
proposer un paiement sécurisé
sans utiliser lui-même le protocole
https.
La présence des logos Visa et
MasterCard sur un site ne sont en
aucun cas une garantie de
sécurité et/ou de sérieux. Cf le
mauvais conseil ci-contre…
Solutions e-commerceBack-office
Back office : gestion des commandes
Back office : gestion des clients
Back office : gestion du catalogue
Facile quand on a 50 produits
Très complexe ensuite
Nécessité d’avoir des outils de gestion de masse :
Promotions sur une catégorie de produit
Changement des conditions de livraison
Evolution des taxes
…
Pour résumer
4 types de solutions techniques
4 types d’hébergement
Thèmes et structure template / données
Plugins
Typologie et gestion des produits
Eléments de rassurance
Processus de commande
Paiement
M-commerceLes bases
M-commerce
Trois solutions :
Application mobile
Site mobile
Responsive design
Responsive design
Responsive design
Utilise la taille de la fenêtre du navigateur, quel
que soit l’appareil utilisé.
Essentiellement basé sur des instructions
conditionnelles dans les CSS.
Même nom de domaine.
La version mobile est aussi « lourde » que la
version desktop.
La maintenance n’est pas aisée.
Site mobile
Utilise le « user agent », c’est-à-dire le type
d’appareil utilisé.
Basé sur un design dédié (c’est-à-dire un
thème spécifique) totalement optimisé pour les
mobiles.
Le nom de domaine peut être différent.
L’utilisateur peut basculer sur la version
desktop, son choix est enregistré via un cookie.
Application mobile
S’exécute sur la machine locale, et fait appel
à une API pour accéder à la base de données
des produits.
Les problèmes de performances liés à
l’interface sont différents.
Permet un accès total aux données de
l’utilisateur.
Permet des fonctionnalités supplémentaires :
localisation, one-clic-payment, etc.
Profiling client
Profiling et identification des visiteurs
Profiling et identification des visiteurs
Méthodes
L’identification par l’utilisateur
Les cookies :
Nécessitent l’autorisation de l’utilisateur.
L’utilisateur peut y accéder.
Canvas fingerprinting
N’effectue aucune action côté utilisateur.
Les données sont stockées sur un serveur.
Nécessite des navigateurs récents (utilisation de HTML 5)
Le tracking des e-mails
Applications
Happy Hours : on sait tout sur l’utilisateur.
Gestion de l’e-mailing
Emailing transactionnel vs emailing promotionnel
Délivrabilité
Segmentation
Mesure des performances
Transactionnel vs Marketing
Délivrabilité
Envoyer des e-mails en masse sans moyens techniques spécifiques est
risqué.
Certificats d’authentification : SPF, DKIM & Domain Keys.
Gestion des cadences.
Code « propre ».
Double Opt-in.
Gestion des signalements et des désinscriptions.
Segmentation
Drip campaign
Reporting général
Reporting individuel
Solutions e-commerceInterconnexions
Interconnexion
Types de liaisons :
Statistiques
Tag Management
Places de marché
Comparateurs de prix
Application mobile
Réseaux sociaux
ERP
Plateforme logistique
Comptabilité
Les différents types d’interconnexions
D’une manière générale, ce sont les modules d’extension qui vont gérer les
liaisons avec des systèmes tiers.
Les moyens techniques :
Webservices & APIs : pour communiquer en temps réel avec une autre
application (état des stocks, newsletter, application mobile…)
Flux : utilisés pour exporter les catalogues produit
Scripts côté navigateur : tag management & webanalytics
Export / import manuels : comptabilité
Partage de base de donnée (rare)
Interconnexion : webservices et API
Permettent d’interagir entre deux
systèmes hétérogènes en temps
réel.
Exemples d’utilisation :
Mise à jour du stock après une
vente sur une place de marché.
Suivi de l’état d’une expédition
avec un module transporteur.
Ajout d’un utilisateur à une liste de
diffusion.
Information sur la disponibilité
d’un produit.
Interconnexions : flux produits
Export du catalogue vers :
Les places de marché.
Les comparateurs de prix.
Les affiliés.
D’autres partenaires.
Formats :
XML
Texte avec séparateur
Utilisé quand la notion de temps réel n’est pas indispensable. Exemple : Google Merchant
Interconnexions : script côté
navigateur
Gestionnaire de tags
Outils de webanalytics
Widgets des réseaux sociaux
Export / imports manuels
Utilisé quand une synchro automatique est impossible ou « dangereuse ».
Exemple :
Export pour le comptable
Import / Export des données produit depuis un logiciel de caisse
Places de marché
Amazon, Ebay, Rue du Commerce, Cdiscount, etc.
Commande sur le site d’Amazon => synchro nécessaire, nécessite flux et
webservices.
Rémunération au % du C.A.
Google Merchant
Commande sur le site du marchand => un simple flux, même temporairement
erroné, suffit.
Rémunération au CPC
Comparateurs de prix : fonctionnement similaire à Google Merchant, avec
également des facturations au forfait.
Synchro Magento / Amazon
Google Shopping : rendu utilisateur
Google shopping : flux xml
Google Merchant : importation
Google Merchant : Plugins
E-commerce & WebanalyticsSuivi du e-commerce
E-commerce & WebanalyticsVentilation du C.A. par source
E-commerce & WebanalyticsConfiguration des évènements
E-commerce & WebanalyticsEntonnoir de conversion
Tag Management
E-commerce et réseaux sociaux
Les boutons de partage
Exemple de badge Google+ :
<script type="text/javascript« src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>
Les cartes Twitter
Les boutiques Facebook
Boutique Facebook à partir de
Magento
Performances des sites e-commerceObjectif 3 secondes (desktop) / 5 secondes (mobile)
Vitesse :
Capacité du serveur
Cache
Taille des images
Optimisation du code
CDN
Capacité en charge :
Cache
Capacité du serveur
Disponibilité
CDN
Réservé aux sites à fort trafic ( >> 1000 visiteurs par jour)
Améliore la vitesse de chargement des pages mais pose des problèmes en
SEO des images.
http://www.ovh.com/fr/images/videos/cdn.xml
Cache (Varnish)
Optimisation du code
Compression
CSS et JS inline
Minification
Utilisation de scripts asynchrones
Taille des images
Objectif : 70kb
Taille (px) & Qualité (compression)
Les formats :
JPG (photos)
PNG (variable)
GIF (vignettes et icones)
A ne pas faire : mettre une image de grande taille, et la redimensionner
par le code
Vignettes
Exemple d’outil : Gimp
Optimisation pour les mobiles
Réduction des images
Simplification de l’interface et du code
Adaptation des scripts
Performances des e-commerceBoite à outils
Google Page Speed : https://developers.google.com/speed/pagespeed/insights/
Temps de chargement côté serveur : https://www.google.fr/webmasters/
Temps de chargement utilisateurs : Google Analytics
Performances des e-commerceBoite à outils
Sécurité
Que faut-il protéger ?
Quels sont les risques encourus ?
Quelles sont les mesures élémentaires de protection ?
Les données à protéger
Les données client en transit
Les données clients stockées
Les données du e-commerce (base de données)
Les données du e-commerce (filesystem)
Protéger les données clientsEn transit
A chaque envoi de formulaire non sécurisé, des données se promènent en
clair.
Protéger les données clientsDonnées stockées
Fichier client (= données personnelles)
Généralement stockés dans la base de données de la solution e-commerce.
Données bancaires
Généralement stockées chez les prestataires de paiement.
Risques : responsabilité vis-à-vis des tiers (le propriétaire des données est
censé mettre en œuvre les moyens de mes protéger).
Protéger les données du e-commerce
Données produit confidentielles : fournisseur, prix d’achat…
Données relatives au business : volume des ventes, meilleurs produits…
Insertion de liens malveillants, destruction d’enregistrements de la base…
Ces données sont contenus dans une base de données.
Risques : impact sur le business.
Protection des fichiers du site
Redirections frauduleuses.
Hacking militant.
Mouchards.
Relais de spam.
Risques :
impact sur le business.
Pas toujours visible imméiatement.
Les mesures à prendre
Mises à jour
Cacher les informations d’identification du générateur
Sécurité des e-mails envoyés
Cryptage des données stockées
Généralisation de SSL
Backup
Rotation et choix des MdP
Filtrage des requêtes
Protéger son accès BO
Protéger son hébergement
Exploitation des failles
Faille : http://blog.wixiweb.fr/faille-securite-prestashop-smarty/
Les cibles
Voir le code source : Firebug
Exploitation des failles
Certificats SSL
Deux rôles :
Cryptage
Niveau de chiffrement
Identification
Domaine
Entreprise
Tous les certificats SSL ne se valent pas
http://onlinebusiness.volusion.com/articles/5-things-you-should-know-
before-buying-an-ssl-certificate-two-minute-tuesdays/
Sécurisation des emails
Backup
Quoi :
Fichiers
Base de données
Système (snapshot)
Quand (période) ?
Combien ?
Où ?
Même serveur
Autre serveur sur le même compte hébergeur
Autre serveur chez un autre prestataire
Localement
Se protéger des injections
Filtrage des url
Blocage sur erreurs 404
Protéger l’accès à son BO
Changer l’url d’accès
Bloquer les tentatives infructueuses
Filtrer les IPs
Donner les droits strictement nécessaires à chaque utilisateur
Protéger l’accès à son hébergement
Droits de fichiers
Double authentification :
SMS
OTP (exemple : https://www.gandi.net/login)
Alertes e-mail de connexion
Mots de passe robustes
E-commerceSolutions techniques
Jérôme Chambard