{"id":238617,"date":"2016-03-07T15:13:38","date_gmt":"2016-03-07T22:13:38","guid":{"rendered":"http:\/\/css-tricks.com\/?p=238617"},"modified":"2017-02-26T06:40:11","modified_gmt":"2017-02-26T13:40:11","slug":"learning-use-google-analytics-effectively-codepen","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/learning-use-google-analytics-effectively-codepen\/","title":{"rendered":"Learning to Use Google Analytics More Effectively at CodePen"},"content":{"rendered":"
Here’s how most people use Google Analytics:<\/strong> you copy and paste the default tracking snippet into your templates. Look at the pageview data that comes in. That’s all good, but that isn’t the most useful analytics for many sites. Google Analytics can track just about anything. It’s very flexible and very powerful. Philip Walton<\/a> and I co-wrote this article to show you how to do some custom GA stuff to help you collect data you maybe didn’t know you could collect and how you can look at that data in useful ways.<\/em><\/p>\n <\/p>\n It’s fairly obvious you need some<\/em> kind of analytics for any web app. At the most basic level, you need to know how many people are using the app, and if that number is going up or down. <\/p>\n The choice at CodePen<\/a> was Google Analytics, because most of the team had used it before. It was free and easy to install. The team did what most people do when installing Google Analytics: we copied and pasted the default tracking snippet and that’s it<\/em>. Nothing custom at all.<\/p>\n Data started coming in, and after a few days there is a general sense of what pages people were visiting on CodePen.<\/p>\n The problem is CodePen isn’t a really a pageview-based site, like, say a publication is. What pages people visit tells doesn’t tell the story about how users interact with CodePen. Much more interesting is to know what people are doing on those pages so optimizations can be made to improve their experience.<\/p>\n Unfortunately, none of the team really knew how to use Google Analytics to get the variety of information needed, so for a long time nothing was done.<\/p>\n Long story short: Chris meets Philip at CSSDevConf last fall. Philip says a lot of developers are in the same position — not taking advantage of the free, powerful tool at their fingertips. Part of Philip’s job is to teach developers, so in an epic tornado of wins, they partnered up to do smarter stuff with analytics at CodePen and share that with everyone.<\/p>\n Analytics data itself is meaningless if you haven’t figured out what problems you’re trying to solve or what questions you’re trying to answer. CodePen created a list of questions they thought would be useful to them and that would answer real questions they have about usage of the app.<\/p>\n Here’s a few quickies:<\/p>\n There is a couple of key concepts that make understanding everything else about Google Analytics much more clear.<\/p>\n Everything stems from knowing how to send data<\/em> to Google Analytics. Then later, knowing how to get that data back in a meaningful way.<\/p>\n You can send pretty much anything you want!<\/p>\n The normal thing (that the default tracking snippet) sends is the With the default tracking snippet, you’ll see these two lines at the end:<\/p>\n The first line creates a tracker<\/a> object, which is really just a JavaScript object that stores the key\/value data we talked about above. The second line sends that key\/value data via an HTTP request to the Google Analytics account (technically the “Property<\/a>“) specified by the “UA-XXXXX-Y” number used in the previous line.<\/p>\n Google Analytics receives these HTTP requests (known as “hits<\/a>“) and processes them. Based on the data in each hit, as well as the time and order the hits were received, Google Analytics is able to organize the data into a hierarchy of Users, Sessions, and Interactions<\/a>.<\/p>\n In CodePen terms:<\/p>\n A user can have many sessions, and a session can have many interactions.<\/p>\n Once Google Analytics has organized your data into users, sessions and interactions, you can query that data and get back a report. <\/p>\n Google Analytics has a lot of built-in reports. You are not limited to just those reports.<\/strong><\/p>\n In fact, arguably the best way to improve your effectiveness with Google Analytics is to learn how to create your own reports (called “Custom Reports<\/a>“), so you can query for whatever data you want. If you’re sending Google Analytics custom data specific to your application, there’s no way you’ll be able to answer all your questions with just the built-in reports.<\/p>\n Every report (whether built-in or custom) in Google Analytics is the result of querying for a set of dimensions and metrics<\/a>. Since creating a custom report requires specifying the dimensions and metrics yourself, it’s important to understand what those are.<\/p>\n Metrics are a quantitative measurement of data, like total number of pages visited (pageviews<\/a>) or average time on site (Avg. Session Duration<\/a>). Metrics are always numeric. They’re usually counts but they can also be averages or ratios.<\/p>\n Dimensions are cross sections of your metrics, they’re how you subdivide your data further, for example you might want to subdivide total pageviews by the page URL to see which pages are popular, or you might want to subdivide average time on site by the different browsers people use to see if there are any correlations there. In these cases, Page<\/a> and Browser<\/a> are the dimensions.<\/p>\n The data comes back as a table. The dimension values are usually in the columns on the left, and their corresponding metric values are in the columns on the right. You can optionally apply filters to conditionally exclude rows from the results.<\/p>\n The table below is an example custom report that shows data for the last seven days that illustrates all of these concepts. The report queries for the metrics Sessions<\/a> and Avg. Session Duration<\/a> and the dimensions Browser<\/a> and Operating System<\/a>. It then filters the results to only include rows where the Operating System value is “Windows”:<\/p>\nThe Beginning<\/h3>\n
What CodePen Wanted To Get From Analytics<\/h3>\n
\n
Understanding How Google Analytics Works<\/h3>\n
Sending Data to Google Analytics<\/h4>\n
pageview<\/code>. All you’re really doing is sending an HTTP request with some key\/value data encoded in the URL or POST body. The keys are things like the page title, like “Explore Pens on CodePen”.<\/p>\n
ga('create', 'UA-XXXXX-Y', 'auto');\r\nga('send', 'pageview');<\/code><\/pre>\n
\n
Reporting on Data<\/h4>\n
An Example of a Custom Report<\/h4>\n