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
4 Replies
kapa.ai
kapa.ai2mo ago
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:
app todoApp {
title: "ToDo App",
head: [
"<link rel=\"stylesheet\" href=\"<https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\"> />"
]
}
app todoApp {
title: "ToDo App",
head: [
"<link rel=\"stylesheet\" href=\"<https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\"> />"
]
}
(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.
// Import your global CSS in your root React component
import '../client/Main.css';
// Import your global CSS in your root React component
import '../client/Main.css';
(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?
martinsos
martinsos2mo ago
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.
Ricardo Batista
Ricardo Batista2mo ago
Super, thanks a lot for this!