Quelque que soit le type de site sur lesquels ils sont implémentés (e-commerce, blog, sites d’actualités, etc.), ces boutons de partage ont un intérêt non négligeable puisqu’ils permettent de rendre son contenu facilement visible au plus grand nombre.

Il peut donc être intéressant de mesurer ces interactions sociales sur votre site internet. Combien d’internautes ont liké votre dernier article ? Combien l’ont unliké ? Combien l’ont liké en provenant d’un moteur de recherche ? Quel pourcentage des conversions proviennent d’internautes socialement engagés ? Vous l’aurez compris : le plus important est de pouvoir segmenter ces données pour connaître toujours davantage vos internautes.

Google nous propose aujourd’hui un tag permettant de récupérer ces données sur son outil Google Analytics : le _trackSocial.

Qu’est-ce que le _trackSocial ?

Le _trackSocial vient se rajouter à l’ensemble des autres tags Analytics tels que le _trackPageView, le _trackEvent, le _trackPageLoadTime, etc.

Il est construit de cette façon si :

_trackSocial (network, socialAction, opt_target, opt_pagePath)

• Le paramètre « network » nécessite une chaîne de caractères indiquant le réseau sur lequel l’action a lieu (ex : Facebook, Twitter).
• Le paramètre « socialAction » nécessite une chaîne de caractère indiquant l’action que réalise le bouton (ex : Like, Unlike, Send, Tweet).
• Le paramètre « opt_target » (optionnel) nécessite l’URL de la page cible.
• Le paramètre « opt_pagePath »(optionnel) nécessite l’URL de la page sur laquelle a eu lieu l’action.

Pour comprendre ces deux derniers paramètres, voici un exemple :

Le blog de Synerg’heTiC vient de publier un article. Voici l’URL de l’article :
http://blog.synerghetic.net/2011/08/26/deux-semaines-de-news-campagnes-buzz-3/
L’article s’affiche donc en mode complet à la page :
http://blog.synerghetic.net/2011/08/26/deux-semaines-de-news-campagnes-buzz-3/)
et en mode court sur celle-ci :
http://blog.synerghetic.net

Les boutons Like et Tweeter sont sur les deux pages.

Prenons deux utilisateurs A et B :

• L’utilisateur A like l’article sur la page de celui-ci : http://blog.synerghetic.net/2011/08/26/deux-semaines-de-news-campagnes-buzz-3/, le tag sera donc :

_gaq.push(['_trackSocial', 'facebook', 'like',
'http://blog.synerghetic.net/2011/08/26/deux-semaines-de-news-campagnes-buzz-3/',
'http://blog.synerghetic.net/2011/08/26/deux-semaines-de-news-campagnes-buzz-3/']);

• L’utilisateur B quant à lui, like l’article sur la page : http://blog.synerghetic.net/, le tag sera donc :

_gaq.push(['_trackSocial', 'facebook', 'like',
 'http://blog.synerghetic.net/2011/08/26/deux-semaines-de-news-campagnes-buzz-3/',
'http://blog.synerghetic.net/']);

Cela permettra d’analyser par la suite, sur quelle page le contenu a été le plus partagé et bien d’autres données, aussi segmentées soient-elles.

L’implémentation du tag

Le tag _trackSocial s’implémente de manière différente selon l’action à réaliser (Like, Unlike, Send, Tweet).

Facebook : Bouton Like

Pour pouvoir récupérer les données d’un Like sur Google Anlaytics, il faut utiliser l’évènement edge.create et une fonction de rappel qui se lance quand l’évènement se déclenche. L’URL de la ressource est alors passée en paramètre afin de pouvoir la récupérer dans Google Analytics.

FB.Event.subscribe('edge.create', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});

Facebook : Bouton UnLike

De la même manière que précédemment, on utilisera une fonction de rappel mais cette fois-ci avec l’évènement edge.remove :

FB.Event.subscribe('edge.remove', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
});

Facebook : Bouton Send

Ici on utilise l’évènement message.send pour implémenter le bouton Send :

FB.Event.subscribe('message.send', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);
});

Twitter : Bouton Tweeter

Pour ce qui est de Twitter et de son bouton Tweeter, le fonctionnement global est le même. On attache une fonction de rappel à l’évènement tweet. Quand l’évènement se déclenche, la fonction est appelée pour récupérer l’URL de la ressource tweetée (qui a été stockée dans une iFrame) afin de la passer en paramètre du tag :

twttr.events.bind('tweet', function(event) {
  if (event) {
    var targetUrl;
    if (event.target && event.target.nodeName == 'IFRAME') {
      targetUrl = extractParamFromUri(event.target.src, 'url');
    }
    _gaq.push(['_trackSocial', 'twitter', 'tweet', targetUrl]);
  }
});

Ces fonctions sont uniquement en Javascript : elles doivent donc être tout simplement mises entre balises script et à intégrer avant la fermeture de votre balise body.
A noter : il n’y a pas besoin d’implémenter le tag pour le bouton +1. Celui est automatiquement récupéré par Google Analytics.

L’analyse des données avec Google Analytics

Avant tout propos, sachez qu’il vous faudra la version 5 de Google Analytics pour constater les résultats.

Sur cette version donc, vous avez dans la rubrique « Visiteurs », un onglet « Réseaux sociaux » dans lequel il y a deux intitulés : « Intérêt et interaction » et « Pages ».

Intérêt et interaction

Sur cette page, vous apercevez le nombre de « visites sociales ». C’est-à-dire les visites ayant déclenché un évènement social tel qu’un clic sur le bouton Tweeter ou un Like.

Si vous cliquez sur les visites qui sont socialement engagées, vous atterrissez sur une page avec le détail des actions qui ont été réalisées sur votre site.

Vous avez ainsi la possibilité de segmenter l’ensemble de vos données en fonction de vos visites sociales. Cela permet de récolter des données très intéressantes sur ces visites parmi lesquelles leur taux de conversion, leur source principale, etc… A votre guise !

Pages

Sur cette partie, vous avez la liste des URLs qui ont été l’objet d’une action sociale (option « Entité sociale ») et la liste de celles sur lesquelles ont été effectuées les actions (option « Page »). Pour comprendre la différence entre les deux, je vous invite à relire la partie « Qu’est-ce que le _trackSocial ? » un peu plus haut.

De la même manière que précédemment, l’intérêt est double. Vous avez une vue sur vos contenus qui ont été partagés et la possibilité de segmenter les données selon les critères que vous désirez en créant un segment personnalisé.

A noter : les données que vous récupèrerez ne correspondront uniquement qu’aux actions ayant été faites sur votre domaine. Si votre article reçoit un Like, Unlike, Send, Tweet ou un +1 hors de votre domaine, il ne sera pas comptabilisé dans les rapports Google Analytics.
Cependant, il existe une alternative pour le bouton +1 puisque vous avez toujours la possibilité de récupérer la donnée totale sur les Google Webmasters Tools.

Conclusion

Certains se diront peut-être que l’on peut obtenir le même genre de données en utilisant le tag _trackEvent. Ce n’est pas totalement faux. Le _trackSocial permet juste beaucoup plus de flexibilité avec les données.

Par exemple, la distinction entre la page partagée et la page où a eu lieu le partage serait difficilement récupérable avec le _trackEvent (il faudrait concaténer ces deux pages dans le paramètre Label du tag). Et dans l’hypothèse où vous souhaiteriez fonctionner comme ça, vous auriez beaucoup plus de mal à segmenter vos données.

Et vous, que pensez-vous du _trackSocial ? Vous l’utilisez sur votre site ?

Partagez vos astuces !

Mais qu’en est-il réellement et quelles sont les limites de cette utilisation ?

Cette technologie utilise les fonctions Javascript pushState() et replaceState(), utilisables uniquement sur le moteur web Gecko 2. Et oui ! C’est uniquement compatible Chrome (min v5), Firefox (min v4), Opéra (min v11.5) et Safari (min v5). Internet Explorer n’est pas dans la liste, ni-même sa version 10 et encore moins la 9 !

Après cette petite introduction, donnons tout de suite un exemple simple d’utilisation. Suivez bien :

Je suis sur une page A.html. J’ai un lien dans cette page qui me mène vers la page B.html, comme cela pourrait être le cas dans un menu de navigation. Je désire charger en Ajax le contenu de B.html afin de fluidifier un peu tout ça. Je vais donc récupérer en Ajax la page B.html, avec la méthode .load() de JQuery par exemple.

Jusque-là, rien d’innovant. L’un des problèmes de ce type de navigation est que si je fais « précédent » avec mon navigateur, je ne retomberai pas sur le contenu précédent, c’est à dire A.html. Pourquoi ? Etant donné qu’en appelant en Ajax le contenu de B.html, je n’ai pas bougé de ma page A.html. Donc le bouton précédent ne fera que me ramener sur la page où je me trouvais avant A.html. Vous comprenez facilement la limite de cette exemple au niveau ergonomique.

C’est là qu’intervient la fonction de manipulation de l’historique du navigateur. Quand je charge ma page A.html, j’exécute la fonction history.replaceState() en lui donnant en paramètre l’URL de la page, c’est-à-dire A.html. Au moment d’appeler B.html en Ajax, je fais un history.pushState() en lui plaçant en paramètre l’URL que je demande, B.html. Je crée ainsi une nouvelle entrée dans l’historique de navigation de mon navigateur. Tout le monde a suivi ?

Pour activer la navigation par le navigateur avec le bouton « précédent » et « suivant », je fais la fonction suivante :

$(window).bind(‘popstate’, function(event) {

var state = event.originalEvent.state;

if (state) {
$(« #ma_div_ou_je_charge_mon_ajax »).load(state.path);
}
});

J’ai donc placé un écouteur sur les évènements du navigateur afin d’afficher ce qui est demandé.

Niveau SEO :

Au niveau du SEO, c’est parfait ! J’ai uniquement appelé le contenu qui m’intéresse de B.html. J’ai bien deux pages distinctes A.html et B.html dans mon arborescence et les robots indexeront bien les deux pages. Si je désactive le Javascript, j’ai un lien classique de A vers B qui affichera la page demandée avec un rechargement du navigateur comme dans une navigation classique.

Inconvénients :

C’est assez difficile à mettre en place. Les navigateurs ne réagissent pas tous pareils à cette manipulation. En effet, il existe un problème sur Chrome. Je suis sur A.html, j’appelle la page B.html, puis ensuite tape une URL à la main vers un site externe. Si arrivé sur cette nouvelle page je fais précédent avec le navigateur, je retombe sur la page B.html en entière et non plus A.html avec l’importation du contenu de B. Il existe donc une méthode pour remédier à ce problème, mais on n’entrera pas dans les détails ici et elle est assez lourde.

Conclusion :

Grâce à cette technique, on peut créer une navigation très fluide en Ajax, tout en conservant la navigation par les actions du navigateur. Cette technologie se rapproche de ce qu’offre Flash au niveau de la fluidité. Comme toutes les bonnes choses, c’est à consommer avec modération. Nous avons bien vu dans les inconvénients, que cette méthode est encore au stade expérimental. Voici une application concrète de cette méthode sur le site Github. Regardez le chargement du contenu lorsque l’on clique sur un fichier dans le tableau. Testez la navigation par vous-même. Ceci dit, nous repoussons sans cesse les limites de nos navigateurs afin d’en tirer le meilleur. C’est ce genre de pratique qui pousse les concepteurs de navigateurs à améliorer leurs applications et repousse un peu plus la technologie web.

Le design du site s’adapte à l’écran du périphérique utilisé. Tout cela à partir d’une url unique.

Donc fini les sous-domaine inutile m.exemple.com ou bien encore http://www.synerghetic.net/mobile/

Une url unique permet de résoudre les problèmes de référencements liés à la duplication du contenu sur des sous-domaine.

Je vais à présent revenir sur des points plus techniques abordés lors de ma conférence au pôle mobile de Synerg’heTIC.

Media queries

Les medias queries sont des techniques utilisées en CSS3. Elles permettent de définir une feuille de style en fonction de certaines propriétés du navigateur. Pour faire du responsive design nous allons utiliser la propriété max-width, qui permet d’appliquer une taille maximale d’écran, jusqu’où les feuilles de style seront appliquées.

@media screen and (max-width:480px){
    /*code */
}

Ici, on pourra par exemple modifier les différents blocs de note site pour leur appliquer une largeur relative à taille de notre écran.

@media screen and (max-width:480px){
    div{ width:90%;}
}

jQuery mobile

Certains associent directement responsive design avec les media queries. Mais je rappelle que le principe est d’adapter le site en fonction de l’appareil utilisé.

On peut donc utiliser un framework tel que jquery mobile pour réaliser note site. On peut l’utiliser exclusivement pour l’affichage sur iPhone et Android comme dans l’exemple suivant en PHP :

if ( strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'Android') )
{
      //On charge jQuery mobile
}

Voici deux exemples de site en responsive design :

• Avec les media queries : Cuisine kawaii le livre
• Avec jQuery Mobile (sur iPhone et Android) : Développeur web mobile

Nous allons voir ensemble comment réaliser le Doodle du 117^ème anniversaire de Martha Graham’s du 11 Mai 2011. Ce Doodle est une animation de Ryan Woodward dont vous pouvez avoir un aperçu de ses travaux sur son site www.ryanwoodwardart.com. Il faut savoir que tous les Doodles sont conçu différemment et la technique utilisée pour réaliser celui-ci n’est pas à 100% celle utilisée par Google mais en reprend les grandes lignes.

Retrouvez le rendu final à cette adresse : Rendu final du Google Doodle

Etape 1 : Les bases de l’animation

Toute notre scène va se dérouler dans un rectangle de 403px de large par 156px de hauteur. Nous allons donc créer une div que nous appellerons logo_start avec un id, elle sera notre scène. Il nous faut ensuite 2 images. Une qui représente la première image de l’animation, puis un sprite qui contient toutes les images de l’animation. Il vous faudra aussi installer en local ou faire appel à la bibliothèque JQuery.

Image de départ : img_start.png
Sprite : img_sprite.png
Jquery : jquery-1.6.1.min

Une fois les documents ci-dessus récupérés, attaquons le HTML et le CSS de notre Doodle :

<div id="logo_start"></div>

#logo_start{
  position:relative;
  width:403px;
  height:156px;
  background:url('img_start.png') no-repeat top left;
}

On place la div en position : relative afin de pouvoir jouer avec les positions : absolute à l’intérieur.

Voilà, c’est tout pour le HTML et le CSS de notre animation, tout le reste va se dérouler côté Javascript.

Etape 2 : Les bases du Javascript

Avant d’entamer le Js, je vais essayer d’être le plus clair possible sur ce que nous allons tenter de réaliser. Le principe de base est de faire apparaître des div dans cette scène. Chaque div a ses propres coordonnées de positionnement par rapport au point haut gauche de logo_start et chaque div a une image de fond bien précise. Ces images de fond sont toutes réunies sur le sprite que vous avez récupéré plus haut.

Nous avons donc pour chaque image de l’animation, des coordonnées de placement et des coordonnées pour l’image de fond. Les div apparaissant au bon endroit, avec le bon fond, feront apparaître l’animation. Il y a environ 155 images a faire apparaître pour jouer toute l’animation. Je vous entends déjà : « les tableaux de coordonnées vont être interminables ! » Et bien oui, mais rassurez-vous, nous avons déjà tout calculé pour vous, se sera l’affaire d’un simple copier/coller.

Attaquons donc notre fichier JS et commençons par les fameux tableaux de coordonnées :

var d = [307,48,88,89,307,48,89,89,307,48,91,89,305,49,93,89,305,50,93,88,305,50,93,88,306,52,92,86,305,53,93,84,305,54,94,83,306,54,93,83,307,54,92,83,307,54,92,83,308,54,90,83,308,54,90,83,306,53,91,84,306,53,91,84,308,53,90,84,308,53,90,84,305,53,92,84,305,52,92,85,306,52,91,85,308,51,88,87,308,50,88,88,308,49,88,88,307,49,89,88,307,50,89,87,308,51,89,86,307,54,90,83,307,57,90,80,306,58,92,79,306,58,92,79,305,60,92,77,302,61,95,76,302,63,95,74,302,51,96,86,302,66,98,71,304,67,96,69,301,63,96,74,301,58,93,79,291,52,94,85,288,50,71,88,285,43,76,95,285,37,70,101,281,29,55,109,278,20,58,119,278,20,55,119,277,12,121,127,271,2,122,138,267,1,126,139,264,0,136,140,260,0,141,140,255,0,148,140,252,0,151,140,249,2,121,138,247,3,123,137,246,3,123,137,246,2,124,137,258,2,112,137,263,2,106,137,263,2,106,137,262,2,103,137,260,2,104,136,260,2,104,137,268,2,98,137,267,2,99,137,266,2,97,137,266,3,96,136,264,3,99,136,263,3,100,136,261,3,100,136,259,2,138,137,254,2,126,137,247,2,101,136,240,2,108,136,238,1,110,137,230,1,118,138,220,15,128,124,211,18,137,121,205,43,102,96,202,45,104,93,200,38,97,101,198,38,104,101,197,39,107,100,197,39,112,100,213,39,94,110,212,40,95,111,211,41,97,111,209,42,99,112,209,43,98,112,213,43,87,112,213,42,83,113,211,40,86,109,211,38,86,103,211,37,88,112,211,20,186,131,213,27,167,122,212,44,87,105,210,44,88,98,195,44,106,98,189,44,110,98,182,46,117,99,173,44,118,96,161,43,130,99,154,42,137,97,153,42,137,97,153,42,137,97,152,41,137,98,151,41,137,97,149,41,145,97,148,25,144,114,148,13,144,126,141,12,153,127,115,11,173,128,108,7,180,133,108,4,180,136,108,3,176,137,108,1,161,139,105,1,235,138,103,1,295,148,103,0,277,149,108,0,234,137,101,0,232,137,99,0,135,139,95,0,244,139,81,0,152,139,69,0,164,139,66,0,169,139,65,0,170,139,63,0,168,138,61,0,159,138,35,0,304,139,19,0,189,140,18,11,138,129,18,11,137,129,18,11,137,128,18,6,135,133,7,4,146,136,6,4,147,136,3,4,150,136,3,5,150,135,3,8,150,132,4,6,394,145,12,6,388,145,11,8,389,144,11,8,387,144,11,8,387,143,10,8,113,131,11,8,111,131,10,9,112,130,12,9,116,130,12,9,111,130,12,9,111,130,12,9,110,131,12,34,113,106,13,35,110,104];

var e = [0,0,-88,0,-177,0,-268,0,-361,0,-454,0,-547,0,-639,0,-732,0,-826,0,-919,0,-1011,0,-1103,0,-1193,0,-1283,0,-1374,0,-1465,0,-1555,0,-1645,0,-1737,0,-1829,0,-1920,0,0,-89,-88,-89,-176,-89,-265,-89,-354,-89,-443,-89,-533,-89,-623,-89,-715,-89,-807,-89,-899,-89,-994,-89,-1089,-89,-1185,-89,-1283,-89,-1379,-89,-1475,-89,-1568,-89,-1662,-89,-1733,-89,-1809,-89,-1879,-89,-1934,-89,-1992,-89,0,-208,-121,-208,-243,-208,-369,-208,-505,-208,-646,-208,-794,-208,-945,-208,-1066,-208,-1189,-208,-1312,-208,-1436,-208,-1548,-208,-1654,-208,-1760,-208,-1863,-208,-1967,-208,0,-348,-98,-348,-197,-348,-294,-348,-390,-348,-489,-348,-589,-348,-689,-348,-827,-348,-953,-348,-1054,-348,-1162,-348,-1272,-348,-1390,-348,-1518,-348,-1655,-348,-1757,-348,-1861,-348,-1958,-348,0,-486,-107,-486,-219,-486,-313,-486,-408,-486,-505,-486,-604,-486,-702,-486,-789,-486,-872,-486,-958,-486,-1044,-486,-1132,-486,-1318,-486,-1485,-486,-1572,-486,-1660,-486,-1766,-486,-1876,-486,-1993,-486,0,-617,-130,-617,-267,-617,-404,-617,-541,-617,-678,-617,-815,-617,-960,-617,-1104,-617,-1248,-617,-1401,-617,-1574,-617,-1754,-617,-1934,-617,0,-754,-161,-754,-396,-754,-691,-754,-968,-754,-1202,-754,-1434,-754,-1569,-754,-1813,-754,-1965,-754,0,-903,-169,-903,-339,-903,-507,-903,-666,-903,-970,-903,-1159,-903,-1297,-903,-1434,-903,-1571,-903,-1706,-903,-1852,-903,-1999,-903,0,-1043,-150,-1043,-300,-1043,-694,-1043,-1082,-1043,-1471,-1043,-1858,-1043,0,-1188,-113,-1188,-224,-1188,-336,-1188,-452,-1188,-563,-1188,-674,-1188,-784,-1188,-897,-1188];

On vous avait prévenu, les tableaux sont costaux ! Mettez-les en début de fichier et faites une mise en forme qui ne vous gênera pas trop pour la suite.

Le tableau d définit les coordonnées de placement et de dimension des div. Afin de bien comprendre le fonctionnement de ce tableau, prenons les 4 premières données. 307 correspond au positionnement gauche, 48 correspond au positionnement haut, 88 le nombre de pixels de largeur et 89 les pixels de hauteur. Nous avons donc créé une div qui se placera sur la scène comme ceci :

Le tableau e définit les coordonnées du sprite des images de fond des div.

Nous allons définir les variables dont nous allons avoir besoin :

var i = 0;
var j = 0;
var temp = 0;

i correspondant au pointeur qui va parcourir le tableau d et j celui qui va parcourir le tableau e. temp correspond au compteur d’image. Dans notre Timer, une fois arrivé à 155 images, nous arrêterons l’animation, mais nous verrons cela plus tard.

Etape 3 : Les fonctions du Javascript

Passons maintenant au côté pratique. Nous allons lancer une fonction qui s’appelle Image à l’ouverture de notre page. Nous utiliserons simplement l’appel une fois que JQuery sera chargé. Nous avons donc le code suivant :

$(function() {
	Image();
});

Détaillons maintenant cette fonction Image. Je vous la donne et nous la commenterons après :

function Image(){

	temp++;

	var left = d[i];
	i++;
	var top = d[i];
	i++;
	var width = d[i];
	i++;
	var height = d[i];

	var y = e[j];
	j++;
	var x = e[j];
	j++;

	$("#logo_start").append("<div style='position:absolute; left:"+left+"px; top:"+top+"px; width:"+width+"px; height:"+height+"px; background-image:url(img_sprite.png); background-position:"+y+"px "+x+"px;'></div>");
	i++;
	Timer();
}

Allons-y ligne par ligne.

• temp++ va incrémenter temp de 1. Nous aurons ainsi un indicateur pour savoir à quelle image nous nous trouvons à chaque moment de l’animation.
• var left = d[i] récupère la première coordonnée de positionnement de la div que nous allons créer, ici le nombre de pixels à gauche par rapport au coin haut gauche de la div logo_start.
• var top = d[i] récupère la valeur top de la div de la même manière que left vu précédemment. Nous avons incrémenté i avec i++ afin de passer à la valeur suivante dans le tableau d.
• var width et height récupèrent eux les dimensions de la div que nous allons créer.
• var y = e[j] récupère les coordonnées en y du sprite pour afficher la bonne image de fond dans notre div.
• var x = e[j] va nous donner les coordonnées en x.

Voilà, nous avons tous les renseignements pour créer notre div. Ses dimensions width et height, sa position left et top, ainsi que le background-position du sprite. Nous pouvons donc enfin la créer avec un append de la librairie JQuery. Append va créer un élément HTML dans une balise ciblée à la suite du code existant. Nous aurons donc pas moins de 155 div à l’intérieur de logo_start à la fin de l’animation.

Allons-y :

• $(‘#logo_start‘) cible la div logo_start en JQuery
• append() ajoute donc le html que nous allons lui définir à la suite que ce qui existe déjà dans logo_start.
• Nous créons une simple div que nous stylisons directement avec l’attribut style. Donc position à absolute avec left et top que nous avons récupéré du tableau d. Width et height que nous avons récupérés aussi de d. Puis le background-image du sprite ainsi que ses coordonnées avec background-position que nous avons cette fois récupérés du tableau e.

Pour finir avec la fonction Image, nous faisons appel à un petit Timer qui va temporiser de 50ms entre chaque image notre animation. Nous faisons également un petit test sur la variable temp pour savoir si nous sommes arrivés à 155 images. Si l’animation n’est pas finie, ont envoi le Timer de 50ms qui appellera à nouveau la fonction Image qui dessinera l’image suivante, sinon on arrête tout car l’animation est finie.

Voici le code de la fonction Timer :

function Timer(){
	if(temp!=155){
		setTimeout("Image()",50);
	}
	else{
		return false;
	}
}

Voilà, vous avez tous les éléments de l’animation. Votre animation devrait s’afficher correctement.

On peut ensuite ajouter un bouton de lancement de l’animation. Pour cela il suffit de mettre l’événement sur un clic dans la partie JQuery. On peut par exemple avoir comme événement :

$("#monbouton").click(function(){
	Image() ;
}) ;

Note : Il faut penser à réinitialiser toutes les variables pour repartir d’une animation vierge.

Conclusion

Nous avons vu grâce à la création de ce Doodle que Google utilise des techniques à la portée de tous pour réaliser de très belles animations. Ils poussent cependant la technique avec l’utilisation d’un sprite et surtout de tout un tas de coordonnées à calculer avec une extrême précision.

La conception de ce Doodle est très intéressante car elle permet de voir toutes les étapes de fabrication d’une telle animation. Le graphiste doit réaliser toutes les images du sprite en tenant compte de la technique des append utilisée. Les développeurs doivent calculer toutes les coordonnées. Tout cela pour une animation de 5-6 secondes. Flash n’est donc pas une technologie morte, mais Google nous prouve une fois de plus que les autres technologies ont fait un grand pas en avant ces dernières années afin de réaliser de très belles animations.

Discutons-en…

Nous avons réalisé ce Doodle de cette manière, auriez-vous fait autrement, quelles améliorations voyez-vous en terme technique ? Tous vos avis nous intéressent, n’hésitez pas à en discuter en postant un commentaire.

Nous avons maintenant défini le squelette de notre opération : nous avons un message dont le contenu est décliné sur différents supports plus ou moins liés entre eux et nous savons globalement ce que nous attendons de notre visiteur (voir les parties I et II du dossier : Introduction et définition et Le processus créatif).

Voyons maintenant comment nous organiser de manière concrète afin de lancer notre opération virale.

Plan de communication / Plan de lancement

On s’en doute, le lancement d’une campagne virale, ces quelques heures intenses, ce sont quasiment les plus importantes. Soit la sauce prend, soit elle retombe et vous aurez toute la peine du monde à la faire remonter. Chaque campagne possède une masse critique d’utilisateurs en dessous de laquelle cette dernière ne prendra pas. L’objectif est donc de déterminer quelle est cette masse critique, et comment l’atteindre le plus rapidement possible.

Il nous faut donc un plan de lancement. Vers quels interlocuteurs allons-nous nous diriger afin qu’ils soient les premiers touchés par la campagne ?

Le choix est à la fois assez simple sur le principe et plutôt complexe en réalité : il nous faut évidemment toucher des « influenceurs », puisque le début du « buzz » ne sera porté qu’à leur seule force. Il nous faut évidemment toucher la communauté de « fans » de votre marque, de votre produit, ou du secteur auquel vous appartenez. Oui mais comment les identifier ? Eh bien il n’y a pas de technique infaillible, il faut une connaissance accrue de son écosystème, quitte à s’y mettre à plusieurs pour n’oublier personne.

Rôles et interactions des canaux de communication

Essayons maintenant de représenter visuellement notre campagne et de matérialiser les flux de visiteurs afin de mieux comprendre comment on peut les attirer puis les retenir.

Si tous les média ont un rôle à jouer dans la campagne, tous ne rapportent pas directement du trafic et leur rôle principal est finalement assez différent.

Certaines auront en effet pour objectif de simplement toucher l’utilisateur pour le rediriger vers le support où se déroule principalement la campagne (bannières publicitaires, emailing), d’autres permettront d’informer le visiteur déjà au courant de l’opération des actualités de cette dernière (RSS, newsletter), de susciter l’interaction et le dialogue (Facebook) ou de favoriser le partage.

Il est donc primordial de bien définir le rôle intermédiaire de chacun des supports dans la stratégie de communication globale car une campagne mal équilibrée ne peut qu’échouer. Chacun des canaux couvre un ou plusieurs de ces rôles, à nous de bien les employer afin que l’alchimie opère.

Une bonne méthode pour concevoir un tel schéma sans trop se tromper est de simuler des scenarii utilisateurs réalistes.

Prévisualisation, micro-planning et organisation

Il est primordial de disposer de tous les éléments de votre campagne (images, textes, autorisations diverses, base et solution e-mailing, dispositifs techniques etc.) avant de la lancer. En effet, si son succès dépend de la synchronisation et de la complémentarité des différents dispositifs, on comprendra qu’un retard d’un côté ou de l’autre du projet pourrait avoir de lourdes conséquences sur son efficacité et donc sur l’atteinte de nos objectifs. Veillons donc à valider de manière définitive et sans réserve les différentes composantes de notre projet avant de publier quoi que ce soit.

Ainsi, il est bon de penser aux moindres détails du déroulement de la campagne et donc de la simuler de A à Z au moins une fois afin de n’oublier aucun élément caché (délai de validation d’une application mobile sur l’Apple Store par exemple).

Le diable se cache dans les détails, et une fois notre campagne lancée, nous aurons suffisamment de problèmes imprévisibles pour ne pas avoir à nous occuper des petits riens (mais qui au final feront de grands touts).

Dans la même veine il est de bon ton de faire une « Roadmap » détaillée de l’opération comportant toutes les actions devant être effectuées à date fixe par une personne désignée à l’avance (publier un nouveau contenu, activer une nouvelle fonctionnalité etc.).

Enfin, plaçons des marqueurs sur nos différents objectifs intermédiaires et finaux et activons les outils de tracking dont nous disposons afin de pouvoir suivre, mesurer et au besoin ajuster notre campagne en direct et à postériori.

Bon, tout semble bien calé. Allez, on respire un grand coup et on appuie sur le bouton rouge…

Ca y est, notre campagne est lancée.

Navigation dans le dossier

Nous avons vu la dernière fois la différence entre le buzz, phénomène non maîtrisé, et le marketing viral, opération orchestrée faite pour être rentable. Rentrons maintenant dans le vif du sujet en essayant de comprendre quelques unes des mécaniques d’une bonne campagne virale.

Principe de base

Il est important de comprendre le procédé élémentaire du marketing viral. Ca paraît bête à dire, mais qui dit viral dit transmission et donc plus prosaïquement partager le contenu en question avec ses proches. Et c’est là tout l’intérêt de l’opération. Eh oui.

La campagne de pub traditionnelle propose, qu’elle soit télé, radio, affichage ou presse, à la seule force de l’entreprise émettrice et auprès de l’ensemble de ses récepteurs, de véhiculer le message qu’elle souhaite faire passer. On comprend alors l’effort nécessaire pour atteindre une large cible. Les tarifs s’envolent (achat media) et les récepteurs sont souvent trop peu qualifiés.

Face à cela, le marketing viral propose de concevoir un message suffisamment fort et intéressant pour que chacune des personnes qui y sont exposées (les récepteurs) se transforment en émetteurs, touchant à leur tour leur cercle d’influence et agrandissant de fait la portée du message.

L’effort de transmission du message est ainsi partagé et donc en théorie moins couteux pour l’émetteur, même si concevoir un message créatif représente de l’argent. Mais le bénéfice ne s’arrête pas là. En l’incitant à agir pour la marque, on investit à un niveau beaucoup plus personnel le consommateur qui se sent ambassadeur et impliqué. Il sera donc sensiblement plus fidèle et se sentira plus proche de l’entreprise.

On comprend donc que le cœur du problème résidera dans le fait de susciter l’envie chez l’internaute de partager le contenu que nous lui proposons. Le succès de l’opération dépend en effet de ce paramètre. Et c’est là l’une des difficultés du marketing viral. Les caractéristiques qui favorisent le partage d’une information par un internaute peuvent en effet être analysées et optimisées, mais comme dans tout processus subjectif, il y a une part de hasard, de chance ou en tout cas de réussite.

Pour inciter l’utilisateur à partager quelque chose, on doit lui faire passer une émotion forte, car c’est cette émotion qu’il cherchera à faire partager à ses proches. Les émotions fortes ne sont pas pléthore et celle que nous retiendrons dépendra du projet et de son contexte mais en voici quelques unes : Le rire, la joie, la peur, la pitié, l’indignation, l’interrogation, la colère, la surprise…

Soyons clairs, si l’utilisateur partage une information, c’est toujours (ou presque) pour prouver à sa communauté qu’il est « au courant », qu’il est « in » ; en bref, pour se faire mousser, s’affirmer. En ce sens, plus le message sera percutant, inédit, plus la valeur de partage perçue par ce dernier sera conséquente, et donc plus il la partagera.

De même, plus le message sera présent, plus les internautes touchés de primo seront nombreux. Multiplier les canaux de communication ne peut donc être à ce titre que bénéfique. Mais encore faut-il choisir ceux sur lesquels nous serons susceptibles de croiser les récepteurs que nous voulons atteindre.

Enfin, demandons nous quelle(s) action(s) je voudrais que mon visiteur accomplisse après avoir consulté mon message. Qu’il se déplace en magasin pour acheter mon produit ? Qu’il parle de ma marque autour de lui ? Qu’il s’abonne à ma newsletter co-brandée ?

Essayons donc de mettre toutes les chances de notre côté et de concevoir un message efficace, de le diffuser sur les bons canaux et d’inciter notre cible à faire l’action que nous attendons d’elle.

Définir les canaux de communication

J’appelle canal de communication (au sens large) tout lieu (physique ou virtuel) où il peut y avoir interaction de quelque manière que ce soit entre l’utilisateur et l’entreprise. Il en existe 3 grandes familles :

• Paid media : Les espaces que nous devrons payer. Ce sont pour la plupart des media traditionnels sur lesquels les entreprises ont coutume de s’appuyer pour diffuser leur message.
• Owned media : Tous les espaces qui nous appartiennent, ceux sur lesquels ont à plus ou moins d’emprise. Ce sont en général ceux où l’on veut diriger le visiteur, là où le ROI se trouve.
• Earned media : Les espaces non payés qui ne nous appartiennent pas mais qui parlent de nous. Bien évidemment, le marketing viral appuie principalement sur ces leviers.

Quelques exemples de medias ci-dessous, même si évidemment la liste est loin d’être exhaustive :

Avec le marketing viral on entend « booster » les Earned media, mais on comprend vite que la maîtrise des flux de visiteurs entre chacun des canaux est capital. On touche ici du doigt l’une des problématiques majeures des entreprises en terme de marketing aujourd’hui : la multiplication des canaux sur lesquels elles communiquent rend difficile le tracking du visiteur/client quand il « saute » d’un media à l’autre.

On comprend également rapidement que chacun de ces canaux possède ses spécificités, ses forces et ses faiblesses en matière de « ROI client » (voir schéma des bénéfices ci-dessus). Aussi, on ne fera par exemple pas appel à une campagne e-mailing seule pour lancer un « buzz » : les fonctionnalités de partage ne sont pas si développée que sur un outil comme Twitter…

Nous reviendrons plus précisément dans la 3e partie de ce dossier sur les interactions entre ces différents canaux. Tentons tout de même de choisir les medias sur lesquels nous voulons (pouvons ?) communiquer…

… La liste est faite ? On enchaine.

Trouver un axe de communication, un angle puis un concept créatif

Attaquons maintenant le coeur de notre campagne : trouvons son concept créatif, celui qui suscitera le fameux effet tant convoité, le bien nommé effet « waouh ».

Il faut tout d’abord définir les grandes lignes de notre message, se demander de quoi nous voulons parler. Est-ce de la nouvelle politique écologique de l’entreprise ? De ses offres de Noël ? De sa nouvelle gamme de produits ? La réponse à cette question nous permettra d’orienter le message. Nous aurons ainsi établi notre axe de communication.

Avoir un axe de communication est un bon début mais n’est pas suffisant, il faut préciser les choses et trouver un angle, un éclairage particulier qui fera la personnalité de ce message.

Enfin, et en nous appuyant sur l’axe de communication et son angle d’approche, nous allons devoir trouver notre concept de communication, notre message final. Il reprend donc notre axe « orienté » et y intègre un saut créatif, ce à quoi les internautes vont adhérer et qui va provoquer de la sympathie et l’envie de partager.

Exemple d’axe de communication : Nos produits sont parmi les plus innovants du marché. (Fait)

Exemple d’angle associé : Nos concurrents sont toujours en retard sur nous. (Vision du fait sous un regard particulier)

Concept associé : Observer la concurrence se débattre ridiculement face à notre offre.

Cela vous rappelle quelque chose ? Les publicités télévisées de la banque CIC reprennent quasiment toutes ce schéma.

Une fois le concept de communication trouvé, nous tenons la quintessence de notre campagne et le plus dur est quasiment fait, mais trouver un bon concept peut demander énormément de temps.

Il n’y a pas de recette miracle pour trouver un bon concept de communication, mais les méthodes de brainstorming (association d’idées etc.) sont particulièrement efficaces.

Décliner le concept sur les média visés

On pourrait penser que cette étape est bénigne puisque l’on dispose déjà du message et de la liste des canaux sur lesquels on veut le diffuser, et pourtant elle constitue une phase primordiale dans la conception de la campagne.

Transposer notre message bêtement d’un média à l’autre fait perdre tout intérêt à l’opération. Il est important d’adapter au mieux notre concept au média sur lequel on le diffuse en utilisant ses spécificités et en étudiant les facteurs clés de succès des opérations qui s’y sont déjà déroulées (pour cela, je ne saurais trop vous conseiller l’achat du livre Internet Marketing 2011).

Nous l’avons vu, il est important de faire vivre une expérience à l’utilisateur, de lui raconter une histoire. On peut donc raconter plusieurs épisodes, plusieurs aspects de la même histoire en utilisant dans notre narration l’ensemble des outils qui sont mis à notre disposition sur les différents canaux. On obtient ainsi une communication diversifiée et immersive tout en gardant une cohérence de fond.

Il est cependant important, à part cas particulier, que chacun des médias se suffise à lui-même. Car si certains utilisateurs feront volontiers l’effort (sous notre impulsion), d’aller sur plusieurs canaux pour prendre connaissance de l’ensemble de l’opération, la plupart se contenteront d’un seul canal de notre projet. Il faut donc qu’ils comprennent de quoi il s’agit ou en tout cas que leur visite puisse être malgré tout mise à contribution et bénéfique.

Enfin, plus le maillage des différents canaux de votre campagne sera dense et incitatif, plus votre cible butinera de canal en canal et plus vous capterez son attention.

C’est normalement le moment de repartir dans un cycle projet classique (bench-conseil/conception/réalisation/recettage) pour chacun des canaux, mais ce n’est pas l’objet de ce dossier, nous ferons donc l’impasse dessus.

Facultatif : découpage de la campagne en phases

Certaines histoires bien ficelées sont même découpées en plusieurs grandes phases qui ponctuent, animent et donnent de l’intérêt au récit. Si cette étape n’est pas indispensable pour toutes les campagnes virales, certaines en font usage, dévoilant au fil d’un planning prévu en amont de nouveaux épisodes régulièrement jusqu’à la conclusion.

L’intérêt est réel : on ne parle jamais autant de quelque chose qu’en attendant impatiemment d’en découvrir la suite. Et ça nous donne un pretexte pour lui demander son e-mail.

Ainsi, un découpage « classique » d’une campagne virale pourrait être le suivant :

Lors de la phase de teasing on cherche à provoquer l’étonnement chez le visiteur, qui va diffuser l’information dans le but principal de faire partager son étonnement et de chercher une réponse. On n’identifie pas du tout la marque émettrice ni le but du message, on cherche juste à « braquer les projecteurs » sur le projet.

La phase de reveal consiste à révéler l’émetteur et/ou le but du message une fois que l’on dispose de toute l’attention de notre cible et à effectuer la transition vers notre phase de fidélisation. Cette phase est généralement très courte (de quelques heures à quelques jours).

La phase de fidélisation a pour but de susciter l’adhésion du visiteur et de le faire accomplir l’action que nous voulions finalement le voir accomplir (acheter ?).

L’une des difficultés de ce phasing est de capitaliser efficacement sur les visiteurs de la période de teasing qu’il faut pouvoir recontacter lors des phases suivantes car s’ils ne reviennent pas, ce sont des visites qui n’auront pas directement servi à atteindre notre objectif (dans le meilleur des cas ils auront diffusé plus ou moins le message).

La transition entre les différentes phases est par ailleurs un moment sensible. Il faut qu’elle soit à la fois visible et compréhensible par le visiteur, qu’elle rencontre l’adhésion du public et en aucun cas qu’elle suscite une déception. Certaines campagnes de ce type ont connu bien davantage de succès durant leur période de teasing que durant leur phase de fidélisation et n’ont ainsi pas rempli leur objectif final (voir la campagne 24 secondes chrono).

Encore une fois, ce type de découpage n’est pas obligatoire et n’est pas adapté à toutes les opérations virales. Si le projet n’est pas « phasé », nous demanderons simplement en même temps à l’utilisateur de partager l’information et d’accomplir l’action finale voulue (acheter un produit, s’inscrire à une newsletter etc.).

Conclusion et suite du dossier

Pfiou, voilà une grosse partie de la conception de notre campagne achevée :

• Nous avons notre concept de communication général.
• Nous avons la liste des différents canaux sur lesquels nous relayerons notre message.
• Nous avons les déclinaisons de notre message sur tous les canaux et les éléments ont été produits.
• Nous avons éventuellement le phasing macro de notre campagne.

Mardi prochain, nous rentrerons encore un peu plus dans les détails et nous préparerons le lancement effectif de notre campagne. Beaucoup d’éléments « logistiques » sont encore à régler : Plan de lancement, dashboards de suivi, organisation interne et répartition des tâches, gestion des imprévus en amont… Un beau programme en perspective.

Navigation dans le dossier

Ce dossier n’a pas vocation à être le guide ultime pour parvenir à faire le buzz idéal, pas plus qu’une liste exhaustive des outils et méthodes permettant à coup sûr de faire du bruit, mais plutôt un retour d’expérience structuré permettant de mettre en exergue quelques pratiques qui semblent marcher plutôt bien, quelques concepts qui semblent se vérifier de manière plus générale et les erreurs qu’il faut à tout prix éviter.

Nous parlerons ici surtout du média Internet car il constitue le cœur de tout bon marketing viral. Nous déborderons quelques fois sur les autres médias car ils restent de bons moyens de mailler plus densément notre communication et donc de maximiser son impact.

A l’issue de la lecture de ce qui suit, vous aurez donc une vision d’ensemble de ce à quoi peut ressembler une campagne de marketing viral et disposerez de pistes de réflexion vous permettant de constituer plus efficacement la votre.

Ce dossier sera composé de 10 parties, publiées à raison de deux parties par semaine (les mardis et jeudis), et respectera le plan suivant :

1. Introduction et définition
2. Le processus créatif
3. Préparation au lancement de la campagne (production des éléments, micro-planning, plan de com…)
4. Pendant la campagne (animation et monitoring actions correctives)
5. Bilan de la campagne et bénéfices
6. Dans quel cas faire du viral ?
7. Cas pratique : jetuemafemme.com (part 1)
8. Cas pratique : jetuemafemme.com (part 2)
9. Cas pratique : jetuemafemme.com (part 3)
10. Outils et ressources utiles en social media

Mais rentrons directement dans le vif du sujet avec la première partie : Introduction et définition.

Buzz ou marketing viral ?

Commençons par nous entendre sur les termes. On entend souvent ces deux mots et la plupart des gens ne discernent pas la différence entre buzz et marketing viral. Il faut dire que la nuance est légère, mais a tout de même son importance.

Le buzz (ou bourdonnement en anglais, traduit récemment officiellement par « ramdam » par l’Académie Française) est le fait de faire du bruit, de manière plus ou moins voulue mais dans tous les cas de façon peu maîtrisée, avec ou sans but précis, sur un sujet donné. Nous avons donc ici à faire à un phénomène « naturel » rendu courant par la rapidité et la facilité avec lesquelles l’information circule grâce à Internet.

Le marketing viral est apparu quelques temps après l’émergence du phénomène de « buzz ». Ce sont les agences de communication qui, intéressées par l’efficacité de ce nouveau concept de communication, se sont appropriés ses fondements et mécanismes pour servir des objectifs commerciaux. Tout y est pensé et mesuré, et on parle évidemment ROI de la campagne.

On discernera donc désormais les projets dont la communication repose sur une stratégie virale pensée en amont et les projets qui, par leur contenu ou le contexte dans lequel ils évoluent, ont suscité une vive réaction du public, plus ou moins attendue, et qui ont donc « buzzé ».

Un bon exemple pourrait être le site « Viedemerde.com ». Bien que n’ayant pas de stratégie de communication particulièrement virale, le concept du site a rapidement été plébiscité par les internautes qui en ont parlé spontanément autour d’eux. Le site a donc rapidement gagné en notoriété grâce à un effet de « buzz » naturel non maîtrisé.

Au delà de l’aspect trendy de la chose, c’est une véritable révolution de communication qui est en train de s’opérer. Nous sommes passés d’un modèle où les entreprises criaient le plus fort possible un message peu intéressant et peu personnalisé, à un modèle où ces mêmes entreprises préfèrent concevoir un message suffisamment intéressant et créatif afin qu’il soit relayé par des tiers, partageant ainsi l’effort de propagation du message.

Mais comment en est-on arrivés là ? Pourquoi d’un coup ce besoin de changer un modèle qui semblait bien marcher jusque là ? Les réponses sont multiples, mais on retrouve toujours plus ou moins les mêmes éléments. Long story short :

• De grands scandales ont éclaté ces dernières années (vache folle, crise économique,…), révélant les nombreuses déviances de l’industrialisation et de la société de consommation. Le consommateur se méfie de plus en plus des sociétés et réclame plus de transparence. Il se tourne vers les marques qui ont des valeurs, des marques plus humaines.
• Le media Internet se démocratise. L’utilisateur moyen se l’approprie, des plateformes lui permettent de publier facilement à son tour. Il devient consomm’acteur, avec un pouvoir de parole, libre de diffuser son opinion au monde entier. C’est le web 2.0.

Face à cela, les entreprises ont donc été « forcées » de revoir leur communication afin de la rendre plus transparente, plus vraie.

Conclusion et suite du dossier

Jeudi prochain, nous entrerons dans la pratique : nous nous attarderons à comprendre le processus créatif nécessaire à toute bonne campagne virale : comment concevoir un message créatif et cohérent, servant les valeurs de la marque et au potentiel viral bien réel.

Navigation dans le dossier

Le concept est assez simple, un budget AdWords de 200$ est donné à chaque équipe (ce qui est très faible). Un CPC (coût par clic) s’achète en moyenne entre 0,05 centimes et 5€, selon la concurrence du mot-clé sur lequel vous souhaitez vous positionner… Après, les enchères sont ouvertes ! Cela oblige a gérer cette campagne online avec des « pincettes »… Les campagnes sont menées de manière « asynchrone » à travers le monde. Mais cela ne change au rien au challenge !

Les équipes choisissent une entreprise « locale » pour mener une campagne de « search marketing » via AdWords. Une dernière contrainte : chaque équipe doit être liée à un professeur référent, mais cela ne devrait pas poser de problème (voir la fin du billet*).

A l’issue de ce choix, les équipes définissent une stratégie de campagne appliquée au budget qui leur est disponible ainsi qu’à la problématique de visibilité soulevée par l’entreprise choisie.

En plus de la gestion d’une campagne publicitaire « réelle », les équipes doivent fournir un rapport détaillé de leurs actions. Vous trouverez plus d’explications sur cette présentation officielle. Les équipes seront notées sur un nombre important de facteurs (ROI, gestion chirurgicale, présentation et clarté des rapports, organisation de la campagne au sein de l’application, etc.)

Cerise sur le gâteau, les gagnants de ce concours se verront offrir un voyage d’une semaine à San Francisco*, ainsi qu’une visite du « Googleplex » accompagnée par les développeurs d’AdWords.

Vous pouvez dès à présent découvrir l’application et ses milliers de subtilités : consulter le forum AdWords

Pour vous inscrire, il vous suffit de cliquer ici (pensez préalablement à convaincre votre professeur référent qui doit également s’inscrire). Alors, prêt à relever le défi ?

Objectifs de la formation

• Présenter les différentes étapes de la création d’un site web
• Informer sur les bonnes et mauvaises pratiques
• Fournir des conseils en matière de communication numérique

Notre formation vise à aider les Junior-Entreprises dans leurs démarches de communication numérique en améliorant leurs sites web. C’est également une manière évidente d’augmenter le nombre de contacts spontanés de clients via celui-ci.

Au programme

La création d’un site web, de A à Z

• Définir correctement les objectifs, les cibles, la concurrence et la stratégie
• Arborescence, contenus et référencement naturel
• Conception ergonomique
• Spécifications fonctionnelles, choix d’une solution technique adaptée
• Conception graphique
• Développement et intégration
• Recette : debug, dernières vérifications et livraison

Communiquer autour de son site internet

• Sur Facebook : créer et gérer une page fan
• Sur Twitter : comment se vendre sur Twitter
• Mettre en place une newsletter
• Quelques pistes à explorer

N’hésitez-pas à nous poser vos questions, donner vos impressions, et partager la présentation !

Il est très fastidieux d’écrire à chaque fois la signature adéquate à chaque email ou même de faire un copier coller d’un fichier contenant les différentes signatures.
Je vais donc vous montrer comment insérer différentes signatures automatiquement sous gmail, webmail très en vogue, à juste titre.

On pouvait auparavant utiliser un script greasemonkey (un plug-in firefox) mais cela forçait à devoir l’installer sur tous les pc que l’on utilise.
Beaucoup plus pratique, on va utiliser une application de Gmail labs.

1. Cliquez sur la petite fiole verte en haut à droite de gmail (ou bien cliquez sur « paramètres » et cliquez sur l’onglet « labs ») et vous arrivez sur une page qui liste différentes fonctionnalités supplémentaires, que l’on peut activer. Certaines sont très utiles.
2. Ctrl + f (ou pomme + f) afin de chercher dans la page, vous tapez ”stand” et vous tombez sur ”Réponses standardisées”. Activez cette fonctionnalité et allez tout en bas de la page pour enregistrer les modifications.
3. Maintenant,  cliquez sur ”Nouveau message” ; vous remarquez l’apparition de ”Réponses standardisées” à côté de ”joindre un fichier”.
4. Nous allons faire un usage détourné de cette fonctionnalité.
   Dans le corps de l’email, écrivez votre signature et cliquez sur ”Réponses standardisées” et puis sur ”Nouvelle réponse standardisée”, donnez un nom à cette signature et validez.
   Répétez cette opération pour enregistrer d’autres signatures.
5. Pour insérer une signature dans un email vous n’aurez alors qu’à cliquer sur ”Réponses standardisées” et sélectionner la signature que vous voulez.

C’est ce genre de petites astuces qui nous fait gagner beaucoup de temps !