React: Google Analytics Click Tracking - Live Coding with Jesse

hey everybody it's Jesse and uh I've been gone for a while been on vacation so I hope everyone had a great week last week uh I had thought about streaming while I was on vacation but there's no way the Wi-Fi would have been able would have been able to handle it it's uh it could barely handle like streaming Netflix at times so uh I did release one video uh on my own channel so if you haven't seen that yet uh you can check that out there's a link to my channel in the description for this video just really short kind of explaining how I got to be a front-end developer uh today I want to set up some click tracking so I was asked as to track the clicks for every link that goes back to our main website uh from this website so it shouldn't be too difficult so we're already using um we're already using a let me just let me show you what it is uh it's you know like an npm module that we've uh imported and it's called react GA so here's what we're using and we did do I did do a stream where we initially set this up or at least I remember doing a stream where I was trying to get this to work and I couldn't get it I don't think I get it to work out way I the way I wanted it to work but at some point I got this trying to get up to the top here so this is what we're going to be working with today and I included a link to this in the description as well so you can check it out if you want uh there's really only one part of you know you it's pretty well documented there's only one part of the documentation that we're going to look at today that we're even going to need and it's the click tracking part let's see there we go uh this part I think we're going to try to use the component version of The Click tracking uh there shouldn't be too many links that we have to edit so this should work hey everybody okay I see uh in the live chat everybody saying hi uh oh hello from Brazil awesome welcome Ohan says back after so long and I'm left far behind well i' haven't done anything for a week so not quite as behind as as it could have been all right all right so we got our viewer count is is up to a decent number here so I think we're going to get started um first thing I do want to show you all is a course a course that I'm going to be taking making and it looks it looked good and it's definitely definitely what I'm working on now so I'm just going to throw this in here I don't know if you saw this I I think I saw it on Twitter first and then actually then I noticed the email I got from Udacity after that but uh I noticed or I saw on Twitter uh quite a few retweets of this course on Udacity so if you've never done anything with Udacity before uh it has a lot of free online courses in a lot of different areas not just web development but this will be the first time I'm actually going to pay for the Nano degree so I've already I've already made my payment uh the course is $500 and uh I'm I'm not like officially recommending this or anything uh I haven't even taken it yet so I'm not sure if it's good but since I'm building in react and I know there's going to be a lot of sites that I will be doing in the future with react I thought it would be cool to take this so just wanted to share that it hasn't even started yet as you can see there's a countdown timer here so I will let you all know how the course is this one is unique a lot of the courses in Udacity are like totally self-paced this one is actually you know it has a definite start and end time and you have to get everything done within that amount of time so hopefully I can do that my schedule's like pretty busy but I'm hoping to be able to uh to stick to this you know this schedule this four month schedule for this course and uh yeah so I'll let you know how it goes and if anybody else has signed up for this let me know uh or if if you end up signing up later on let me know uh whoops there we go all right okay so I do have one question in the live chat about the analytics uh that thing that we're using the react uh ga uh and the question from philli is what are the advant AG of coding with this over using tag manager well in my case uh we're not set up with tag manager right now so all of our sites none of our sites are using tag manager that might change in the future but at least the easy answer is I'm not I'm it's just not set up like that I'm not the one that actually sets up a lot of these I set up some of these uh Google analytics properties but not all of them so um I didn't set set up a lot of the sites when I started working here it was already set up so anyway we might move to tag manager in the future but for now uh we're going to use this I I have from what I read about tag manager it does seem like everything is easier with tag manager especially if you have a lot to to manage and it would just be insane to do all this manually so um I know that not really a great answer sorry not a great answer but uh I don't I don't really want to try to um you know say any more about it when I'm not knowledgeable enough to give you a good answer um looking for Here We Go footer I know we have some outbound links in the footer that we're going to be using so we'll just start there uh I'm trying to think where else we have one in the in the header as well that may be all the places that we need to to do this for so this is actually going to be a shorter video than normal I have a meeting at 3: so there there might be some some changes coming to this site that we've been working on for the last few weeks and I'll have a meeting today and another meeting Thursday afternoon which I probably won't be able to stream Thursday afternoon because of it but based on what happens in these two meetings it's possible there could be significant changes coming to this site which I don't know to tell you the truth it doesn't excite me too much uh I mean this site's not perfect but I kind of I like where we we have it the direction we're going with it and I don't want to have to redo things that we've already done I wouldn't mind adding new features that'd be nice but I'd hate to you know go back over things since we put so much time into it so many long hours it would it would be a little bit terrible to have to go back and and either completely take out or redo things that we spent so much time on so I'll let you know how that goes all right so I'm going to move this uh these instructions over to my other screen so that I can look at these while we're while I'm coding so uh like I said before the link link to the instructions we're going to be following is in the the show description so it looks like and we're going to test this and I picked this on purpose because I think this is going to be simple I think it's going to be pretty easy uh and I don't have a lot of time to stream today so it looks like all we're going to have to do is make sure that we include react uh GA here uh and then we're going to use the react ga. outbound link component and all we have to do let me bring it in for a second since I'm talking about it all we we have to do then is then add an event label and a two so basic so instead of like an a tag we'll replace it with this tag and then we put in the link text as normal so hopefully that works and we'll test it out I have my Google analytics uh open already on my other window I'll bring that in when it's time to test it but that's the plan so I'm just going to [Applause] grab I want to check out in our analytics.js file import right why type it when I can just copy and paste so I'm going to take that and then I'm going to go back up here to the footer and I'm going to import that as well and now let's [Music] find where we at there we go so this is what we want to any links to the main website are what we want to add actually let me let me check going to my Trello board uh this is where we have you know everything that needs to be done and has already been done all the tasks for the site um yep it is just franciscan.edu okay I just wanted to double check before we started doing this that I had the right links so let's change this to we got react ga. outbound L and same thing here okay now we need I'm going to copy some of this here I guess we just need the label all right so I'm assuming it it doesn't show this in the instructions but I'm assuming we can still have a title tag and it would just go right here so I'm going to leave the title tag in there uh that's pretty standard on a link tag so uh hopefully that still works so I guess for the label we'll just say um to Franciscan and I wonder if I can how about this two main site all right that's basically what we call it around here franciscan.edu is is always either called the doedu or the main site so that'll work for us and we need to change this HF to a two all right like I said I said I don't know if this title having a title here mess it up it doesn't say anything about it in the documentation so I'm going to leave it in there for now see if it works so everything else should work I'm going to save this I do want to check out uh to make sure that it doesn't mess with the display all right all right so it looks like I'm going to bring this over so you all can see it so this is the link that I changed down here and it looks like the title is still working awesome uh I'm going to click it what popup looks yes I always allow popups from local hosts um all right so it looks like it's it's trying to go there so the main s side just happens to be really slow great so that went to the right place now let's bring over our analytics our analytics dashboard here so if you haven't seen the new Google Analytics dashboard this is it so this this is actually the first time I saw it I haven't checked analytics since this happened uh this is pretty recent within the last I don't know week or so right um so we should be able to go it looks like all this stuff over here is still the same so hopefully it is uh let's see events let's see if we had an event happen H look like we didn't have anything happen it's it's possible that I'm not going to see it until I make this live so um let's so actually working on some stuff earlier that I forgot to commit so uh let me bring this over I'm just going to do a um I'm going to commit this I'm going to push it uh to GitHub and we're actually we're going to pull this live uh the stuff I was working on some stuff earlier but I've tested it out I think everything's working well most of it was just really minor things uh so let's do all right so I was working on the events page and I'm not going to say anything about the link tracking yet I'm not sure if it even works but it's a good sign that we didn't get an error message at least okay now here's our servers no all right let's see have to get the IP here we go I uh turned my computer off and turned it back on and uh for some reason my normally I have a history of all the commands and it's separated per tab but it's it's not it's not working out like it normally does all right so let's update so if you remember from previous episodes uh we have load balancing happening uh so just to explain in case anyone missed it uh all we're doing right now with this long string of commands uh which I just copy and pasted in we're stopping engine X we're stopping the uh react app we're going into the directory where uh where our project lives and we're pulling in the changes from GitHub we're installing anything that is new any new packages that need to be installed uh we're building it and then starting it again and then starting engine X that ensures that our load balancer routes everything to the other server while this is down and then when this is back up then we can go to the other server and do the same thing and while this is H whoops while this is happening I can catch up on the live chat since I've been ignoring you all so far uh sorry I just I feel the pressure today to be done uh since I have that meeting so let's uh let me go back okay there's not a lot I thought I missed a lot in the live chat but it looks like there's not a whole lot that I missed so uh I'm going to go through really quick hey we have someone from Dominican Republic awesome hello from India uh Andrew ask why master's degrees are so expensive online I I mean I think they're expensive everywhere online or on ground it's degrees are just really expensive nowadays um yeah I mean I would say unless you really need a master's degree for a job that you want then I I wouldn't do it I don't I know people that just get done with their undergraduate degree and they aren't sure what to do so they just decide to stay and get their master's degree I mean if if your family's rich maybe that's okay but but for me that's that's not what I did so just too much I mean if you get scholarships maybe that would work out but it's just too expensive especially if you're not if you don't have you know pretty good chance of getting a good paying job from it all right there someone says hello from Iran hello awesome all right philli uh earlier Philip had asked a question about Google tag manager and uh he did mention he said it is much easier so awesome thing I yeah I know I didn't fully answer that question but um definitely if you are setting up a site in a Google Linux property for the first time and you can do it however you want I recommend checking out tag manager uh everything I've seen about it looks great and uh I at some point I would it would be nice to switch everything that we're doing here over to tag manager um oh no I just checked out I'm sure you all saw this but uh I just checked out the uh the output here in the terminal and it looks like local changes would be overwritten by the merge please commit your changes or stash them before you can merge oh goodness okay uh this is I know what happened okay so someone else uh that works with me here when I was on vacation uh tried to make changes directly to the server uh so these of those changes I've forgotten about that so I actually don't I don't want to keep these changes um so let me actually I wish I don't think he changed anything that I need to keep I think I'm I'm good and I can just get rid of these changes so let's see uh I wonder how he did he must have just used like Nano or something to edit these um okay yeah all right I was just thinking that patri Patrick just put in the live chat get diff that's yeah I was I was thinking the only thing that I probably I do want to keep is this image all right let's uh actually let me check let me check quickly [Music] on I want to see what the difference is uh with between this image so I just want to know what changed with it all right so here's the one page this is the live page and here's the IM I think this is the image that we're talking about here and then this is the one these look nearly identical right what is the difference here okay there's one difference in the names so we definitely do want to keep this all right so actually we do need to keep these changes and all right so uh all right well this makes things slightly more difficult um and I wonder if the other server is the same all right so it's actually not really that bad that this happened because as I always say when I make mistakes then you don't have to make them you could just see what I did and how it mess it up and can avoid it hopefully so uh yeah so don't edit files on the server directly that's um world of the story and if it does happen don't forget about it so let's just oops yep what's on here too okay all right uh so here's what I'm thinking here's what I'm going to try to do I'm going to commit these changes on one of the servers on just one of the servers and I'm going to push them shoot it's just like how do I push him um I guess I'll just I'll commit it I'll merge everything and then I'll push it back up to the main git repo and then I'll pull it down to the other server and then I'll have to pull everything back down locally does that make sense I think that yeah that'll I think that'll work okay so actually okay it looks like the changes are just really really minor all right um all right tell me who you are what I have to say who I am all right then let's say who I am I can't believe it changed so simple ended up not being simple uh I finally thought I was going to have an easy one but okay all right so at least I can go back to the live chat while this is working all right great so I'm going to do the get pull and I'll remember that one okay now unfortunately I won't really be able to let's see hold on okay um I guess if I want to try to test I was just thinking about testing these out uh I can just pull this down and then we can make sure that it's working so I'm going to bring this over this is our local version is my server not working let's see all right okay is this is this our new one no it's not right this is still yeah it is yeah it's our new one soor okay so that's our new one so it did pull the changes down um what was the other thing we have one one of the lines up here I'm not going to try to find the line but all right so it looks like that's cool that that worked uh now we can go ahead with starting to have a g pull and I need to we got stopped right in the middle of that long line of command so we got stopped right at the git pull part so I'm just going to copy the rest of the command and paste it in there so we're going to do our npm install we're going to run the build process and then we're going to start okay so a little little inconvenience there but pretty much passed it all right so Sebastian says 500 yeah maybe I'll stick to YouTube tutorials uh so he's referring to the Udacity course yeah I I had the um I signed up for it last week when I was on vacation and I actually had the Page open to sign up for the course on my laptop for like 2 days before I made the decision finally to do it but um I thought I don't know I thought it would motivate me since lately I've been really slacking on doing tutorials on my own uh I thought it would motivate me if I actually spent the money to do the course so the plan my plan is to wake up early before my kids wake up which can be challenging but to wake up early and do oh man more uh more problems so my plan is to wake up early and maybe like do a workout I have like a exercise bike in my basement so maybe I can do my work for this course while I'm doing you know a little workout in the morning and then maybe again like on my lunch break I'll do the course so I could probably get in like around two hours every day for the course uh and then a little bit on Saturday I think it said like estim they estimated 12 hours a week so if I do that then it should be good Monday Monday through Saturday I put in two hours a day that should be my 12 hours and it should work so hopefully it works out like that all right let's check out what's Happening Here H well this is not not good here so our build is not working all right so Patrick says another reason not to make changes directly in production this is justification for all the load balancer stuff you went through I was just thinking the same same thing Patrick so uh yes if you I think I mentioned earlier but this site is using a load balancer so if one server is down everything gets directed to another server so right now the site I'm assuming is still up because the other server is fine so since we just since I don't know what just happened with this server then at least the site's still up and somebody else asked something like like what what are you doing and I edited that but um basically what we were trying to do is something really simple and uh it should have worked but basically some changes were made um on directly on the server that it seems have messed some things up so we're trying to sort that out so let me this is just really weird um I want to see my package yeah it's not like nothing's changed in my package Jon I haven't really added I was trying to think if I've added any packages since the last time I pushed anything to the server and I think no I I really I don't think I've added anything on the master Branch all the stuff that we've been doing has been on separate branches and has not actually even been merged in on master so yeah so this should be uh let's see I realize we'll probably get the exact same issue but it's worth a try occasionally you run something a second time and for some reason it works I also want to run this locally just to see if something's now I do have yarn installed locally so but I want to try to do it this in the same way wait did it work that time you got to be kidding me there's no way all right let's all right so the next command would be it worked all right all right this if anybody re knows what just happened here fill me in but it obviously the first time this was run we got all these errors the second time I got nothing oh well so I'm going to continue with the rest of the commands to restart this server and then let's we'll check it out so at this point we should just restart we're using pm2 to start things up okay uh and what I want to do is I want to try to go directly to this IP I think if I go directly to that IP address I can get right to that server and won't get switched over to the other server so we want it to look like so basically uh we'll be able to tell if we've gone right to that server if it's worked if we if this area has changed significantly let's see yep there we go okay so uh Everything Has Changed correctly I'm just going to inspect really quick to see if we're getting any weird errors okay so we're getting this weird error uh page does not exist speaking the truth in love conference so I'm trying to prefetch this page and maybe prefetching doesn't work with uh the dynamically yeah so let me I do want to test this link all right so that link doesn't work it's this actually did work locally so I did test it earlier this is from something I tried to do earlier today all right so aside from that which can be changed really quickly aside from that this is pretty much working so it's working enough that we can at least try to to test what we were G to we're initially trying to test uh so let me find my analytics and let's see actually let's make sure that we're going for today looks like how label let's see to main site okay so it looks like we didn't have to do it in fact um I completely forgot that by default Google analytics doesn't show you the stuff from the current day so it was actually just showing me from like the last week or so uh I forget what the range was so when I set it to show today's stuff it actually did work from Local Host so that part worked so since we've kind of got gotten into this big mess now anyway with the servers I am going to fix that uh quickly but basically this works so let's go back and let's add this I'm not going to update uh the other server just yet which is going to it shouldn't cause a problem for for the two minutes that it's going to take uh to fix this so let's go over over let's go over here back to our page and we need to do two things one on events we need to not prefetch let's see thought it was up here somewhere let me it's down yeah it's down here okay so and eventually all this stuff will be out of our code anyway and it'll be pulled in through the WordPress API but for now for now let's get rid of this this prefetch and I'm wondering now should I get rid of wonder if I should get rid of all of it let's just let's see um I'm going to save that hopefully that'll fix the issue now you know what it might not because we're still getting the 404 so let me bring it back that error here so the eror is is trying to go to so it's saying this doesn't exist all right let's see if we'll get the same error see if we can go on our um our test version of this which I'll pull it over so there's our test version let's inspect this okay so I'm not getting that error in our test version but I'm still I'm getting the 404 but then it then it works okay so now I am getting that error see I'm getting this error here so here's what we're going to do let's whoa that's that's really odd it's an odd error uh so basically I'm just going to remove this link and I'm not going to use the link I'm just going to use a regular uh a tag and we'll try that out and see if that works oops so let's see see where we're at all right let me check uh we're getting to the end I'm going to have to finish up soon for my 3:00 meeting so I'm going to check the live chat quickly just see if there's any questions you all have um let's see oh Patrick mentioned you could put that in a bash Alias so that long string of commands that I copied and pasted in when we were trying to uh shut off the server and then update it and restart it he says you can put that in a bash Alias and you can I do recommend doing that I just haven't done it yet but I do want to do that for now and especially because it's just me working on it for the most part it's just easy for me to just copy it over uh but it would be a better idea to uh to make a A bash Alias for it okay so we've taken this we've just made it a regular a tag let's click it and see what happens just want to see all right that looks good all right that looks good only bad thing is we're not getting our client side routing you see we got a full page refresh I don't like that but I think it's okay it's okay okay for now I'm not sure if we can have the client side routing uh when we've cuz for this we've used custom uh so we we've edited our our server.js file and we've used some custom routing to use parameterized routing so that's like outside the scope of what next does so I'm thinking maybe the uh next client side routing system can't work with that I don't know but uh for now this is good this gives us what we what we want uh for the most part so I'm going to stick with that and let's go back to all right so we had we were working in footer. JS so this worked I do want to make sure I want to see where else we have this goodness I wonder Center yeah I don't think we need to track all these links like obviously to the privacy policy and things like that uh we don't need to track that so I think we're good we're good tracking that like I said we have one in the is it in the head I mean uh maybe the nav yeah oops and there's my Google my calendar for uh my meeting where we at um okay so we will need to track this yeah we need to cheack this let me make sure I'm okay on time now okay I have 10 minutes uh so let's do the same thing with this one hopefully uh it our class name stuff still works as well let's pull in this and where we at nav [Music] and what's this react actually what time you know what I'm not going to do this right now because two things one I want to answer your questions in the live chat also I want to make sure I sort out this server thing before I have my meeting so we'll stop here because I can always basically we've got it working so for the purpose of you know figuring out how to do this we've done it we've accomplished it we just need to apply the same thing to a few other places so that's worked what we need to do now is push our change up to GitHub so the change we made to the um to the link so we we got rid of the prefetching we got rid of the client side routing and we just used a regular link and then that that fixed the errors we were getting okay oh shoot okay uh so you see the errors we're getting uh we're we defined some things and never used it uh basically we added this in nav and we're not going to use it yet so we'll just add that back in at some point and then in footer uh not footer events we I added in the link but then now we're not going to use that anymore so very useful to uh to check this stuff out beforehand and whoa okay I just saw this in the live chat so Sebastian says check issue number 71 for react ga uh it says browsers block react GA links that might be an issue I'm still going to push this change to fix the other thing but I'm going to come back to that after my meeting though and check out that issue because that could definitely be a problem all right okay so if you're not familiar with GitHub uh we've just committed our changes and then we're pushing them up uh to GitHub on the master Branch now I can go in here uh to our server and let me run our our set of commands that we've been copying so actually go back out the commands assume that I'm not already in the directory for the project so hopefully this all works now we don't get any errors we can test it quickly and hopefully it works all right let me go through uh World boss asks you have a bachelor's yes I do have a bachelor's degree I have a bachelor's degree in Business uh charmi says usually Master's Degree for people who love to do research or an academics or the company requires that for higher position yeah you're right A lot of times higher degrees are for research stuff uh I know at least least in the United States a lot of people get master's degrees in business and then they can get higher up in their organization even though they don't do any research that's so that's you know the only other reason that I've seen for them Al like if you want to teach like normally they don't let you teach anything at a university unless you at the very least have a master's degree preferred doctorate so uh that's another reason why some people get them all right so let's check it out and where do we have it maybe I pulled it over to a different place I think this was the one where uh we actually went n see that pulled us over to the other server let me try to let me try to grab the uh IP address again see if we can get straight there all right so see with our with our load balancers right now it's taking us to the older version of the site that's on our other server let's see H still taking us to the other server all right well let's let's see oh shoot Got Run this again okay okay so now we should be good to run run these commands okay all right back to the live chat goodness I have two minutes so sorry if I can't get to all your [Music] questions okay um so it looks like looks like I'm going to I am going to need to check out the issue where with blow browsers blocking um blocking the links from react GA so um Patrick says it might be a Target blank issue so I'm going to test that out after my meeting uh sorry didn't really have a Q&A this time uh get to it definitely uh next time hopefully I won't have another meeting tomorrow but anyway thank you all for uh for watching thanks for your help um my meeting's in one minute so I have to go but I should be back should be back tomorrow and uh if anybody uh has any helpful links I know you guys were were talking about some issues and stuff please post it in the live chat or message me on Twitter or something uh because I do want to figure out this problem as soon as my meeting is over all right but um anyway I'll see you tomorrow have a great day