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

Pinterest

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