Gatsby custom head & Google Analytics All In One

Google Analytics（分析）

https://analytics.google.com/analytics/web/#/a248706071p341215062/admin/streams/table/4264481260

添加 Google 代码
您可以使用网站开发工具自动完成设置，也可以手动添加代码。为了确保衡量结果准确无误，请务必在您网站的每一个网页上添加代码。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-K1R7J1JJHW"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-K1R7J1JJHW');
  // test
  console.log(`GA ✅`)
</script>

github actions error ❌

https://github.com/xgqfrms/cnblogs/actions/runs/3412607515/jobs/5678333804

https://cnblogs.xgqfrms.xyz/

Customizing html.js

$ cp .cache/default-html.js src/html.js

<script
  dangerouslySetInnerHTML={{
    __html: `
            var name = 'world';
            console.log('Hello ' + name);
        `,
  }}
/>

https://www.gatsbyjs.com/docs/custom-html/

OK ✅

https://github.com/xgqfrms/cnblogs/actions

import React from "react"
import PropTypes from "prop-types"

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-K1R7J1JJHW"></script>
        <script
          dangerouslySetInnerHTML={{
            __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){
                  window.dataLayer.push(arguments);
                }
                gtag('js', new Date());
                gtag('config', 'G-K1R7J1JJHW');
            `,
          }}
        />
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
      </body>
    </html>
  )
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}