Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a Performance Monitoring Plugin Request #232

Open
ghost opened this issue Jul 25, 2018 · 2 comments
Open

Create a Performance Monitoring Plugin Request #232

ghost opened this issue Jul 25, 2018 · 2 comments

Comments

@ghost
Copy link

ghost commented Jul 25, 2018

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

@philipwalton
Copy link
Member

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
Copy link
Author

ghost commented Jul 25, 2018

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant