Share
Découvrez comment analyser l’expérience utilisateur et les performances des sites Web Flash grâce aux analyses Use It Better. Ce didacticiel vous montrera comment intégrer un cadre analytique à un site de démonstration pour enregistrer les visites des utilisateurs et, avec un peu de magie, les lire comme si elles avaient été enregistrées sur vidéo.!
Les analyses Use It Better ne se limitent pas à l’examen du trafic de sites Web Flash complets, elles peuvent également être utiles lors des tests de convivialité ou lors de la mesure de mesures RIA. Plongeons dedans?
Jetons un coup d'œil au résultat final sur lequel nous allons travailler. Cliquez sur l'image ci-dessous pour rejouer un exemple de visite sur un site de démonstration, enregistré précédemment avec Use It Better:
Si vous souhaitez enregistrer et lire votre propre visite, cliquez ici pour visiter le site de démonstration, puis connectez-vous au panneau d'analyse en utilisant:
Dans l'onglet Visites, trouvez le vôtre et cliquez sur Lecture..
Pour les besoins de ce tutoriel, nous utiliserons un plan de base de Use It Better, mais le processus d'intégration est le même pour un plan gratuit..
Après avoir téléchargé et décompressé le paquet source, vous verrez qu'il y a deux dossiers à l'intérieur. Les deux contiennent des sources du même site Web. Au cours du tutoriel, nous allons travailler sur des sources de Site de démonstration dossier. Si vous souhaitez avoir un aperçu de ce que nous allons réaliser, cochez Site de démonstration - Résultat final dossier contenant des sources déjà intégrées à Use It Better.
Dans chaque dossier, vous trouverez un src dossier contenant les fichiers * .as et * .fla, et un bin-debug dossier contenant tous les fichiers nécessaires à la publication du site Web - * .swf, * .html, etc..
Si vous souhaitez en savoir plus sur tout problème que je couvre dans le didacticiel, vous devez consulter le wiki Utiliser mieux
Pour économiser votre temps, j'ai déjà téléchargé les classes du cadre Use It Better et les ai placées dans Site de démonstration / src / com / répertoire du paquet source du tutoriel. Il y a aussi adobe paquet dans com répertoire contenant quelques bibliothèques utiles utilisées par et distribuées avec le framework.
Dans des cas concrets, après avoir souscrit votre propre plan Use It Better (gratuit ou payant), vous devrez télécharger la structure à partir du panneau d'analyse, où elle se trouve dans la colonne de droite de l'écran. Réglages section.
Tout d'abord ouvert UIBDemo.fla et la classe principale du projet UIBDemo.as dans lequel vous devrez initialiser Use It Better.
Commencez par importer la classe principale du framework, uDash:
package import com.useitbetter.uDash; // noyau Use It Better class //? le reste du corps du paquet
Trouver init fonction qui est exécutée lorsque le film principal est ajouté à la scène. Initialiser uDash en ajoutant la ligne de code suivante:
fonction privée init (e: Event): void stage.addChild (uDash.init ()); // initialise et ajoute à la scène //? le reste du corps de la fonction
Enregistrez le fichier édité et testez UIBdemo.fla (Ctrl + Entrée). Le site Web aura le même aspect qu'auparavant, mais vous remarquerez un nouveau message dans la fenêtre de sortie:
u MESSAGE: Bienvenue sur uDash! Votre version est "uDash AS3 1.0". Profitez de développer! u MESSAGE: Connexion uDash au serveur de socket 59873.s.useitbetter.com:59873 OK. Valider la connexion? u MESSAGE: Connexion uDash au serveur de socket 59873.s.useitbetter.com:59873 est valide.
Cela signifie que le site Web a établi une connexion avec les serveurs Use It Better et enregistre maintenant votre activité..
Essayez de naviguer sur le site Web - remplissez et envoyez le formulaire de contact, jouez avec la voiture. Nous allons essayer de rejouer cette visite à l'étape suivante pour voir si l'enregistrement a bien fonctionné..
Si ce n'est déjà fait, il est grand temps de visiter http://panel.useitbetter.com et de vous connecter au projet à l'aide des informations d'identification suivantes:
Une fois que vous vous êtes connecté, vous verrez le rapport d'activité, mais je vous recommande de passer à l'onglet Visites. Dans la colonne de gauche, vous verrez toutes les visites enregistrées triées par heure - votre visite récemment enregistrée sera en haut..
Important: n'oubliez pas que vous n'êtes pas le seul à utiliser ce didacticiel et que plusieurs autres visites peuvent être enregistrées..
Sur la droite de la page, vous pouvez voir les détails de la visite. Cliquez sur Jouer bouton pour rejouer la visite.
Une fois que vous avez cliqué sur le bouton Lire, une nouvelle page s’ouvre et explique comment relire une visite enregistrée dans Flash IDE. Copiez simplement une commande de relecture, commentez votre original init, et collez-en un dans le presse-papiers en dessous:
Accentsconagua
// stage.addChild (uDash.init ()); // initialisez et ajoutez stage stage.addChild (uDash.init ('uTestSessionUrl @@ http: //panel.useitbetter.com/play/691d7f123f5d9780e613223e67a8a22/ses/c5a72002ab439aaba9f1818183030 | 15 19:57:29 GMT + 0200 2011 || uSessionDateTime @@ 2011-05-15 18: 57: 30 || uApiUrl @@ http: //api.useitbetter.com/ || uSessionHash @@ c5a72002ab439aaba2f9189718833035 || uProjectHash @ | @ 691d7f123f5d9780e613223e67ee8a22 ')) Maintenant, sauvegardez votre fichier AS et testez à nouveau l'animation Flash pour voir la rediffusion.
Eh bien, n'était-ce pas magique? Vous pouvez voir le mouvement de votre souris, les clics et même les frappes de touche de la visite enregistrée. Et vous l'avez fait avec seulement deux lignes de code!
Cependant, la rotation de la voiture ne fonctionnait pas du tout. Mais ne t'inquiète pas. Tout ce que nous avons à faire est d’apporter quelques ajustements que je traiterai dans les prochaines étapes. Mais avant de continuer, supprimez la relecture init et dégage le original:
stage.addChild (uDash.init ()); // initialise et ajoute à la scène
Sinon, vous reverrez la rediffusion.
Comme vous avez pu le constater, toutes vos interactions avec le site Web à l’aide de la souris et du clavier ont été enregistrées automatiquement. Cependant, tous les auditeurs ajoutés à la étape l'objet doit être enregistré manuellement.
Il y a un tel auditeur dans CarInfo.as de Site de démonstration \ src \ core \ sections \ car dossier. Vérifiez la ligne no. 272:
UIBDemo.instance.stage.addEventListener (MouseEvent.MOUSE_UP, stageMouseUpHandler);
Commencez par ajouter l'instruction d'importation:
package core.sections.car import caurina.transitions.Tweener; importer caurina.transitions.properties.DisplayShortcuts; importer com.useitbetter.uDash;
Maintenant trouver le stageMouseUpHandler fonction qui est déclenchée par MOUSE_UP un événement. Il est responsable de désactiver la rotation de la voiture lorsque l'utilisateur relâche le bouton de la souris. Utilisation recordMe méthode pour l'enregistrer manuellement:
fonction privée stageMouseUpHandler (e: MouseEvent): void uDash.recorder.recordMe (e); // enregistre cet événement this.removeEventListener (Event.ENTER_FRAME, thisEnterFrameHandler);
Une autre chose que vous devez changer est le code responsable de la vue à 360 degrés de la voiture. La rotation de la voiture dépend de la position de la souris et vous voudriez bien sûr que celle-ci suive la souris du visiteur et non la vôtre pendant la lecture..
Rechercher mouseX dans CarInfo.as et remplacer toutes ses occurrences (il y en a six) par uMouseX (), juste comme ici:
lastX = carHolder.uMouseX () // mappage de la position du curseur
C'est complètement sûr - uMouseX () la méthode retourne la position réelle de la souris pendant l'enregistrement mais la souris d'un visiteur pendant la lecture.
CONSEIL: lorsque vous intégrez un projet volumineux, utilisez un éditeur de code prenant en charge la recherche de plusieurs fichiers (par exemple, FlashDevelop). Cela vous aidera à trouver toutes les occurrences de votre projet
Le site de démonstration ne contient qu'un élément préchargé: la voiture. Si vous avez une connexion Internet plus lente qu'un visiteur dont vous répétez la visite, la voiture se chargera avec un retard. Dans la plupart des cas, vous ne remarqueriez même pas la différence, mais je vais vous montrer comment utiliser les points de contrôle pour synchroniser parfaitement la répétition..
Dans CarInfo.as, trouvez le onCarLoadCompleteHandler () fonction qui est déclenchée par ACHEVÉE événement une fois le préchargement de la voiture terminé. Ajouter un point de contrôle pour vous assurer que le replay attendra que la voiture soit chargée.
fonction privée onCarLoadCompleteHandler (e: Event): void uDash.checkpoints.place ("voiture chargée"); // point de contrôle ajouté pour synchroniser la relecture avec le préchargement // le reste du corps de la fonction CONSEIL: Les points de contrôle sont utiles pour la synchronisation de tous les événements liés au temps tels que les animations..
Répétez maintenant les étapes 3 à 5 pour tester l’enregistrement et la relecture d’une visite. La relecture doit ressembler exactement à celle que vous avez enregistrée. Si c'est le cas, allons de l'avant!
Use It Better est plus qu'une simple relecture de visites. En fait, il dispose de puissants rapports d’analyse permettant de travailler à la fois sur des visites individuelles et sur des données agrégées. Dans les prochaines étapes, vous apprendrez à enregistrer des méta-événements importants: Sections et actes qui nourrira ces rapports.
Remarque: si vous souhaitez uniquement rejouer les visites, vous pouvez passer à l'étape 14..
Commençons par la chose la plus importante: enregistrer quelles sections du site Web sont visitées. Il permettra d'activer Paths Report ainsi que de nombreuses autres fonctionnalités dans le panneau d'analyse..
Le site de démonstration utilise SWFAddress pour la liaison en profondeur et Use It Better peut automatiquement enregistrer la partie d'une URL après # en tant que section. C'est à dire. visiter cette URL:
http://mywebsite.com/#/car
serait enregistré comme une visite à la voiture section.
Ouvrez à nouveau la classe de projet principale UIBDemo.as situé dans Site de démonstration \ src dossier. Rechercher le initSWFAddress () fonction et initialiser le support SWFAddress avant d’écouter la CHANGEMENT un événement:
fonction privée initSWFAddress (): void uSWFAddress.init (); SWFAddress.setHistory (true); SWFAddress.addEventListener (SWFAddressEvent.CHANGE, swfAddressChangeListener);
Oh, et n'oubliez pas d'importer le module Use It Better responsable de l'intégration avec SWFAddress:
package import com.useitbetter.uDash; // classe de base Use It Better import com.useitbetter.modules.uSWFAddress; // module responsable de l'intégration avec SWFAddress //? le reste du corps du paquet
Remarque: Si le site Web ne dispose pas de SWFAddress, vous pouvez toujours enregistrer des sections manuellement..
Les visiteurs peuvent effectuer certaines actions souhaitées sur le site de démonstration, ce qui rendrait le propriétaire heureux. Par exemple: soumettre un formulaire de contact. Enregistrons-le.
Ouvrir ContactInfo.as de Site de démonstration \ src \ core \ sections \ contact dossier. Comme toujours, commencez par l'importation:
importer com.useitbetter.uDash; // noyau Use It Better class
Maintenant trouver message envoyé fonction qui est appelée sur le formulaire soumis avec succès et ajoute l'action:
fonction privée messageSent (): void uDash.recorder.saveMeta (uDash.metaevents.ACTION, "Formulaire envoyé par l'utilisateur"); // le reste du corps de la fonction
Les actions constituent un élément important de tous les rapports Use It Better et un des indicateurs de performance clés qui vous aideront à évaluer votre site Web..
CONSEIL: Vous pouvez enregistrer autant d’actions que vous le souhaitez, mais essayez d’être raisonnable. Toutes les actions ne sont pas également souhaitées..
OK, maintenant il y a la dernière chose, mais très importante. Le site de démonstration a été intégré à une page HTML à l'aide de SWFObject pour s'adapter à 100% de la fenêtre du navigateur. Cela signifie que la taille du film sera différente selon les résolutions d'écran et peut être modifiée lors d'une visite en redimensionnant la fenêtre du navigateur. Nous devons l'enregistrer.
Aller à Site de démonstration \ bin-debug dossier où vous pouvez trouver index.html. Ouvrez-le avec un éditeur de texte et recherchez l'id d'un objet HTML contenant notre film Flash. Cela semble difficile mais facile à trouver:
swfobject.embedSWF ("UIBDemo.swf", "UIBDemo", "100%", "100%", "9", "expressInstall.swf", flashvars, paramètres, attributs); Voir le deuxième argument passé à intégrerSWF? UIBDemo? C'est ce que nous recherchions!
CONSEIL: en général, si vous exportez du HTML à partir de Flash IDE, l'identifiant est identique au nom du fichier SWF..
Revenez maintenant à Flash pour UIBDemo.as. Appuyez sur Ctrl + F et trouvez uDash.init (). Déclarez une référence à un objet HTML devant celui-ci:
fonction privée init (e: Event): void uDash.settings.uHtmlFlashObjectId = "UIBDemo"; // référence à un objet HTML contenant un film SWF dans index.html stage.addChild (uDash.init ()); // initialise et ajoute à la scène // le reste du corps de la fonction
Maintenant nous avons fini. Pas plus de codage. Tout ce que vous devez faire maintenant, c'est exporter l'animation Flash et publier tous les fichiers à partir de Site de démonstration \ bin-debug dossier sur un serveur (ou un hôte local) où vous pouvez le tester dans un navigateur.
Ouvrez le site Web dans un navigateur, amusez-vous, essayez de redimensionner le navigateur. Une fois que vous avez terminé, fermez le site Web et vérifiez le rapport de visites dans le panneau d'analyse. Trouvez votre visite sur la liste et rejouez-la pour vous assurer que tout fonctionne bien.
C'est tout! Travailler sur le code d'un site Web que vous n'avez pas écrit vous-même est difficile, mais j'espère que vous avez trouvé ce tutoriel intéressant. Use It Better recèle un énorme potentiel et vous pouvez exploiter les visites de relecture non seulement pour améliorer la convivialité et l'expérience utilisateur, mais également pour mesurer les performances des campagnes ou même pour détecter qui triche dans votre jeu Flash..
Même si le site de démonstration est assez simple, je pense que vous pourrez intégrer Use It Better à votre propre site Web, quelle que soit sa taille..
