Détecter AdBlock avec jQuery… et bien plus encore !Publié le par dans Javascript et jQuery | Aucun commentaire »

Les outils AdBlock Plus et consorts connaissent un succès certain dans les bibliothèques d'extensions pour Google Chrome et Firefox. Pour les éditeurs de sites dont le modèle économique est basé sur la diffusion de bandeaux publicitaires, leur démocratisation est un véritable fléau. Car l'outil ne fait pas de distinction entre ceux qui respectent les bonnes pratiques et les money-sites de type MFA...

Grâce à javascript, il est possible de détecter assez facilement les visiteurs qui ont activé AdBlock. 2 solutions sont alors envisageables : diffuser un message d'information, ce qui peut être mal vécu, ou bien diffuser des publicités non détectables en injectant un code html classique... ce qui va cette fois-ci à l'encontre même du principe du bloqueur de publicité et peut froisser les plus fervents défenseurs du web libre.

Voici ce qui apparaît sur Scooter System avec ce javascript

Voici ce qui apparaît sur Scooter System avec ce javascript

Le code que je partage ci-dessous répond à ces deux cas de figures dans la mesure où le fonctionnement est identique. Mais il va un peu plus loin puisqu'il est capable de renseigner Google Analytics sur l'utilisation (ou non) d'AdBlock. Cela permet de connaître le pourcentage de visiteurs qui en sont équipés, et éventuellement d'étudier les différences entre le profil des 2 types d'utilisateurs (durée moyenne de visite, nombre de pages vues, etc.).

J'ai conçu ce code avec jQuery et Doubleclick for Publishers (DFP) que j'utilise tous deux sur Scooter System, mais cela fonctionne aussi avec du javascript natif et AdSense. Le principe est d'attendre le chargement complet de la page ($(window).load()) puis de vérifier si l'une des variables générée par le fichier javascript de la plateforme publicitaire existe ou non. Si ce n'est pas le cas, c'est que le fichier a été bloqué par AdBlock.

Il suffit ensuite d'injecter dans les éléments contenants le code html souhaité, à savoir une image de remplacement avec un disclaimer de type « Vous utilisez un plug-in anti-pub de type AdBlock. Merci de le désactiver sur notre site qui vit de la diffusion de publicités ». En y rajoutant un lien, rien ne vous empêche de diffuser une publicité générique à la place, mais je ne le recommande pas...

Notez que pour fonctionner, les contenants html (div ou span) doivent passer à travers les mailles du filet d'AdBlock. Il convient pour cela de leur donner un nom générique qui ne contient pas de mots clés de type "pub" ou "ads"... La dernière ligne du code (ici pour la version asynchrone d'Analytics) renvoie une variable personnalisée avec un statut true ou false. Et le tour est joué !

On peut ensuite afficher les résultats sous la forme de graphiques ou tableaux de statistiques

On peut ensuite afficher les résultats sous la forme de graphiques ou tableaux de statistiques

Voici sans plus attendre les quelques lignes de code javascript qui découlent de cette logique. C'est plutôt court :

$(window).load(function(){
if(typeof window.google_num_ad_slots=='undefined'){
$('.vivre728').append('<img src="/images/disclaimer728.png">');
$('.vivre300').append('<img src="/images/disclaimer300.png">');
_gaq.push(['_setCustomVar',2,'AdBlock','true',2]);
} else {
_gaq.push(['_setCustomVar',2,'AdBlock','false',2]);
}
});

J'utilise ce script depuis plus d'un an et cela a toujours fonctionné à merveille. Par chance, le secteur d'activité dans lequel je suis éditeur reste peu équipé. En comparaison avec mes 11% d'utilisateurs d'AdBlock, on peut atteindre les 50% dans le domaine de l'informatique. Autant dire que pour certains éditeurs, monitorer et analyser le comportement des utilisateurs de ce type d'outils est indispensable !



Boostez la visibilité de votre site d’e-commerce – SEOCamp Angers 2013Publié le par dans Référencement | Aucun commentaire »

Dans le cadre du SEOCamp d'Angers qui s'est tenu le samedi 1er juin 2013 à la Maison des Projets, je suis intervenu pour une conférence intitulée "Boostez la visibilité de votre site de e-commerce".

L'objectif de ma présentation n'était pas de proposer un guide ou un manuel des bonnes pratiques mais, au contraire, d'offrir une approche originale fondée sur l'expérimentation de différentes techniques et outils plus ou moins classiques.

J'ai notamment évoqué des sujets comme :

  • Les réseaux sociaux avec un focus particulier sur Pinterest ;
  • L'intégration des vidéos sur les fiches produits ;
  • L'utilisation des microdonnées et des Rich Snippets ;
  • La mise en place de blogs d'entreprise et/ou thématisés ;
  • L'organisation de concours et le relai sur les plateformes spécialisées ;
  • L'utilisation des codes promos associée à Facebook Offers et sur les sites spécialisés ;
  • La vente conjointe sur les places de marché (sans duplicate content) ;
  • Démarrer sur les comparateurs de prix avec LeGuide + Webmarchand ;
  • Les annonces produits (PLA) dans Google AdWords.

Voici quelques chiffres et idées à retenir :

  • Pinterest peut être très intéressant pour les activités où les produits peuvent être valorisés en photos (déco, mode, voyage...) ;
  • En optimisant les fiches produits et les images, on peut avoir jusqu'à 10% de visibilité dans Google images ;
  • Une fiche produit avec une vidéo, c'est une hausse du temps de lecture moyen d'environ 20% ;
  • Les Rich Snippets pour une fiche produit garantissent une hausse du taux de clic de 10 jusqu'à 30% ;
  • Il faut créer au moins un blog officiel et y associer des blogs hébergés gratuitement pour occuper les SERP ;
  • 2/3 des liens créés doivent être non-optimisés (url du site, cliquez ici...) ;
  • Un concours relayé sur les sites spécialisés peut booster la fréquentation jusqu'à 35% dans certains cas ;
  • Facebook Ads permet un ciblage ultra-précis de l'audience, ce qui est idéal en e-commerce ;
  • Créez un champ description spécifique aux marketplaces pour éviter les contenus dupliqués ;
  • Ne laissez jamais les paramètres par défaut dans vos campagnes AdWords : ciblez et temporisez.

Le Diaporama projeté :

SEO : Boostez la visibilité de votre site d'e-commerce ! par EroanBoyer

Merci à tous pour vos retours, à Olivier Bomard pour la photo et à l'association SEOCamp pour son travail de très grande qualité !



Du chargement conditionnel asynchrone avec jQuery 1.9 et 2.0Publié le par dans Javascript et jQuery | Aucun commentaire »

Si vous suivez le développement de la librairie jQuery, certainement avez-vous entendu parler de sa prochaine évolution majeure. En l'occurrence, l'équipe en charge du développement a choisi de travailler sur une V2 qui abandonne le support des navigateurs "oldIE" (versions 6, 7 et 8 d'Internet Explorer). Ils sont en effet responsables d'une partie du poids (conséquent) du fichier javascript, car ils nécessitent l'utilisation de fonctions spécifiques pour émuler ce qu'ils ne sont pas capables de gérer nativement.

jQuery 2.0 s'affranchit de ces contraintes et gagne en poids (environ 15%) et en rapidité d'exécution (moins de fonctions appelées pour un même résultat). Il reste 100% compatible avec tout ce qui fonctionne avec la branche 1.9 : scripts, plugins, jQuery UI, jQuery Mobile... Oui mais voilà, il met de côté un pourcentage de visiteurs (variable selon les pays et secteurs) qui continue à utiliser les vieux IE. La solution idéale est donc de charger les librairies selon le navigateur utilisé, et en asynchrone !

Je vous propose ci-dessous le fruit de mes réflexions et recherches. Ce script fait appel à head.js, que j'affectionne pour son loader asynchrone, mais qui nous sert ici également à détecter le navigateur et sa version. La "prise de poids" liée à l'utilisation de head.js (3.4 ko gzippé) est largement compensée par ses avantages : gain de 3 ko gzippé sur le fichier jQuery et chargement en asynchrone de la librairie et éventuellement ses plug-ins (consultez la documentation pour l'utiliser selon vos besoins).

<script src="https://github.com/headjs/headjs/raw/v0.99/dist/head.min.js"></script>
<script>
var jq_file=(head.browser.ie&&head.browser.version<9)?'jquery-1.9.1.min.js':'jquery-2.0.0b1.min.js';
head.js("http://code.jquery.com/"+jq_file, "http://www.votresite.com/js/vos_plugins.js");
</script>

Notez que nous chargeons les fichiers javascript depuis les sites ou cdn de leurs auteurs, dans leur version minifiée, et que jQuery 2.0.0 est toujours en version bêta 1. À vous d'adapter le code selon les besoins de votre site et l'existant. Vous pouvez voir ce code en fonctionnement sur Scooter System, qui tire largement profit des possibilités offertes par head.js. Vous pouvez tester son fonctionnement en utilisant le panneau développeur d'Internet Explorer 9 et son outil de compatibilité. Et ça marche ;)



HTML5 et le SEO – SEOCamp Nantes 2012Publié le par dans HTML 5, Référencement | 14 commentaires »

Dans le cadre du SEOCamp de Nantes 2012, j'ai été invité à intervenir sur le thème de "html5 et le SEO". J'y ai abordé plusieurs sujets relatifs au référencement dit "On-page" :

  • La syntaxe allégée de html5 ;
  • La rigueur syntaxique moindre avec 3 exemples précis ;
  • Le balisage sémantique et ses conséquences sur la structure des pages et le linking ;
  • Les attributs de liens rel=, notamment pour les "publisher" et "author" ;
  • Les rôles WAI-ARIA et l'accessibilité ;
  • Les microdonnées structurées et schema.org.

J'ai élargi en abordant les évolutions de l'algorithme de Google, avec la montée en puissance des nouvelles formes de recherche : localisée, personnalisée, en temps réel et sémantique. La conclusion est que, non content d'offrir un gain de visibilité immédiat dans les SERP, html5 permet d'anticiper les évolutions futures du SEO.

Je vous propose de retrouver le diaporama qui m'a servi de support, dans lequel vous trouverez les exemples, chiffres et liens présentés durant ma conférence. N'hésitez pas à laisser un commentaire ci-dessous pour compléter ou apporter votre point de vue sur la question, j'y répondrai avec plaisir ;)

HTML5 et le SEO : quelles opportunités ? par EroanBoyer

Merci à l'association SEOCamp pour cette belle journée, à l'école Epitech pour les locaux et à tous ceux avec qui j'ai pu échanger !



Le véhicule électrique léger en plein boom !Publié le par dans Personnel | Aucun commentaire »

Chers lecteurs, je reprends la plume sur mon blog après plusieurs mois de silence radio. Cette absence ne signifie pas que je n'ai pas eu l'occasion de travailler sur de nouveaux scripts ou techniques de référencement, mais plutôt que j'ai été très occupé. En effet, mes activités autour des véhicules électriques légers et de la trottinette électrique réclament de plus en plus d'investissement.

Ma boutique en ligne Elec'store rencontre un grand succès, grâce notamment à la vente de l'Egret One. Avec mon partenaire Vincent Bourdeau, nous avons pour mission de faire connaître le produit en France afin d'en développer les ventes. Un objectif que nous avons atteint grâce à un travail intense sur la toile : communiqués de presse, prêts aux blogueurs influents, reportages...

De mon côté, j'ai profité de la popularité de Scooter System pour publier un essai de l'Egret One, au sein duquel je livre en toute objectivité mes impressions sur la trottinette électrique. Au fil de mes découvertes et rencontres, je me suis pris de passion pour cette catégorie de véhicules. Pour aider à les populariser, j'ai même créé un guide du transporteur personnel électrique sur Scooter System.

Une trottinette électrique Go-Ped à Nantes

Non content de traiter de l'actualité du scooter de toutes les cylindrées, le site présente désormais également les nouveautés en matière de véhicules électriques urbains. Parmi les des derniers modèles présentés figurent 2 transporteurs gyroscopiques (comme le Segway) : le Ryno PT II et le Solowheel. Ce dernier ayant attiré mon attention, j'en ai commandé un dans le but de le tester ! Verdict à venir.

Pour concrétiser cette nouvelle passion, je me suis rapproché des associations les plus actives au niveau national et européen. J'ai ainsi adhéré à l'Avere France et à l'EME (Espace Mobilités Électriques) afin de participer aux salons, colloques et réunions auxquelles elles sont affiliées. Cela offre de nouvelles opportunités pour faire connaître et valoriser les véhicules électriques légers.

Grâce à ces associations et à de nouvelles rencontres, Elec'store participera en 2012 et 2013 à plusieurs événements. Dès septembre prochain, dans le cadre de l'opération Bougez malin, les parisiens pourront essayer l'Egret One sur le parvis de la Mairie ou sur les voies sur Berge. Puis, dans le cadre de Nantes capitale verte 2013, nous animerons la rubrique transports du site...

Nantes capitale verte européenne 2013

Autant dire que le projets sont nombreux ! Et encore, je ne vous ai pas parlé des rollers électriques SpnKix que je teste actuellement ou des futures trottinettes électriques à venir... en voilà un milieu en pleine effervescence !



10 astuces pour rendre vos sites plus performantsPublié le par dans Développement | Aucun commentaire »

Je vous propose de nous intéresser aujourd'hui à un thème qui a gagné en popularité avec la montée en puissance du trio html 5 / CSS3 / jQuery : les performances web. Je vais partager avec vous un ensemble de bonnes pratiques et de recommandations qui sont le fruit de mes lectures et expériences, la plupart ayant été testées puis mises en place sur la nouvelle version de mon site d'actualité Scooter System (lancée hier). Cet article est particulier dans le sens où j'ai opté pour une approche transversale, en traitant de plusieurs technologies et langages. De même, le gain de "performances" vendu à travers le titre de l'article peut être vérifié dans différents domaines : temps de chargement réduit, meilleure interactivité, optimisation pour le SEO... On y va ?

  1. Réduisez la taille du DOM (Document Object Model). J'entends par là la quantité de code html de vos pages, notamment entre les balises <body> et </body>. Évitez d'imbriquer un trop grand nombre d'éléments les uns dans les autres afin de conserver une profondeur moyenne inférieure à 8. C'est l'assurance d'un chargement rapide (pour le téléchargement puis les calculs de rendu), y compris sous les navigateurs anciens et les ordinateurs les moins puissants. C'est également un atout si vous utilisez des scripts manipulant le DOM avec des insertions (de type .append()) ou appels en Ajax. Testez vos pages avec des bookmarklets comme DOM Monster ou DOM Ninja.
  2. Limitez l'utilisation d'identifiants et classes sur vos balises. Utilisez des id pour les principales zones de votre page (#header, #main, #sidebar et #footer), puis des classes pour les sous-éléments (.search, .menu, .breadcrumb, .partenaires). Il n'est pas nécessaire d'attribuer de classes à des éléments qui se répètent. Dans le cadre d'un menu par exemple, mieux vaut qualifier le conteneur (<ul class="menu">) puis styler les enfants grâce au sélecteur descendant ou enfant (.menu>li). Cette méthode est un peu moins performante au niveau du temps de rendu (quoi qu'insignifiant), mais permet d'alléger le code source... et donc d'augmenter le poids des contenus (comme le 1er point). Or, il s'agit d'une bonne pratique en matière de SEO (moins de duplicate content lié aux parties "fixes" de la page).
  3. Réduisez la taille de votre fichier CSS à moins de 50 ko (non gzippé). Si c'est impossible, n'hésitez pas à "découper" votre fichier et à appeler certaines parties uniquement lorsque c'est nécessaire (mais en limitant le nombre de fichiers CSS à 2 maximum). Tirez profit de l'héritage CSS (dit "en cascade"), utilisez des sélecteurs courts, regroupez les éléments qui partagent plusieurs caractéristiques communes, évitez l'utilisation d'éléments encodés en base64, limitez l'utilisation des nouvelles structures CSS3 longues avec 5 préfixes différents (-moz, -webkit, -ms...) et en bout de course, utilisez un outil comme CleanCSS.
  4. Utilisez des sélecteurs CSS performants. Il faut privilégier les identifiants (#header), puis les classes (.menu), puis les tags (a), et enfin recourir aux sélecteurs composés. Pour ces derniers, l'idée est d'éviter les critères trop génériques à droite, car les moteurs de rendu CSS commencent leurs calculs par la fin. On aura ainsi tendance à préférer #header>.menu à #header>ul. Pour cibler un enfant, on essaiera d'utiliser dès que possible le sélecteur de descendance directe (#header>.menu) plutôt que celui de descendance générale (#header .menu). On évitera en outre l'utilisation du critère universel (*) et autres a:link ou input[type="text"]. Enfin, on n'associera pas de tag à un sélecteur d'identifiant ou de classe (pas de ul.menu, .menu suffit). Voici un bon article sur le sujet.
  5. Faites appel aux sprites CSS. Cela consiste à regrouper l'ensemble des images de votre charte graphique en une seule et même image, puis à cibler ses différentes zones en utilisant la propriété CSS background-position. Il existe des outils simples et bien pensés pour vous mâcher le travail, comme SpriteGen. Pour gagner en poids dans votre fichier CSS, vous pouvez faire un 1er appel à cette image pour l'ensemble des éléments concernés, puis cibler ensuite chaque espace à l'aide d'un background-position:0 -100px. Cette pratique est très appréciée par Google Page Speed et YSlow.
  6. Activez l'accélération matérielle sur les zones dynamiques faisant appel aux transitions, défilements et autres apparitions ou disparitions. Et cela qu'elles soient gérées en CSS3 ou en javascript. Cela permet de soulager le processeur en utilisant le GPU (l'unité graphique), et de faire disparaître d'éventuelles saccades ou lags sur les terminaux les moins puissants. L'activation se fait très simplement, en ajoutant la propriété transform:translateZ(0) à l'élément concerné dans votre fichier CSS.
  7. Appelez vos CSS en début d'entête. Pour être performants, vos fichiers CSS doivent être appelés le plus tôt possible, avant tout autre élément du <header>. Il ne faut surtout pas les appeler après un script ou, pire, dans le corps de la page. De même, il est impératif d'utiliser la structure <link rel="stylesheet" href="style.css" />, et surtout pas @import. Le rendu de la page pourra ainsi débuter dès que possible et sans "reflows" (recalcul du rendu d'une partie ou de la totalité de la page), pour une expérience utilisateur de qualité.
  8. Chargez vos javascript en asynchrone. Ce conseil est autant valable pour la librairie jQuery et ses plugins que pour les outils de recommandation sociale (Facebook, Twitter, Google+), votre Google Analytics et même vos publicités AdSense ou DFP (grâce à la nouvelle api Google Publisher Tag). Pour harmoniser et hiérarchiser le chargement de ces scripts, vous pouvez utiliser un loader asynchrone comme head.js. J'y ai systématiquement recours, et sa simplicité de mise en oeuvre n'a d'égal que sa stabilité et son universalité. Je vous invite à regarder le code source de Scooter System pour l'admirer à l'oeuvre, ou à (re)lire l'un de mes articles sur le sujet.
  9. Optimisez le fonctionnement de vos scripts, qu'ils utilisent jQuery, Prototype, Mootools ou du js pur. Privilégiez le lancement de vos scripts d'interaction après le chargement complet de la page ($(window).load(function()) plutôt qu'après celui du DOM ($(function()), sauf bien entendu pour vos menus. Tirez profit des fonctions les plus efficaces (de nombreux tests sont publiés sur jsPerf.com), utilisez des sélecteurs performants et spécifiez un contexte ($(".menu","#header")).
  10. Compressez tout ce qui peut l'être. C'est vrai pour le CSS et des outils comme CleanCSS le font très bien, mais ça l'est aussi pour le javascript (avec l'excellent  Javascript Compressor) et votre code html. Même si ce dernier est gzippé par votre serveur avant envoi (à configurer via le .htaccess si ce n'est pas le cas), à quoi bon charger des centaines d'espaces et de tabulations, qui seront inutiles pour vos visiteurs ? Prenez le temps de nettoyer le code de votre template et n'hésitez pas à utiliser php pour alléger des contenus stockés en base de données : str_replace("\t",'',str_replace("\n",'',$contenu));

En mettant en oeuvre l'ensemble de ces conseils (et quelques autres prodigués par les outils Page Speed et YSlow), vous obtiendrez un site rapide et performant sur toutes les plateformes fixes et mobiles, récentes ou plus anciennes. L'étape suivante dans la course à la performance peut être la mise en place d'un cdn de type media server, pour améliorer le temps de chargement des images... ;)



Boostez les performances de jQuery avec .on() et l’event delegationPublié le par dans Développement, Javascript et jQuery | 2 commentaires »

La version 1.7 de jQuery inaugure une nouvelle gestion des événements, que l'on peut désormais déclarer grâce à la fonction on(). Cette nouvelle structure est utilisable de façon classique de la même façon que bind(), ou bien avec un argument supplémentaire à la façon de delegate(). Son atout est sa polyvalence et sa simplicité de mise en place, mais pas seulement : elle permet d'accélérer considérablement la vitesse d'exécution de vos scripts (jusqu'à 100 fois). Un atout de taille pour offrir une expérience utilisateur de qualité au survol de vos menus et autres zones dynamiques !

Pour faire simple, l'event delegation avec on() permet de d'associer un événement à un élément parent de l'arborescence dom au lieu de l'associer individuellement à chacun des éléments concernés. Pour une liste, l'événement sera ainsi associé à la balise <ul>, et fonctionnera pour les <li> enfants. Le gros avantage de cette solution est qu'elle permet d'associer des événements à les éléments insérés dynamiquement dans le dom à l'aide de fonctions comme append() ou via des appels en Ajax. Je vous propose en exemple une version actualisée de mon astuce "Étendre la portée d’un lien avec Jquery" :

<script>
$(function(){
$("#liste_ul_contenante").on("mouseover","li",function(){
$(this).css("cursor","pointer").find("a").css("text-decoration","underline");
}).on("mouseout","li",function(){
$(this).find("a").css("text-decoration","none");
}).on("click","li",function(e){
document.location.href = $(this).find("a").attr("href");
e.preventDefault();
});
});
</script>

Utilisant personnellement ce type de fonctions dans mes développements, j'ai constaté un net gain en termes de fluidité lors du passage à cette nouvelle structure. Voilà un beau cadeau de la part des équipes de développement de jQuery ;)



Tracker les clics sur les liens sortants avec AnalyticsPublié le par dans Développement, Javascript et jQuery | 6 commentaires »

Google Analytics est l'outil d'Analytics le plus répandu dans la sphère des webmasters, quel que soit leur niveau. L'outil permet en effet de multiples approches, depuis la simple consultation des données de fréquentation jusqu'à la création d'entonnoirs de conversion extrêmement détaillés. Aujourd'hui, je vous propose de découvrir une fonctionnalité peu connue mais très intéressante de cet outil incontournable : le suivi des événements.

Grâce à cette "brique" de Google Analytics, vous allez être en mesure de réaliser un tracking des clics effectués sur les liens sortants de votre site. Ces données pourront ensuite être croisées avec d'autres, ce qui vous permettra par exemple de savoir quelles sources ou quelles requêtes de recherche génèrent le plus de clics sortants... Ces données peuvent s'avérer très précieuses, pour les sites d'affiliation notamment.

Pour réaliser le tracking des clics de façon transparente et sans bloquer ou ralentir le chargement des pages, je vous propose de réutiliser des techniques déjà expliquées sur mon blog précédemment, à savoir un mélange du loader head.js et de Jquery. Voici le code complet à insérer dans le header de votre page pour activer cette fonctionnalité, ce dernier étant à faire évoluer selon les besoins de votre propre site :

<script type="text/javascript" src="https://github.com/headjs/headjs/raw/v0.96/dist/head.load.min.js"></script>
<script type="text/javascript">
head.js("http://www.google-analytics.com/ga.js");
head.js("https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js");
head.ready(function(){
$("a[target="_blank"]").click(function(e){
_gaq.push(['_trackEvent','Clics sortants',this.href]);});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount','UA-XXXXXX-X']);
_gaq.push(['_trackPageview']);
</script>

Nous commençons par appeler le loader head.js, auquel nous demandons ensuite de charger Google Analytics et Jquery en asynchrone. Une fois les 2 scripts chargés, nous activons le tracking sur les liens dont la cible est _blank (nouvelle fenêtre). Rien ne vous empêche d'activer le tracking sur une classe particulière, voire sur tous les liens de vos pages si vous voulez être certain de ne rien laisser passer... mais cela prendra également en compte vos lien internes.

La dernière portion de code est liée à Google Analytics, et doit être personnalisée avec votre propre identifiant (UA-XXXXXX-X). Maintenant, un clic sur un lien sortant de vos pages sera détecté automatiquement par l'outil, de façon totalement transparente. Pour consulter ces données dans l'interface de Google Analytics, rien de plus simple : ça se passe dans Contenu > Événements > Principaux événements.

Vous y retrouverez un tableau avec une ligne "Clics sortants", qui correspond au libellé donné dans notre exemple, et une courbe de suivi au jour le jour. Vous avez également la possibilité d'aller plus loin en créant des tableaux personnalisés sur votre tableau de bord. Dans notre cas, nous avons par exemple croisé les requêtes de recherche avec le nombre de clics, ce qui nous permet d'orienter notre référencement vers les termes les plus rémunérateurs.

Tracking des clics dans Google Analytics

Analytics offrant des possibilités quasiment illimitées, sachez qu'il est également possible d'attribuer une valeur à chaque événement en ajoutant un argument supplémentaire à l'appel du _trackEvent. En indiquant le CPC ou la rémunération au formulaire dans un attribut de vos liens (ex : value=“1.25”), il est possible de le retourner à l'outil pour effectuer un suivi encore plus pointu de vos transformations. Ca vous a plu ? Faites tourner svp ;)



Réflexions sur la trottinette électriquePublié le par dans Personnel | 6 commentaires »

En tant qu'éditeur de Scooter System, cela fait plus de 10 ans que je m'intéresse au monde du deux-roues, avec un intérêt plus poussé pour l'univers du 50cm3. Durant ces nombreuses années, j'ai toujours beaucoup apprécié les découvertes de concept-scooters et autres prototypes, qui apportent un éclairage différent sur les problématiques de mobilité en ville. C'est d'ailleurs ce qui m'a poussé à créer un guide du scooter électrique, avant d'organiser 3 années de suite des Journées du Scooter Électrique dans le cadre de la Semaine du développement durable.

Il y a 2 mois, je me suis retrouvé dans une situation qui a nécessité que je repense totalement ma façon de me déplacer en ville. De nouvelles contraintes d'emploi du temps ont fait que j'ai du choisir entre les transports en communs, souvent bondés et en retard ou l'automobile, avec le risque de me retrouver bloqué dans les embouteillages aux heures de pointe. Après une réflexion intense qui m'a conduit à envisager le scooter, le vélo, les rollers et même la marche à pieds (sur 5 kilomètres tout de même), j'ai finalement trouvé une solution : la trottinette électrique.

Ce petit engin, léger mais autonome et rapide, est apparu comme la seule réponse pertinente au puzzle face auquel je me trouvais. Je me suis donc décidé à en acheter une, débutant une phase de recherche intense sur Internet. Voulant ce qu'il se fait de mieux en la matière, je me suis lancé dans la consultation de forums et blogs à la recherche de la perle rare. Au terme de cette phase de documentation de quelques jours, on m'a dirigé vers un modèle de 500 Watts vendu 550€, que l'on retrouve sur certains sites de vente en ligne et sur eBay sous différentes marques.

Tous ces modèles proviennent d'une même usine chinoise, qui produit en masse une dizaine de modèles de 500W à 1200W, avec plusieurs types de châssis. À la réception de la trottinette électrique, quelle ne fut pas ma déception en découvrant que j'étais tombé dans le panneau en achetant de la basse qualité... Les matériaux, la finition et le soin apporté à la fixation des accessoires m'ont rappelé les scooters chinois que l'on croise par centaines sur les salons professionnels, et qui ne méritent même pas qu'on s'y intéresse...

Après quelques jours d'utilisation, ma première impression s'est confirmée avec une dégradation rapide de la peinture, des parties métalliques qui rouillent à la moindre goutte d'eau et des faux-contacts récurrents au niveau du faisceau électrique. Autant dire que ce n'est pas ce à quoi je m'attendais. C'est en contactant le vendeur par téléphone que j'ai finalement découvert ce que je cherchais : "tout le monde n'est pas prêt à mettre 1500€ dans des Go-ped" m'a t-elle dit. "Peut-être", ai-je pensé, mais "merci pour le tuyau, je vais me renseigner sur cette marque".

C'est ce que je me suis empressé de faire ! En découvrant la gamme de trottinettes électriques de la Patmont Motor Werks, j'ai immédiatement constaté le fossé qualitatif qui la sépare de mon premier achat. Certes, ces modèles sont 2 à 5 fois plus coûteux, mais je sais par expérience qu'il est toujours plus intéressant d'investir dans du matériel de qualité, surtout quand on cherche la fiabilité. Ne souhaitant pas rester sur un échec, je me suis lancé à la recherche d'un revendeur Go-Ped sérieux, mais cela ne s'est pas avéré facile.

Trottinette électrique GoPed

S'il existe en effet des sites commercialisant les trottinettes électriques ESR et I-Ped de la marque, la plupart sont avant tout tournés vers les modèles thermiques, et n'ont aucune expertise particulière vis-à-vis de cette technologie. C'est là que je me suis entré dans une nouvelle phase de réflexion, en me disant que d'autres citadins devaient certainement, comme moi, chercher des véhicules électriques légers pour circuler en ville et que, comme moi, ils avaient des chances d'être mal aiguillés. Après de nouvelles recherches, j'ai compris qu'il y avait quelque chose à faire.

Mes compétence en développement de sites, mes connaissances dans le marché du deux-roues et mon intérêt pour les technologies propres aidant, je me suis décidé à lancer une boutique en ligne spécialisée dans la vente de véhicules électriques légers pour adultes. C'est ainsi qu'est né Elec'store. Aujourd'hui, la boutique est fonctionnelle et permet d'acheter les trottinettes électriques Go-Ped et MyWay, qui offrent toutes une expérience de qualité pour se déplacer en milieu urbain. Je propose également des pièces détachées et équipements afin d'être vraiment complet.

En me lançant dans l'aventure Go-Ped, j'ai finalement fait l'acquisition de la trottinette de mes rêves, que j'utilise au quotidien pour mes déplacements, et dont je ne me passerai plus, même en hiver. J'ai investi dans une belle veste moto et une paire de gants chauds, qui me permettent de braver la pluie et le froid. J'utilise également les phares de vélo et le casque Limar 635 que je vends sur Elec'store pour sécuriser mes trajets. J'ai publié un essai de mon ESR 1000 Hoverboard sur Scooter System, et aborderai régulièrement le sujet dans les semaines et mois à venir ;)

Aperçu du site Elec'store