vitepress

vitepress copied to clipboard

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

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

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`]
]

What does the first script do here

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>

I got it！ Thank you for your patience.

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>

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 [email protected], 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".

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