Category: Google Analytics

Adding additional site speed metrics to Google Analytics: measuring First Input Delay (FID)

Adding additional site speed metrics to Google Analytics: measuring First Input Delay (FID)

Web Analytics is still one of my pet peeves, and while I don’t get to spend a ton of time on it anymore these days, I still enjoy digging through blog posts and coming up with new ideas on what to track and how it can help for (speed) optimization. While I was looking through a big travel site’s source code a couple of weeks ago trying to figure out what we could improve, I noticed a Google Analytics event that was being fired that was ‘new’ to me. It was used to sent information about ‘interaction delays’ as an event. After digging, I figured out what it was, and as I couldn’t find a ton of information about the topic itself in relation to Google Analytics I think it’s worth a blog post.

Disclaimer: There is not a lot of new original material in here, a lot of the information can be found in old updates on the Google Developers Web Updates section, and most credits go to Philip Walton. But I think it’s worth giving these topics some more attention and providing some additional solutions on how to integrate this with Google Analytics.

Site Speed Reports in Google Analytics

The site speed reports in Google Analytics have been proven to be useful for optimizing average load times and identifying how long it takes for a certain page to load (page loaded). You can use the data to figure out if your server is slow (Server Connection Time and Server Response Time) or to look at Domain Lookup Time to see how long it takes for a DNS lookup. But have you ever noticed yourself that for some sites it takes a tiny bit while the page is loading to actually start interacting with it while it’s being painted (the JS/CSS scripts) on your screen? Mostly on slow connections, like your phones mobile network, this can be obvious from time to time. That’s why the following metrics can come in handy as they will start measuring the time to the first paint and the first input delay that can happen.

Why is this metric not already part of the reports? Google Analytics can only start measuring the data whenever you’re loading the script. The speed data that it reports on is being gathered through the Speed API in your browser, but other data for a metric like this isn’t part of that. It’s also a fairly technical metric as you will realize after this. So for most basic users, it would cause a lot of confusion I’d imagine.

First Input Delay – FID

The important definitions:

  • FCP – First Content Paint: The time it takes (in milliseconds) for the first paint (pixels) on the screen.
  • TTI – Time to Interactive: The time it takes for the page to start loading and to be fully interactive.
  • FID – First Input Delay: The time between the first interaction (click, scroll, JS) of the user and the time it takes for user input to be acted upon by the browser.

This FCP metric is already part of the reports that you might have seen in Lighthouse. The obvious problem with that is, is that it’s just a one-off metric. It could be different for your users and you likely want to have a higher sample size to measure this.

Measuring First Input Delays (FID)

So let’s talk about how useful this is actually going to be for your site, starting with the implementation for Google Analytics and Google Tag Manager. The ChromeLabs team has done an amazing job providing a small ‘library’ for tracking the performance metrics via JavaScript. So these are the steps to follow for tracking this in Google Analytics (Gtag/Analytics.js) and GTM:

Measuring First Input Delays in Google Analytics

The script that you have just included provides a Listener that can be used to check when an event needs to be fired or just to save it to the DataLayer.

If you’re using analytics.js add this to your HEAD (under the minified script and after initializing GA):

perfMetrics.onFirstInputDelay(function(delay, evt) {
  ga('send', 'event', {
    eventCategory: 'SiteSpeed Metrics',
    eventAction: 'First Input Delay',
    eventLabel: evt.type,
    eventValue: Math.round(delay),
    nonInteraction: true
  });
});

If you’re using gtag.js (GAs latest version) add this to your HEAD (under the minified script and after GA has been initialized):

perfMetrics.onFirstInputDelay(function(delay, evt) {
  gtag('event', 'First Input Delay', {
    'event_category': 'SiteSpeed Metrics',
    'event_label': evt.type,
    'value': Math.round(delay),
    'non_interaction': true
  });
});

Measuring Input Paint Delays in Google Tag Manager

The integration for Google Tag Manager is obviously a little bit more complex as you need to add a new Trigger and Variable.

window.dataLayer = window.dataLayer || [];
perfMetrics.onFirstInputDelay(function(delay, evt) {
  dataLayer.push({
    'event': 'first_input_delay', // Not necessarily needed if this loads before GTM is initialized.
    'first_input_delay_value': Math.round(delay)
  });
});

Create the Value:

Add it to the Google Analytics configuration, so it will be sent along either your Events or your Pageviews (really decide on this for whatever works best in your use case). In this case, I’ve added it to a Custom Dimension on a page level, but you can also easily send this to a Custom Metric to calculate averages.

Custom Reporting on Speed Metrics

When you’re using a custom metric to report on FID you can easily create a metric on a page level to show to average first input delay for a page type or template. In this case, I created an example of a report that will show this only for new visitors (who likely haven’t loaded assets like JS/CSS/Images that are cached).

Adding other speed metrics

This is just the First Input Delay that you could be adding as a speed-related metric to GA. If you do some digging and are interested in this topic I would recommend going through the rest of the events here. That will give you enough information and a similar integration to measure First Paint (FP), Time to Interactive (TTI).

All the resources on this topic:

Like I said in the disclaimer, I mostly wanted to make it easier to implement but all the documentation around how to set this up and what it entails can be found on these resources.

Measuring Content Performance: Content Engagement Metrics

Measuring Content Performance: Content Engagement Metrics

What is the effectiveness of our content, how well does our content work? Who is writing the best content? What should we be writing about next? These were the top X questions I received on a weekly basis while working at The Next Web. And I’m probably not the only one, I hear a lot of companies that are asking the same questions. We were a publisher, with a big editorial team (~10 FTE editors) and publishing around 30-40 blog posts on a daily basis and had so for the past ~10 years. Which meant that there were over 65.000 articles in our archive that we could learn from. One of the hardest projects in the end.

“Tons of page views doesn’t always mean this post is doing well or is of the highest quality/the best journalism”. If one of our post hit Reddit, HackerNews or was a top story in Google News we for sure celebrated this but the impact on the business wasn’t always that big as we were hoping. Traffic from most of these sources has very low engagement and basically only brought in money through display advertising (with incredibly low CPMs). Overall, this meant that we wanted to find a better metric to score the performance of editors and find out what kind of quality really worked well for the business, not just for engagement & visitor metrics. So we got started looking into this…

Usage Metrics, Useful & Useless

What I still see a lot of companies do, and in all honestly you can’t always blame them for that. Is look at the basic usage metrics of content. How much time has a user spend reading this article, what is the bounce rate, etcetera. Which isn’t great as most of the time you don’t know the context. Is a good blog post one that has been read for 2 minutes, or 1 minute. Obviously the length of the blog post and if it has videos/images has an impact on this. All data that is usually easily overseen when analyzing content performance. Even with taking this into account it’s making it hard to come up with recommendations while working for a publisher. Are you really always going to recommend to use at least 2 ¾ images in a blog post and require a video that is exactly 23 seconds long so we know for sure people will watch it? Probably not.

Business results

Most of all, these metrics don’t align with your business goals. How often does the CEO/COO/CMO ask you what the bounce rate is of your articles so they can calculate the return on investment. Never right? That’s why over time we need better metrics that align with the business and that provide useful insight into what content really helps and what content is just good for vanity metrics like page views. You’ll be surprised in the end how many companies are still driven by these.

Capturing Goals in Google Analytics is important to measure impact of performance.

Creating a Content Engagement Metric

It’s going to be about the monetary value that content represents for your business but we won’t be setting it up that way. In the end you need to be able to evaluate the way you calculate this and over time this will likely change with your business. That’s why it’s important that we can make the decisions in an open and honest way so we can make changes later when we think they’re needed.

Setting up Goals

If you want to get started and do this on your own it’s going to be important to know what kind of events are important to your business and site. In our case we looked at, for example: newsletter subscriptions, article shares on social media (they bring in more visits, so useful for more revenue), ticket sales, ecommerce sales, etc. But also in general we wanted to know what the value for us was with a pageview. I’m not going to walk you through the setup of all these goals in this post, but if you’re unfamiliar with setting up goals in Google Analytics, read & watch this.

Custom & Calculated Metrics

So now you have determined what the goals are that matter to you. What is going to be important in this step is making sure that you assign ‘points/value’ to all of the goals. You don’t have to edit the goals for that (probably even better not to, to not interfere with the page value metric). So for example, think of it like this:

  • Pageview: 1 point
  • Article share: 5 points
  • Newsletter subscription: 10 points
  • Ecommerce sale: 150 points (or varying on the product value)
  • Ticket sale: 250 points

Now it’s time to set up a calculated metric to take this into account. Why a calculated metric? By using this we’re able over time to adjust the formula to our needs but also individually assign values to the goals if we wanted to (in that case we’d use goal completions as well).

When you get started with this, know what numbers you are using for the goals that you have setup. You can find that in the Goals interface within Google Analytics.

  1. Name: Content Engagement Score.
  2. Formatting Type: Integer (you can change this to Float or Currency if that’s more applicable)
  3. Formula: {{Goal1 Completions}} * 1 + {{Goal2 Completions}} * 5 + {{Goal3 Completions}} * 10…

In the end that should look something like this:

Reporting & Dashboarding for Content Quality

Now you have successfully created a calculated metric that we can use for reporting and informing other teams in the company about the content performance.

Trial & Error: Formulas should always be up for discussion

This formula isn’t going to be good the first time, you’ll have to tweak it and assign values that make more sense in your case. That’s why I also didn’t share the actual values of TNW (they were different from the example) as it matters to your specific business and goals.

To talk a little bit more about how things worked out for us, we tweaked it 3 to 4 times over a period of two months to get closer to our actual goal of measuring performance. In the end we could have editors who still would write for a ton of pageviews so get hundreds of thousands of points through that but editors who did great on business results weren’t rewarded value through that. So we upped some of the points assigned to our business goals to align them better.

Custom Reporting

Just setting up the goals probably already gets you quite far. It will allow you to create a page + goals report in which you can see how many goals have been hit for certain pages. Very useful if you want to measure the performance.

Dashboarding: Google DataStudio/Chartio versus (Google) Sheets

You need to share the reporting around this in an easy way, depending on your teams it will depend what works best for them. Sharing spreadsheets or making it easy for people to immediately take a look at a dashboard in a tool like Chartio and/or Google DataStudio.

Performance by day/editor/topic

Now you have all this data you can hopefully combine this with the data that you also have gathered through your custom dimensions. Previously I have blogged on The Next Web about all the ideas that I have around custom dimensions. Give it a go, it will be surprising to see how much easier it will become to report & analyze the performance across topics, time of day, team members when you can really align this with your business goals.


This is just an example of how we were measuring the performance of content for the business. There are many other ways to do this and you will have to customize the formula for your own business. What other metrics and ideas would you take into account to analyze and report this? Leave a comment or reach out on Twitter: @MartijnSch

The discovery & benefits of using ga:dataSource in Google Analytics

Last updated on February 26th, 2017 at 11:25 am

As there is always something new to learn in this world I recently came across (by a tip from Simon Vreeman) the dimension: dataSource in Google Analytics. It’s one that isn’t very well known, as it’s not available through any of the default reports, but can help bigger companies with integrations in multiple places in a great way. In our case it was incredibly useful to make reporting on AMP performance more easy.

DataSource is meant to provide an additional field to send where you’re sending the data from. But it’s different from a hostname or page path because it’s more about the source. By default it will always send the value: ‘web’ for sites, ‘app’ for mobile apps and apparently ‘amp’ for AMP tracking. Something that, in our case, was very valuable as traffic on AMP pages can be hard to find as a bulk. Filtering on pages that have ?amp or /amp/ as a pageview ain’t great if you want to see the traffic sources for 1 specific article. With LinkedIn also supporting AMP that won’t make it easier. Discovering dataSource makes it easier for us to kill a custom dimension to set the dataSource and immediately being able to filter down on this and then on referral traffic.
How you can leverage it? Send data from a specific source, for example your CRM, data warehouse or your email campaigns. We’re sending for The Next Web a hit to Google Analytics via the measurement protocol to track email opens. We’ll probably move this over as we would see it as a different dataSource then it being a ‘web’ hit.

How to configure the dataSource

Google Tag Manager: You can easily set it up in Google Tag Manager by creating an additional field that you can set, apparently it’s so unknown that it isn’t covered in the default field that are suggested. But if you add ‘dataSource’ as a field and enter the value (in this case a hardcoded value, but I would recommend going with a GTM variable).

Google Analytics: Setting this up in Google Analytics works in about the same way, you can add it as an additional field in your hit call to GA to set it by adding it like this.

@GoogleAnalytics: I know you’re reading this, please help us and update the documentation to also mention ‘amp’ being a default data source for tracking on AMP pages.

How to report

Creating a custom report

As the dimension isn’t available through a standard report you’ll have to create a custom report to do so. With our data I created a report like this that can be used to report on where traffic is coming from specifically (I’ll talk about the hit referral path in another blog post).

Look at this table ? with information about the dataSource dimension