Author: Jimmy Dagger

Firstly, isn’t using Google Analytics okay, okay, excellent, so basically a lot of people don’t have sort of any metrics and bits and pieces of their site. So it’s basically why? Why do you need to know this sort of information if you’re doing site changes? So if you’re changing themes, you’re adding plugins you’re, adding content, you want to be able to measure what those changes are.

So you want to see before and after are you getting more visitors? Are you getting less? Sometimes not. Everything is a positive sort of spin. So you want to be able to measure what’s actually caring for your site if you’re doing any sort of SEO, so you’re writing content, you’re, doing optimization bits and pieces again. You want to be able to measure what those changes actually are and it’s really also to determine who’s visiting.

You saw it so understanding your customer, who is actually visiting your site who’s coming back, who are the user bases that you should actually be targeting? So basically the good thing about Google Analytics is: you can collect everything. So if you’re really into statistics and analyzing a bits and pieces, it will confuse you initially. But there is a lot of data and a lot of detail you can actually gain out of it.

So, quite simply to get started. You need to sign up for a Google Analytics account being Google. Of course it means you need to have a Google account to start with. So all you got to do is sign in go to google.Com forward, slash analytics and it’ll sort of start to step you through the process. It’s a very simple sort of thing sort of shows up there. Basically, what what they’ll provide you is a tracking code.

So if you’ve ever visited, especially a European sites where cookies and bits and pieces must be announced – and I got a thing down the bottom to say – you know you’re you’re, currently visiting a site and there’s a cookie to track you most of that is normally Google Analytics about 70 % of sites have Google Analytics running on it and what you’ll sort of get is a funny sort of string. That looks like this.

This is obviously just an example one, but basically that string is then unique to your site. So Google then give you a little bit of code or, of course, being WordPress there’s plugins available, so one of the most common ones used. Is the Google Analytics by monster insights? So this plug-in not only adds it to your site to track, but it can also display some of the stats as well or if you’ve got a pre-existing sort of paid theme like a vada or Divya Dan bits and pieces.

They normally have a section where you can add that sort of code in so Avada just have a nice field to add your tracking code in so all you got to do is copy that code in Divi. Just give you a spot to copy the code in and again, Google give you that code that you can just copy and paste paste in there. So, basically, that’s all it takes to get set up and start to analyze, who’s visiting your site and where they’re sort of coming from so then the real fun begins, is actually analyzing.

All of the data that’s collected so I’ll go through some of the basics of this nilly. Every section in here you could spend 40 minutes talking about and some of the SEO guys would love to spend that amount of time talking about so just try and give the overall sort of picture to guide you through. So one of the key things: if you’re reading blogs about content and SEO and sort of analyzing your data and how long people should spend on your site and how many pages they should visit is there’s no real, perfect number.

The numbers will be unique to you and your site, and so depending on the page, depending on your market, each of that’s going to change each time. So if you’re reading articles where they say you know they must spend ten minutes on the site, they must spend this amount of time, don’t necessarily take them as gospel, but what it will give you is ability to measure the changes. So if they were spending twenty seconds, you’ve added more content, they’re now spending a minute on your site.

You’ve got a good improvement, so you’ve got that change there to measure. So the other thing to remember about comparing is to compare the same time period. Like everybody, Monday mornings can be a bit of a drag, so if you’re, comparing sort of mondays to Tuesday’s you’ll, see different data. So if you’re going to look at it, look at the same period sort of each time weekend’s, especially you might get different markets.

Looking at it, so it may be that you need to look at those time periods and analyze and sort of optimize differently for those as well. So in old terminology, a lot of people used to measure their website by the amount of hits onto the site. So it was a great way to inflate the number of people to the site because a hit sort of measures any sort of requests to the server. So if you’ve got a hundred images, loading that would generate a hundred hits every time somebody loaded the page Google tends to talk about sessions mainly and also users, so they’re the real value, so users are essentially unique visitors to the site.

Little cookie gets stored on their machine, so if they return, they’ll actually generate another session, and therefore you can sort of measure that as well and yeah. So sessions are just how many times that user came back and how many times they sort of loaded the site. One of the really neat things about Google Analytics is will actually give you a real-time data. So if you’ve got a lot of people coming to your site, it’s a really good motivator to actually see people hitting your site where they’re going to – and you know where.

They’re also coming from so Google Google gives you a real-time sort of view of that data as it’s sort of flowing through audience. So the main sort of section I guess to analyze is you now got sort of the data of how many sort of overall users to your site? So Google will break that down into sort of subcategories as well in terms of how many new users versus how many returning. So you can see this site, we’ve got only 20 % returning visitors and about 80 % sort of you use new visitors.

So if you’re sort of started a new marketing campaign and looking for new customers, these are the sort of figures that you want to be looking at. Are you actually getting the same users coming back or oh you’re, getting more users or new users sigh? So one little tip and a lot of people forget to do it because they think they’ll remember, is when you’re making changes. Google allows you to add annotations basically allows you to log events.

So if you publish a blog or you get featured on a website, you make a change like you, optimize your site or a load on you, you plug in or upgrade WordPress. You can actually mark that in a time period there. So you can see over time and see to go back because sometimes you’ll get a spike in traffic or a dip in traffic and you’ll. You remember at the time, but twelve months later, when you go what was that funny spike again, you can actually reference that to see actually what’s occurred, so if it sort of shows up when you’re in the any of the sort of user sort of views, you’ll See the create new annotation on the side here, so basically, there should be the blue little little link there.

If you don’t have any there, you won’t see any of the yellow sort of bar. So if you’ve got multiple ones, they’re normally hidden by default and that’s what the little drop-down at the bottom provides for you. So it shows up as the little I guess comment sort of field along your timeline. So another good thing, and thankfully it’s becoming less and less of a problem, but still very much a problem, especially if you’re targeting government users is what browser are people using to browse your site.

Browser compatibility is, unfortunately, still a problem, so you can sort of look at the data and go if my customer base like, for example here is, you know in nearly 60 % Chrome, and only 3 percent of users are actually using Internet Explorer. Is it worth my time to make sure it works perfectly for Internet Explorer or mi sort of wasting money and time and effort that could be spent elsewhere? So you can get an insight into what your customer base is.

These figures are sort of based on. I can’t even remember what sort of time frame of the ADA website and snapshot, but they are typical figures. You’ll typically see crime is the biggest sort of browser usage these days, you can also then dig into it to get their operating system details as well. So if you were selling software or selling systems, you probably want to know whether there are Mac user or whether they’re a Windows user and therefore you know, are you attracting the rights that a user base and, of course, mobile? Everything, of course, is now sort of flipped on its head.

It used to be that it was designed for desktop and sort of make things responsive so that it would render on your mobile these days, depending on the markets and the sort of industry you’re in some people or some industries are, you know, mobile first now, because Majority of their traffic is now on mobile devices, so things like Facebook and bits and pieces. There are more people that browse Facebook on their phone than they do on the desktop desktops in a massive sort of decline in that sort of market and e-commerce and service sort of industries.

So you can see that change over time as well. So Google Analytics you can go well. What was it like this time last year and if it’s has started to swing heavily, you can go well. You know this year. I need to spend the time to actually start to do all the mobile optimizations, rather than just sort of the bare minimum to make it work. You can then break it down into the particular device and phone that they’re using.

So it will give you as much detail as you sort of want on those sort of users so for this instance, obviously 30 %, where I’m I phone users, so you can sort of go well there. The market I’m after or you know, I made sure it worked perfectly on the mobile phone. So therefore, on our iPhone 30 % of my markets, you know going to see the site perfectly. You can see on the list. There were two users that use their Windows RT tablet, which is a little bit of a Microsoft thing that came and went very quickly, but you can sort of look at and go well to users, there’s no point making it work for them.

They’re, certainly not going to give me any return it. So acquisition gave two examples: sort of here of two different sites, and basically this is sort of telling you where people are coming from so organic search is all your search. Engine means you’re. Looking at majority is still obviously Google these days. People are, you know, googling for your content or your site and sort of coming through that way.

You’ve got then got people that have come direct, so they’ve taught your URL into the browser or had a bookmark sort of thing and go on there. You then got referral traffic so if you’ve been linked from another site or linked from another blog. This is your referral traffic and then, of course, your social media side. So you’ve got your everything from YouTube to Facebook to Twitter Instagram, so you can sort of track where those users are actually coming from and depending on your market.

These values are going to vary. Quite significantly, so just to give us sort of a bit of a breakdown. This was just another is sort of example. If you’re a blogger sort of thing, that does a lot of YouTube sort of articles, you can see very heavily. Everything came from YouTube for this particular site. Basically, you can start to break down and work out where your market markets coming from. So if you need to optimize for a certain market or you ran a campaign, you boosted, your you know, YouTube ads or your in Facebook ads.

You can start to actually measure how many people that brought to your site, because you can see the path that they came to you so going from a social media point of view. It covers automatically all the different social media platforms. You may only have two or three different platforms that you’re targeting, but at least you’ll see how many people were coming from there. So one of the good things about Google Analytics is you can compare different time periods so you can go this month.

I ran a campaign or last month, arena campaign. Did I sustain users or did they start to drop down and you can also see? Maybe you didn’t share the content, but somebody else shared your content. So this week I had an extra thousand people visit the site. Where did they actually come from? This? Gives you a summary, but you can keep digging down to the exact URL. Essentially that referred you there.

So it gives you that opportunity to sort of really figure out where your markets coming from page views, so meetup actually gives you the ability to track page views as well. So I sort of just pull them out as a quick example. Obviously, as one of the organizers of the Ipswich sort of meetup, so you can see which page they came into your site, you can see how many hits and then you can sort of dig detail quite heavily down into those sort of areas, especially if you’ve got Multiple landing pages, so you may be targeting a Brisbane market and you’ve tailored a page for them.

You can see whether they’ve come in via that site. From a kinetics point of view, we have one a very first sort of support article that we ever wrote has somehow been our most popular one on the entire site. We have no idea why or how, but we always see it so analytics or tagay gave us that view to sort of figure out where all these users coming from. So we could see multiple different forums, sort of linking in bits and pieces.

So we wouldn’t have known that sort of looking at it unless we, you know, really started to dig down into the data analytics. You look at it in seconds and you can already start sort of digging into that information, so site speed. So as Rob sort of touched on your website, performance matters and matters greatly matters from an SEO perspective, it matters from an engaging a user perspective. If your site’s, not loading quickly, users will become very disinterested very quickly.

I think Amazon said they can think for every point, one of a second slower, their site loads or perceived to be loaded. They lose one percent sort of thing of their. You know potential market, so users can drop off very very quickly if you’ve got a slow loading site. So the good thing about analytics is. It also starts to break down that data down into multiple different things. So you can see if you’re, targeting more than one region you can see based on country, you know, is your site loading slow, but especially these days with the different technologies.

You can see from a browser perspective, so you can see for this example foxes. Obviously, you know the quickest to load the slide the site, but in an explorer is twice as slow to load. This particular example, so you could sort of determine if Internet Explorer was a big part of your market and it’s twice as slow as everyone else. You need to sort of do some work or you know, talk to your developer to help sort of optimize that area.

But basically you wouldn’t gather that information. You know, unless you had analytics there to sort of provide that for you so behavior flow. So rather than just saying you know they visited your site, they viewed a page. You can now start to dig down into what they’re actually doing on your site, so the behavior flow sort of gives you a where they sort of started from so give you the landing page where they came in and then they’ll start to show you the first Interaction and second interaction, so the good thing about this is, you can go, will they dropped off straightaway or they dropped off at this point? So this is where I need to optimize.

So if you’re running a ecommerce platform and your end goal is to get them to the checkout, but they stopped at the product page or they stopped at the checkout and sort of didn’t complete. You can sort of see where they drop off and it’ll give you percentages of where those users dropped off. You may be running yep yep, so I can yeah give you a quick, that’s right, yeah! I should show you the the flow of yeah how to find them, but basically you can start to see you know where users are dropping off and why they’re dropping off, and it may be that you’re running two different campaigns.

So you can see the results of you know. Did this one actually help convert? Did it get get them through to you know, filling out a contact form? Did it get them to the shopping cart? Did they stop the front page? Will they get two pages in and then drop off, so you can sort of work out where you need to spend the time to optimize and add content or figure out what what the users you know, sort of were missing and, of course, being Google and being Able to collect lots of data it’ll, give you a little bit of demographics, so you can sort of get an idea of you know what age group is sort of visiting, whether they’re, male or female.

So this can be especially important from an e-commerce point of view, and this data will obviously change. So you can filter it by all users. You can go down to particular products, so you may run an e-commerce platform that targets. You know multiple different demographics, whether it’s by sex by age and you can sort of go well. Are they actually funneling into the right area? Are they viewing the pages or wander’d than you know targeted at them or have I got a problem, so you can sort of dig you out some of that detail to find out where your users are coming from and sort of who they are so average time On page, there’s, probably the biggest question I normally hear about from an SEO point of view and again there is no magic sort of figure people’s engagement and, as I sort of you know, as pointed out that eight seconds is a common.

You know engagement that people will hold these days. I’ve seen people write blogs that are detailed and thoroughly interesting sort of broken blogs that you know maybe 4,000 words and take you. You know a good 10 minutes to digest their average time on page can be very low. It may be that users dropped off very quickly. It may be that you know the mark, it wasn’t targeted at the right market, so it may be great content.

So those times will vary so basically, if your average time on page got to look at the page, if it’s heavy on content and they’re dropping off, you know within 60 seconds you may have an issue. If it’s a contact page, then obviously they’re probably not going to spend you know more than a minutes that are filling out their details or adding their email address into a list, so always sort of reference.

The time that you want them to spend on the page to the actual page, in the content that they’ve got and bounce rate so essentially don’t be scared by the numbers. The majority of websites have 80 plus percent bounce rates for most of their pages. So this basically means they came in and looked at a page and they went yes, oh they didn’t go any further, didn’t look at any other pages and that can be you’ve got to look at why that is from a kinetics point of view.

We have a lot of support articles if they’ve got the information they required, and you know they did a Google search found the you know page that fix their solution. There’s no reason for them to actually go and click. You know twenty other links, sort of thing. So you’ve got to look at the. Why of the bounce rates, if you can certainly yeah start to sort of dig dig out the information. So if there’s a choke point essentially of where you want to you know, start users from and get users to and they’re stopping at some point, then obviously you know if that page has a high bounce rate, then you probably need to change something there.

So if you’re an e-commerce platform or a service sort of industry, so you know if you’re running a plumbing website, you want people to book at the end, but they’re stopping at the page. That has your price on or has you know not enough? There may be something missing that they’ve sort of become disinterested so commonly what’s used is a call to action and that’s an easy way of sort of gathering users.

It may be that they’re leaving your site as much as it’s an annoyance. A lot of the sites where you move your cursor away from the browser will go to hit back and it pops up and says before you leave. You know enter your email address or bits and pieces. It’s a very effective way of doing things. The other is to have you know if you’re, writing, blogs and bits and pieces is to get users to sign up that way.

You can send them an email. When you’ve got new content, you can drive them back to your site on a constant sort of basis. So some of the little advanced features that you consider dig out of analytics. One of the really neat features I find is being able to set goals, and this is just being able to track conversions. So, from an e-commerce point of view, it’s an easy way to you know you want to get people to the shopping cart, but if you’re running a basic website – and you want them to contact you – then one of the easiest conversions to try and track is: did They go to the contact page, you know, did they it doesn’t? You can even just measure you know.

Did they make it to the page that I don’t have to fill out the form if they went and looked up your details to find your number or bits and pieces, then you know you’ve got sort of their interest. So if your whole goal is to sort of get them, you know to engage with you, you can sort of start to track that that process. So, there’s a number of different examples that Google will sort of give you out of the box, whether you want them to place an order and go to the contact us, whether you want them to read, reviews and sort of run through so to set up a Goal this is where you actually have to do things so most the other areas in analytics you essentially just clicking, and it’s more of a digestion of information.

Rather than adding information in goals, you sort of have to do a little bit of setup and the admin area can be a little bit confusing, but literally just to track the contact sort of pages. All you have to do is that you know you put your URL in so if they went to forward slash contact on your website, that’s a conversion. You know that’s a goal that you’ve set. What you can also do – and you can see that it’s sort of listed optionally is set a funnel, so it may be that you wanted to take them through a journey.

So if you’re a builder or you know, have a building sort of website, you may have wanted the users to actually have a look at some of your display homes. First because then you know, you’ve got the right market, you’ve got them interested, and so you can build up a funnel to sort of flow through there, as well, so probably quite not quite able to read down the back. But what the really interesting bit ahead of some of the goals and bits and pieces also gives you is it’ll, look at the your previous data.

So if you thought you know, I should have been tracking this goal. It’ll actually start to give you some of the information, so you can see for this particular goal would have had a three point: six percent conversion rate based on your last seven days. So if I wanted users, you know to view a view, our support articles and then go to our contact page. We would have had a three percent to the conversion rate out of that which is quite good, so exportable reporting, especially if you’re a web design agency or have customers.

You can sort of set up automation to start sending them reports and sending them information. There’s a add-on for Google sheets, which is the sort of Excel equivalent where you can actually pull this information directly into Google sheets. You can then set it up on an automated basis to generate a report to email out and bits and pieces. So you make yourself look really good in front of a customer, because you’ve got all this systems, doing all the work, making reports and charts in the background and sending it sort of through to them one of the new areas where Google has built yet another tool And made it available is a data studio.

So it’s just data studio, google calm and this is sort of an example of building one of their sort of tools. So, if you’ve ever sort of wanted to lay out graphs and bits and pieces on a page and figures and numbers, what Google allows you to do is build this as a template, so it doesn’t render it in terms of their your fixed numbers. You can have it as a dashboard. You can send a link out to a client, give them sort of read-only access, so they can view that data all the time it may be tailored.

Obviously, this examples from a search point of view. You know what what keywords are people searching for? It may be that you have multiple different sort of the search reports or the data studio sort of reports allows you to add multiple pages and export and bits and pieces as well. So you can have a 20 page report that you’ve customized you do it once you can then import data from every single site.

You have run it through generate and sort of provide that sort of information. So it’s a really neat way, especially if you’ve got a dashboard display. I want to sort of really customize how these set of graphs and how the data that comes, Google, Analytics sort of displays data studio is sort of a fairly new tool from Google, so they’re still adding bits all the time into their system. I’d say over sort of the next 12 months: they’ll continue to enhance and sort of make the process easier as well and, of course, everything out of Google.

These days is sort of being driven by all their artificial intelligence, so they’re built it into analytics as well. So there’s this little blue icon. That appears on the right-hand side now and you can start to at the moment typing. But you can ask a question so you know how many users visited my site this week or you know, what’s the most popular browser in January. So you can start to use English terms and it will sort of generate data and report for you in a in a much more useable manner, so it all becomes overwhelming.

Give this a go. It’s actually quite good. If you haven’t used Google home, where you can just sort of ask questions, this is a very similar sort of interface. So you can see in this example, is how many users did we have last week and has told you that you know. I’ve told told me that there was 4,000 177 users, so rather than trying to figure out, because analytics can become confusing with multiple different tabs in areas.

You’ve got a central point. You can just get a nice simple figure out of there from so alternatives. Obviously, this has all been focused on Google Analytics. Some people do have an aversion or a workplace restriction where they can’t use. Google Google does obviously collect this information that they can also use anonymized sort of elsewhere as well. So a lot of people you know want to know. What’s what sort of available there’s one main sort of example? And, of course, when I went to view their website they’ve now rebranded again as of about a week ago, so Mitama I think I’ve pronounced it right.

Is there their new sort of name, but it was per week, which is an open source sort of analytic platform. So it works in a reasonably similar manner to Google Analytics – it’s probably not as advanced, but the advantage is because it’s open source you can run it on your platform. I also have a hosted version as well and, of course, being WordPress is a nice, easy plug-in that you can just install and sort of integrate with your site.

So if you’re running it yourself, the downside is obviously that you need to maintain it. So you need to be the one sort of running the updates and bits and pieces. Google is software as a service, so you don’t have to do any software updates and bits and pieces. The only other main alternative is a lot of hosting companies, have little sort of inbuilt stats and bits and pieces. Basically, don’t don’t use these stats, they won’t give you any real value sort of out of the system.

All they will give. You is who you know how many hits to your site and a lot of browsers and a lot of systems. These days are scrubbing information and Facebook. Sorry Firefox just announced recently that they’re going to start scrubbing the referral out so generally, when you clicked on a site it sort of sent that information. You know if you clicked on a link in Facebook when you clicked on that link, it sent referral sort of information to your site, so you could see it came from Facebook from a privacy perspective.

The browsers are now starting to remove that information. So the information that you get just on your web hosting point of view is going to get less and less and less and less in the sort of server logs. So any of the inbuilt systems are going to. You know not give you the full story and certainly not going to give you any actual value out of the data. If you know 200 people visited your site, it doesn’t sort of give you any value to go well, you know where did they come from and who you know which sort of social media platform and that’s my quick sort of run-through of Google Analytics so noting that We’ve got pizzas Haughton sort of turned up up the back.

I’r happy to take questions it’s more more, just like their public service, so you show the screenshot all. We did like a couple of themes, wait to put the analytics code to the think. It’s not really a very good idea, because if you change things and a couple of years down the track, you change things and at some point you realize you so one of the things, a question that was showing it’s not supposed to be doing that because they’re Fairly old, okay, another good example to use a plugin that sort of helps you do it, because then you can ensure that it’s, if you change themes, it’ll be tracked so from a google analytics perspective, because it’s using that unique tracking code, it doesn’t really care too Much there is where you can set the preferences in there to help fill throughout some of the data where it makes a big difference is within the Google search console, which is the result.

Basically, you use what’s in your wordpress set up analytics is yeah is smart enough to because WordPress will always if you go to like if you use http://www.Hp.Com their search console, which is sort of not showing in this tool. You can’t change it. So you’ve got to re-add it again and then re link it back into analytics. So there’s no ability to change within their solar system me loot, lis. Yes, so Google has like everything: they’ve got they’ve got api’s sort of the Lord they’ve got automatic exporters.

They, like the data studio, is one example where it just sort of remotely connects into sort of pulled that information in they’ve got their bigquery and all their other sort of platforms where you can export data quite easily out of the system. So unless you, I think, 200,000 pages a day above it’s free, so it’s completely free all of the tools that were showing all of the areas all of the sort of views that they give.

You are completely free, and I know even the big guys who are doing much more than what they should be allowed to on. The free system continue to sort of go on so from Google’s perspective. They provide it for free because they get. I guess anonymize generalized to the data elet, so they can get the trends of you know what browsers people are using. They can get trends of that sort of information so that informations valuable enough to them that they can offer their tool sets for free.

So, just a sort of show, if you haven’t ever sort of looked through analytics all of the tabs and bits and pieces is talking about. So you got the real-time sort of views. You’ve got the audience. If you want to play around Google, give you access to some of their demo sort of bits, so this is their demo, one of their demos, sort of stores. So you can see the users coming in because you may not have enough data yet to sort of start.

If you want to start playing around and seeing how it works. So you can bring up the audience sort of overview and that’s where you can start to see the users dig down into the details, so you may want to dig down from a country point of view. You know where are these users coming from, so it allows you just to keep digging and digging and sort of pulling in further layers and layers and layers and again this is your little intelligence sort of link up the top.

So if you want to ask you know, you know how many users came last week, you know what am I best referring sources, so it’s trying to give it a nice human way of asking questions and sort of gathering that information here. It then shows you in terms of search, so you can start to look at you know this is obviously just looking at February. I want to look at the last 30 days on a lot look at the last 60 days, or the other thing it allows you to do is compare so you’re going to do is to compare two and it will compare automatically to the previous sort of period.

So if I hit apply here, you can see the orange line is the comparison, so it will sort of show you that you know this particular example. You know there was a 1 % sort of drop in users if you’re an Amazon where you’ve got millions of users a day. A 1 % sort of drop is probably significant if you’re a small business, 1 %. You know, probably within you know the typical sort of statistical differences that sort of occur naturally, but it sort of gives you that ability.

So you can start to see whether there was a big swing. There was a little swing and you know what actually occurred then. So if you’ve done the right thing, you can see here the little annotation we could see what went on so you can see a rise in traffic here, so you can sort of remember our. So that’s when I published an article or you know this particular example. Just said it, you know, I got featured on news.

Com today, you so normally, if it’s on a big site, you’ll see a steep sort of incline that you can sort of start to see, and you know I compared to the previous set of timeframes. If you’ve got it like within a plugin sort of thing, it automatically adds it into every single page so that little tracking – I don’t know, if there’s an automated system to automate the the annotations yeah so that potentially there is a plug-in that’s available to sort of Do that because yeah, if you can save yourself time, potentially that can be added in as well any other questions, I’m sort of floating around rest of the night.

So if you’ve got other questions, you just want to want to ask them I’ll. Try and um yeah answer them for you.

---

 

You might know me from some of my open source contributions. I worked on. A lot of projects are being pal and tricks’. Most recently, I was one of the original rails core members back in the day, though I think nearly all of my code has been deleted, or at least by now I hope I work for base camp, and last year we launched an all new version of base Camp called base camp 3.

We created it in 18 months from the initial concept through dozens of designs and iterations and changes, and it’s a it’s. A big app has over 200 screens and we shipped it in 18 months on five different platforms simultaneously, so desktop web browser, mobile web browser and Android Native Client, an iOS native client and email, and we did all this with a tiny team at base camp. We have six rails developers, Android developers and iOS to others, and we also built three open source frameworks during that time period.

Tricks which is our rich text, editor action, cable, which I’m sure you’re familiar with in rails, 5 and also turbolinks 5, and this all sounds kind of unbelievable. When I say it that we managed to do all of this. But really the Rowling’s 5 was a secret weapon. They let us do it and it’s an entirely new version of turbolinks and it’s one of the banner features of rails 5 and it’s what I’m here to talk about today, so how many of you are familiar with turbo links, anyone right! It’s that thing you have to disable every time you started, I know, but seriously it’s it’s that thing that breaks all your jQuery, plugins, no turbolinks is misunderstood and to understand it.

You need some context and that’s what I hope to give you today, because I think it represents a philosophy of web development that deserves our attention. I’ve been at Basecamp for 10 and a half years now, which is a small eternity in Tucker’s and being at the same place for a decade, has been really interesting. I’ve had the opportunity to go deep on a lot of interesting problems and see the effects play out over many years every once in a while.

I think he can help to take a step back in and look at where you’re going and where you’ve been, and things were really different. When I started, do you guys remember what web development was like before rails? The only way to make real software was with j2ee. I found this this diagram of 2004 era, best practices. This is j2ee, it’s beautiful in its simplicity, really and then, of course, on the other end of the spectrum you at PHP but rails came along and changed all of this for the j2ee developers it throughout all that ceremony and had said hey look.

This can be a lot simpler and for the PHP folks, it said here’s some structure that makes sense and it helps you avoid. Writing the same thing over and over again in slightly different ways, and I think in some ways this period was the golden age of wealth development. If you ignore the browser situation at the time, because we could embrace the statelessness of HTTP and we could deliver a fully rendered UI on each request in response cycle, so this is the full request response cycle.

I think it’s one of the best one of the best features of rails and then web apps got more ambitious. We weren’t happy with the performance of the UI built on full page loads, so we started building single page apps and instead of each request returning a full HTML response. Now he started booting the app with an empty page and the page had some JavaScript others JavaScript made JSON API requests, so we made the server-side accept and return JSON and we moved the traditional responsibilities of rendering the UI completely into the client, and everybody agrees.

This is a good idea right: we’ve got rails 5 with rails API and you need an API anyway in your application. So why not consume it yourself plus. We want a decoupled presentation from data and decoupling is good right, but eventually we weren’t happy with the performance of client-side NEC, so we introduced a virtual Dom to minimize the number of Dom operations we make, which is a great idea. The DOM is slow.

So we should make as few changes to the Dom as possible, but you know what all that javascript and all those API requests really make. The initial page load take a long time and all the content on the page is inaccessible to search engines. So we decided to get rid of the bhoot page and render HTML instead, which means now we need a JavaScript runtime on the server. We need to make our client-side code run on both sides and we need the virtual Dom there too, because we don’t have a real table and now we’ve come full-circle and we’ve reinvented what we had in 2004.

But the complexity is increased exponentially and we’ve introduced literally hundreds of new dependencies to our applications, and the whole system is now too much for any single person to reasonably keep in their head at once. You need entire teams dedicated to managing these subsystems, which honestly is not a surprise. How many of you are familiar with Conway’s law. Conway’s law says that the structure of a software system necessarily mirrors the structure of the organization that created it and these client-side patterns and frameworks that were using now he came from Google and Facebook, which are huge companies with thousands of developers across dozens of teams.

Well guess what your team probably doesn’t, have the same problems as Google in facebook. So how did we get to this point? Well, we were chasing performance and each one of these changes that I went over makes sense incrementally each one made sense at the time. But looking back with into the compound effects, we traded small performance benefits for a massive regression in developer ergonomics and the further we go down the rabbit hole, the more we constrain our future choices and in 2016.

This only tells part of the picture, because you need it native apps on Android and iOS too. So you can multiply the complexity on that slide by three and you’ll be reimplemented each one of your app screens, natively, of course, because you want the best performance. So you’re going to have to multiply your headcount by three well fuck that, but if we accept that we need performant web and mobile apps, how do we reconcile this complexity with the rails philosophy, which says you know, we want to empower small teams to do big Things well what if I told you it didn’t, have to be so complex that we could return to the golden era of the request and full response model to rendering HTML views from rails without an intermediate API layer, and then we could use those same HTML view Ease as a baseline for your iOS and Android apps in a way that still feels native, this is what turbo links 5 gives you all right.

It turns your traditional web application into a single page app at a high level. It intercepts link clicks on your page and it turns them into e Jack’s requests. Your server renders a full HTML response and turbo links loads. That response pulls out the head, merges it in with the current pages head, pulls out the body and outright replaces it and, from the server’s perspective, nothing changes, but the client adopts the single process model, which means that it doesn’t incur the expense of reloading and reprocessing Assets on each page, Jewish or reestablishing WebSocket connections, which are very expensive, and this gives you a significant performance boost.

So how significant this is a side-by-side comparison. We recorded last night on the hotel Wi-Fi so this turbolinks on the left and a full page load on the right whoops. I’r sorry did you guys see it. So this is what we call good enough performance if you can transition from a click to the next screen in about 300 milliseconds you’re going to perceive it as instantaneous. Anything longer feels slow, but anything shorter is nearly imperceptible for full page changes, but chasing that kind of performance requires an inordinate amount of effort and resources.

So here’s my highly scientific graph, but I think it’s I think it’s mostly accurate right. We know from experience that it takes a lot of work to get on the left side of that graph, but 300 milliseconds, actually getting your rails request to complete and say 100 milliseconds is totally achievable and there’s a wide array of tools and strategies to help you Get there like Russian doll, caching, etags, lazy, loading content after the page loads and all that’s for a different talk.

But the point I want to make here is in most cases getting faster than 300 milliseconds just doesn’t matter, and what you gain with turbolinks approach is a dramatically simpler model. If you understand this line of code, you understand the core: their beliefs concept, it’s understandable, because it’s just HTML HTML is easy to generate from rails. It’s easy to cache designers already know how to work with it.

They can work directly with your views. Instead of making Photoshop comps or instead of waiting on an API team to expose the data that they need and when you combine this approach with responsive design techniques, your design team can create a single set of views that power desktop web mobile web and hybrid native Apps – and this is incredibly powerful and mr. Birling spy – we made it incredibly easy.

We’ve created these iOS and Android frameworks that let you build native, hybrid apps, around Herter, building, spud and they’re, designed for what we call the hybrid sweet spot, which means that in your native app your view, content is mostly HTML, but the surrounding navigation controls are native And when you want to go fully native, you can do so on a per URL basis. You get to decide and you get all the performance benefits of turbo like turbo links in your hybrid app, but it’s even more efficient, because in a native app we use a single shared web view that we automatically move around from screen to screen.

So not only do you avoid reloading assets, reestablishing WebSocket connections and so on on every page change you also lose use less memory and, by the way, a native animation transition from one view, controller to another is about 350 milliseconds. So I’d like to show you how easy it is to build my OS app using turbo links, so I’m going to do that live, but actually it’s not really live they’re recording articles! No, but it’s not edited so right.

This is base camp 3. It’s running on my development machine, so it’s not as fast as it would be in production, but I’m just going to click around for a bit. You’ll see turbo links in action here and, as I mentioned before, we use we have fully responsive views in base game 3. So when I resize the window, you’ll see what eventually becomes a phone you and this lets us share all of our views across all of our platforms.

Alright, so now, let’s open, Xcode and we’ll create a new project. Sorry I need some music. Okay, we’re going to take everything out of this file, I’m going to start with a totally bare-bones iOS app. The only thing will happen here is the application did finish. Lodging callback alright, so we’re going to set it up as a UI navigation controller app and for those of you who aren’t familiar with iOS building, iOS, apps and UI navigation controller is basically the stack of views that you are probably familiar with from any iOS app Right, I’m going to create one and assign it to the Windows, room controller and I’m going to build and run the app just to make sure that it works.

It’s not going to look like much of anything there. It is alright, so I need to change the setting now and that’s because iOS 9 ships with a feature called application Transport Security – and this is a setting that’s on by default and it prevents you from accessing any non HTTP websites, basically so for development. We want to flip that off so I’ll just run this command and do that and obviously you don’t want that in production and now I’m going to go and just drop the turbo links framework in the app and in a real app you’re, probably going to want To use cocoapods or Carthage or some other package manager to get turbo links in there, but for now this is the simplest way and finally I’ll import the turbo links framework, okay and we’ll compile and run ok, it still works.

No we’re going to point turbolinks to our web application and so to do that. We’re going to create a session and the session is a turbo, is session, comes from the turbo links framework and it works streets. Moving that webview around from controller to controller we’re going to define a function called visit, it accepts the URL and what this is going to do is create a view controller. It’s going to push it on to the navigation controller stack and it’s going to tell turbolinks to visit, which means a little bit webpage and now we’re going to need to make an initial visit.

When we start the app right, it’s got to load something to begin with, so I’m going to grab the Basecamp development URL and we’ll visit that all right now moment of truth. There we go, you can see. We have native controls around the webview, but now tapping on a link doesn’t do anything and that’s because we need to handle visit proposal. So, in order to do that, we need to set ourselves as the turbolinks session delegate and then we need to implement a method, and this method just tells the application.

What to do when turbolinks receives a link. Click event. So we’re going to implement that method now session did propose a visit to URL and we’re just going to tell it to call our visit method that we already wrote and we’re going to compile and run, but we forgot sin to implement our error handling method. This is very important to implement, but I’m just going to step it out for now and let’s try tapping a link.

Oh there, it is, and so we had a native transition. We have two actual native view. Controllers looks and behaves like a real iOS app, but the content of the view controller is rendered as HTML. You can see it’s very fast, navigating backwards. You can even perform the interactive pop gesture here, so you’re seeing the webview on front and a screenshot in the back. I mean the energy all about for you, you get pulled to refresh, but you can see that this doesn’t quite look like.

We really wanted to right. We’ve got all that administrative debris left over from the web app, but we want native navigation and so what we do at Basecamp is we check we check for a custom user agent in the web app and we use that to selectively disable some UI elements, and It’s very easy to do so. I’r just going to go and import the WebKit framework here and make a change the way I create this session, I’m going to create a configuration, object, assign this property pass it to the.

What to the session initializer and now we’ll run the app, and now you can see it’s looking more native, we’ve lost the navigation bar at the top, some some buttons when I now, when I navigate through some of these news, look like they could be real table View controllers but of course we’re doing this with much less effort, and so this is the core of our strategy right. I just built a fully functioning iOS, app wrapper for Basecamp in under 10 minutes and as native navigation, and I think the most impressive part of this is that I have full coverage of the app all 200 plus screens are accessible from this wrapper in 30.

Lines of code and when we roll out a new feature in the web app in many cases, we don’t have to make any changes to the native apps and we don’t need to wait on App Store approval, because when we make a hybrid app with turbolinks, we’re Essentially, making a custom browser, we get baseline coverage for all the apps functionality and we can progressively enhance the native controls surrounding the webview right.

This is how the web is built. It’s progressive enhancement now we’re extending that from the browser to native apps and what that means is. We can spend our time building high fidelity UI, where it its most valuable. Instead of going through the groundwork of recreating each screen natively on every platform, we can even go fully native on a per screen basis, and this is what we do in the in the official Basecamp iOS app.

It has a native home screen. So I’ll show you here, instead of taking you directly to the activity page, we have a native jumping-off point, and this is just using API requests to populate the table view. But as soon as you click something then you’re taken into a turbolinks web view, everything precedes from there, you can see. Also we have native navigation controls in the title bar we’ve implemented.

We extract some metadata from the page in order to generate this title. We have custom navigation buttons, so all this is native what the actual application is in HTML very fast. We even support 3d touch using turbolinks. So, yes, you can do all those things that you expect and we have native menus and again we extract this content from metadata on the page. It’s very easy to do so. That’s a look at what turbolinks 5 gives you new rails 5 projects.

Have it enabled by default it’s also now available on npm as a standalone, javascript library. So if you’re not me using the asset pipeline – and you want to use it, it’s available to you there and it has no dependencies and it’s not for real, not just for rails apps anymore, it’s open to everyone. We have all new documentation on the github project. Page which we’re very proud of the ios and android adapters are exhaustively documented as well, and so, if any of this speaks to you, I encourage you to check it out and there’s.

One final note I want to make before I go. It’s important to note that turbolinks is not about avoiding having to write any JavaScript. Ok, your application will need JavaScript. Nor is it about having to avoid learning native development. Any more than active record is about avoiding how to write sequel, you’re still going to have to know how to do these things, but what turbolinks does is it gives you a baseline for good performance with minimal effort which lets you spend your time.

Choosing what to optimize and of going all-in and recreating everything from scratch? That’s if you, if you take home one point from this talk, that’s what I hope it is choose what you optimize. Thank you for coming. The question is: why is it so-called turbolinks if we rewrote it the so we we decided to call it turbolinks five, because the core idea is still the same, but it’s a pretty massive shift and we wanted to sync the version numbers up with rails five.

I believe your question is: is this compatible with jQuery UJS techniques? Yes, it is this only. This only intercepts link clicks that would otherwise fall through to the browser as standard navigation. The question was: does this support offline applications and turbolinks does not have support for offline, but this should be possible to build with service workers on top of turbolinks. The question was, could you do this in Ruby motion and, yes, you could? You could probably also do it in reacts native, because the turbolinks webview is just a standard cocoa component.

So you can. You can work a straight it with anything that they can talk. Cocoa question was: does the webview wrap wk webview? Yes, it does inspectable. You can go in through Safari and inspect the web application as you’re developing it, whether the whether you have a phone connected to your computer or whether you’re running in the simulator, and you get all the performance benefits of WK webview.

So you get the the full JIT JavaScript engine question is: do you still need to write, jQuery load event, handlers and you need to you need to re-architect your the way you initialize JavaScript on the page. So we provide a series of events. There’s a turbolinks load event that fires on every page change and then in their inner documentation. We have some further recommendations for how to approach that.

But what I really recommend is using mutation, observer or custom elements. These are html5 api’s and they give you callbacks for when elements are attached and detached from the Dom and if you use, if you use these api’s to install and remove JavaScript behavior, it will work transparently, whether you’re using turbo links or not. And I think it’s a much better approach question is there? Is there an API for rendering just a section of the page rather than the whole page, and there was a version of turbolinks called version 3, which is in development for about a year in half and never officially shipped, and it had a feature called partial page Updates and it’s expanded, the turbo links API in you know in a way that didn’t seem proportional to the amount of value it provided, and I also just think partial page updates in many ways are orthogonal to the navigation.

So my recommendation for now is to use an sjr technique so just a create or like a jst RB response and combined with a UJS remote link to update parts of the pages as necessary, as well as for handling form submissions and stuff like that. But in the future we might explore adding official personal page updates API yeah. The question was, if I can summarize, if you’re rendering hundreds of partials in a single response disturb the links handled that well and the answer is it’s going to handle it as well as the browser would really, if you’re, if you were sending that over a full Response but my suggestion would be one don’t return, so many results at a time, use it in imagination and their techniques like that to to load content and on demand, and two would be to consider writing that in client-side MVC.

It’s it’s totally fine to do that, and we do that in a lot of places. I think the difference is doing that in a component based way versus saying you’re, going to write your entire application. That way, right it’s much easier to to optimize something by just looking at it as a component than it is to throw everything out and write the whole thing twice on both sides. A question was: what’s the upgrade path like from older version of turbolinks, and now we don’t.

We don’t have a good guide for that right now. Some of the all of the event names have changed and there are some some events that went away but we’ll be documenting that before the final rails, 5 release. Yes, any plans to support Windows Phone. I don’t have any plans, but if someone wants to look into that, you can take a look at the way we built the iOS and Android adapters. So there’s a JavaScript component, that’s bundled with each one that basically communicates with the webview over a bridge.

So you could take the same approach on other platforms. We’d love to see that happen. The question was, can you can you use turbo links to access, GPS, camera and so on? And the answer is yes, of course, because you’re you’re still writing a native app okay. If you want to get that over the the webview you’ll have to use a bridge, the bridge, that’s provided by the operating system, but it’s it’s really worth orthogonal to the turbo links.

You would build the native UI yourself and then you would use the platform specific webview rich to get that into your application. If you wanted – or you could consider – using, for example and JSON API – to communicate with your application. If it’s simpler, all of those things are possible. The question was: if you want to access sequel Lite, how would you do that from a web page, local sequel, Lite? You would do that over the JavaScript bridge, that’s provided by the operating system.

So it’s in that way, it’s not any different than using a normal web view. Question was: how does a out of the native adapters handle request, failures and they’re they’re? All of all request failures go through a single method handler, so you choose how to implement that. In your application, my recommendation is to show a native view that gives you basically a reload button or retry button. That’s what we do in Basecamp all right.

Thank you. So much for coming!

---