what is the best way in *.svelte to embed some script before end of body?

[tx0c]

have a piece of 3rd party script need to be placed at end of html body,
e.g. a piece of google analytics script;

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

it can be placed at end of svelte:head section, but there's a reason in some cases better to be at end of body not head,

another way is to put at before end of body in the ./src/app.html template, but this would apply to all routes,

but what if I want to put this script in some layouts only, not all HTML files, better to use a sub-group (group)/+layout.svelte;

So wonder, inside any *.svelte, what is the best way to embed some script before end of body?

I have looked at svelte:body but it is for some different purpose,
https://svelte.dev/docs#template-syntax-svelte-body

I would wish the svelte:body can work with a slot?

<svelte:body>
  <slot />
  <!-- my other 3rd party script -->
</svelte:body>

Not sure if this is a question to sveltekit or svelte?

[tx0c]

Starting Next.js 11 :: vercel/next.js#14863 (comment)
there is the Script tag with different loading strategy, Next.js will ensure the script will only load once, even if a user navigates between multiple pages.
https://nextjs.org/docs/basic-features/script#strategy

Can such similar feature be requested into SvelteKit?

[longnguyen2004]

Initialize your script in the root layout, using onMount, and it should only run once

[tx0c]

is it worthy to have a <svelte:script> comparable to Next.js Script tag?

<svelte:script
  // a strategy to early load to insert in head before all other script, or lazy load at end of body;
  strategy="beforeInteractive | afterInteractive | lazyOnload | worker | ..."
  async
  src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxx"
  on:load={() => {
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-xxxxxx');
  }}
 />

or extend current <svelte:body> to allow a content, and just leave whatever inside to the end of html body?

<svelte:body
  on:mouseenter={handleMouseenter}
  on:mouseleave={handleMouseleave}
  use:someAction

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

[tx0c]

open'ed issue #8495 #8495 (comment) and it's not resolved

[ryanwi]

@tx0c did you come up with anything for this you liked?