Astuce comment utiliser Google Analytics pour le suivi dans Flash

Dans ce petit conseil, je vais vous montrer comment examiner la manière dont les visiteurs utilisent vos sites Web, vos widgets et vos jeux. Ensuite, nous verrons comment les améliorer en fonction de ces informations.!


introduction

Construire de beaux sites web est génial; la construction de sites Web qui ont un retour sur investissement élevé n'a pas de prix.

Récemment, j'ai rejoint l'équipe Web d'une agence de communication basée à Bruxelles, une équipe possédant des connaissances approfondies dans les domaines de la conception d'expérience utilisateur, des stratégies de contenu, du développement de logiciels et de la conception d'interactions. Nous passons beaucoup de temps sur les structures filaires, les scénarimages et les prototypes, ce qui garantit que la fonctionnalité et le contenu des sites Web sont optimaux avant. tout la conception graphique a lieu. Cela signifie que nos sites Web disposent d'une base solide sur laquelle s'appuyer, ce qui se traduit par un retour sur investissement plus élevé avec moins de temps consacré au développement..

Une grande partie de notre travail est sous le capot: Google Analytics dans Flash.

Cet outil nous permet de mesurer la performance de nos sites par rapport à nos objectifs prédéfinis: taux de rebond, chemins de clic et même des mesures personnalisées telles que le nombre de personnes ayant fait défiler une page donnée. Nos spécialistes analysent toutes ces informations et les utilisent pour optimiser le site. Si vous ne mesurez pas la façon dont les gens utilisent votre site, vous ne pouvez que deviner ses succès et ses échecs..

La configuration suivante est une version simplifiée d’une galerie d’images. Google Analytics a permis au client de déterminer quelles images suscitaient le plus d’intérêt. J'ai laissé de côté la construction de la galerie car elle dépasse le cadre de ce tutoriel. Il y en a déjà beaucoup sur Activetuts + - il suffit de chercher "galerie".

Nous allons nous concentrer sur la manière de configurer Google Analytics pour faire sourire les clients (et probablement aussi les vôtres…).


Google Analytics en action

Voici la galerie d'images simplifiée:

Comme vous pouvez le constater, lorsqu'un utilisateur clique sur une image, son identité est transmise à mon compte Google Analytics. Plus tard, je pourrai consulter toutes les statistiques sur lesquelles des images ont été cliquées, à quel moment, dans quels pays, etc..

(Bien sûr, vous supprimerez toutes les informations superposées quand elles sont en direct sur votre propre site!)


Étape 1: Comprendre les avantages

Imaginez-vous des heures, des semaines, voire des mois sur un site Web. Vous avez réussi à livrer les fichiers avant la date limite, mais quelques mois plus tard, il est clair que, malgré sa beauté, le site n'attire pas autant de clients que prévu. Google Analytics vous aide à passer en revue les habitudes de navigation des visiteurs et à déterminer quelles parties du site pourraient être mieux mises en valeur. La beauté c'est bien, mais je crois que le retour sur investissement devrait être votre principale priorité.

Dans un autre scénario, ce même outil vous aide à comprendre quelle partie de votre site Web compte le plus grand nombre de pages vues, combien de fois les visiteurs ont voulu vous contacter ou quels éléments de votre portefeuille sont les plus appréciés. Combien d'avantages pouvez-vous penser pour votre site?


Étape 2: configurer un compte Google Analytics

Si vous n'avez pas encore de compte Google, inscrivez-vous ici. Cela ne prend que quelques secondes..

Une fois que cela est fait, rendez-vous sur http://google.com/analytics et ouvrez un compte Analytics. Vous pouvez y donner un nom de compte pour les sites Web que vous souhaitez suivre..


Étape 3: à l'intérieur de la machine

Rendez-vous sur https://google.com/accounts/ManageAccount.
et utilisez vos compétences de souris pour cliquer sur Analytics.

Parfait, nous sommes maintenant dans la page de présentation. Vous devriez voir le nom de votre compte Analytics. cliquez dessus et vous vous retrouverez sur les profils du site.

Si vous n'avez pas configuré de site Web pour effectuer le suivi, cliquez simplement sur "Ajouter un profil de site Web". Entrez votre nom de domaine et votre pays, puis cliquez sur Terminer..


Étape 4: Récupérez votre code UA et votre statut de suivi

La page État du suivi apparaîtra automatiquement:

La partie la plus importante est votre identifiant de propriété Web. Il s'agit d'un numéro unique que Google Analytics utilisera pour envoyer et stocker le trafic de votre site Web. (Copiez ce code UA pour une utilisation ultérieure dans Flash ou notez-le.) Pour cette introduction, nous allons simplement conserver toutes les options à leurs valeurs par défaut..

Si vous souhaitez intégrer votre fichier SWF à votre propre page Web, le code javascript doit être collé juste avant la balise dans le code HTML de la page. Cela vous permettra de conserver des statistiques pour la page elle-même, ainsi que pour le fichier SWF. Cela vaut la peine d'insérer ce code dans chaque page de votre site.

Tout cela est formidable, mais vous ne pourrez toujours pas localiser avec précision l'interaction de vos visiteurs, car le code HTML est invisible pour votre contenu SWF / Flash actuel..


Étape 5: ramasser du bois

Pour savoir quelles parties de votre fichier SWF sont utilisées, consultez la page http://code.google.com/p/gaforflash/..

Cette étonnante API AS3 open source offre de nombreuses fonctionnalités pour l’intégration de GA dans Flash, mais même avec nos sites Web les plus grands et les plus complexes, nous n’avons jamais utilisé que deux fonctions. (Plus d'informations à ce sujet plus tard.) Assurez-vous de télécharger le dernier versement à droite de la page. (Revenez à tout moment pour lire le wiki, les problèmes, etc., pour en savoir plus sur cette vaste API.)


Étape 6: Installez les composants

Le zip contient un dossier de documentation avec la structure complète de l'API pour vous aider tout au long du processus. un dossier de bibliothèque (lib) où vous trouverez les deux composants; et certains fichiers texte que vous ne lirez probablement jamais. Au moins je n'ai pas;]

Pour installer les composants, assurez-vous que Flash est fermé, puis accédez à:

  • Utilisateurs Windows: C: \ Programmes \ Adobe \ Adobe Flash CS X \ language \ Configuration \ Composants
  • Utilisateurs Mac: Macintosh HD / Applications / Adobe Flash CS X / Configuration / Composants

À ce stade, vous devez créer un répertoire nommé "Google" et copier les fichiers du dossier \ lib \ dans le zip..

Fondamentalement, les deux composants vous offrent les mêmes fonctionnalités mais sont développés à des fins différentes. Le composant Analytics est destiné aux utilisateurs non familiarisés avec AS3. Je suppose que la plupart d’entre vous utilisez déjà AS3. Nous allons donc utiliser le composant AnalyticsLibrary..


Étape 7: Nourrir le feu

Dans Flash, ouvrez la FLA du projet sur lequel vous travaillez, cliquez sur Fenêtre> Composants, et faites glisser le composant AnalyticsLibrary dans votre bibliothèque.


Étape 8: Action! (Scénario)

Que vous codiez sur la timeline ou utilisiez une classe de document, vous devez effectuer certaines importations:

 // importer les classes d'analyse import com.google.analytics.AnalyticsTracker; importer com.google.analytics.GATracker;

En outre, dans votre code, créez une nouvelle instance de AnalyticsTracker:

 var tracker: AnalyticsTracker = nouveau GATracker (this, "UA-XXXXXX", "AS3", true);

Les paramètres sont les suivants: stage, code UA, mode actionscript 3, débogueur visuel activé / désactivé. Laissez-les tous tels que je les ai définis, à part le code UA que vous devrez échanger pour le vôtre. Définissez le dernier paramètre sur faux lorsque vous avez terminé vos phases de test, comme lorsque vrai il créera une superposition sur votre fichier SWF comme dans l'exemple ci-dessus.

Testez-le en ajoutant un écouteur et un gestionnaire d'événements Click à l'un de vos clips ou boutons:

 myMc.addEventListener (MouseEvent.CLICK, onClick);
 function onClick (event: MouseEvent): void // rend vos clients heureux. // utilise 'event.target.name' au lieu de 'event.target' // ceci affichera 'myMc' au lieu de [object myMc], ce qui est évidemment une sortie plus agréable. var mySelection: String = event.target.name; tracker.trackPageview ("gallery =" + mySelection); 

Ici, nous utilisons le trackPageView () une fonction. Utilisez-le à des fins de navigation. Vous pouvez ajouter une chaîne pour que votre client sache quelle partie est suivie. Dans ce cas, nous suivons quelle galerie a été déclenchée. Donc, copiez et collez ce code partout où vous souhaitez suivre vos interactions et donner une chaîne compréhensible aux données.

Par exemple, si vous avez un bouton "inviter à l'action" sur la scène pour attirer de nouveaux clients potentiels, vous pouvez écrire:

 tracker.trackPageview ("Engagez-moi");

… Dans le gestionnaire d'événements Click pour ce bouton. Ou si vous voulez savoir combien de fois ils ont lu votre disclaimer:

 tracker.trackPageview ("Disclaimer");

Je suis sûr que vous avez l'idée.


Étape 9: Suivi des événements

Utilisez le suivi des événements si vous souhaitez savoir quel événement vidéo ou MP3 est en cours de lecture, ou lorsque l'utilisateur le met en pause, par exemple. C'est fondamentalement pour toute action qui ne représente pas l'ouverture d'une "page".

Le code ressemble à ceci:

 trackEvent (catégorie, action, label);

Par exemple:

 tracker.trackEvent ("vidéos de profil", "lecture", "première vidéo: introduction");

De plus, vous pouvez ajouter un quatrième paramètre. Cela peut représenter n'importe quelle valeur, mais il doit s'agir d'un entier (nombre entier). Par exemple, vous voudrez peut-être indiquer l'heure exacte à laquelle la vidéo a été suspendue.

C’est formidable de voir à quel point votre diffusion en continu ou votre téléchargement est performant pour vos visiteurs (tout le monde n’a pas une connexion Internet de premier ordre):

 var currentTime: Date = new Date (). heure; // récupère l'heure actuelle // charge la vidéo ici var readyToRoll: Date = new Date (). time - currentTime; // prend le temps nécessaire pour charger la vidéo tracker.trackEvent ("vidéos de profil", "lecture de la vidéo", "vidéo 1/3: introduction", readyToRoll);

Étape 10: consultez les données dans Google Analytics

Accédez à http://google.com/analytics/settings/ et cliquez sur le nom de votre compte. En regard de votre nom de domaine, cliquez sur Afficher le rapport..

Ici, vous verrez une chronologie. (Remarque: en fonction du temps de réponse de votre serveur, le stockage des données peut prendre un certain temps, mais cela ne devrait pas être trop long.) Sélectionnez les dates auxquelles vous avez testé en utilisant le calendrier en haut à droite:

Localiser la vue d'ensemble du contenu; vous pouvez voir ici quels événements ou boutons ont été déclenchés:

Comme vous pouvez le voir, comme je l'ai expliqué quelques pas en arrière, event.target.name affiche un "joli" nom comme "/ gallery = galerie 1", tandis que event.target renvoie quelque chose comme "[object picture1]"

En cliquant sur l'un de ces liens - par exemple, "/ gallery = gallery2" - vous pourrez voir des informations détaillées, telles que la résolution d'écran de vos utilisateurs, lorsque vous choisissez une option dans le menu déroulant..

Il existe une source d'informations riche et approfondie dans presque chaque branche du module Google Analytics. Il est presque impossible de tous les énumérer. N'aie pas peur regardez autour de vous et voyez quelles données vous pouvez fournir à vos clients et à vous-même.


Étape 11: Éliminez-vous des statistiques à l'aide de filtres

C'est une bonne idée de filtrer votre propre comportement; sinon, cela vous donnera des données incorrectes puisque vous allez probablement le tester en détail.

Pour ce faire, vous pouvez filtrer toute activité provenant de votre adresse IP. Veuillez noter que cela ne fonctionnera que si vous avez une adresse IP statique. Il y a beaucoup de documentation dans les fichiers d'aide; Je ne peux pas tout couvrir ici. Découvrez http://www.google.com/support/googleanalytics/bin/answer.py?hl=fr&answer=55481

Les filtres peuvent également être utiles pour d'autres raisons. Voici quelques informations supplémentaires: http://www.google.com/support/googleanalytics/bin/topic.py?hl=fr&topic=11091.


Étape 12: La fin est le commencement…

Dans ce petit conseil, je n'ai couvert qu'un flocon de neige au sommet de l'iceberg de ce que vous pouvez faire avec cette API étonnante. Il s'agit d'un aperçu rapide des deux fonctions les plus utiles avec lesquelles nous travaillons pour améliorer nos sites Web et répondre aux souhaits de nos clients..

Vous pouvez également définir des objectifs prédéfinis, regrouper des utilisateurs qui (par exemple) utilisent des moniteurs à écran large, baser vos analyses sur des mots-clés de moteurs de recherche, etc. Pour vos clients, vous pouvez envoyer un courrier électronique avec des rapports quotidiens, hebdomadaires ou mensuels (sous forme de formats xml, PDF ou autres), ou même leur donner accès à votre page Analytics. Si vous souhaitez plus d'informations, s'il vous plaît demander dans les commentaires!


Mes opinions sur les sites Web Flash avec moteur de recherche

Bien qu'il soit avantageux de lire et de retracer les interactions de vos visiteurs, l'utilisation de Flash dans un monde propice au référencement est encore très éloignée. Je vous ai encouragé à concevoir un site Web optimal et à mettre l'accent sur le retour sur investissement, mais nous n'en sommes pas encore là.

Une bonne étape suivante serait d’examiner le framework Gaia et d’utiliser sa puissante configuration pour travailler avec swfaddress et deeplinking. Cela vous permettra de suivre les pages individuelles de votre projet de site Web et en combinaison avec votre magie nouvellement apprise de Google Analytics, je suis sûr que non seulement vos clients souriront..

Note de l'éditeur: Nous avons quelques tutoriels sur Gaia, ne vous inquiétez pas;)

Je travaille depuis plus de 10 ans dans le monde du graphisme et n'ai jamais eu le pouvoir de savoir exactement ce que veulent mes clients et visiteurs. J'aime souvent l'appeler "marketing et recherche gratuits à partir de votre ordinateur". (Honnêtement, si vous vous demandez pourquoi mon site n'utilise pas cette technologie, j'espère pouvoir le relancer d'ici la mi-2010 * sirote un café *)

J'espère que cela vous ouvre de nouvelles portes et renforce vos compétences. Bonne chance et amusez-vous bien!