Google Tag Manager
Hey everyone, I am implementing Google Tag Manager according to the instructions (attached).
The <head> block can be included directly in the head main.wasp file, but where do you recommend putting the <body> part? Should I put it in App.tsx since that one is the layout for the other components?
![No description](https://cdn.answeroverflow.com/1232584843024662569/Screenshot_2024-04-24_at_08.47.47.png)
4 Replies
Hi @Ricardo Batista. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
For adding global tags or scripts, you can use the
head
property in the app
declaration in your main.wasp
file. This allows you to add elements directly to the <head>
of your HTML. Here is an example of its usage:
(Source: Github Issue (https://github.com/wasp-lang/wasp/issues/296))
As for the <body>
part, you can define a global CSS file, for example src/client/Main.css
, and import it into your root React component. This way, it will always be loaded and you can target the body
from there.
(Source: Discord support thread (https://discord.com/channels/686873244791210014/1210268779448242298))
However, please note that Wasp currently doesn't provide a direct way to customize the <body>
tag or the top-level React component. This is a feature that is being considered for future development. (Source: Github Issue (https://github.com/wasp-lang/wasp/issues/294))
For more detailed instructions, you might want to refer to the official Wasp documentation or their community support channels.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Ricardo Batista, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?Bot went a bit wrong here, sorry about that!
Check out this article: https://www.analyticsmania.com/post/google-tag-manager-noscript/ -> actually, that
noscript
is not useful. It is an alternative that is ran if user is consuming the webpage without javascript enabled, but nothing will work anyway then, so it doesn't matter. And it is not common anyway for people ot browse without javascript enabled. So you can just omit that one. I will make sure we also mention this in the docs, so people know in the future!Julius Fedorovicius
Analytics Mania
What is Google Tag Manager Noscript? - Analytics Mania
In this guide, you'll learn what Google Tag Manager noscript is , what are its limitations, and why you won't need it in 95% of your projects and websites.
Ok, here is PR to add this to the docs! https://github.com/wasp-lang/open-saas/pull/110/files
Super, thanks a lot for this!