feat(www): add performance metrics plugin (#13472)

* feat(www): add firebase-perf to www

* chore: use createElement instead of JSX

* chore: fix issue

* chore: rename plugin

www/gatsby-config.js

@@ -134,6 +134,12 @@ module.exports = {
       },
     },
     `gatsby-plugin-offline`,
+    {
+      resolve: `gatsby-plugin-perf-metrics`,
+      options: {
+        appId: `1:216044356421:web:92185d5e24b3a2a1`,
+      },
+    },
     `gatsby-transformer-csv`,
     `gatsby-plugin-twitter`,
     `gatsby-plugin-react-helmet`,

www/plugins/gatsby-plugin-perf-metrics/gatsby-ssr.js

@@ -0,0 +1,27 @@
+const React = require(`react`)
+
+exports.onRenderBody = function onRenderBody(
+  { setPostBodyComponents, reporter },
+  { appId }
+) {
+  if (!appId) {
+    reporter.warn(`An appId is required to use gatsby-plugin-perf-metrics`)
+    return
+  }
+
+  setPostBodyComponents([
+    React.createElement(`script`, {
+      key: `gatsby-plugin-perf-metrics`,
+      dangerouslySetInnerHTML: {
+        __html: `
+          (function(sa,gai){function load(f,c){var a=document.createElement('script');
+          a.async=1;a.src=f;a.onload=c;var s=document.getElementsByTagName('script')[0];
+          s.parentNode.insertBefore(a,s);}load(sa);window.onload = function() {firebase.initializeApp({appId:gai}).performance();};
+          })('https://earlymonitoring.firebaseapp.com/index.min.js', ${JSON.stringify(
+            appId
+          )});
+        `,
+      },
+    }),
+  ])
+}

www/plugins/gatsby-plugin-perf-metrics/index.js

@@ -0,0 +1 @@
+// noop

www/plugins/gatsby-plugin-perf-metrics/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "gatsby-plugin-perf-metrics"
+}