googleanalytics / autotrack

Automatic and enhanced Google Analytics tracking for common user interactions on the web.
Other
4.93k stars 563 forks source link

Create a Performance Monitoring Plugin Request #232

Open ghost opened 6 years ago

ghost commented 6 years ago

Is it possible for AutoTrack to create a Performance Monitoring plugin using something like the new First Input Delay API?

philipwalton commented 6 years ago

It is possible, but since in order to track FID you need to add some JavaScript to the <head> of your pages, you wouldn't be able to track FID with just an autotrack plugin.

In other words, you'd have to add this:

<html>
<head>
  <script>(function(){function g(a,b){d||(d=!0,f=a,h=b,k.forEach(function(a){removeEventListener(a,l,e)}),m())}function m(){d&&0<c.length&&(c.forEach(function(a){a(f,h)}),c=[])}function n(a,b){function c(){g(a,b);f()}function d(){f()}function f(){removeEventListener("pointerup",c,e);removeEventListener("pointercancel",d,e)}addEventListener("pointerup",c,e);addEventListener("pointercancel",d,e)}function l(a){if(a.cancelable){var b=a.timeStamp;b=Math.max((1E12<b?+new Date:performance.now())-b,0);"pointerdown"==
a.type?n(b,a):g(b,a)}}var e={passive:!0,capture:!0},k=["click","mousedown","keydown","touchstart","pointerdown"],d=!1,f,h,c=[];k.forEach(function(a){addEventListener(a,l,e)});window.perfMetrics=window.perfMetrics||{};window.perfMetrics.onFirstInputDelay=function(a){c.push(a);m()}})();</script>

And then do the normal autotrack thing:

   <script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXX-Y', 'auto');

  // Replace the following lines with the plugins you want to use.
  ga('require', 'performanceTracker');
  // ...

  ga('send', 'pageview');
  </script>
  <script async src="https://www.google-analytics.com/analytics.js"></script>
  <script async src="path/to/autotrack.js"></script>
</head>

Do you think that's something most autotrack users would be able/willing to do?

ghost commented 6 years ago

@philipwalton

Thanks, very simple and very useful. I think this should be added to the readme / doc's, I am sure other users will want to use this as well.