Bestand wählen
Merken

Extending Ember with Analytics

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
and the and the and so the the that many industrial
Filberto of today will be talking about the technique using ever projects right now to integrate with Web analytics software and title my presentation is extending amber with analytics what I web-analytics they're basically I am delighted allow different things a gives you that maintain does is it gives you the power to on know-how how visitors use you're at web application and it allows you to identify trends make adjustments based on real data a real-time data of data like how many visitors visited visit the website I where they were from which pages they viewed as their returning visitor how long they stay anywhere to all kinds of stuff so but it puts a lot of power to but knowing that kind of information that even allows you to know higher-level things like on how effective your earmarking campaigns are free website different changes that you're making but are they effective on you can utilize EB tests to improve conversion rates on Keri's every website or icon stuff web-analytics analytics really drives a lot of that and it's a lot easier from so get to do some of the reasons why we will want to integrate web-analytics into into our web application to today so if you see the Google Analytics logo there I want I keep this up talking about library agnostic I just have some Google Analytics snippets sprinkled throughout the code just because of such a popular library but yes so what we're trying to do here is we're trying to integrate Ember with analytic software so from integration as easy rate is just a sign up with your favorite provided you know you know 8 copies the JavaScript into your web apps and you put your unique tracking and fired right notes not that easy because of you can do that but you're not going to get a whole lot of information because the only thing you're going to get out of that analytic approaches you'll just note of how many people opened up a web application you're not going to have any more visibility than that with single page Web apps now things become a little less trivial with amber things become a little less trivial but it's not scary were in that find out different ways to implement it and because what we wanna do
so things to track Here's a up a listing of different things that were really concerned about of tracking for a source of urease of data and that sort of thing with the with the visit the page views of we want track where where they're going on the application and actions we wanna track what they're doing when they're in applications so you can see some of the things that I have here of with an EMBA linked to transition to replace with standard stuff French edition to a place with I'll be was same thing that link to use this think trap that you see I have post 1 to posts to that's just a model change so we want track 1 of the users on or out but but the model changes around and also manual euro manipulations of the user goes into that window at the address bar and makes a change themselves through 1 of the literature of all of the 2nd part is actions of we want track any template-based actions you know Double Curley Break bracket action but we want track any kind of programmatic sends of the starts and the status and action the spectra direction although one-track from of love the JavaScript on so basically internally decide no internally us send action calls trigger action which calls send under the hood of member so we wanna just keep that in mind because later on we're going to a a more implement implementation-specific approach showing how a any leverage send for action and at the bottom here you see a simple actions but basically what that is it's the user doesn't need to you wanna at track simple actions when the user doesn't need to execute any specific by fold event-handling so things can be like tracking whether or not a timeout message appears on tracking whether not a promise resulted from rejected you don't necessarily need to fire any action on that but you might want tracker just for for your own information all these things the first one on the go into the details about different techniques good and bad techniques for the 2 that I mentioned before paid for tracking and for at actions tracking salsa with page view you can see going to discuss a
naive approach at 1st but you can see here on the slides of 1 specific implementation of a word using a mix and so you might come into this and so I can just do this I'll also an analytics and namespace on their own amber on Member global namespace and I can have an observer on the inherent current pattern application the troller I'll be good to go ri all have had my run loop I'll pull in the Ural off window location and I know when they're in a change to different routes but is actually not really be approach because from seals a couple different reasons why but you can see a couple of some alarms should be going off when you look at this initially because he's the amber run next or maybe we can improve on that we have an observer here and we're looking at when the delocation whilst can we do some reasons that this is a bad idea I just talked about a few of them on 1 that I didn't speak about is because you're doing it was a mix you can rely on your auto-generated application controller i.e. that actually generate that so I'm a little more work on urine and not really conventional reconfiguration number 1 the you that you could mix in the analytics handler into any specific rout that you want to track but that's just a pain when I can talk about that I've done scale well what you have to manually grab the URL off when the location and you you don't have access to the internal router object within the scope of the mix and a lot different stuff I'd say the most and the worst things about it would be that it doesn't work it does not work for model changes which we discussed earlier and it died a dozen were for loading and just doesn't work because the observer and the way on the work so a much better approach is what we're utilizing an are at it's basically it's making a lot of coke that allowing you to hook into the application rout based on what I did transition but the without scan allow us to do is a couple of things right in here you don't see as grabbing anything often window that whatever we have scope to the start rather get URL which is the routers internal router object number we can just describe your we can grab the current path what everyone track and and run once more performant same run loop iteration were starting to learn a couple different things maybe we had our initial approach in our thinking about ways we can prove that this is a big improvement on so I talk about a couple more benefits here but clean you can use the although generated at application trollers if that's what you were using before was you probably where you have to worry about generating yourself skills well you can have access to the internal router object that's very amber friendly now works small conditions rat changes emic model changes air stabling state so that's about it the page tracking you've seen a good implementation for that another talk about action tracking so this is this the next part of the of the things that we want act for the user to action so on talk about a naive approach here you can see from my slides of go over this example of for the 1st part you can see that we have 2 templates 1 templates called about him the 2nd temple told about her and the templates just have a button on them and the bottom just doesn't tracking is is like him like so what we're going to do to track that is we're gonna make a action on the application rout which basically is analytics only action of which is just gonna have 1 job in its whole life this is gonna be track these and template-based actions wherever they are and application so you might start you might think is a good post this really not because a lot of different reasons it glitters templates with analytics only actions which is not something we want there's no encapsulation code fragmentation starts happen really quickly things can get out of control it's not a robust solution the scale well and does allow for easy integrated programmatic actions and the things we talked about before this and this and action this trigger action as things there and be a lot harder because we're going to have to duplicate everything we can't just make 1 call organ have to make a normal cone then we're gonna have to make our analytics so again just a lot of things that we can prove on with that approach and the next salmon talk about is a little more in depth of this kind of a three-pronged approach here and this is something that again we're going with for application and I won't talk about that so but a much better implementation would be to have a centralized of object which hold all of the rout specific of data that you wanna sent analytic software so here 1 of the things that we want to have was you can see that we have our analytics object which were declaring and we have underscore coal industry it we have some property getting a sinus symposia on that's because we wanna have uncertain data sent for every of trip every for every time we communicate with our web-analytics offer went 1 have certain dataset that's without allowing us to do the next thing we have under for global this is basically can act as a but non rout based kind fallback scenario where the my example track promise works really well can you probably want track promises and all different kinds a rotten apps the may be put in a global handler for that objects and another thing here you can see that it's it's not up Ojo it's not a string its its its function which is with the little talk about later to guide you can assign these objects of these properties to of objects chapter budget or functions which allow a lot more dynamic behavior and the kind of the heart of it is the bottom part of this is just a small snippet just to kind of wrap had around it this is of a rout specific by implementation you can see that in my example I have of in well the comments is a lot easier
to understand maybe I have food bar best and food is is the the 1st rout book bar is the most nested rout and as action on on that round so you would have you can imagine your application you have a nested who with bar in inside of it and then you have this action you click on some button fires bad action this is how we're going to basically no internally with action handling where to go to get that data this and it's your analytics software and that's about it you can have passing name parameters for the functions or another great thing about having a function we're we're gonna write this approach of we're actually scope it so when you get into the function you can say this dot whatever and you'll have access to that the correct scope the correct element that it's calling this from analytic object from so you can make this really flexible this a part 1 by 1 final thing is it's not listed here when I contracted so we're listing everything explicitly part 2 is that action handler so it's a mix and under the hood that's kind of a lower level API what it does behind the scenes is it's an EMBA uses a member magic and the some inheritance things and allows his action handler mix to be available on all Routs controllers components views did by default that's nothing that were doing this December stuff and were coming in were saying reopened and what that does is if you have a news before basically it's just augmenting the but action of prototype with whatever changes we wanna make so we are saying the action handler implements the send function that's pretty much all it does blow things with say the send function the main the main thing we're looking at so we're just basically saying don't go do that the defaults and behavior do our stuff and then will will consider doing the default later so that's what we're doing here and the 3rd part the think back we Verdi talked about analytics object we've talked about the the the handler for reopening that we have access to it and so now we just need to talk about in a way that we can handle it out are out at at our level at some way that we can stand on our action to that action handler augmentation this is a little ball computing and try to go through it as is what condense approach but others can go through a line by line basically the beginning where of this is analytics handler with the beginning where could you see this VAR out at this target ternary operator all the stuff we're basically just getting the correct scope for the internal router object because it actually different whether you're coming from a template-based action or whether you're coming from a programmatic stand so grabbing the correct us go further router where that the next thing we're doing is active trends were determining whether or not you're an active transition so if you are maybe say doing that this stats sand through action from all before model look you're going to be in the middle the transition we want pick that up in here there were doing that pretty early in the function next we art but getting a handle sucker handler in both which is just but it's an internal properties just an array of all currently result routs in your application from least nested to most nested grabbing the most relief most to the most nested rout and then at the end here we have a rat name and track object and basically these 2 are pretty key in determining the final data that set of these this is what has a hoax back into the inlet object if you remember that talked about before and so what we're doing is he here is we're determining of basically an order of things that we want you to send them to know what we want a sense of the 1st the 1st thing we're checking is whether or not you're transitioning if a transitioning we wanna get a hook to the to the that the new routing and learn about the current round where so that's the 1st thing 1 check if you not transitioning we want capture leaf but most node of leaf most rout though the wrapping your you're the most nested rout the on currently if neither of those resolved we wanna get access to where we wanna try to see if whatever action your passing is in the the global handler that from from analytic we talked about before and if nothing revolves like I said we not going attractive so on that kind of getting our hook to what we're looking to send and then the last 3 if statements basically what I'm saying is that if you're function I want to call you and get my return Pojar get my returned object this wagon around this on the next line which is the merge with that the next line is the merger just merges the the global the global data that we wanna stand on every rout with are out specific data and it's it's a college using our that analytics handlers which I haven't specified but by that's going to be the the call to your Google Analytics library whatever library using in this case were just to a console log so and the last thing is the simple action handling that I was talking about earlier but we basically don't this super apply basically with that's doing is we're saying OK we're going to do all our behavior and then I'm going to call whatever D fall amber behavior here it and I don't wanna do that if my Action Search with underscore track because this is a simple action we don't care about doing whatever it is the default action him where was on or what whatever deep election here where we worry about them that's pretty much it for that approach I wanna talk about some a summary of the things on the fully declarative analytics pattern the thing that I just talked about 3 steps no more letter templates with analytic specific actions the nice thing about this is if you have lot normal actions in here in your application of this is going to allow you to just hook in onto those actions rather than implementing own specific analytics actions and it works for template programmatic actions work for all the things of flexible encapsulation had 2 couples templates from analytics handling about last everything centralized processing and is leveraging lower-level API as i in amber of so you know we have a good approach or doing it that way
so the next thing is I wanna take quick look at a little demo but if you didn't notice a before that and say I had little J. spans the bottom of all my money slide so you could have a look at that that the many demos that have but this is a bigger demo I wanna show to you just get a high level of some of the things they do so so here's my demo You can see it's you i just an online bank this pertains to the work that we're doing for a for application currently so you can see some of the things here on this I want just the only thing is I really wanna focusing on here are analytic specific behaviors so we see a log in we won a login with username password password and I'm a click log is a couple different things here the consul out I remember this can't allow can be whatever case insisted dummy spit text out to the to the browser but it's really in production from be making your calls to your analytic software behind the scenes the see I clicked of a login and I see a couple different things here I see page view that the page that I'm currently on with my page tracking with my did transition look and the action that was set by whatever it is I did which was a long and you can see the user being passed and so you can pass and whatever data you want past and with our approach I am going to go ahead and have prompted for a challenge of one-time password lines like e-mail You'll see delivery method was to you know was the 2nd delivery method again you can pass in whatever you wanna pattern you can make this s tailored to your application as you want can authenticate 1 2 3 4 5 6 submit see that these actions authenticate register device and chose me were submit now I am but they
indicated on long met my route you l I can click here it shows me that this is an example of a model change this is something we want to track this isn't changing a specific rouses changing the data that back in the rout so tracking that successfully something that we couldn't overnight naive approach from the click on transfers say I wanna make a transfer from my checking account which have a thousand dollars in it to my savings account which at
5 thousand dollars in non transfer to a knowledge cancer funds simulating a delay success and you see that we have some information here about the the transfer that occurred from checking to savings to under dollars the date all these things and it's a reflected back in the application of the last thing is statements tab here simulating error I just wanna show that it's also tracking appropriately for situations that but you might not expect and this statements and you can see that there was rejected action there so I'm going to go back to my slides that you have seen a little bit of the PG E tracking action handling right so that but demo
and I basically just some references you can see a link to my GitHub of account of you want to keep the code for the demo application of the slides that I showed earlier they were kind of some condensed of versions of it so you can see the whole implementation and and thanks a lot of money in the Alex Diliberto again I you can follow me on twitter if you have any questions feel free to shoot me a message I'll try to answer as quickly as I can thank you in
the coming in and out of that thing the and and the in a in a kind of a plan and the the the the the the you think about and and have and the and
Softwaretest
Umsetzung <Informatik>
Web Site
Mathematisierung
Web-Applikation
Softwarewerkzeug
Einfache Genauigkeit
Analytische Menge
Bildschirmsymbol
Bitrate
Kombinatorische Gruppentheorie
Code
Integral
Homepage
Videokonferenz
Benutzerbeteiligung
Echtzeitsystem
Twitter <Softwareplattform>
Vorzeichen <Mathematik>
Software
Programmbibliothek
Projektive Ebene
Identifizierbarkeit
Information
Leistung <Physik>
Router
Mereologie
Adressraum
Iteration
Kartesische Koordinaten
Extrempunkt
Richtung
Homepage
Poisson-Klammer
Maßstab
Prozess <Informatik>
Code
Gamecontroller
Hook <Programmierung>
Bildschirmfenster
Minimum
Mustersprache
Konditionszahl
Mixed Reality
Kontrollstruktur
MIDI <Musikelektronik>
Router
Umwandlungsenthalpie
Objektverfolgung
App <Programm>
Zentrische Streckung
Lineares Funktional
Namensraum
Sichtenkonzept
Kategorie <Mathematik>
Template
Güte der Anpassung
Strömungsrichtung
Quellcode
Gruppenoperation
Rechenschieber
Verschlingung
Konditionszahl
URL
Information
Message-Passing
Aggregatzustand
Standardabweichung
Zeichenkette
Subtraktion
Selbst organisierendes System
Mathematisierung
Gruppenoperation
Implementierung
Zahlenbereich
Geheimnisprinzip
Analytische Menge
Code
Homepage
Loop
Informationsmodellierung
Software
Luenberger-Beobachter
Biprodukt
URL
Drucksondierung
Videospiel
Fehlermeldung
Datenmodell
Gasströmung
Mailing-Liste
Routing
Binder <Informatik>
Sichtenkonzept
Quick-Sort
Objekt <Kategorie>
Mereologie
Gamecontroller
Wort <Informatik>
Geheimnisprinzip
Mereologie
Prozess <Physik>
Kartesische Koordinaten
Computerunterstütztes Verfahren
Element <Mathematik>
Extrempunkt
Template
Übergang
Maßstab
Deklarative Programmiersprache
Dreiwertige Logik
Hook <Programmierung>
Mustersprache
Mixed Reality
Router
Spielkonsole
Default
Gerade
Prototyping
Umwandlungsenthalpie
Lineares Funktional
Nichtlinearer Operator
Parametersystem
Befehl <Informatik>
Sichtenkonzept
Prozess <Informatik>
Template
Systemaufruf
Hoax
Gruppenoperation
Standortbezogener Dienst
Motion Capturing
Mustersprache
Erweiterte Realität <Informatik>
Twitter <Softwareplattform>
Deklarative Programmiersprache
Ordnung <Mathematik>
Message-Passing
Betragsfläche
Gruppenoperation
Mathematisierung
Geheimnisprinzip
Unrundheit
Analytische Menge
Demoszene <Programmierung>
Informationsmodellierung
Knotenmenge
Software
Programmbibliothek
Vererbungshierarchie
Zusammenhängender Graph
Biprodukt
Unschärferelation
Varianz
Kondensation <Mathematik>
Routing
Mailing-Liste
Objekt <Kategorie>
Mereologie
Gamecontroller
Analytische Menge
Geheimnisprinzip
Normalvektor
Demo <Programm>
Subtraktion
Browser
Gruppenoperation
Mathematisierung
Kartesische Koordinaten
Wärmeübergang
Login
Übergang
Homepage
Demoszene <Programmierung>
Informationsmodellierung
Software
Wärmeübergang
Mustersprache
Minimum
Passwort
Telebanking
Passwort
E-Mail
Gerade
Sichtenkonzept
Konvexe Hülle
Systemaufruf
Routing
Rechenschieber
Bit
Befehl <Informatik>
Demo <Programm>
Gruppenoperation
Versionsverwaltung
Implementierung
Befehl <Informatik>
Kartesische Koordinaten
Wärmeübergang
Binder <Informatik>
Code
Rechenschieber
Twitter <Softwareplattform>
Wärmeübergang
Information
Message-Passing
Normalvektor
Fehlermeldung
Videokonferenz
Offene Menge
XML
Korrelation
Automatische Handlungsplanung

Metadaten

Formale Metadaten

Titel Extending Ember with Analytics
Serientitel Ember Conf 2014
Autor DiLiberto, Alex
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/34993
Herausgeber Confreaks, LLC
Erscheinungsjahr 2014
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Definitely tune into my presentation if you're interested in ways to best integrate your application with analytics and reporting suites such as Google Analytics and Adobe SiteCatalyst. Our company is going to be utilizing SiteCatalyst so that may end up being more of the focus area, but I should be going into details and best practices about ways to track pageviews, user interactions, and other web tracking considerations.

Ähnliche Filme

Loading...
Feedback