1. Représentation de données, analyse de
données et développement JavaScript
The MIG – New York City
Jerome Champigny – MTI 2012

2. En quelques mots
 Maitre de stage
– Jad Nehme
 Vice président « Engineering »
 « Engineering associates »
 Equipe de développent UI (Interface Utilisateur)
 Siege social au cœur de New York City
2

3. 24/7 Media & The Media Innovation Group
 “Powered by 24/7 Media”
 100 Millions de dollars de CA
 600+ employés
 18 bureau a travers le monde
 12 pays
 Siège social
– 132 West 31st Street New York, NY 10001
 PDG
– David J. Moore
 WPP group
– Valorisation totale de 25 Milliard de dollars
3

4. Reconstruction
4

5. Sujet de pré-embauche VS sujet actuel
 Data mining  Opt out système
– Recherche de récurrences – Bibliothèque JavaScript
– Catégorisation – Apache / PHP
 Etude des cookies
– Framework de génération de statistiques
– Optimisation – Comportement sur Safari
 Graphes 3D
 Porter les outils d‟analyse de BDD
– Bibliothèque JavaScript
– Evaluation des technologies telle que
MongoDB, InfiniDB, etc. – Web GL
– Three.js
 Visualisation
 Zebra
– IU en HTML5
– C++
– Analyse multidimensionnelle
 ZAP Administrator
– Améliorer l‟IU
– J2EE / Web Service
– Python
– JavaScript
5

6. Planning
6

7. Etude des cookies
 Défaut de Safari (Third party cookies)
 Technologies
– Apache
– PHP5
– JavaScript
 Test de cas sur Safari
– Iframe avec FORM en méthode POST ou GET et blocage
– Création après blocage et présence antérieure
– Création de sous domaine
 Résultats
Safari IE9 Chrome Firefox
With security Has cookie No cookie No cookie No cookie
Without security Has cookie Has cookie Has cookie Has cookie
7

8. Opt out
 C‟est ?
– Devenir invisible aux yeux des traqueurs
 Objectifs
– Réunir les scripts de Real Media et du MIG
– Créer un script client générique
 Technologies
– JavaScript
– Python
– Apache
8

9. Opt out
 Ancienne solution
 Problèmes
– Boucle de redirection code 310
– IE6 ne supporte pas trop de redirections
 Solution
– Client JavaScript appelant simultanément chaque domaines
– Utilisation des jetons CSRF (Cross-site Request Forgery)
9

10. Opt out
 Bibliothèque OOP
– Mot clef prototype
 Appel par une simple fonction
 Retour asynchrone des résultats
 Affichage singulier du succès (OK) ou de l‟ échec (KO)
 Problèmes rencontrés
– Domaine plus ou moins long à joindre
– Erreur 404 d‟une iframe plante l‟exécution totale
 Résolution
– Mise en place d‟un timeout général
10

11. Graphes 3D
 Volume de données du MIG considérable
 Ecarts sur un même graphe importants
 Technologies web obligatoires
– Flex
 Applications du MIG en cours de changement de technologie
– Flash
 Très proche de Flex
– JavaScript WebGL
 Nouvelle technologie
 Three.js
 Intéressant
11

12. Three.js
 « Lightweight » 3D Library
 Grosse communauté
 Bonne documentation
 Support rapide
 Mainteneurs chez Google
 Portable sur
– Safari
– Firefox
– Chrome
 Bibliothèque objet
– Camera, Scene, Lights, etc.
– Object3D, Face3, Face4, etc.
12

13. Dat.gui
 Interagis avec des objets
 Modifie dynamiquement les attributs
– String
– Int
– Bool
– Drop down list
 Appelle les fonctions
 Crée des répertoires
 Simple et très efficace
– Suffit d„une déclaration
– Ajout des attributs
13

14. L‟idée
 Forme en couverture
– Impossible car trop de fluctuation dans les données
 Volumes
– Toujours une valeur constante
– Line chart mais ferme
 Récupération des données en JSON
– Apache
– PHP5
 Grille dynamique
– Adapte la taille des axes
14

15. Création des volumes
15

16. Autres fonctionnalités
 Souris
– Zoom
– Rotation
 Droite
 Gauche
– Translation
– Survol avec affichage des données
– Cliquer centre la camera
 Cacher certaines géométries
16

17. Example 1
17

18. Example 2
18

19. Analyse de logs
 Objectifs
– Débusquer les utilisateurs de Safari visés par l‟erreur
– Créer un filtre afin de ne plus les voir apparaitre
 Etapes
– Liste d‟identifiant utilisateurs
– Recherche dans les logs
– Extraction de l‟activité des utilisateurs
– Analyse de chaque lignes
 Comment?
– Ecriture d‟un parseur en C++
 Liste d‟identifiant
 Fichiers de logs
 Fichier de resultats filtrés
19

20. Analyse de logs
 Example
Field Description
2603648971646124 User ID
C Request status: C for “Cookied”, T
for “Test”, U for “Uncookied”
imp Request type: impression, event …
210.104.146.253 User IP
1330905600 Request timestamp
"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; User Agent
Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR
3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0;
MASM; InfoPath.2; .NET4.0C)"
20

21. ZAP Administrator UI
 Management de campagnes
– Fonctionne avec de nombreux serveurs de pub
– Permet de gérer les placements
– Visualisation analytiques
 Technologies
– Python (Django), J2EE, Tomcat
 Problèmes
– Arrivé de gros acteurs (Macy‟s)
– “Data error” dans certains tableaux comme placements
– Requête SQL
 Imbrication de plus de 80 000 identifiants
 Oracle limite à 1000
 Solution
– Pagination dans les requêtes
21

22. Conclusion
 Entreprise dynamique et technologique
 Projet divers et intéressant
 Technologies de pointes et innovante
 Très bonne ambiance, très bonne intégration
 Formation Epita en adéquation avec le stage
 Futur
– The MIG - Agence Marketing
– Employé à 24/7 Media - Produits techniques
– Debut 1er Oct. 2012
22

23. Jerome Champigny
Software Developer
jerome.champigny@247realmedia.com
23