add a doc to teach how to let vitepress work with google analytics

[Sepush]

Is your feature request related to a problem? Please describe.

hope to use google analytics with VitePress

Describe the solution you'd like

add a doc to introduce or just do it for the vitepress docs so that we can learn from the code

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

Refer https://vitepress.vuejs.org/config/app-configs.html#head

You'll need to do something like:

head: [
  ['script', {src: 'https://googletagmanager.com/...'}],
  ['script', {}, `gtag call here`]
]

[Sepush]

What does the first script do here

[brc-dd]

It will be given in your analytics console. It loads gtag.js. If you have head like this:

[
  [
    'script',
    { async: '', src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX' }
  ],
  [
    'script',
    {},
    "window.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\ngtag('config', 'G-XXXXXXXXXX');"
  ]
]

Then this will be rendered:

<script async='' src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

[Sepush]

I got it！
Thank you for your patience.

[Zhengqbbb]

update:

  [
    'script',
-   { async: true, src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX' }
+   { async: '', src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX' }
  ]

Get the real header like:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

[jasonraimondi]

update:

  [
    'script',
-   { async: true, src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX' }
+   { async: '', src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX' }
  ]

Get the real header like:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

In my testing on vitepress@1.0.0-beta.1, passing an empty string yields the following:

<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

It would be great if booleans were allowed here, since async and defer are "Boolean attributes".

[brc-dd]

<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

async, async="", async="any thing" all are equivalent, so that should not be an issue (https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML).