Script tag meta variable in Head | Astro Lounge | Page 1

boreal sleet Nov 14, 2022, 12:30 PM

#

I have a script tag in the head of my HTML to handle Google tag manager

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer',`${meta.gTagId}`);</script>

But Astro doesn't like the variable I'm trying to pass in : ${meta.gTagId}
If I hard code that to a string, such as GTM-KMS3B59, it works fine.

Is there a way to pass in a variable here? I'm probably missing a syntax nuance
Cheers
Dwayne

signal jackal Nov 14, 2022, 1:34 PM

#

Which error do you get?

boreal sleet Nov 14, 2022, 1:40 PM

#

with the below there is no error, but the script tag doesnt appear in the Head at all

... 'script','dataLayer',`${meta.gTagId}`);</script>

signal jackal Nov 14, 2022, 1:42 PM

#

Maybe try to use the is:inline directive on the script tag so it isn't processed

boreal sleet Nov 14, 2022, 1:42 PM

#

with this option, i get no tag either

,'script','dataLayer',meta.gTagId);</script>

signal jackal Nov 14, 2022, 1:42 PM

#

https://docs.astro.build/en/reference/directives-reference/#isinline

boreal sleet Nov 14, 2022, 1:45 PM

#

and with, this option i get an error

,'script','dataLayer',{meta.gTagId});</script>

13:44:16 [vite] Internal server error: Transform failed with 1 error:
C:/Dev/Blackfinch.Websites/ui/src/layout/default.astro?astro&type=script&index=0&lang.ts:1:328: ERROR: Expected "}" but found "."
  Plugin: vite:esbuild
  File: C:/Dev/Blackfinch.Websites/ui/src/layout/default.astro?astro&type=script&index=0&lang.ts
  
  Expected "}" but found "."
  1  |  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer', {meta.gTagId});

#

ok, ill try inline

#

what syntax should be working do you think?

#

for passing the parameter I mean

signal jackal Nov 14, 2022, 2:18 PM

#

Something like this

<script is:inline>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer', `${meta.gTagId}`);</script>

boreal sleet Nov 14, 2022, 3:03 PM

#

hmm, with the above, it seems like it's not interpreting the variable and I got the following script tag in build

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer', `${meta.gTagId}`);</script>

signal jackal Nov 14, 2022, 3:19 PM

#

When using is:inline, the script tag is inlined without any modifications. What would your working result look like?

boreal sleet Nov 14, 2022, 3:23 PM

#

meta.gTagId would change, depending on what that prop was

#

something like

...'script','dataLayer', 'GTM-KMS3B59');</script>

#

currently if I dont have the inline attribute, the script tag is not included at all

signal jackal Nov 14, 2022, 7:12 PM

#

Ah so meta is a prop, to pass props to script tags you can use the define:vars directive (no need to use is:inline anymore)
https://docs.astro.build/en/reference/directives-reference/#definevars

boreal sleet Nov 15, 2022, 10:01 AM

#

Yeah that worked a treat cheers!

#

interesting that I couldnt pass in an object, such as meta.tagId

#Script tag meta variable in Head