Mettre en place Google Tag Manager avec Tarte au citron

Comme vous le savez, Google Analytics dépose un cookie sur le navigateur de vos internautes pour recueillir leurs données de navigation.
Pour être en conformité avec la loi, il est obligatoire d’informer les internautes et de recueillir leur consentement avant l’insertion de ces cookies.

Pour ceux qui ne connaissent pas Tarte au citron, il s’agit d’un petit script JS qui demande l’accord à l’utilisateur avant de déposer des cookies.

Pour l’installer, vous pouvez vous rendre ici.

Une fois tarte au citron installé, voici comment mettre en place Google Tag Manager.

Insérer le code ci-dessous, en bas de votre page en remplaçant GTM-XXXX par votre identifiant Google Tag Manager.

Rien de plus à faire ici, tout le reste se passera maintenant dans Google Tag Manager lorsque vous souhaiterez mettre en place des tags, comme Google Analytics.

Ridiculously Responsive Social Sharing Buttons

Ridiculously Responsive Social Sharing Buttons est un plugin javascript permettant d’ajouter des liens de partages vers différents réseaux sociaux.

Parmi tout les plugins existant celle-ci comporte plusieurs avantage :

  • il est responsive
  • il est gratuite
  • il possède de nombreux réseaux sociaux de base
  • il est facile d’utilisation

Utilisation

Pour ce qui est de l’utilisation il suffit d’ajouter le fichier css « rrssb.css » dans notre projet et de copier la balise <link> suivante dans notre header :

Ensuite il suffit de choisir les réseaux que l’on souhaite ajouter, en copiant les li correspondant présent dans le fichier index.html.

Et enfin il est nécessaire de copier les lignes de JS suivante est de copier le fichier rrssb.min.js dans notre projet. (Si Jquery est déja présent dans notre projet la première ligne est optionnel)

Voilà maintenant que nos boutons sont disponible il suffit de changer les liens dans chaque li par le liens que vous voulez partager.

Si jamais vous n’aimer pas faire d’effort inutilement voici un morceau de JS qui permet de remplacer  les liens automatiquement.

source :

git hub

demo

Les balises meta Twitter cards

Aujourd’hui, comme chacun le sait, l’utilisation des réseaux sociaux pour communiquer et échanger de l’information est devenue quasiment incontournable.

Dès lors que l’on utilise ces moyens de communication, le choix de la présentation de l’information devient essentiel afin que celle-ci soit la plus percutante et pertinente pour l’internaute.

Dans cet article, il sera question uniquement du réseau social Twitter et de son système de Cards.

Les Twitter Cards, Késako ?

Twitter propose aux développeurs d’intégrer dans leur code, des balises méta afin d’indiquer au réseau social quelles informations il devra afficher dans le flux d’actualités de ses utilisateurs.

Prenons un exemple simple d’une page web sans méta twitter spécifié, que l’on souhaite partager sur le réseau social. On copie donc l’url de la page concernée dans un tweet et voici le résultat qui s’affiche dans le flux d’actualités.

Balises meta twitter cards

Vous avouerez que la présentation de l’information laisse à désirer et nécessite un petit relooking pour rendre l’information plus intéressante et attractive. C’est à ce moment que les méta Twitter rentrent en action. Après l’ajout de quelques balises, voici maintenant le résultat sur le fil d’actualités.

Balises meta twitter cards

C’est tout de suite plus sympathique, n’est-ce pas ?

Intégrer les méta Twitter

Twitter propose différents types de présentation appelées « Carte ».
Dans cet article, il ne sera question que de la carte « Summary ou Summary Large Image ». Pour les autres, vous pouvez vous référer à la documentation officielle que vous pouvez trouver ici.

Exemple: La carte « Summary ou Summary Large Image »

Il s’agit de la carte (présentation) la plus basique qui existe et qui est idéale pour afficher un titre, un résumé, une image (plus ou moins grande). C’est ce type de carte qui a été utilisé pour l’exemple que vous avez pu voir plus haut.

Voici comment intégrer les balises.

Pour commencer, il faut indiquer le type de carte à utiliser, ici summary.

Ensuite, il est possible de préciser les autres informations.

Le titre

L’adresse url

Une description

Mais aussi, une image en indiquant l’adresse de cette image.

Et voilà, le tour est joué.

Lien intéressant : https://css-tricks.com/essential-meta-tags-social-media/

Piwik, où sont mes visiteurs uniques ?

Si vous utilisez Piwik, vous pouvez avoir du mal à trouver l’endroit où est inscrit le nombre de visiteurs uniques et même vous vous dites je suis sûr je l’ai vu quelque part un jour et maintenant je ne le vois plus.

Bah en fait, c’est normal. Par défaut Piwik ne vous donne vos visiteurs uniques que si la période est jour, semaine ou mois mais pas pour l’année ni une plage de dates personnalisées. Cette statistique se situe dans Visteurs -> Récapitulatifs.

Ok, mais comment je fais moi je le veux pour l’année. 2 solutions, la solution du pauvre tu compiles mois par mois, c’est bon il n’y en a que 12.

Pas cool ok, alors étudions déjà pourquoi Piwik a une telle configuration par défaut. D’après la doc officielle, c’est pour des raisons de performances car cette statistique provient des tables de logs qui peuvent être importante sur une année ou une plage de date et réalisée cette stat peut mettre beaucoup de temps. Ok, mais moi j’ai un petit site pas trop de visite donc je suis prêt à attendre pour avoir cette stat. Ok, donc toujours d’après la doc officielle il suffit d’aller dans votre fichier de configuration (dossier_root_de_piwik/config/config.ini.php) et ajoutez les lignes suivantes :


enable_processing_unique_visitors_day = 1
enable_processing_unique_visitors_week = 1
enable_processing_unique_visitors_month = 1
enable_processing_unique_visitors_year = 1
enable_processing_unique_visitors_range = 1

Et voilà,vous avez vos visiteurs uniques de calculés pour tous les types de périodes possibles accessibles dans Visiteurs -> Récapitulatifs.

Juste un petit point important faites bien attention à ne pas vider en automatique vos tables de logs trop rapidement au vue de vos besoin. C’est configurable dans Votre compte -> paramètres -> vie privée -> Supprimer les journaux et rapports des anciens visiteurs et les 2 configurations doivent être à non si vous souhaitez conserver tous l’historique et donc les visiteurs uniques.

Enjoy 😉

Images, RWD & SEO : comment charger le fichier adéquat ?

Les développeurs web doivent faire face à l’évolution permanente des technologies qui les entourent. Nous devons concevoir des sites qui s’adaptent à tous les terminaux (et plus uniquement à des écrans d’ordinateurs) et qui soient performants non seulement pour l’utilisateur mais aussi pour le référencement (SEO).

On conçoit donc des sites « responsifs » pour gérer l’affichage et rendre l’expérience utilisateur idéale en fonction du terminal utilisé (mobile, tablette, pc). Il est également conseillé d’optimiser le temps de chargement des pages, de réduire le nombre de requêtes HTTP, et de compresser nos différents fichiers en faisant un passage obligatoire sur les images.

Comment récupérer et afficher la bonne image en fonction du terminal ?

Etude de cas : sur notre site responsif www.mon-site.com nous avons une image sur le bandeau d’accueil qui fait 1200x500px pour 195ko. Pour l’afficher, un simple code comme celui-ci suffit :

Pour harmoniser l’affichage sur les différents terminaux on peut attribuer une taille fixe en fonction du breakpoint dans lequel on se trouve (par ex 800×500 pour les tablettes, et 320×135 pour les mobiles).

Problème : sur un mobile, nous n’avons pas besoin de charger une grosse image HD de 1200×500 (ça prend du temps, c’est mauvais pour l’UX et Google n’aime pas trop ça d’après son outil PageSpeed). Il nous faudrait dans l’idéal la même image en 320×135. Du coup comment dire à notre html de charger notre image dans la bonne taille ?

On prend notre image, on la retaille dans les 3 formats désirés, ce qui nous donne les trois fichiers suivants :

> bandeau_accueil_large.jpg (1200x500px – 195ko)
> bandeau_accueil_medium.jpg (800x500px – 95ko)
> bandeau_accueil_small.jpg (320x135px – 13ko)

Premier constat, outre la diminution de la taille en pixels, on divise par 14 le poids de notre image « small ». C’est déjà une bonne nouvelle. Maintenant on va se pencher sur la partie HTML, auparavant on avait un simple appel standard. Désormais on va utiliser la balise HTML5 <picture> pour lui spécifier plusieurs sources.

En voici la syntaxe :

On ajoute une source par taille en spécifiant le chemin adéquat pour chaque image mais aussi sur quel breakpoint on souhaite que cela charge (media). On rajoute également un <img> pour spécifier l’image par défaut si le navigateur ne parvient pas à manipuler ou charger les sources du dessus. Dans notre cas on souhaite que par défaut il s’agisse de l’image la plus grande.

Peut-on utiliser la balise HTML5 <picture> sur n’importe quel navigateur ?

La réponse est non ! Petit détour sur Can I Use concernant notre balise <picture> qui n’est encore que très partiellement compatible. Pour remédier à ce problème nous avons opté pour le polyfill picturefill (plugin javascript) qui va faire en sorte que les notions HTML5 comme picture, srcset sizes, etc… fonctionnent sur les navigateurs anciens. Il suffit de rajouter l’appel au script juste en bas de notre page.

Le résultat ?

Nous obtenons désormais un temps de chargement meilleur sur nos tablettes / smartphones car les images sont plus rapides à charger (HTTP). De son côté PageSpeed ne nous demande plus d’optimiser notre image car elle a été compressée/optimisée et désormais nous est retournée sur le format adéquat.

D E M O (sur le site officiel picturefill)

Il sera intéréssant de suivre dans le temps l’évolution des différentes balises HTML5 et de la compatibilité sur les navigateurs. Il existe également de nombreuses solutions/syntaxes pour répondre à ce problème de chargement d’image en fonction du format, etc… Nous avons opté pour celle-ci car elle nous semblait la plus simple et la plus sûre dans le temps. Affaire à suivre.

Meta Facebook

Lorsqu’on met un lien « Partager » de Facebook sur une page html, il arrive parfois que ce ne soit pas les bonnes informations qui apparaissent sur l’encart Share…

encart-share

Nous allons donc étudier comment gérer les données utilisées par cet encart.

Tout d’abord, nous allons mettre un lien html simple qui permet de partager notre page :

/!\ Ce n’est pas un plugin Facebook et il n’y a pas de javascript d’utilisé.

Par défaut, si nous ne spécifions pas de meta données, Facebook va prendre dans la page html les informations suivantes :

  • pour le titre : meta title de la page (si présent)
  • pour la description : meta description (si présente, sinon du texte quelconque de la page)
  • pour l’image : une qui est présente sur la page

L’inconvénient, c’est qu’on risque d’avoir des informations qui ne nous conviennent pas : une image ne correspondant pas à notre information, un titre non significatif, une description trop courte…

Pour y remédier, nous allons insérer les balises meta de Facebook dans le <head> de notre page.

/!\ L’image doit avoir une taille minimale de 200*200px.

Avec ces meta, nous pouvons contrôler les informations affichées sur les encarts « Partager ».

Attention, quand même, lorsque vous faites une modification dans ces données, Facebook garde en cache les meta pendant 2-3 jours minimum (ou plus !). Pour pallier à ce souci, il faut vider le cache de Facebook grâce à un outil de debug :

https://developers.facebook.com/tools/debug/og/object/

Si après avoir tapé l’url du site, nous cliquons sur « Show existing scrape information », les données affichées vont être celles en cache… Pas très intéressant !

Donc, nous allons cliquer sur le bouton « Fetch new scrape information » et là… ce sont les nouvelles informations qui apparaissent. En réalité cette action vide le cache de Facebook.

Et en retournant sur notre lien « Partager », ce sont bien les nouvelles données qui apparaissent !

Lien intéressant : https://css-tricks.com/essential-meta-tags-social-media/

PageSpeed insight : analyse en ligne suffisante ?

PageSpeed Insights est un ensemble d’outils conçus par Google permettant d’optimiser les performances d’un site internet pour PC et mobiles. Cette famille d’outils se compose de modules pour analyser un site (diagnostic) et pour optimiser les performances de celui-ci.

Ces outils ne listent pas la totalité des choses à faire ou ne pas faire mais en donnent une bonne partie. Google vous recommande donc de suivre ses conseils mais cela ne veut pas dire que votre site sera parfait et irréprochable en respectant à la lettre ces derniers.

Dans notre cas l’analyse en ligne (diagnostic) nous retourne des indicateurs et des données très intéressante que nous nous devons de maitriser. Cela nous permet entre autre d’adopter de bonnes pratiques de développement pour réduire le temps de chargement d’une page, compresser nos images et nos différents fichiers (css, js), et de réduire le temps de chargement de nos pages (problème majeur pris en compte depuis l’arrivée des mobiles qui surfent via des petites connexions 3G).

Nous nous chargeons donc d’optimiser manuellement notre code source en fonction des retours pour coller au mieux à ces recommandations. L’optimisation proposée par le biais d’un module à installer directement sur le serveur ou d’un service semble très intéressante mais nous n’estimons pas nécessaire de l’intégrer sur nos serveurs (lourd à mettre en place, beaucoup de configurations à effectuer avec la notion de filtres, futur service payant ?). Il sera intéressant tout de même d’analyser dans le futur le chemin choisi par Google en proposant ce genre de services (payants ?) pour contrôler au mieux les sites.

Nous allons donc continuer à utiliser l’analyse en ligne qui nous a notamment permis de mieux aborder certaines notions comme l’expérience utilisateur sur les mobiles, la compression de fichiers et d’images, l’importance de la ligne de flottaison, le format (px) des images en fonction du terminal source, le cache, le nombre de requêtes HTTP effectués etc.

Display

« Le display désigne la publicité sur Internet avec achat d’espace et utilisation d’éléments graphiques ou visuels (bandeaux, pavés, skyscrapers, etc.) ».

Une campagne sur le réseau display permet aux annonceurs de développer leur image et la notoriété de ses marques ou produits et donc obtenir une audience. Ne vous attendez donc pas à un ROI rapide et immédiat. Il n’est donc pas très pertinent de faire du display pour un site e-marchand sauf si vous proposez une offre alléchante (produits offerts, promotion impactante…).

Différents outils sont à votre disposition pour faire vos campagnes display :

– Google adwords (onglet réseau display) :  suivant le montant alloué au CPC (coût par clic), vos annonces illustrées seront donc visibles en fonction du paramétrage de votre campagne : mots clés, emplacements gérés… La mise en place d’une telle campagne nécessite un long travail en amont pour être présent sur les sites pertinents selon votre cible.

  • inconvénients : long travail pour être précis sur le choix de présence sur les sites internet, difficile d’estimer un CPC, attention au clicktag de votre annonce qui doit être bien renseigné
  • avantages : google dispose de nombreux sites partenaires, outil récent et donc pas encore très couteux, paramétrage précis de la campagne

– Ad exchange : plateforme virtuelle automatisée qui met en relation directe les acheteurs et vendeurs de publicité sur Internet, autour d’un prix et/ou d’un espace variables.

Quel budget pour votre campagne Display ?

Une opportunité pour facebook ?

Facebook a fait son entrée dans le secteur du retargeting avec l’ouverture de sa plateforme publicitaire en temps réel, Facebook Exchange.

Facebook exchange va utiliser les recherches faites par les abonnés sur un produit, un loisir, un besoin et une publicité va alors s’afficher en fonction de la reqûete. Par exemple, vous cherchez une sucette pour bébé, une annonce présentant une boutique de puériculture apparaîtra. Les annonceurs peuvent ainsi consulter toutes les données personnelles et privées des utilisateurs, via le réseau social, en se basant sur toutes les activités, qu’il s’agisse d’apposition de « likes », de l’historique, ou d’une quelconque autre action sur Facebook.

Apparemment le service semble déjà avoir séduit 65% des publicitaires de facebook. L’idée est la suivante : dans la mesure où les gens passent la plupart du temps sur leur page avec ces différentes publicités de voyage, de vêtements…autant leur fournir immédiatement l’intégralité d’un service et toutes ses possibilités. Il semblerait que le taux de conversion soit 10 fois plus important.

Actuellement en phase de test, cette nouvelle plateforme devrait prochainement être le nerf de la guerre du display !

F-boutique ou F-commerce

L’année 2012 est l’année des boutiques sur les médias sociaux. Le but étant de transformer les ‘j’aime’ en ‘j’achète’. Après plusieurs recherches sur le web, vous trouverez ci-dessous des illustrations de mise en place :

– Saveur-biere.com : http://www.facebook.com/home.php#!/SaveurBiere?v=app_112843132107068&ref=ts

– Naf Naf : http://www.facebook.com/home.php#!/nafnaf.com?v=app_121212057891106&ref=search

Il existe de nombreux prestataires pour créer votre boutique :

Bookset (une solution d’optimisation pour les campagnes publicitaires sur Facebook.): permet de créer un pont entre votre site marchand et votre communauté. Utilisez la f-Boutique comme support complémentaire pour enrichir votre Community Management. Animez le contenu de votre boutique en fonction de votre actualité, mais surtout des attentes de vos fans : présentez un extrait de votre catalogue, faites les participer sur les choix de produits, et proposez leur des sélections qualitatives qui les intéressent. Proposez une expérience utilisateur sur mesure à vos fans, de la charte graphique à la navigation. L’API Boosket.Shops vous soulage des mécaniques de gestion de catalogue (fiche produit, catégorisation, recherche, pagination, tracking, statistiques, …).

Il y a une version gratuite pour la création de boutique sur facebook mais le lien ne fonctionne pas pour le moment.

Nurun : L’agence interactive Nurun a lancé en avril 2011 une application Facebook de vente en ligne, elle aussi destinée à transformer en clients les fans des marchands. Baptisée TransformR, elle permet à l’internaute d’effectuer un achat sans quitter le réseau social et propose de personnaliser son expérience en lui présentant des produits en fonction de son profil socio-démographique, de ses goûts, des goûts de ses amis, de ses achats pour lui-même, de ses achats de cadeaux…

– Pepita / Nexway : spécialisée dans les applications e-commerce sur les réseaux communautaires, a lancé en 2011 sa solution Pepita Facebook Store, qui permet aux e-marchands de créer et d’animer des opérations commerciales ciblées sur Facebook. La solution permet comme ses concurrentes de mener des opérations de type ventes flash, soldes, exclusivités pour les fans ou autres opérations marketing. Le marchand peut, là encore, choisir d’intégrer entièrement le processus de paiement à son F-store. L’agence marketing 2.0 Brand Ministry, qui propose à ses clients de concevoir leur F-boutique grâce à Pepita Facebook Store, a ainsi convaincu le site marchand Access&Go.

(source : http://www.journaldunet.com/ebusiness/commerce/boutique-facebook/)

Pourquoi créer une boutique sur facebook?

  • augmenter le trafic sur notre site web
  • générer plus de chiffre d’affaires
  • proposer des ventes privées à nos fans
  • engager la communauté
  • plus de visibilité grâce à l’insertion du catalogue produits
  • outil de promotion et de mise en avant des produits
  • et puis n’oubliez pas : facebook est le réseau social le plus fréquenté!

 

Pour info, si vous souhaitez récupérer les informations (graph) liées à une page facebook, utilisez https://graph.facebook.com/ + nom de la page (exemple : https://graph.facebook.com/cocacola )

Les extraits enrichis – moteurs de recherche

Les extraits enrichis sont des informations supplémentaires qui s’affichent lors du résultat d’une recherche par un internaute dans les différents moteurs de recherche (Google, Yahoo, Bing), voir l’exemple ci-dessous.

Extraits enrichis - Google
Extraits enrichis - Google

Le but étant de donner à l’internaute des informations pertinentes de la page référencée dans les résultats de la recherche qu’il vient d’effectuer.

Par exemple, il peut être intéressant d’afficher :

  • la note attribuée par les internautes à une page produit, ainsi que le nombre de votants
  • la photo d’un produit, le prix d’un article
  • des détails (nom, prénom, photo, profession, son poste, localisation géographique) sur une personne pour référencer une page web qui contient un cv.
  • des informations pour une société/entreprise (nom, adresse, téléphone et coordonnées géographiques telles que la longitude et la latitude permettant l’affichage d’une carte Google dans le résultat de la recherche)

L’internaute voit ainsi des informations plus détaillées sur sa recherche, ce qui peut le motiver à cliquer sur le lien en question si les informations sont suffisamment pertinentes.

Pour afficher ces informations, il faut l’indiquer aux moteurs de recherche à l’aide d’un balisage HTML supplémentaire. Le format recommandé par Google est le microdata (ou microdonnée).

En voici un exemple pour baliser une adresse :

<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed" itemscope itemtype="http://data-vocabulary.org/Organization">
<span itemprop="name">Nom de l'entreprise</span>
Adresse :
<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">21 rue des tests</span>,
<span itemprop="locality">Caen</span>,
<span itemprop="region">Basse-normandie</span>.
</span>
<a href="http://test.exemple.com" itemprop="url">http://test.exemple.com</a>
</span>
</div>

Vous trouverez aussi, un article pour référencer et afficher votre système de notation dans les résultats des moteurs de recherche.

Une documentation technique sur les extraits enrichis est disponible ici.

Il est possible de tester le résultat que donnera votre code dans un moteur de recherche à cette adresse http://www.google.com/webmasters/tools/richsnippets .