Catégories
Productivité Developper

Le meilleur outil de capture d’écran

Cet article va rendre votre vie un tout petit peu meilleure. Aujourd’hui, vous allez découvrir le meilleur outil de capture d’écran sous la forme d’un extension gratuite pour Chrome / Brave / Firefox / Edge / Safari: Awesome Screenshot.

Comme des centaines d’autres extensions de navigateur, Awesome Screenshot vous permet de capturer ce qui se passe sur votre écran. Mais là où les autres ne s’aventurent qu’à ajouter une ou deux fonctionalités, Awesome Screenshot déploit un armada d’astuces qui vont vous faire gagner du temps. L’extension est gratuite et vous pouvez ajouter des fonctionnalités (1) en créant un compte et (2) plus encore en vous abonnant.

Au moment de la rédaction de cet article, leur site indique que l’extension a été installée par 3 millions de personnes sur l’ensemble des plateformes. TROIS MILLIONS.

Pourquoi Awesome Screenshot est le meilleur outil de capture d’écran?

En deux mots, l’extension vous permet effectivement de capturer une copie d’écran ou une video. Pour la copie d’écran, plusieurs options s’offrent à vous:

  • Partie visible de la page
  • Page en totalité: partie visible et non affichée (déroulement automatique de la page vers le bas)
  • Partie spécifique de la page
Le meilleur outil de capture d'écran -
Onglet Capture d’écran de Awesome
Screenshot dans le navigateur Brave

Là où la magie opère, c’est que les developpeurs ont compris que faire la copie d’écran n’est que 50% de la bataille. Résultat, on y gagne un vrai outil de collaboration très intuitif et versatile. Tout y passe: on peut flouter, redimensionner au pixel près et en gardant le ratio de l’image, on ajoute des formes et du texte… Si on sait se servir de Powerpoint, on sait utiliser cet outil.

Quelques exemples d'annotation sur la page d'accueil de la Fnac, le tout dans un cadre "Chrome" et une bordure de couleur.
Quelques exemples d’annotation sur la page d’accueil de la Fnac,
le tout dans un cadre « Chrome » et une bordure de couleur.

Enfin, pour sauvegarder notre chef d’oeuvre, il existe de nombreuses options très utiles. On peut mettre l’image dans le presse-papier (clipbopard), la telecharger, en faire un PDF ou l’imprimer. Vous trouverez aussi des options d’integrations plus ou moins poussées avec les platformes collaboratives les plus comunes: Slack, Trello, Jira, Asana, github et Google Drive.

Le meilleur outil de capture d'écran -
Une des raisons pour lesquelles Awesome Screenshot est le meilleur outil de capture d’écran !

Awesome Screenshot gère aussi bien la vidéo!

Dès qu’on entre dans le monde de la vidéo, on fait face à des poids lourds de la captation, du montage et de la compression. Clairement, le positionnement de cette petite extension n’est pas d’aller battre Adobe Première sur son terrain… d’autant que tout le monde n’a pas besoin d’Adobe Première. Dans un monde post-COVID, on a tous eu l’occasion de devoir montrer des choses à distance: documenter une procédure, enregistrer un problème d’interface utilisateur ou simplement depasser la barière de la langue.

Pour tous ces cas, pas besoin de l’artillerie lourde. On veut quelque chose de rapide, qui s’installe sur n’importe quelle machine, gratuitement et qui marche. C’est exactement le plan de bataille de l’onglet vidéo.

Concrètement, pour la capture de vidéo, vous pourrez cibler l’ensemble de votre bureau, l’onglet de votre navigateur ou uniquement votre webcam; le tout jusqu’en 4K. Là encore, vous pourrez stocker en local ou sur le cloud.

Onglet Vidéo de Awesome Screenshot dans le navigateur Brave
Onglet Vidéo de Awesome Screenshot
dans le navigateur Brave

Cette fois-ci, pas d’option d’annotation trop complexe. Gèrer de la vidéo dans un onglet de navigateur, c’est pas encore pour 2022. Pour autant, il faut noter le choix d’export en different formats (MP4, WebM) ou directement sur le cloud (ex: youtube) en un clic.

Télécharger le meilleur outil de capture d’écran

Pour la partie « copie d’écran », il n’y a pas à chercher plus loin. Installez immediatement cette extension, laissez la se mettre à jour à l’occasion et gagnez du temps ! Cliquez sur le logo pour installer la version qui correspond à votre navigateur.

Le meilleur outil de capture d'écran -
Installer gratuitement l’extension sur votre navigateur

Pour la partie « capture de vidéo », je trouve que ça fait le job si on veut vraiment juste capturer ce qu’on voit dans son navigateur, sans filtre.

Si vous avez besoin d’aller plus loin, notamment pour faire un peu de montage, jetez un coup d’oeil à Movavi Screen Recorder. Il est très simple à prendre en main et vous permettra d’éditer des videos sans vous ruiner, ni financierement, ni en heures de formation, C’est un très bon concurrent de Adobe Camtasia pour une fraction du prix.

Si vous avez le temps et l’envie d’apprendre mais pas encore le budget, DaVinci Resolve est l’alternative professionnelle (gratuite pour usage personnel) qu’il vous faut. C’est la solution de montage, étalonnage, effets spéciaux et post-audio utilisée par de nombreux studios pour produire des films comme… les Marvel, GodZilla vs King Kong et beaucoup d’autres qui ont pour point commun d’avoir de belles images retouchées !

Catégories
Developper 1and1

Comment activer la mise en cache du navigateur chez 1and1 ?

Depuis que Google a lancé la mode en 2015, le référencement est devenu synonyme de course au site le plus rapide. Avec la poussée des smartphones (demande), de moyens (PHP 7, CDN, baisse des prix de l’hébergement) et d’outils de contrôle, il n’a jamais eu de meilleur moment pour tenter de donner un coup de boost à son site.

A quoi sert la mise en cache du navigateur ?

Dans le monde merveilleux d’internet, tout est basé sur la notion de relation entre un client (l’utilisateur) et un serveur (le « site »). En passant, cela s’applique aussi au fameux Peer to Peer (P2P) notamment utilisé pour le partage de fichiers, à la différence près que les utilisateurs de ce protocole sont à la fois client et serveur.

Comment activer la mise en cache du navigateur chez 1and1 ? -

Dans le cadre de notre sujet ici, on a donc un visiteur qui se rend sur un site. La question est donc de savoir comment accélérer la mise à disposition du contenu que le visiteur vient consulter. La mise en cache consiste à garder une copie d’une page déjà visitée pour que le visiteur n’ait pas à attendre que le site lui renvoie la même information deux fois. C’est malin. Il existe plusieurs type de mise en cache mais ici nous parlerons spécifiquement de la mise en cache du navigateur. Pour affiner l’idée, on va donc dire au navigateur (Chrome, Firefox, Internet Explorer, Safari, Opéra,…) du visiteur qu’il doit garder une copie des éléments de la page qu’il reçoit, pendant une période à définir. A la prochaine visite, au lieu d’aller demander au serveur de tout lui renvoyer, le navigateur aura tout de suite sous la main, en « local », les images, textes et scripts qui composent la page. Difficile de faire plus simple.

Comment activer la mise en cache du navigateur chez 1and1 ? -

Le pendant de cette méthode, c’est que si la page source a changé, le navigateur de notre visiteur risque de ne tout simplement pas le savoir… et donc de resservir le même contenu tant qu’il a reçu l’ordre de le faire.

Comment activer la mise en cache du navigateur ?

Ce système puissant doit donc être utilisé judicieusement. S’il existe des astuces pour forcer la mise à jour du cache des visiteurs, rien ne vaut un peu de réflexion en amont pour choisir la bonne durée de mise en cache. D’une part, on ne mettra pas la même durée de mise en cache à tous les éléments d’un site et d’autre part on ajustera cette durée en fonction de la fréquence de mise à jour. Quand je parle de mise à jour, je ne parle pas de la publication d’un nouvel article via un site WordPress, mais bien de la mise à jour d’une ressource statique, par exemple une bannière, ou le favicon de votre site.

C’est avec le code ci-dessous que l’on va arriver à nos fins. Il est assez simple à éditer, si vous souhaitez ajouter des extensions de fichiers ou changer la durée en question (exprimée en secondes, 1 an = 31536000 secondes).

[sourcecode language= »plain »]
## MISE EN CACHE DU NAVIGATEUR ##

# UN AN POUR LES IMAGES
<filesMatch « .(jpg|jpeg|png|gif|ico)$ »>
Header set Cache-Control « max-age=31536000, public »
</filesMatch>

# UN MOIS POUR LES SCRIPTS
<filesMatch « .(css|js)$ »>
Header set Cache-Control « max-age=2628000, public »
</filesMatch>

## MISE EN CACHE DU NAVIGATEUR ##
[/sourcecode]

D’un point de vue technique, c’est pas très compliqué et ça marche sur un environnement mutualisé 1&1. Ça devrait du coup marcher chez la plupart des hébergeurs… mais n’ayant testé que 1and1, je vous laisse me confirmer !

Il nous reste maintenant qu’à éditer (ou à créer) le fichier .htaccess à la racine de votre site. Pour cela, vous pouvez simplement utiliser votre client FTP (Filezilla, Flash FXP) et faire un clic droit pour éditer le fichier. Une fois le fichier ouvert, copiez / collez le code ci-dessus à la suite du code qui doit déjà s’y trouver.

Comment activer la mise en cache du navigateur chez 1and1 ? -

Si vous n’avez pas de client FTP, mais que vous tenez à éditer ce fichier, vous pourrez aussi passer par la console de 1&1 qui permet de transférer des fichiers. Depuis votre espace client, allez dans « Hébergement » (menu de gauche) puis dans le cadran « Gérer l’espace Web », choisissez « 1&1 WebTransfert ».

Comment activer la mise en cache du navigateur chez 1and1 ? -

L’application qui s’ouvrira vous permettra de télécharger le fichier .htaccess pour l’éditer sur votre ordinateur. Il faudra bien sur le remettre en ligne par la suite en écrasant l’ancienne version. Il peut être judicieux de faire une sauvegarde du fichier original !

Comment tester que mon site utilise la mise en cache du navigateur ?

Pour être sûr que tout marche bien, il suffit d’utiliser l’un des milliers d’outils disponibles sur le marché pour faire le test. L’une des références est bien sur le Google PageSpeed Insight, qui fera un audit complet et gratuit d’une url de votre site. Dans la flopée de critères qui seront testés, on retiendra comme résultat que seuls les scripts qui ne dépendent pas de votre site seront épinglés… Ce qui implique donc que votre site exploite bien le système de cache du navigateur : faites un test avant / après pour en avoir le cœur net.

Comment activer la mise en cache du navigateur chez 1and1 ? -
Comment activer la mise en cache du navigateur chez 1and1 ? -

Pour les plus tatillons, je précise que ce n’est bien sûr pas une bonne chose d’avoir encore des ressources qui ne sont pas en cache… mais ces scripts étant externes (Google Analytics, AdSense, Facebook connect, …) on ne peut rien y faire !

Pour les plus techniques, si vous voulez creuser plus loin ce que le fichier .htaccess peut apporter à votre site, n’hésitez pas à jeter un coup d’œil à l’article htaccess : Performances et temps de chargement.

D’ici là n’hésitez pas à confirmer si ce script marche aussi bien chez d’autres hébergeurs que chez 1and1.

Catégories
Design Developper

Adobe Creative Suite 6 (CS6) sort le bout de son nez avec Photochop CS6

Adobe Creative Suite 6 (CS6) sort le bout de son nez avec Photochop CS6 -En avril dernier, une partie de la Creative Suite recevait une mise à jour lors du passage à la version 5.5. Déjà couvert dans un précédant article, les changements se comptaient tant du côté technique (Content Aware, une version 64bits et un peu de 3D pour Photoshop; JQuery et HTML5 pour Dreamweaver; eBook pour InDesign) que du modèle de licence qui ouvrait ENFIN la voie aux abonnements.

Quoi de neuf chez Photoshop CS6 ?

Adobe Creative Suite 6 (CS6) sort le bout de son nez avec Photochop CS6 -8 mois plus tard, la pre-release de Adobe Photoshop CS6 commence à fuiter un peu partout. Au menu de cette nouvelle version, toute une série d’avancées qui raviront les amateurs comme les professionnels:

  • Avancée « spectaculaire » pour le détourage (notamment les cheveux) et les manipulations photo les plus communes
  • Optimisation des workflows de production
  • Transformation de 2D vers 3D
  • Nouvelles options de peinture « naturelle », entendez par là que vous pourrez mélanger les couleurs entre elles, comme si vous aviez une vraie palette de peintre devant vous.
  • Amélioration du support HDR, ce traitement si spécifique qui donne aux photos un aspect si détaillé… et parfois si faux. Photoshop a beaucoup de concurrence à ce sujet.
  • Support natif du 64 bits (y aura-t’il encore une version 32 bits ?)
  • Ah oui et un truc tout bête : la capacité de prendre une couleur ou quelle se trouve sur l’écran, même en dehors de la fenêtre de Photoshop, ENFIN !!De tout cela, ce qui sautera en premier aux yeux c’est une nouvelle interface, plus sombre qui viendra habiller le nouveau Photoshop, et sans aucun doute l’ensemble de la suite CS6.
Adobe Creative Suite 6 (CS6) sort le bout de son nez avec Photochop CS6 -
L’excellentissime site de formation en ligne lynda.com propose une découverte en vidéo de cette nouvelle interface « Dark ».
A noter aussi de récentes annonces via la chaîne Youtube de Adobe Photoshop. Je vous conseille de jeter un coup d’oeil à la vidéo présentant le « Content aware move » qui est ni plus ni moins que l’évolution de la fonctionnalité la plus soulignée à la sortie de Photoshop CS5.
EDIT: Voici une vidéo présentant les retours de premiers utilisateurs de cette version de test.

Et les autres ?

Je n’ai pas vu de traces d’autres produits disponible en pre-release mais j’imagine que ca ne devrait plus trop tarder maintenant. D’ici là, voilà ce qu’on peut trouver comme information au sujet du reste de la suite :
  • Adobe Illustrator CS6 supportera le 64 bits, intégrera une nouvelle interface et proposera un des options de gestion de dégradés plus puissantes.
  • Adobe Dreamweaver CS6 supportera lui aussi le 64 bits (?!?). On annonce HTML5 et CSS3 qui sont déjà pris en compte par CS5.5. Bref, autant s’attendre à une mise à jour mineure pour Dreamweaver.
  • Adobe Premiere Pro CS6 proposera principalement des gains de performances, notamment pour la HD. Prévoir des changements d’interface aussi.
  • Adobe Helium CS6 : un nouveau venu permettant de convertir des FLA en HTML5.

Lors d’une interview en juillet dernier, Shantanu Narayen, le CEO d’Adobe confirmait les rumeurs selon lesquelles CS6 serait lancé courant 2012. On reviendrait alors à un calendrier de 24 mois entre chaque releases majeures de la suite d’Adobe, comme il y a quelques années.

Si ce cycle de production permet d’avoir de vraies évolutions, c’est plutôt une bonne nouvelle.

En attendant, voilà une petite vidéo revenant sur l’emprise de Adobe Photoshop sur la vie au quotidien à travers les magazines de mode. C’est plutôt bien fait, jugez par vous même.

Update : Depuis début janvier 2013, Adobe « offre » la suite CS2 gratuitement. Plus précisément, Adobe a coupé les serveurs d’activation utilisé par le script d’installation. Résultat, vous pourrez donc télécharger, installer et utiliser CS2 (pour Windows et Mac) avec le numéro de série indiqué sur la page de téléchargement. Avant de vous jeter dessus tout de suite, gardez bien en tête que CS2 est sortie en 2003, il y a 10 ANS !

Catégories
Developper 1and1

Activer PHP5 chez 1and1, Free, OVH, Nuxit et les autres

Les offres grands public d’hébergement entrée de gamme attirent tous ceux qui ont envie de commencer à construire leur vie numérique, lancer leur propre site ou tout simplement bidouiller un peu. 1and1, OVH, Free, Nuxit et de nombreux autres offrent des tarifs raz les pâquerettes dans l’espoir de voir passer les clients plus exigeants sur des offres pro. Toujours est-il que les plans « bas de gamme » permettent tout de même de s’amuser un peu si l’on prend quelques précautions.

Pour d’obscures raisons de compatibilité, la majorité des espaces web sont encore configurés pour des standards quelques peu poussiéreux. Par exemple, 1and1 vous proposera du php4 (dont le support n’est plus assuré depuis aout 2008) alors que PHP5, sortie en 2004, présente de nombreux avantages en termes de sécurité, performance et adoption d’autres standards. Je cite 1and1 mais j’entends que c’est encore assez représentatif de l’ensemble du marché.

Avec l’avancée des technologies, l’importance de la vitesse, stabilité et de sécurité que l’on voit bien aujourd’hui; de nombreux éditeurs ont du tourner le dos à PHP4 pour se concentrer sur PHP5. Et là, c’est le drame. Avec un espace web en PHP4, une installation WordPress  standard vous affichera gentiment ce petit message d’erreur et refusera d’aller plus loin.

Activer PHP5 chez 1and1, Free, OVH, Nuxit et les autres -

Fort heureusement, il existe une parade tout simple pour « reconfigurer » votre espace afin qu’il accepte PHP5. Petit bémol, en fonction de votre hébergeur, il se peut que vous ne fassiez que contourner le message d’erreur sans réellement activer PHP5. Si c’est le cas, il ne vous restera que des solutions plus drastiques, comme changer de forfait ou de prestataire.

Comment activer PHP5 ?

C’est très simple. En fonction de votre fournisseur, il vous suffit d’installer l’un des fichiers suivants à la racine de votre site.

Pour information, il s’agit de fichier au format « .htaccess » que vous pouvez ouvrir et éditer sur Windows / Mac OS / Linux. Pour faire plus simple, je vous les ai déjà crée:

1and1

Créez un fichier .htaccess avec le code suivant ou téléchargez simplement ce fichier. A noter qu’il existe depuis quelques mois une option dans le panneau de configuration. Connectez-vous à votre interface d’administration.

[sourcecode]AddType x-mapp-php5 .php[/sourcecode]

OVH

Créez un fichier .htaccess avec le code suivant ou téléchargez simplement ce fichier.

[sourcecode]SetEnv PHP_VER 5[/sourcecode]

Free

Créez un fichier .htaccess avec le code suivant ou téléchargez simplement ce fichier.

[sourcecode]php 1[/sourcecode]

Infomaniak

Infomaniak propose une option dans le panneau de configuration. Connectez-vous à votre compte et cherchez le lien dans vos parametres de sites.

AquaRay

Créez un fichier .htaccess avec le code suivant ou téléchargez simplement ce fichier.

[sourcecode]AddHandler php5 .php[/sourcecode]

Vala

Créez un fichier .htaccess avec le code suivant ou téléchargez simplement ce fichier.

[sourcecode]SetEnv DEFAULT_PHP_VERSION 5[/sourcecode]

Online.net

Créez un fichier .htaccess avec le code suivant ou téléchargez simplement ce fichier.

[sourcecode]AddType application/x-httpd-php5 .php[/sourcecode]

Nuxit

Créez un fichier .htaccess avec le code suivant ou téléchargez simplement ce fichier.

[sourcecode]options -indexes
AddHandler x-httpd-php5 .php
AddType application/x-httpd-php5 .php[/sourcecode]

GoDaddy

Créez un fichier .htaccess avec le code suivant ou téléchargez simplement ce fichier. Il y a une option dans votre panneau de configuration proposant l’option (Tableau de bord >> My products >> Language).

[sourcecode]AddHandler x-httpd-php5 .php[/sourcecode]

Et après ?

La majorité des améliorations apportées seront transparentes pour les utilisateurs, assurez-vous pour autant que vos pages faisant appel à des bouts de code un peu exotique soient testées lors de cette migration. Non pas que vous deviez changer grand chose, mais il y a fort à parier qu’il en existe une version écrite en PHP5 ou que la fonction soit maintenant native dans le langage.

Dans une prochaine note, je couvrirai la compression à la volée pour optimiser la vitesse de chargement de vos sites.

Catégories
Developper Gestion de la qualité

Mesurer son trafic sur plusieurs domaines au travers d’un iframe avec Google Analytics

Derrière ce long titre se cache un problème que beaucoup de sites rencontrent, notamment chez les affiliés.

Principe de l'affiliation

Imaginons que vous ayez un site de contenu et un site de ecommerce en marque blanche, typiquement vous êtes affiliés à un service proposé par les nombreuses plateformes d’affiliation (Zanox, Commission Junction, …). Votre site de contenu est correctement tagué ce qui vous permet d’en faire le suivi statistique via l’interface de Google Analytics. Le site de ecommerce vers lequel vous envoyez du trafic comporte aussi le même marqueur Google Analytics et vous voyez aussi les visites dans votre rapport.

D’un point de vue code, le marqueur en question doit probablement ressembler à ca ou a une version plus récente:

<script type="text/javascript">
// <![CDATA[
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "https://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
// ]]></script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("VOTRE-CODE-PERSONNEL-GOOGLE-ANALYTICS");
pageTracker._trackPageview();
} catch(err) {}
</script>

Si vous n’arrivez pas à ce niveau de suivi, il y a de fabuleuses ressources pour vous aider à mettre en place le code GA en fonction de milliers de cas bien précis. Une fois que vous aurez fini l’implémentation et que vous verrez des stats de trafic dans votre tableau de bord, revenez sur cette page pour la suite !

Si vous êtes dans ce cas là, c’est déjà bien. Pour autant, vous passez à côté d’un trésor inestimable sans même le savoir. Pour cela il va falloir faire une petite modification sur votre code, mais avant de se lancer là-dedans, voyons les raisons pour lesquelles il faut faire cet effort.

Customiser le code recommandé par Google ?

Le tracker fournit par défaut par Google est une version de base, simplifiée, d’un script bien plus long. Basé sur du Javascript, il y a de nombreuses fonctionnalités qu’il suffit de rajouter afin d’obtenir un comportement différent, plus en phase avec ce que vous cherchez à faire.

Parmi ces fonctions, on va s’intéresser à un cas pas tellement détaillé dans les pages de support de Google et qui génère de nombreuses questions sans réponse dans les forums d’utilisateurs. Par défaut, une session de GA se définit selon une durée et un emplacement (nom de domaine); si on dépasse cette durée ou si l’on change de périmètre, on crée une nouvelle session. Pour étendre le périmètre de notre site de contenu à notre site de ecommerce appelé par iframe, on va utiliser les fonctions suivantes :


pageTracker._setDomainName('NOM-DE-DOMAINE-A-OU-B');
pageTracker._addIgnoredOrganic('NOM-DE-DOMAINE-A-OU-B');
pageTracker._setAllowHash(false);
pageTracker._setAllowLinker(true);

Ces quatre lignes vont indiquer plusieurs choses à l’outil de collection d’information. Tout en déclarant que l’on est sur le domaine A (ou B), on va dire à GA de ne pas se soucier du nom de domaine en question tant qu’on utilise un code spécifique pour lier d’un nom de domaine à un autre. En clair, on ne veut pas avoir de distingo pour nos pages correctement taguées mais on veut aussi se laisser l’opportunité de remarquer toutes les sources et fuites possibles de trafic en dehors de ça.

Il y a de nombreuses autres options à découvrir, mais pour notre problème, on a maintenant tout ce qui nous faut. Il nous reste donc qu’a implementer le code ET le système qui va nous permettre de passer les informations de session d’un nom de domaine à un autre. Vous devrez donc mettre à jour toutes vos pages (sur les multiples domaines), voire tout ou partie de vos liens. La bonne nouvelle, c’est que je détaille tout ici.

Étape 1: code analytics pour le site principal

Commençons par le plus simple en mettant à jour notre code sur le site principal. S’il s’agit d’un blog WordPress, de nombreux plugins vous permettent de faire ca en quelques clics. Si vous ne trouvez pas votre bonheur, vous pourrez toujours éditer le thème de votre blog pour ajouter au pied-de-page (footer.php) le code en question. Si vous avez monté le site vous-même, vous devez mieux que personne savoir comment faire. Le cas échéant, je vous souhaite juste d’avoir isolé le code analytics dans un fichier à part et d’y faire appel pour toutes les pages que vous souhaiter tracker.

Code pour le site A:

<!-- Code Google analytics -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker('VOTRE-CODE-PERSONNEL-GOOGLE-ANALYTICS');
pageTracker._setDomainName('NOM-DE-DOMAINE-A');
pageTracker._addIgnoredOrganic('NOM-DE-DOMAINE-A');
pageTracker._setAllowHash(false);
pageTracker._setAllowLinker(true);
pageTracker._trackPageview();
} catch(err) {}</script>
<!-- Fin : Code Google analytics -->

Bien entendu, n’oubliez pas de remplacer « VOTRE-CODE-PERSONNEL-GOOGLE-ANALYTICS » par votre code GA et le « NOM-DE-DOMAINE-A » par votre nom de domaine sans son prefixe (exemple: « emarketeur.fr »). Mettez tout ca en ligne et assurez vous que les données soient encore visibles sur votre tableau de bord GA les jours suivants.

Étape 2: code analytics pour le site appelé en iframe

Dans le cas d’école ou le second site est appelé en iframe, il s’agit bien souvent d’un site affilié et par conséquent, un site dont on maîtrise pas ou peu l’intégration html. Dans certains cas, comme avec Availpro.com, vous trouverez un interface d’administration vous permettant de changer le code en ligne, rien de plus simple. Dans d’autres cas, comme avec booking.com, il faudra passer par le responsable partenariat pour demander aux équipes techniques de mettre à jour le code, ce qui peut prendre plus de temps. Enfin, si vous ne pouvez pas ajouter / editer le code sur le site appelé en iframe, il n’y a pas grand chose à faire si ce n’est envoyé un email supplicateur aux administrateurs.

Code pour le site B:

<!-- Code Google analytics -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker('VOTRE-CODE-PERSONNEL-GOOGLE-ANALYTICS');
pageTracker._setDomainName('NOM-DE-DOMAINE-B');
pageTracker._addIgnoredOrganic('NOM-DE-DOMAINE-B');
pageTracker._setAllowHash(false);
pageTracker._setAllowLinker(true);
pageTracker._trackPageview();
} catch(err) {}</script>
<!-- Fin : Code Google analytics -->

Là encore, n’oubliez pas de remplacer les valeurs par votre identifiant GA et votre second nom de domaine (exemple: « booking.com »). Si vous constatez que le code est bien en ligne et que vous comptabilisez toujours du trafic dans les rapports de GA, passez à l’étape 3.

Étape 3: mettre en place le système de liens entre les deux sites

Cette étape est absolument nécessaire pour faire comprendre à GA que vos sites font partie du même compte. Dans sa documentation, Google explique clairement comment écrire les liens hypertextes, les formulaires mais il est plus hasardeux de trouver de l’information pratique et réutilisable autour des iframes. Heureusement, après plusieurs semaines de recherches et de tests, j’ai trouvé le moyen simple et propre de mettre en place les recommandations conceptuelles de l’ami Google.

Pour la page qui va charger l’iframe, ajoutez ce code pour ouvrir le body:

<body onload="loadPage()">

Au sein de la page, utilisez ce code pour charger votre iframe:

<script language="JavaScript" type="text/javascript">
function loadPage(){
	document.getElementById('myIframe').contentWindow.document.location.href = pageTracker._getLinkerUrl('url-de-destination-sur-site-B.html');
}
</script>
<iframe id="myIframe"></iframe>

Bien entendu, si vous avez plusieurs iframes sur une même page, il vous suffit de créer une « id » unique pour chaque au sein de la fonction LoadPage() et dans votre html. Je n’ai d’ailleurs pas appliqué de style en particulier sur cette iframe mais rien ne vous empeche d’appeler la class ou le style qui vous plairont.

Ca marche vraiment ?

A l’étape 3 plus qu’aux précédentes, il est vital d’effectuer une série de tests pour s’assurer qu’à aucun endroit vous auriez oublié d’éditer vos liens, formulaires ou iframes. Si tout est mis à jour, vous allez voir le changement dans vos rapports GA. Les changements ne sont pas rétro-actifs, vous pourrez donc comparer l’avant / après… et vous désespérer de ne pas l’avoir fait plus tôt.

Si vous avez un doute, n’hésitez pas à télécharger le fichier de démo. Vous y trouverez 2 fichiers html très simples. L’un appele l’aurte via l’exemple d’une iframe. Les deux fichiers comportent le tag Google Analytics que vous devrez utiliser.

Grâce à cette nouvelle configuration, vous allez pouvoir faire le suivi de vos visiteurs depuis leur point d’entrée jusqu’à la fin de session au travers de toutes vos pages. Concretement, vous allez pouvoir dire quel mot clef, quelle campagne AdWords vous rapporte le plus de succès. Vous pouviez avoir une vague idée mais votre analyse ne portait qu’à un seul nom de domaine, avec l’astuce décrite plus haut, vous allez réellement controler ce qui se passe sur votre site : quels visiteurs vous rapportent de l’argent, quels visiteurs ne sont intéressés que par le contenu et enfin vous allez pouvoir laisser tomber tous les mots clefs qui ne vous rapporte rien (et qui vous coûtent donc de l’argent).

Cercle vertueux de la Business intelligence

J’ai mis en place ce système sur quelques sites déjà. Une fois les rapports bien configurés dans Google Analytics (en utilisant les segments avancés par exemple), vous avez la plus simple et efficace arme pour piloter votre business online, rien que ça.

Bonne mise en place et bonne étude de vos stats !

Grégory Raby