GA page load time measurement with GA

Question

I use Google Analytics in SPA. For any virtual page redirection (for example, an AJAX call to refresh the page body), I get a page load time of 0ms . Is there a way to keep track of how long it takes, as if it were a full page refresh? I hope to indicate how long it will take to call AJAX, as well as the loading and displaying time of the images loaded as a result.

Answer 1

As you find, Google Analytics will not provide page timings for SPA. This includes if you increase the site's sample rate to 100. This is because Google Analytics calculates page timings using the navigation synchronization API.

For example, the DOM is loaded:

 $(document).ready(console.log((Date.now() - performance.timing.domComplete)/1000)) 

To deal with this problem, you will need to use special indicators. The solution consists of three steps.

1) Set up your own metric in GA.

Go to Admin> Property> User Definitions> User Metric.

Create a new custom metric with Hit scope and format time type. Note: specify the time in seconds, but it displays as hh: mm: ss in your reports.

2) Set the timer.

You will need to record the time when you want to start measuring the page load time.

An example of such a solution would be to decorate all your internal links, for example:

 $('a[href*="stackoverflow"]').click(function(){ time1 = Date.now() }) 

3) Send the time, eclipse (in seconds) to Google Analytics, to the event of viewing a virtual page.

When a virtual pageview event (which triggers your virtual pageviews) occurs, extract the difference between the current time (Date.now ()) and the timer start time (time 1).

Using Google Tag Manager, a custom javascript variable can be created as shown below:

 function(){ return (Date.now() - time1)/1000 } 

Then this value must be sent with a page view, in accordance with the custom metric index set in step 1.

 ga('send', 'pageview', { 'metricX': pageLoadSpeed }); 

Using a custom metric along with calculated metrics (for example, {{virtualPageTimings}} / {{pageViews}}, you can calculate the average values ​​of a virtual page.

Bonus:

To make the measurement more accurate, set up a secondary custom metric to count the number of virtual page views. This will make sure that pageviews that users go directly to are not taken into account.

To do this, create your own metric with deleting the scope and integer formatting.

Then, with each virtual pageview, send a value of 1 to the custom metric index. For instance:

 ga('send', 'pageview', { 'metricX': pageLoadSpeed, 'metricX': 1 }); 

This allows you to calculate the metric:

 {{virtualPageTimings}}/{{virtualPageViews}} 

Answer 2

If you are viewing Google Analytics documents, you can find out about the siteSpeedSampleRate option, which basically allows you to enable percentage tracking of your site to track your site’s traffic.

By default, this value is 1 , but I assume that you want to rotate it 100 . This can have a slight effect on network usage, as it will have to transfer more data to GA, so consider this depending on your users and how they access your site (via mobile, poor coverage in some countries ...).

You will need to modify the tracking code to integrate something like the following:

 ga('create', 'UA-XXXX-Y', { siteSpeedSampleRate: 10 }) 

Answer 3

You can send the time manually, like everything in Google Analytics. But this is a little difficult to do, if I'm honest, I would not do it so that it is useless. All data in the time report is based on a hit called timing, this hit is sent after the pageView and contains the following information. If you can see my example, I made the tool send a hit right after viewing a page with a different list of parameters.

 plt : Specifies the time it took for a page to load. The value is in milliseconds. pdt : Specifies the time it took for the page to be downloaded. The value is in milliseconds. dns : Specifies the time it took to do a DNS lookup.The value is in milliseconds. rrt : Specifies the time it took for any redirects to happen. The value is in milliseconds. srt : Specifies the time it took for the server to respond after the connect time. The value is in milliseconds. tcp : Specifies the time it took for a TCP connection to be made. The value is in milliseconds. dit : Used to send a random number in GET requests to ensure browsers and proxies don't cache hits. It should be sent as the final parameter of the request since we've seen some 3rd party internet filtering software add additional parameters to HTTP requests incorrectly. This value is not used in reporting. clt : pecifies the time it took for the DOMContentLoaded Event to fire. The value is in milliseconds. 

Further information about these parameters: https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters and you can see more information about this hit https://developers.google.com/analytics/devguides/ collection / analyticsjs / user-timings

So what is happening now? If I launched another pageview in this SPA, a second pageview on the same page will not suffer this hit, and you will ever get 0 load times. You can use this command as official documentation, but if you use it, you will notice that this is not the same hit (I have to check it twice). Another option is to send it manually using the "send" command and add information about the desire. Check the pagination structure of the page to make sure your setting is actually related to your previous hit.

The command to send timming after viewing the page is something like this, use the & dl parameter or the dp parameter to attach timming to the ajax page.

 ga('send', { hitType: 'timing', '&plt': 1, '&pdt': 1, '&dns': 1, '&rrt': 1, '&srt': 1, '&dit': 1, '&clt': 1, '&dl': 'http://cl.edreams.com/', }); 

Now all values ​​of '1' must be updated for the correct one; now, how to determine the time of each parameter is not necessary. Also remember that the default sample is only for 1% of sessions; send this message only in a few cases.

Disclaimer: This is a very experimental implementation, we force Js to send unexpected information. Test it long before you submit it to the final project

Hello